[Code] make entire tree node block clickable (#43434)

* fix(code/frontend): make entire tree node block clickable
This commit is contained in:
WangQianliang 2019-08-27 08:00:05 +08:00 committed by GitHub
parent c3f4cad4d3
commit 33f072835c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 601 additions and 437 deletions

View file

@ -68,7 +68,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-android"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -103,6 +102,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-android"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -113,7 +120,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-futures"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -148,6 +154,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-futures"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -158,7 +172,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -193,6 +206,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
<div
className="euiSideNavItem__items"
@ -205,7 +226,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava/javadoc-link"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -240,6 +260,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava/javadoc-link"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -250,7 +278,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-guava/pom.xml"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -279,6 +306,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-guava/pom.xml"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -289,7 +324,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava/src/com/google"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -326,6 +360,11 @@ exports[`render correctly 1`] = `
</div>
<div
className="codeFileTree__node--fullWidth"
data-test-subj="codeFileTreeNode-Directory-guava/src/com/google"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
<div
@ -339,7 +378,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava/src/com/google/common"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -374,6 +412,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava/src/com/google/common"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -384,7 +430,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava/src/com/google/thirdparty/publicsuffix"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -419,6 +464,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava/src/com/google/thirdparty/publicsuffix"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
</div>
@ -433,7 +486,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava-bom"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -468,6 +520,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava-bom"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -478,7 +538,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava-gwt"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -513,6 +572,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava-gwt"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -523,7 +590,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava-testlib"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -558,6 +624,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava-testlib"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -568,7 +642,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-guava-tests"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -603,6 +676,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-guava-tests"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -613,7 +694,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-refactorings"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -648,6 +728,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-refactorings"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -658,7 +746,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState"
data-test-subj="codeFileTreeNode-Directory-util"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -693,6 +780,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-Directory-util"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -703,7 +798,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-.gitattributes"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -732,6 +826,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-.gitattributes"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -742,7 +844,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-.gitignore"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -771,6 +872,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-.gitignore"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -781,7 +890,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-.travis.yml"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -810,6 +918,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-.travis.yml"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -820,7 +936,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-CONTRIBUTING.md"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -849,6 +964,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-CONTRIBUTING.md"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -859,7 +982,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-CONTRIBUTORS"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -888,6 +1010,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-CONTRIBUTORS"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -898,7 +1028,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-COPYING"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -927,6 +1056,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-COPYING"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -937,7 +1074,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-README.md"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -966,6 +1102,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-README.md"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -976,7 +1120,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-cycle_whitelist.txt"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -1005,6 +1148,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-cycle_whitelist.txt"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -1015,7 +1166,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-javadoc-stylesheet.css"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -1044,6 +1194,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-javadoc-stylesheet.css"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
<div
@ -1054,7 +1212,6 @@ exports[`render correctly 1`] = `
>
<div
className="codeFileTree__item kbn-resetFocusState codeFileTree__file"
data-test-subj="codeFileTreeNode-File-pom.xml"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
@ -1083,6 +1240,14 @@ exports[`render correctly 1`] = `
</div>
</span>
</div>
<div
className="codeFileTree__node--link"
data-test-subj="codeFileTreeNode-File-pom.xml"
onClick={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</div>
</div>
</div>

View file

@ -105,21 +105,45 @@ export class CodeFileTree extends React.Component<Props, { openPaths: string[] }
public getItemRenderer = (node: Tree, forceOpen: boolean, flattenFrom?: Tree) => () => {
const className = 'codeFileTree__item kbn-resetFocusState';
let bg = null;
if (this.props.match.params.path === node.path) {
bg = <div ref={el => this.scrollIntoView(el)} className="codeFileTree__node--fullWidth" />;
}
const onClick = () => {
const path = flattenFrom ? flattenFrom.path! : node.path!;
this.toggleTree(path);
this.onClick(node);
};
const nodeTypeMap = {
[FileTreeItemType.Directory]: 'Directory',
[FileTreeItemType.File]: 'File',
[FileTreeItemType.Link]: 'Link',
[FileTreeItemType.Submodule]: 'Submodule',
};
let bg = (
<div
tabIndex={0}
className="codeFileTree__node--link"
data-test-subj={`codeFileTreeNode-${nodeTypeMap[node.type]}-${node.path}`}
onClick={onClick}
onKeyDown={onClick}
role="button"
/>
);
if (this.props.match.params.path === node.path) {
bg = (
<div
ref={el => this.scrollIntoView(el)}
className="codeFileTree__node--fullWidth"
tabIndex={0}
data-test-subj={`codeFileTreeNode-${nodeTypeMap[node.type]}-${node.path}`}
onClick={onClick}
onKeyDown={onClick}
role="button"
/>
);
}
switch (node.type) {
case FileTreeItemType.Directory: {
return (
<div className="codeFileTree__node">
<div
data-test-subj={`codeFileTreeNode-Directory-${node.path}`}
className={className}
role="button"
tabIndex={0}
@ -151,7 +175,6 @@ export class CodeFileTree extends React.Component<Props, { openPaths: string[] }
return (
<div className="codeFileTree__node">
<div
data-test-subj={`codeFileTreeNode-Submodule-${node.path}`}
tabIndex={0}
onKeyDown={onClick}
onClick={onClick}
@ -173,7 +196,6 @@ export class CodeFileTree extends React.Component<Props, { openPaths: string[] }
return (
<div className="codeFileTree__node">
<div
data-test-subj={`codeFileTreeNode-Link-${node.path}`}
tabIndex={0}
onKeyDown={onClick}
onClick={onClick}
@ -195,7 +217,6 @@ export class CodeFileTree extends React.Component<Props, { openPaths: string[] }
return (
<div className="codeFileTree__node">
<div
data-test-subj={`codeFileTreeNode-File-${node.path}`}
tabIndex={0}
onKeyDown={onClick}
onClick={onClick}

View file

@ -69,6 +69,12 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-\\"stack-control\\""
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L1:0?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol"
>
@ -82,35 +88,28 @@ exports[`render symbol tree correctly 1`] = `
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L1:0?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint09 euiToken--square euiToken--small"
>
<div
className="euiToken euiToken--tokenTint09 euiToken--square euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-\\"stack-control\\""
>
"stack-control"
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
"stack-control"
</div>
</div>
</div>
</div>
<div
@ -122,38 +121,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-EventEmitter"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L10:9?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L10:9?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint04 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint04 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-EventEmitter"
>
EventEmitter
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
EventEmitter
</div>
</div>
</div>
</div>
</div>
@ -163,38 +161,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-ClrStackView"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L11:9?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L11:9?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint04 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint04 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-ClrStackView"
>
ClrStackView
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
ClrStackView
</div>
</div>
</div>
</div>
</div>
@ -204,6 +201,12 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-StackControl"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L13:0?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol"
>
@ -217,35 +220,28 @@ exports[`render symbol tree correctly 1`] = `
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L13:0?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-StackControl"
>
StackControl
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
StackControl
</div>
</div>
</div>
</div>
<div
@ -257,38 +253,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-model"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L14:2?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L14:2?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint02 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint02 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-model"
>
model
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
model
</div>
</div>
</div>
</div>
</div>
@ -298,38 +293,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-modelChange"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L15:2?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L15:2?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint02 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint02 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-modelChange"
>
modelChange
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
modelChange
</div>
</div>
</div>
</div>
</div>
@ -339,38 +333,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-stackView"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L17:14?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L17:14?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint02 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint02 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-stackView"
>
stackView
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
stackView
</div>
</div>
</div>
</div>
</div>
@ -380,6 +373,12 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-HashMap<K, V>"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L137:13?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol"
>
@ -393,35 +392,28 @@ exports[`render symbol tree correctly 1`] = `
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L137:13?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-HashMap<K, V>"
>
HashMap&lt;K, V&gt;
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
HashMap&lt;K, V&gt;
</div>
</div>
</div>
</div>
<div
@ -433,38 +425,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-serialVersionUID"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L140:30?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L140:30?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint10 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint10 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-serialVersionUID"
>
serialVersionUID
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
serialVersionUID
</div>
</div>
</div>
</div>
</div>
@ -476,38 +467,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-Unit"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L21:0?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L21:0?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint04 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint04 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-Unit"
>
Unit
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
Unit
</div>
</div>
</div>
</div>
</div>
@ -517,38 +507,37 @@ exports[`render symbol tree correctly 1`] = `
<div
className="code-symbol-container"
>
<a
className="code-symbol-link codeFileTree__node--link"
data-test-subj="codeStructureTreeNode-datemath"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L23:14?sideTab=structure"
onClick={[Function]}
/>
<div
className="codeSymbol codeSymbol--nested"
>
<a
className="code-symbol-link"
href="/github.com/vmware/clarity/blob/master/src/clr-angular/data/stack-view/stack-control.ts!L23:14?sideTab=structure"
onClick={[Function]}
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive code-structure-node"
className="euiToken euiToken--tokenTint07 euiToken--circle euiToken--small"
>
<div
className="euiToken euiToken--tokenTint07 euiToken--circle euiToken--small"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiText euiText--small"
data-test-subj="codeStructureTreeNode-datemath"
>
datemath
</div>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
</a>
<div
className="euiText euiText--small"
>
datemath
</div>
</div>
</div>
</div>
</div>

View file

@ -60,6 +60,15 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activeSymbol?:
return (
<div className="code-symbol-container">
{bg}
<Link
data-test-subj={`codeStructureTreeNode-${name}`}
to={url.format({
pathname: RepositoryUtils.locationToUrl({ uri: this.props.uri, range }),
query: { sideTab: 'structure', ...queries },
})}
className="code-symbol-link codeFileTree__node--link"
onClick={this.getClickHandler({ name, range })}
></Link>
<div className={isContainer ? 'codeSymbol' : 'codeSymbol codeSymbol--nested'}>
{isContainer &&
(forceOpen ? (
@ -79,21 +88,10 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activeSymbol?:
onClick={() => this.props.openSymbolPath(path)}
/>
))}
<Link
to={url.format({
pathname: RepositoryUtils.locationToUrl({ uri: this.props.uri, range }),
query: { sideTab: 'structure', ...queries },
})}
className="code-symbol-link"
onClick={this.getClickHandler({ name, range })}
>
<EuiFlexGroup gutterSize="none" alignItems="center" className="code-structure-node">
<EuiToken iconType={tokenType as IconType} />
<EuiText data-test-subj={`codeStructureTreeNode-${name}`} size="s">
{name}
</EuiText>
</EuiFlexGroup>
</Link>
<EuiFlexGroup gutterSize="none" alignItems="center" className="code-structure-node">
<EuiToken iconType={tokenType as IconType} />
<EuiText size="s">{name}</EuiText>
</EuiFlexGroup>
</div>
</div>
);

View file

@ -28,7 +28,17 @@
vertical-align: middle;
}
.codeFileTree__node--link {
position: absolute;
width: 100%;
left: 0;
height: 1.665rem;
opacity: 0;
z-index: $euiZLevel1;
}
.codeFileTree__node--fullWidth {
cursor: pointer;
position: absolute;
width: 100%;
background: $euiColorLightShade;

View file

@ -72,6 +72,7 @@
.codeStructureTree--icon {
margin: auto 0.25rem;
z-index: $euiZLevel2;
}
.code-symbol-link {

View file

@ -21,12 +21,14 @@ export default function codeIntelligenceFunctionalTests({
const FIND_TIME = config.get('timeouts.find');
const PageObjects = getPageObjects(['common', 'header', 'security', 'code', 'home']);
const exists = async (selector: string) => testSubjects.exists(selector, { allowHidden: true });
describe('Code Intelligence', () => {
describe('Code intelligence in source view page', () => {
const repositoryListSelector = 'codeRepositoryList codeRepositoryItem';
const testGoToDefinition = async () => {
await retry.try(async () => {
expect(await testSubjects.exists('codeSourceViewer')).to.be(true);
expect(await exists('codeSourceViewer')).to.be(true);
});
// Hover on the 'UserModel' reference on line 5.
@ -37,7 +39,7 @@ export default function codeIntelligenceFunctionalTests({
expect(await userModelSpan.getVisibleText()).to.equal('UserModel');
await browser.moveMouseTo(userModelSpan);
// Expect the go to definition button show up eventually.
expect(await testSubjects.exists('codeGoToDefinitionButton')).to.be(true);
expect(await exists('codeGoToDefinitionButton')).to.be(true);
await testSubjects.click('codeGoToDefinitionButton');
await retry.tryForTime(5000, async () => {
@ -54,23 +56,19 @@ export default function codeIntelligenceFunctionalTests({
// Visit the /src/controllers/user.ts file
// Wait the file tree to be rendered and click the 'src' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).to.be(true);
expect(await exists('codeFileTreeNode-Directory-src')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src/controllers')).to.be(
true
);
expect(await exists('codeFileTreeNode-Directory-src/controllers')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src/controllers');
// Then the 'controllers' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-File-src/controllers/user.ts')).to.be(
true
);
expect(await exists('codeFileTreeNode-File-src/controllers/user.ts')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-File-src/controllers/user.ts');
@ -99,11 +97,11 @@ export default function codeIntelligenceFunctionalTests({
// Wait for the index to start.
await retry.try(async () => {
expect(await testSubjects.exists('repositoryIndexOngoing')).to.be(true);
expect(await exists('repositoryIndexOngoing')).to.be(true);
});
// Wait for the index to end.
await retry.try(async () => {
expect(await testSubjects.exists('repositoryIndexDone')).to.be(true);
expect(await exists('repositoryIndexDone')).to.be(true);
});
});
});
@ -116,7 +114,7 @@ export default function codeIntelligenceFunctionalTests({
// Clean up the imported repository
await PageObjects.code.clickDeleteRepositoryButton();
await retry.try(async () => {
expect(await testSubjects.exists('confirmModalConfirmButton')).to.be(true);
expect(await exists('confirmModalConfirmButton')).to.be(true);
});
await testSubjects.click('confirmModalConfirmButton');
@ -156,24 +154,24 @@ export default function codeIntelligenceFunctionalTests({
// Visit the /src/models/User.ts file
// Wait the file tree to be rendered and click the 'src' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).to.be(true);
expect(await exists('codeFileTreeNode-Directory-src')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src/models')).to.be(true);
expect(await exists('codeFileTreeNode-Directory-src/models')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src/models');
// Then the 'models' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-File-src/models/User.ts')).to.be(true);
expect(await exists('codeFileTreeNode-File-src/models/User.ts')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-File-src/models/User.ts');
// Then the 'User.ts' file on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeSourceViewer')).to.be(true);
expect(await exists('codeSourceViewer')).to.be(true);
});
// Hover on the 'UserModel' reference on line 5.
@ -184,7 +182,7 @@ export default function codeIntelligenceFunctionalTests({
expect(await userModelSpan.getVisibleText()).to.equal('UserModel');
await browser.moveMouseTo(userModelSpan);
// Expect the go to definition button show up eventually.
expect(await testSubjects.exists('codeFindReferenceButton')).to.be(true);
expect(await exists('codeFindReferenceButton')).to.be(true);
await testSubjects.click('codeFindReferenceButton');
await retry.tryForTime(5000, async () => {
@ -207,28 +205,24 @@ export default function codeIntelligenceFunctionalTests({
// Visit the /src/controllers/user.ts file
// Wait the file tree to be rendered and click the 'src' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).to.be(true);
expect(await exists('codeFileTreeNode-Directory-src')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src/controllers')).to.be(
true
);
expect(await exists('codeFileTreeNode-Directory-src/controllers')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src/controllers');
// Then the 'controllers' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-File-src/controllers/user.ts')).to.be(
true
);
expect(await exists('codeFileTreeNode-File-src/controllers/user.ts')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-File-src/controllers/user.ts');
// Then the 'user.ts' file on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeSourceViewer')).to.be(true);
expect(await exists('codeSourceViewer')).to.be(true);
});
// Hover on the 'async' reference on line 1.
@ -239,7 +233,7 @@ export default function codeIntelligenceFunctionalTests({
expect(await asyncSpan.getVisibleText()).to.equal('async');
await browser.moveMouseTo(asyncSpan);
// Expect the go to definition button show up eventually.
expect(await testSubjects.exists('codeGoToDefinitionButton')).to.be(true);
expect(await exists('codeGoToDefinitionButton')).to.be(true);
await testSubjects.click('codeGoToDefinitionButton');
// TODO: figure out why jenkins will fail the following test while locally it

View file

@ -20,6 +20,8 @@ export default function exploreRepositoryFunctionalTests({
const config = getService('config');
const PageObjects = getPageObjects(['common', 'header', 'security', 'code', 'home']);
const exists = async (selector: string) => testSubjects.exists(selector, { allowHidden: true });
const FIND_TIME = config.get('timeouts.find');
// FLAKY: https://github.com/elastic/kibana/issues/43557
@ -50,11 +52,11 @@ export default function exploreRepositoryFunctionalTests({
// Wait for the index to start.
await retry.try(async () => {
expect(await testSubjects.exists('repositoryIndexOngoing')).to.be(true);
expect(await exists('repositoryIndexOngoing')).to.be(true);
});
// Wait for the index to end.
await retry.try(async () => {
expect(await testSubjects.exists('repositoryIndexDone')).to.be(true);
expect(await exists('repositoryIndexDone')).to.be(true);
});
});
@ -67,7 +69,7 @@ export default function exploreRepositoryFunctionalTests({
await PageObjects.code.clickDeleteRepositoryButton();
await retry.try(async () => {
expect(await testSubjects.exists('confirmModalConfirmButton')).to.be(true);
expect(await exists('confirmModalConfirmButton')).to.be(true);
});
await testSubjects.click('confirmModalConfirmButton');
@ -102,21 +104,21 @@ export default function exploreRepositoryFunctionalTests({
).to.greaterThan(0);
});
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-src-doc')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-test')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-views')).ok();
expect(await testSubjects.exists('codeFileTreeNode-File-package.json')).ok();
expect(await exists('codeFileTreeNode-Directory-src')).ok();
expect(await exists('codeFileTreeNode-Directory-src-doc')).ok();
expect(await exists('codeFileTreeNode-Directory-test')).ok();
expect(await exists('codeFileTreeNode-Directory-views')).ok();
expect(await exists('codeFileTreeNode-File-package.json')).ok();
});
});
it('tree should be loaded', async () => {
await retry.tryForTime(5000, async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-src-doc')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-test')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-views')).ok();
expect(await testSubjects.exists('codeFileTreeNode-File-package.json')).ok();
expect(await exists('codeFileTreeNode-Directory-src')).ok();
expect(await exists('codeFileTreeNode-Directory-src-doc')).ok();
expect(await exists('codeFileTreeNode-Directory-test')).ok();
expect(await exists('codeFileTreeNode-Directory-views')).ok();
expect(await exists('codeFileTreeNode-File-package.json')).ok();
});
});
@ -124,53 +126,53 @@ export default function exploreRepositoryFunctionalTests({
log.debug('Click a file in the source tree');
// Wait the file tree to be rendered and click the 'src' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).to.be(true);
expect(await exists('codeFileTreeNode-Directory-src')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src');
await retry.tryForTime(1000, async () => {
// should only open one folder at this time
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-doc-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-doc-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
});
log.info('src folder opened');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src/models')).to.be(true);
expect(await exists('codeFileTreeNode-Directory-src/models')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-Directory-src/models');
// Then the 'models' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-File-src/models/User.ts')).to.be(true);
expect(await exists('codeFileTreeNode-File-src/models/User.ts')).to.be(true);
});
await testSubjects.click('codeFileTreeNode-File-src/models/User.ts');
// Then the 'User.ts' file on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeSourceViewer')).to.be(true);
expect(await exists('codeSourceViewer')).to.be(true);
});
// Click breadcrumb does not affect file tree
await retry.try(async () => {
expect(await testSubjects.exists('codeFileBreadcrumb-src')).ok();
expect(await exists('codeFileBreadcrumb-src')).ok();
});
await testSubjects.click('codeFileBreadcrumb-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-doc-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-doc-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
});
// open another folder
await testSubjects.click('codeFileTreeNode-Directory-src-doc');
await retry.tryForTime(5000, async () => {
// now we should opened two folders
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-doc-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-doc-open')).ok();
});
// click src again to focus on this folder and close this folder.
@ -178,35 +180,35 @@ export default function exploreRepositoryFunctionalTests({
await retry.tryForTime(5000, async () => {
// should only close src folder
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-doc-open')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-doc-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
});
log.info('src folder closed');
});
it('highlight only one symbol', async () => {
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src')).ok();
expect(await exists('codeFileTreeNode-Directory-src')).ok();
});
await testSubjects.click('codeFileTreeNode-Directory-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-src/controllers')).ok();
expect(await exists('codeFileTreeNode-Directory-src/controllers')).ok();
});
await testSubjects.click('codeFileTreeNode-Directory-src/controllers');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-File-src/controllers/user.ts')).ok();
expect(await exists('codeFileTreeNode-File-src/controllers/user.ts')).ok();
});
await testSubjects.click('codeFileTreeNode-File-src/controllers/user.ts');
await retry.try(async () => {
expect(await testSubjects.exists('codeStructureTreeTab')).ok();
expect(await exists('codeStructureTreeTab')).ok();
});
await retry.try(async () => {
// Retry click the structure tab in case it's not ready yet
await testSubjects.click('codeStructureTreeTab');
expect(await testSubjects.exists('codeStructureTreeNode-errors')).ok();
expect(await exists('codeStructureTreeNode-errors')).ok();
});
await testSubjects.click('codeStructureTreeNode-errors');
@ -222,14 +224,14 @@ export default function exploreRepositoryFunctionalTests({
await browser.get(url);
// Click breadcrumb does not affect file tree
await retry.try(async () => {
expect(await testSubjects.exists('codeFileBreadcrumb-src')).ok();
expect(await exists('codeFileBreadcrumb-src')).ok();
});
await testSubjects.click('codeFileBreadcrumb-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-src-doc-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-src-doc-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-test-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-views-closed')).ok();
});
});
@ -238,24 +240,24 @@ export default function exploreRepositoryFunctionalTests({
// Wait the file tree to be rendered and click the 'src' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileExplorerNode-src')).to.be(true);
expect(await exists('codeFileExplorerNode-src')).to.be(true);
});
await testSubjects.click('codeFileExplorerNode-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileExplorerNode-models')).to.be(true);
expect(await exists('codeFileExplorerNode-models')).to.be(true);
});
await testSubjects.click('codeFileExplorerNode-models');
// Then the 'models' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileExplorerNode-User.ts')).to.be(true);
expect(await exists('codeFileExplorerNode-User.ts')).to.be(true);
});
await testSubjects.click('codeFileExplorerNode-User.ts');
// Then the 'User.ts' file on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeSourceViewer')).to.be(true);
expect(await exists('codeSourceViewer')).to.be(true);
});
});
@ -263,31 +265,31 @@ export default function exploreRepositoryFunctionalTests({
log.debug('Navigate source file via structure tree');
// Wait the file tree to be rendered and click the 'src' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileExplorerNode-src')).to.be(true);
expect(await exists('codeFileExplorerNode-src')).to.be(true);
});
await testSubjects.click('codeFileExplorerNode-src');
await retry.try(async () => {
expect(await testSubjects.exists('codeFileExplorerNode-models')).to.be(true);
expect(await exists('codeFileExplorerNode-models')).to.be(true);
});
await testSubjects.click('codeFileExplorerNode-models');
// Then the 'models' folder on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeFileExplorerNode-User.ts')).to.be(true);
expect(await exists('codeFileExplorerNode-User.ts')).to.be(true);
});
await testSubjects.click('codeFileExplorerNode-User.ts');
// Then the 'User.ts' file on the file tree.
await retry.try(async () => {
expect(await testSubjects.exists('codeSourceViewer')).to.be(true);
expect(await testSubjects.exists('codeStructureTreeTab')).to.be(true);
expect(await exists('codeSourceViewer')).to.be(true);
expect(await exists('codeStructureTreeTab')).to.be(true);
});
// Click the structure tree tab
await testSubjects.click('codeStructureTreeTab');
await retry.tryForTime(300000, async () => {
expect(await testSubjects.exists('codeStructureTreeNode-User')).to.be(true);
expect(await exists('codeStructureTreeNode-User')).to.be(true);
await testSubjects.click('codeStructureTreeNode-User');
await retry.tryForTime(120000, async () => {
@ -309,41 +311,41 @@ export default function exploreRepositoryFunctionalTests({
expect(currentUrl.indexOf(`${notExistRepoUri}/tree/master`)).to.greaterThan(0);
});
await retry.tryForTime(5000, async () => {
expect(await testSubjects.exists('codeNotFoundErrorPage')).ok();
expect(await exists('codeNotFoundErrorPage')).ok();
});
});
it('goes to a branch of a project', async () => {
log.debug('it goes to a branch of the repo');
await retry.try(async () => {
expect(testSubjects.exists('codeBranchSelector'));
expect(exists('codeBranchSelector'));
});
await testSubjects.click('codeBranchSelector');
const branch = 'addAzure';
const branchOptionSelector = `codeBranchSelectOption-${branch}`;
await retry.try(async () => {
expect(testSubjects.exists(branchOptionSelector));
expect(exists(branchOptionSelector));
});
await testSubjects.click(branchOptionSelector);
await retry.try(async () => {
const currentUrl: string = await browser.getCurrentUrl();
expect(currentUrl.indexOf(branch.replace(/\//g, ':'))).to.greaterThan(0);
expect(testSubjects.exists(`codeBranchSelectOption-${branch}Active`)).to.be.ok();
expect(exists(`codeBranchSelectOption-${branch}Active`)).to.be.ok();
});
await retry.try(async () => {
expect(testSubjects.exists('codeBranchSelector'));
expect(exists('codeBranchSelector'));
});
await testSubjects.click('codeBranchSelector');
const anotherBranch = 'noDatabase';
const anotherBranchOptionSelector = `codeBranchSelectOption-${anotherBranch}`;
await retry.try(async () => {
expect(testSubjects.exists(anotherBranchOptionSelector));
expect(exists(anotherBranchOptionSelector));
});
await testSubjects.click(anotherBranchOptionSelector);
await retry.try(async () => {
const currentUrl: string = await browser.getCurrentUrl();
expect(currentUrl.indexOf(anotherBranch.replace(/\//g, ':'))).to.greaterThan(0);
expect(testSubjects.exists(`codeBranchSelectOption-${anotherBranch}Active`)).to.be.ok();
expect(exists(`codeBranchSelectOption-${anotherBranch}Active`)).to.be.ok();
});
});
});

View file

@ -16,6 +16,7 @@ export default function exploreRepositoryFunctionalTests({
const testSubjects = getService('testSubjects');
const retry = getService('retry');
const PageObjects = getPageObjects(['common', 'header', 'security', 'code', 'home']);
const exists = async (selector: string) => testSubjects.exists(selector, { allowHidden: true });
// FLAKY: https://github.com/elastic/kibana/issues/43492
describe.skip('File Tree', function() {
@ -42,9 +43,8 @@ export default function exploreRepositoryFunctionalTests({
);
});
// Wait for the index to end.
await retry.try(async () => {
expect(await testSubjects.exists('repositoryIndexDone')).to.be(true);
expect(await exists('repositoryIndexOngoing')).to.be(true);
});
});
@ -66,7 +66,7 @@ export default function exploreRepositoryFunctionalTests({
await PageObjects.code.clickDeleteRepositoryButton();
await retry.try(async () => {
expect(await testSubjects.exists('confirmModalConfirmButton')).to.be(true);
expect(await exists('confirmModalConfirmButton')).to.be(true);
});
await testSubjects.click('confirmModalConfirmButton');
@ -81,9 +81,9 @@ export default function exploreRepositoryFunctionalTests({
it('tree should be loaded', async () => {
await retry.tryForTime(5000, async () => {
expect(await testSubjects.exists('codeFileTreeNode-Directory-elastic/src/code')).ok();
expect(await testSubjects.exists('codeFileTreeNode-Directory-kibana/src/code')).ok();
expect(await testSubjects.exists('codeFileTreeNode-File-README.MD')).ok();
expect(await exists('codeFileTreeNode-Directory-elastic/src/code')).ok();
expect(await exists('codeFileTreeNode-Directory-kibana/src/code')).ok();
expect(await exists('codeFileTreeNode-File-README.MD')).ok();
});
});
@ -92,48 +92,32 @@ export default function exploreRepositoryFunctionalTests({
await retry.tryForTime(1000, async () => {
// should only open one folder at this time
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-elastic/src/code-open')
).ok();
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-kibana/src/code-closed')
).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-elastic/src/code-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-kibana/src/code-closed')).ok();
});
await browser.refresh();
await retry.tryForTime(15000, async () => {
// should only open one folder at this time
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-elastic/src/code-open')
).ok();
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-kibana/src/code-closed')
).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-elastic/src/code-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-kibana/src/code-closed')).ok();
});
await testSubjects.click('codeFileTreeNode-Directory-kibana/src/code');
await retry.tryForTime(1000, async () => {
// should open two folders at this time
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-elastic/src/code-open')
).ok();
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-kibana/src/code-open')
).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-elastic/src/code-open')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-kibana/src/code-open')).ok();
});
await testSubjects.click('codeFileTreeNode-Directory-elastic/src/code');
await retry.tryForTime(1000, async () => {
// should only open one folder at this time
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-elastic/src/code-closed')
).ok();
expect(
await testSubjects.exists('codeFileTreeNode-Directory-Icon-kibana/src/code-open')
).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-elastic/src/code-closed')).ok();
expect(await exists('codeFileTreeNode-Directory-Icon-kibana/src/code-open')).ok();
});
});
});