From c4f2d40eddf23e15d4e82b120d0f8ca4f19e8a7c Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 12 Feb 2019 16:47:23 -0800 Subject: [PATCH 01/13] Initial changes for dark mode focusing on the file tree and directory view. --- config/kibana.yml | 2 + .../code/public/components/main/directory.tsx | 7 +-- .../code/public/components/main/main.scss | 44 +++++++++++++++++++ .../code/public/components/main/side_tabs.tsx | 38 ++-------------- 4 files changed, 54 insertions(+), 37 deletions(-) diff --git a/config/kibana.yml b/config/kibana.yml index 4abaf715f30604..3730d039d0f0f6 100644 --- a/config/kibana.yml +++ b/config/kibana.yml @@ -111,3 +111,5 @@ # Specifies locale to be used for all localizable strings, dates and number formats. #i18n.locale: "en" + +xpack.code.codeNode: true \ No newline at end of file diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx index 3d4a4b3b9f2d6a..8357432aca6d74 100644 --- a/x-pack/plugins/code/public/components/main/directory.tsx +++ b/x-pack/plugins/code/public/components/main/directory.tsx @@ -11,6 +11,7 @@ import { Link, RouteComponentProps, withRouter } from 'react-router-dom'; import styled from 'styled-components'; import { FileTree, FileTreeItemType } from '../../../model'; import { MainRouteParams, PathTypes } from '../../common/types'; +import { COLORS } from '@elastic/eui/src/components/icon/icon'; const Root = styled.div` padding: ${theme.paddingSizes.m}; @@ -70,12 +71,12 @@ const DirectoryNodes = (props: DirectoryNodesProps) => { [FileTreeItemType.Submodule]: 'submodule', }; const nodes = props.nodes.map(n => ( - +
- + {n.name} - +
)); return ( diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index 3e4b82c1ac9441..5825d1e26909c5 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -19,3 +19,47 @@ .code-auto-margin { margin: auto; } + +.code-navigation__sidebar { + width: calc(256rem / 14); + border-right: $euiBorderThin; + display: flex; + flex-direction: column; + & > div { + height: 100%; + display: flex; + flex-direction: column; + & > div:first-child { + flex-shrink: 0; + flex-grow: 0; + } + & > div:not(:first-child) { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 1; + } + } +} + +.code-file-tree-container { + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: $euiSizeM; + background-color: $euiColorLightestShade; +} + +.code-directory__node { + width: calc(200rem / 14); + margin: 0 $euiSizeXS $euiSizeS; + padding: $euiSizeXS; + border-radius: $euiBorderRadius; + a { + color: $euiColorDarkestShade; + } + &:hover { + background-color: rgba($euiColorGhost, .10); + cursor: pointer; + } +} \ No newline at end of file diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx index cc6bb486c6effb..1077947f63bec3 100644 --- a/x-pack/plugins/code/public/components/main/side_tabs.tsx +++ b/x-pack/plugins/code/public/components/main/side_tabs.tsx @@ -21,36 +21,6 @@ enum Tabs { structure = 'structure', } -const Container = styled.div` - width: calc(256rem / 14); - border-right: ${theme.euiBorderThin}; - display: flex; - flex-direction: column; - & > div { - height: 100%; - display: flex; - flex-direction: column; - & > div:first-child { - flex-shrink: 0; - flex-grow: 0; - } - & > div:not(:first-child) { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 1; - } - } -`; - -const FileTreeContainer = styled.div` - flex-grow: 1; - flex-shrink: 1; - overflow: auto; - padding: ${theme.paddingSizes.l} ${theme.paddingSizes.m}; - background-color: ${theme.euiColorLightestShade}; -`; - class CodeSideTabs extends React.PureComponent> { public get sideTab(): Tabs { const { search } = this.props.location; @@ -68,9 +38,9 @@ class CodeSideTabs extends React.PureComponent +
- +
), isSelected: Tabs.file === this.sideTab, 'data-test-subj': 'codeFileTreeTab', @@ -95,7 +65,7 @@ class CodeSideTabs extends React.PureComponent +
t.id === this.sideTab)} @@ -107,7 +77,7 @@ class CodeSideTabs extends React.PureComponent - +
); } private toggleTab = () => { From 4dc23f1d402eeced4a3e18d8debb2b33fe90a97d Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Wed, 13 Feb 2019 12:40:52 -0800 Subject: [PATCH 02/13] Continuing work on dark mode updates. --- .../components/diff_page/commit_link.tsx | 8 ++- .../public/components/file_tree/file_tree.tsx | 8 +-- .../public/components/main/commit_history.tsx | 39 +++--------- .../code/public/components/main/directory.tsx | 2 +- .../code/public/components/main/main.scss | 61 ++++++++++++++++++- .../code/public/components/main/side_tabs.tsx | 2 +- .../code/public/components/main/top_bar.tsx | 30 ++------- 7 files changed, 88 insertions(+), 62 deletions(-) diff --git a/x-pack/plugins/code/public/components/diff_page/commit_link.tsx b/x-pack/plugins/code/public/components/diff_page/commit_link.tsx index 5d066f0c3fbd8a..7525dfe6c48848 100644 --- a/x-pack/plugins/code/public/components/diff_page/commit_link.tsx +++ b/x-pack/plugins/code/public/components/diff_page/commit_link.tsx @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { EuiLink } from '@elastic/eui'; +import { EuiBadge, EuiLink } from '@elastic/eui'; import React from 'react'; import { DIFF } from '../routes'; @@ -15,5 +15,9 @@ interface Props { export const CommitLink = ({ repoUri, commit, children }: Props) => { const href = DIFF.replace(':resource/:org/:repo', repoUri).replace(':commitId', commit); - return {children || commit}; + return ( + + {children || commit} + + ); }; diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx index 29cac5a87b73e6..2116410d572f37 100644 --- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx +++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx @@ -97,7 +97,7 @@ export class CodeFileTree extends React.Component { ) : ( )} - + {`${node.name}/`} ); @@ -110,7 +110,7 @@ export class CodeFileTree extends React.Component { className={classes(className, 'code-file-tree-file')} role="button" > - + {node.name} ); @@ -123,7 +123,7 @@ export class CodeFileTree extends React.Component { className={classes(className, 'code-file-tree-file')} role="button" > - + {node.name} ); @@ -136,7 +136,7 @@ export class CodeFileTree extends React.Component { className={classes(className, 'code-file-tree-file')} role="button" > - + {node.name} ); diff --git a/x-pack/plugins/code/public/components/main/commit_history.tsx b/x-pack/plugins/code/public/components/main/commit_history.tsx index c128dd626926ed..452127f3b5afe0 100644 --- a/x-pack/plugins/code/public/components/main/commit_history.tsx +++ b/x-pack/plugins/code/public/components/main/commit_history.tsx @@ -22,15 +22,6 @@ import { CommitLink } from '../diff_page/commit_link'; const COMMIT_ID_LENGTH = 8; -const Dot = styled.div` - --dotRadius: ${theme.euiSizeS}; - width: var(--dotRadius); - height: var(--dotRadius); - border-radius: calc(var(--dotRadius) / 2); - background-color: ${theme.euiBorderColor}; - margin: auto; -`; - const CommitMessages = styled.div` overflow: auto; flex: 1; @@ -43,15 +34,10 @@ const Header = styled.div` justify-content: space-between; `; -const TimeLine = styled.div` - border-left: ${theme.euiBorderThick}; - margin-left: ${theme.euiSizeXs}; - padding: ${theme.paddingSizes.s} 0 ${theme.paddingSizes.s} ${theme.paddingSizes.m}; -`; - const CommitRoot = styled(EuiPanel)` - &:not(:first-child) { + &:not(:first-child):not(:last-child) { border-top: none; + border-radius: 0; } display: flex; flex-direction: row; @@ -63,13 +49,8 @@ const CommitGroupContainer = styled.div` `; const CommitId = styled.div` - --height: calc(20rem / 14); - width: var(--dotRadius); - height: var(--height); + height: calc(20rem / 14); margin: auto 0; - line-height: var(--height); - color: black; - border: ${theme.euiBorderThin}; text-align: center; flex-shrink: 0; `; @@ -84,12 +65,12 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) => .slice(0, COMMIT_ID_LENGTH) .join(''); return ( - +

{message}

 - + {committer} · {date} @@ -98,7 +79,7 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) => - + ); }; @@ -107,10 +88,10 @@ const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: stri )); return ( - +
- +
@@ -120,8 +101,8 @@ const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: stri - {commitList} - +
{commitList}
+
); }; diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx index 8357432aca6d74..30e588ebd2e17c 100644 --- a/x-pack/plugins/code/public/components/main/directory.tsx +++ b/x-pack/plugins/code/public/components/main/directory.tsx @@ -73,7 +73,7 @@ const DirectoryNodes = (props: DirectoryNodesProps) => { const nodes = props.nodes.map(n => (
- + {n.name}
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index 5825d1e26909c5..c428983886bf46 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -42,7 +42,7 @@ } } -.code-file-tree-container { +.code-file-tree__container { flex-grow: 1; flex-shrink: 1; overflow: auto; @@ -62,4 +62,63 @@ background-color: rgba($euiColorGhost, .10); cursor: pointer; } +} +.code-timeline { + border-left: $euiBorderThick; + margin-left: $euiSizeXS; + padding: $euiSizeS 0 $euiSizeS $euiSizeS; +} + +.code-timeline__marker { + width: $euiSizeS; + height: $euiSizeS; + border-radius: $euiSizeS / 2; + background-color: $euiBorderColor; + margin: auto; +} + +.code-timeline__commit-container { + margin: 0 0 $euiSizeXS $euiSizeM; + .euiPanel:not(:first-of-type), .euiPanel:not(:last-of-type) { + border-radius: 0; + } +} + +.euiPanel.code-timeline__commit--root { + display: flex; + flex-direction: row; + justify-content: space-between; + &:not(:first-child) { + border-top: none; + } + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child { + border-radius: $euiSizeXS $euiSizeXS 0 0; + } + &:last-child { + border-radius: 0 0 $euiSizeXS $euiSizeXS; + } + &:only-child{ + border-radius: $euiSizeXS + } +} + +.code-top-bar__container { + box-sizing: content-box; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: $euiSizeS; + min-height: 80px; + border-bottom: $euiBorderThin; + nav { + a { + display: inline; + } + div { + vertical-align: baseline; + } + } } \ No newline at end of file diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx index 1077947f63bec3..8fd89b219a372b 100644 --- a/x-pack/plugins/code/public/components/main/side_tabs.tsx +++ b/x-pack/plugins/code/public/components/main/side_tabs.tsx @@ -38,7 +38,7 @@ class CodeSideTabs extends React.PureComponent +
), diff --git a/x-pack/plugins/code/public/components/main/top_bar.tsx b/x-pack/plugins/code/public/components/main/top_bar.tsx index b1377871e5f49a..ce828fd2eb74bd 100644 --- a/x-pack/plugins/code/public/components/main/top_bar.tsx +++ b/x-pack/plugins/code/public/components/main/top_bar.tsx @@ -5,32 +5,12 @@ */ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; import React from 'react'; -import styled from 'styled-components'; import { SearchScope } from '../../../model'; import { MainRouteParams } from '../../common/types'; import { Breadcrumb } from './breadcrumb'; import { SearchBar } from './search_bar'; -const TopBarContainer = styled.div` - box-sizing: content-box; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: ${theme.paddingSizes.s}; - min-height: 80px; - border-bottom: ${theme.euiBorderThick}; - nav { - a { - display: inline; - } - div { - vertical-align: baseline; - } - } -`; - interface Props { routeParams: MainRouteParams; onSearchScopeChanged: (s: SearchScope) => void; @@ -40,15 +20,17 @@ interface Props { export class TopBar extends React.Component { public render() { return ( - +
- + - {this.props.buttons} + + {this.props.buttons} + - +
); } } From 74b7bdfb1b41bcbdd0799ffbc9990ff7ba5bbd0a Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Wed, 13 Feb 2019 12:59:18 -0800 Subject: [PATCH 03/13] Dark mode changes on the commit history page. --- .../code/public/components/main/commit_history.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/x-pack/plugins/code/public/components/main/commit_history.tsx b/x-pack/plugins/code/public/components/main/commit_history.tsx index 452127f3b5afe0..bbbe3a0817ea3d 100644 --- a/x-pack/plugins/code/public/components/main/commit_history.tsx +++ b/x-pack/plugins/code/public/components/main/commit_history.tsx @@ -34,20 +34,6 @@ const Header = styled.div` justify-content: space-between; `; -const CommitRoot = styled(EuiPanel)` - &:not(:first-child):not(:last-child) { - border-top: none; - border-radius: 0; - } - display: flex; - flex-direction: row; - justify-content: space-between; -`; - -const CommitGroupContainer = styled.div` - margin: 0 0 ${theme.euiSizeXs} ${theme.euiSizeM}; -`; - const CommitId = styled.div` height: calc(20rem / 14); margin: auto 0; From a91fd2106b33bd8d0c85b413971b0132cea0b975 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 14 Feb 2019 13:28:55 -0800 Subject: [PATCH 04/13] Dark mode and style cleanup --- .../public/components/file_tree/file_tree.tsx | 43 +++++++++++++++---- .../plugins/code/public/components/shared.tsx | 24 ----------- 2 files changed, 35 insertions(+), 32 deletions(-) delete mode 100644 x-pack/plugins/code/public/components/shared.tsx diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx index 2116410d572f37..4080864ae075a1 100644 --- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx +++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx @@ -5,7 +5,7 @@ */ import React from 'react'; -import { EuiIcon, EuiSideNav } from '@elastic/eui'; +import { EuiIcon, EuiSideNav, EuiText } from '@elastic/eui'; import classes from 'classnames'; import theme from '@elastic/eui/dist/eui_theme_light.json'; @@ -16,7 +16,6 @@ import { FileTree as Tree, FileTreeItemType } from '../../../model'; import { closeTreePath, fetchRepoTree, FetchRepoTreePayload } from '../../actions'; import { EuiSideNavItem, MainRouteParams, PathTypes } from '../../common/types'; import { RootState } from '../../reducers'; -import { FolderClosedTriangle, FolderOpenTriangle } from '../shared'; const DirectoryNode = styled.span` margin-left: ${theme.euiSizeXs}; @@ -93,12 +92,28 @@ export class CodeFileTree extends React.Component { onClick={onClick} > {forceOpen ? ( - + ) : ( - + )} - {`${node.name}/`} + + + {`${node.name}/`} + +
); } @@ -111,7 +126,11 @@ export class CodeFileTree extends React.Component { role="button" > - {node.name} + + + {node.name} + + ); } @@ -124,7 +143,11 @@ export class CodeFileTree extends React.Component { role="button" > - {node.name} + + + {node.name} + + ); } @@ -137,7 +160,11 @@ export class CodeFileTree extends React.Component { role="button" > - {node.name} + + + {node.name} + + ); } diff --git a/x-pack/plugins/code/public/components/shared.tsx b/x-pack/plugins/code/public/components/shared.tsx deleted file mode 100644 index c8e06ca4fd0345..00000000000000 --- a/x-pack/plugins/code/public/components/shared.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import theme from '@elastic/eui/dist/eui_theme_light.json'; -import styled from 'styled-components'; - -export const FolderClosedTriangle = styled.i` - display: inline-block; - width: 0; - height: 0; - margin-right: ${theme.euiSizeXs}; - border: 6px solid transparent; - border-left: 6px solid grey; - vertical-align: middle; -`; - -export const FolderOpenTriangle = styled(FolderClosedTriangle)` - margin-top: 3px; - border-top: 6px solid grey; - border-left: 6px solid transparent; -`; From e8e93314fd2be213c6d8f5abc777d4818cc7a1af Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 14 Feb 2019 13:38:42 -0800 Subject: [PATCH 05/13] Using EuiText and reducing the font size in the directory listing. --- .../code/public/components/main/directory.tsx | 8 +++++-- .../plugins/code/public/components/shared.tsx | 24 +++++++++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 x-pack/plugins/code/public/components/shared.tsx diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx index 30e588ebd2e17c..8d459a7b917285 100644 --- a/x-pack/plugins/code/public/components/main/directory.tsx +++ b/x-pack/plugins/code/public/components/main/directory.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiIcon, EuiTitle, IconType } from '@elastic/eui'; +import { EuiIcon, EuiText, EuiTitle, IconType } from '@elastic/eui'; import theme from '@elastic/eui/dist/eui_theme_light.json'; import React from 'react'; import { Link, RouteComponentProps, withRouter } from 'react-router-dom'; @@ -74,7 +74,11 @@ const DirectoryNodes = (props: DirectoryNodesProps) => {
- {n.name} + + + {n.name} + +
)); diff --git a/x-pack/plugins/code/public/components/shared.tsx b/x-pack/plugins/code/public/components/shared.tsx new file mode 100644 index 00000000000000..c8e06ca4fd0345 --- /dev/null +++ b/x-pack/plugins/code/public/components/shared.tsx @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import theme from '@elastic/eui/dist/eui_theme_light.json'; +import styled from 'styled-components'; + +export const FolderClosedTriangle = styled.i` + display: inline-block; + width: 0; + height: 0; + margin-right: ${theme.euiSizeXs}; + border: 6px solid transparent; + border-left: 6px solid grey; + vertical-align: middle; +`; + +export const FolderOpenTriangle = styled(FolderClosedTriangle)` + margin-top: 3px; + border-top: 6px solid grey; + border-left: 6px solid transparent; +`; From 7833182504252ed62e54749819e703f5d611824b Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 14 Feb 2019 13:44:23 -0800 Subject: [PATCH 06/13] Reducing the font size of the commit messages. --- x-pack/plugins/code/public/components/main/commit_history.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/code/public/components/main/commit_history.tsx b/x-pack/plugins/code/public/components/main/commit_history.tsx index bbbe3a0817ea3d..a282f72c1d7374 100644 --- a/x-pack/plugins/code/public/components/main/commit_history.tsx +++ b/x-pack/plugins/code/public/components/main/commit_history.tsx @@ -53,7 +53,7 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) => return ( - +

{message}

 From 28671ef351fedbc0602d5f08d9b2dc5f53aa3cef Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Fri, 15 Feb 2019 09:02:20 -0800 Subject: [PATCH 07/13] Reverting the change to kibana.yml --- config/kibana.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/config/kibana.yml b/config/kibana.yml index 3730d039d0f0f6..8c45df5dbeda1f 100644 --- a/config/kibana.yml +++ b/config/kibana.yml @@ -110,6 +110,4 @@ #ops.interval: 5000 # Specifies locale to be used for all localizable strings, dates and number formats. -#i18n.locale: "en" - -xpack.code.codeNode: true \ No newline at end of file +#i18n.locale: "en" \ No newline at end of file From f6794b2aaaa069a0e133dbcb5d288478f79e3c09 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Fri, 15 Feb 2019 09:43:51 -0800 Subject: [PATCH 08/13] Removing inline styles and cleaning up css naming conventions. More css cleanup to come in a following PR. --- .../code/public/components/file_tree/file_tree.tsx | 10 +++++----- .../plugins/code/public/components/main/directory.tsx | 2 +- x-pack/plugins/code/public/components/main/main.scss | 6 +++++- .../plugins/code/public/components/main/side_tabs.tsx | 2 +- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx index 4080864ae075a1..29130c95745af4 100644 --- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx +++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx @@ -96,7 +96,7 @@ export class CodeFileTree extends React.Component { type="arrowDown" size="s" color="subdued" - style={{ marginRight: '.5rem' }} + className="codeFileTree--icon" onClick={onFolderClick} /> ) : ( @@ -104,7 +104,7 @@ export class CodeFileTree extends React.Component { type="arrowRight" size="s" color="subdued" - style={{ marginRight: '.5rem' }} + className="codeFileTree--icon" onClick={onFolderClick} /> )} @@ -127,7 +127,7 @@ export class CodeFileTree extends React.Component { > - + {node.name} @@ -144,7 +144,7 @@ export class CodeFileTree extends React.Component { > - + {node.name} @@ -161,7 +161,7 @@ export class CodeFileTree extends React.Component { > - + {node.name} diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx index 8d459a7b917285..9321c1c18c1870 100644 --- a/x-pack/plugins/code/public/components/main/directory.tsx +++ b/x-pack/plugins/code/public/components/main/directory.tsx @@ -75,7 +75,7 @@ const DirectoryNodes = (props: DirectoryNodesProps) => { - + {n.name} diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index c428983886bf46..1bf300c87ed2ec 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -42,7 +42,7 @@ } } -.code-file-tree__container { +.codeFileTree--container { flex-grow: 1; flex-shrink: 1; overflow: auto; @@ -50,6 +50,10 @@ background-color: $euiColorLightestShade; } +.codeFileTree--icon { + margin-right: $euiSizeS; +} + .code-directory__node { width: calc(200rem / 14); margin: 0 $euiSizeXS $euiSizeS; diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx index 8fd89b219a372b..e047712780794a 100644 --- a/x-pack/plugins/code/public/components/main/side_tabs.tsx +++ b/x-pack/plugins/code/public/components/main/side_tabs.tsx @@ -38,7 +38,7 @@ class CodeSideTabs extends React.PureComponent +
), From f7e7c6b62c501d063d6b7a9e8d67207d285358a2 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Fri, 15 Feb 2019 11:16:24 -0800 Subject: [PATCH 09/13] Missed an inline style. --- x-pack/plugins/code/public/components/file_tree/file_tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx index 29130c95745af4..a0b02107d358e4 100644 --- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx +++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx @@ -110,7 +110,7 @@ export class CodeFileTree extends React.Component { )} - + {`${node.name}/`} From 7f7eddd8b4ad3230bdc69307b5bed5aefbf8e17c Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 19 Feb 2019 17:03:06 -0800 Subject: [PATCH 10/13] Suggestion component dark mode compatability. --- .../code/public/components/main/main.scss | 99 +++++++++++++++++++ .../typeahead/suggestion_component.tsx | 82 +++------------ .../typeahead/suggestions_component.tsx | 69 +++---------- 3 files changed, 128 insertions(+), 122 deletions(-) diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss index 1bf300c87ed2ec..774676856945d2 100644 --- a/x-pack/plugins/code/public/components/main/main.scss +++ b/x-pack/plugins/code/public/components/main/main.scss @@ -125,4 +125,103 @@ vertical-align: baseline; } } +} + +.codeSearch__suggestion-item { + background: $euiColorLightestShade; + height: 3rem; + margin: 0 $euiSize; + border-radius: $euiSizeXS; + cursor: pointer; + width: calc(100% - $euiSizeXL); + + &:hover { + background: $euiColorLightShade; + } +} + +.codeSearch__suggestion--active { + background: $euiColorLightShade; +} + +.codeSearch-suggestion--inner { + display: flex; + align-items: stretch; + flex-grow: 1; + align-items: center; + white-space: nowrap; +} + +.codeSearch__suggestion-text { + color: $euiColorFullShade; + display: flex; + flex-direction: column; + flex-grow: 0; + flex-basis: auto; + font-family: $euiCodeFontFamily; + margin-right: $euiSizeXL; + width: auto; + overflow: hidden; + text-overflow: ellipsis; + padding: $euiSizeXS $euiSizeS; + font-size: $euiFontSizeS; +} + +.codeSearch__full-text-button { + border-top: $euiBorderWidthThin solid $euiBorderColor; + padding: $euiSizeS; + text-align: center; + font-weight: bold; + background: $euiColorLightShade; + margin: $euiSizeS; + padding: $euiSizeS; + font-size: $euiFontSizeS; +} + +.kbnTypeahead .kbnTypeahead__popover .kbnTypeahead__items { + overflow-x: hidden; +} + +.codeSearch-suggestion__group-header { + padding: $euiSizeL; + border-top: $euiBorderThin; +} +.codeSearch-suggestion__group-title { + margin-left: $euiSizeS; + display: inline-block; +} + +.codeSearch-suggestion__link { + height: $euiSize; + line-height: $euiSize; + text-align: center; + font-size: $euiFontSizeXS; + margin: $euiSizeS; +} + +.codeSearch-suggestion__description { + flex-grow: 1; + flex-basis: 0%; + display: flex; + flex-direction: column; + color: $euiColorDarkShade; + overflow: hidden; + text-overflow: ellipsis; + font-size: $euiFontSizeXS; + padding: $euiSizeXS $euiSize; +} + +.codeSearch-suggestion__token { + color: $euiColorFullShade; + box-sizing: border-box; + flex-grow: 0; + flex-basis: auto; + width: $euiSizeXL; + height: $euiSizeXL; + text-align: center; + overflow: hidden; + padding: $euiSizeXS; + justify-content: center; + align-items: center; + margin-left: $euiSizeXS; } \ No newline at end of file diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx index 4af9d750a0865e..220555cca5b6de 100644 --- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx +++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx @@ -21,64 +21,6 @@ interface Props { ariaId: string; } -const SuggestionItem = styled.div` - background: ${(props: any) => (props.active ? theme.euiColorHighlight : 'white')}; - height: calc(48rem / 14); - margin: 0 ${theme.euiSize}; - border-radius: ${theme.euiSizeXs} ${theme.euiSizeXs} ${theme.euiSizeXs} ${theme.euiSizeXs}; - cursor: pointer; -`; - -const SuggestionItemInner = styled.div` - display: flex; - align-items: stretch; - flex-grow: 1; - align-items: center; - white-space: nowrap; -`; - -const SuggestionItemBase = styled.div` - flex-grow: 1; - flex-basis: 0%; - display: flex; - flex-direction: column; -`; - -const SuggestionItemToken = styled(SuggestionItemBase)` - color: ${theme.euiColorFullShade}; - flex-grow: 0; - flex-basis: auto; - width: ${theme.euiSizeXl}; - height: ${theme.euiSizeXl}; - text-align: center; - overflow: hidden; - padding: ${theme.euiSizeXs}; - justify-content: center; - align-items: center; -`; - -const SuggestionItemText = styled(SuggestionItemBase)` - color: ${theme.euiColorFullShade}; - flex-grow: 0; - flex-basis: auto; - font-family: ${theme.euiCodeFontFamily}; - margin-right: ${theme.euiSizeXl}; - width: auto; - overflow: hidden; - text-overflow: ellipsis; - padding: ${theme.euiSizeXs} ${theme.euiSizeS}; - color: #111; - font-size: ${theme.euiFontSizeS}; -`; - -const SuggestionItemDescription = styled(SuggestionItemBase)` - color: ${theme.euiColorDarkShade}; - overflow: hidden; - text-overflow: ellipsis; - font-size: ${theme.euiFontSizeXs}; - padding: ${theme.euiSizeXs} ${theme.euiSizeS}; -`; - export const SuggestionComponent: SFC = props => { const click = () => props.onClick(props.suggestion); @@ -107,31 +49,35 @@ export const SuggestionComponent: SFC = props => { }; const icon = props.suggestion.tokenType ? ( - +
- +
) : null; return ( - - +
{icon}
- +
{renderMatchingText(props.suggestion.text)} - - {props.suggestion.description} +
+
{props.suggestion.description}
- - +
+ ); }; diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx index b78287e5d2cec4..c78a33af8aab54 100644 --- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx +++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiToken, IconType } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToken, IconType } from '@elastic/eui'; import theme from '@elastic/eui/dist/eui_theme_light.json'; import { isEmpty } from 'lodash'; import React, { Component } from 'react'; @@ -30,46 +30,6 @@ interface Props { loadMore: () => void; } -const SuggestionGroupHeader = styled.div` - border-top: ${theme.euiBorderWidthThin} solid ${theme.euiBorderColor}; - display: flex; - justify-content: space-between; - padding: ${theme.euiSize}; -`; - -const SuggestionGroupHeaderTitle = styled.div` - display: flex; -`; - -const SuggestionGroupHeaderTitleText = styled.span` - margin-left: ${theme.euiSizeS}; -`; - -const SuggestionGroupHeaderResult = styled.div` - color: ${theme.euiColorDarkShade}; -`; - -const ViewMore = styled.div` - height: ${theme.euiSize}; - line-height: ${theme.euiSize}; - text-align: center; - font-size: ${theme.euiFontSizeXs}; - margin: ${theme.euiSizeS}; -`; - -const PressReturn = styled.div` - border-top: ${theme.euiBorderWidthThin} solid ${theme.euiBorderColor}; - padding: ${theme.euiSizeS}; - text-align: center; - font-weight: bold; -`; - -const PressReturnText = styled.div` - background: ${theme.euiColorLightShade}; - margin: ${theme.euiSizeS}; - padding: ${theme.euiSizeS}; -`; - export class SuggestionsComponent extends Component { private childNodes: HTMLDivElement[] = []; private parentNode: HTMLDivElement | null = null; @@ -84,9 +44,7 @@ export class SuggestionsComponent extends Component {
{this.renderSuggestionGroups()} - - Press ⮐ Return for Full Text Search - +
Press ⮐ Return for Full Text Search
@@ -129,18 +87,21 @@ export class SuggestionsComponent extends Component { ); const groupHeader = ( - - + + - + {this.getGroupTitle(group.type)} - - - + + +
{total} Result {total === 1 ? '' : 's'} - - +
+ ); const viewMoreUrl = Url.format({ @@ -150,9 +111,9 @@ export class SuggestionsComponent extends Component { }, }); const viewMore = ( - +
View More - +
); return ( From 53f00dd629ca3c4ae88b4e83e0ee6cfe6d5574aa Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Wed, 20 Feb 2019 15:16:28 -0800 Subject: [PATCH 11/13] Reverting kibana.yml --- config/kibana.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/kibana.yml b/config/kibana.yml index 8c45df5dbeda1f..4abaf715f30604 100644 --- a/config/kibana.yml +++ b/config/kibana.yml @@ -110,4 +110,4 @@ #ops.interval: 5000 # Specifies locale to be used for all localizable strings, dates and number formats. -#i18n.locale: "en" \ No newline at end of file +#i18n.locale: "en" From ff9576cab6dc5d2c8fdfb256995040a096cb9165 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 21 Feb 2019 07:58:37 -0800 Subject: [PATCH 12/13] Fixing type errors. --- .../plugins/code/public/components/main/directory.tsx | 10 ---------- .../plugins/code/public/components/main/side_tabs.tsx | 2 -- .../components/typeahead/suggestion_component.tsx | 3 --- .../components/typeahead/suggestions_component.tsx | 4 +--- 4 files changed, 1 insertion(+), 18 deletions(-) diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx index eed004e640dc8a..1ff99fbc2281b7 100644 --- a/x-pack/plugins/code/public/components/main/directory.tsx +++ b/x-pack/plugins/code/public/components/main/directory.tsx @@ -11,7 +11,6 @@ import { Link, RouteComponentProps, withRouter } from 'react-router-dom'; import styled from 'styled-components'; import { FileTree, FileTreeItemType } from '../../../model'; import { MainRouteParams, PathTypes } from '../../common/types'; -import { COLORS } from '@elastic/eui/src/components/icon/icon'; const Root = styled.div` padding: ${theme.paddingSizes.m}; @@ -47,15 +46,6 @@ const Container = styled.div` } `; -const DirectoryNode = styled.div` - width: calc(200rem / 14); - margin: 0 ${theme.euiSizeS} ${theme.euiSizeM}; - :hover { - background-color: ${theme.euiColorHighlight}; - cursor: pointer; - } -`; - interface DirectoryNodesProps { title: string; nodes: FileTree[]; diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx index e047712780794a..dae3a1f0ce5323 100644 --- a/x-pack/plugins/code/public/components/main/side_tabs.tsx +++ b/x-pack/plugins/code/public/components/main/side_tabs.tsx @@ -5,11 +5,9 @@ */ import { EuiTabbedContent } from '@elastic/eui'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; import { parse as parseQuery } from 'querystring'; import React from 'react'; import { RouteComponentProps, withRouter } from 'react-router-dom'; -import styled from 'styled-components'; import { QueryString } from 'ui/utils/query_string'; import { MainRouteParams, PathTypes } from '../../common/types'; import { FileTree } from '../file_tree/file_tree'; diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx index 220555cca5b6de..89befae7cbf07b 100644 --- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx +++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx @@ -5,10 +5,7 @@ */ import { EuiToken, IconType } from '@elastic/eui'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; import React, { SFC } from 'react'; -import styled from 'styled-components'; - import { AutocompleteSuggestion } from '../..'; interface Props { diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx index c78a33af8aab54..f09bfab62494f9 100644 --- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx +++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx @@ -4,12 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToken, IconType } from '@elastic/eui'; -import theme from '@elastic/eui/dist/eui_theme_light.json'; +import { EuiFlexGroup, EuiText, EuiToken, IconType } from '@elastic/eui'; import { isEmpty } from 'lodash'; import React, { Component } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; import Url from 'url'; import { From 49279cccce5964970decc9f800ef8553ff233f73 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 21 Feb 2019 09:51:31 -0800 Subject: [PATCH 13/13] Updating test snapshots. --- .../__snapshots__/file_tree.test.tsx.snap | 563 ++++++++++++++---- .../suggestion_component.test.tsx.snap | 276 +++------ .../suggestions_component.test.tsx.snap | 515 +++++++--------- 3 files changed, 771 insertions(+), 583 deletions(-) diff --git a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap index 56e6b9a19faea2..d9be6ed95d17fa 100644 --- a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap +++ b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap @@ -80,12 +80,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - android/ +
+ android/ +
@@ -113,12 +136,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - futures/ +
+ futures/ +
@@ -146,12 +192,30 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - guava/ +
+ guava/ +
- + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - javadoc-link/ +
+ javadoc-link/ +
@@ -215,7 +306,7 @@ exports[`render correctly 1`] = ` role="button" > - pom.xml +
+ pom.xml +
@@ -250,12 +345,30 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - src/com/google/ +
+ src/com/google/ +
- + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - common/ +
+ common/ +
@@ -318,12 +458,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - thirdparty/ +
+ thirdparty/ +
@@ -355,12 +518,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - guava-bom/ +
+ guava-bom/ +
@@ -388,12 +574,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - guava-gwt/ +
+ guava-gwt/ +
@@ -421,12 +630,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - guava-testlib/ +
+ guava-testlib/ +
@@ -454,12 +686,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - guava-tests/ +
+ guava-tests/ +
@@ -487,12 +742,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - refactorings/ +
+ refactorings/ +
@@ -520,12 +798,31 @@ exports[`render correctly 1`] = ` onClick={[Function]} role="button" > - + style={null} + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + + + + + - util/ +
+ util/ +
@@ -554,7 +855,7 @@ exports[`render correctly 1`] = ` role="button" > - .gitattributes +
+ .gitattributes +
@@ -590,7 +895,7 @@ exports[`render correctly 1`] = ` role="button" > - .gitignore +
+ .gitignore +
@@ -626,7 +935,7 @@ exports[`render correctly 1`] = ` role="button" > - .travis.yml +
+ .travis.yml +
@@ -662,7 +975,7 @@ exports[`render correctly 1`] = ` role="button" > - CONTRIBUTING.md +
+ CONTRIBUTING.md +
@@ -698,7 +1015,7 @@ exports[`render correctly 1`] = ` role="button" > - CONTRIBUTORS +
+ CONTRIBUTORS +
@@ -734,7 +1055,7 @@ exports[`render correctly 1`] = ` role="button" > - COPYING +
+ COPYING +
@@ -770,7 +1095,7 @@ exports[`render correctly 1`] = ` role="button" > - README.md +
+ README.md +
@@ -806,7 +1135,7 @@ exports[`render correctly 1`] = ` role="button" > - cycle_whitelist.txt +
+ cycle_whitelist.txt +
@@ -842,7 +1175,7 @@ exports[`render correctly 1`] = ` role="button" > - javadoc-stylesheet.css +
+ javadoc-stylesheet.css +
@@ -878,7 +1215,7 @@ exports[`render correctly 1`] = ` role="button" > - pom.xml +
+ pom.xml +
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap index cd572cc0523dce..8e783dd8e806cd 100644 --- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap +++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap @@ -19,64 +19,38 @@ exports[`render file item 1`] = ` } } > -
- +
-
- - -
- - src/foo/ - - bar - - .java - -
- - - - -
- This is a file -
- - -
+ + src/foo/ + + bar + + .java +
- +
+ This is a file +
+
- + `; @@ -99,61 +73,35 @@ exports[`render repository item 1`] = ` } } > -
- +
-
- - -
- - elastic/ - - kibana - - -
- - - - -
- - -
+ + elastic/ + + kibana + +
- +
+
- +
`; @@ -176,111 +124,79 @@ exports[`render symbol item 1`] = ` } } > -
- -
+ - - + -
- -
- - - - - - - -
- -
- - -
- - -
- - java.lang. - - String - - -
- - - - -
- elastic/elasticsearch > src/foo/bar.java -
- - + + + +
+ +
+
+
+ + java.lang. + + String + + +
+
+ elastic/elasticsearch > src/foo/bar.java
- +
- +
`; diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap index 19067e797b8373..a013a9cbdbc4a3 100644 --- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap +++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap @@ -139,13 +139,30 @@ exports[`render full suggestions component 1`] = ` onScroll={[Function]} role="listbox" > - +
- +
- - +
Symbols - - -
- - -
- 1 - Result +
+
- + +
+ 1 + Result +
- + -
- -
+ - - -
- -
- - - - - - - -
- -
- - -
- + - -
- - java.lang. - - String - - -
- - - - -
- elastic/elasticsearch > src/foo/bar.java -
- - + + + +
+ +
+
+
+ + java.lang. + + String + + +
+
+ elastic/elasticsearch > src/foo/bar.java
- +
- +
- +
- +
- - +
Files - - -
- - -
- 1 - Result +
+
- + +
+ 1 + Result +
- + -
- +
-
- - -
- src/foo/bar.java -
- - - - -
- This is a file -
- - -
+ src/foo/bar.java +
+
+ This is a file
- +
- +
- +
- +
- - +
Repos - - -
- - -
- 2 - Result - s +
+
- + +
+ 2 + Result + s +
- + -
- +
-
- - -
- elastic/kibana -
- - - - -
- - -
+ elastic/kibana
- +
+
- +
-
- +
-
- - -
- elastic/elasticsearch -
- - - - -
- - -
+ elastic/elasticsearch
- +
+
- - - - - -
- + - +
+
+ Press ⮐ Return for Full Text Search +