From e5f6f9cf08fc421505dc60db590112fbd0da6bc2 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 19 Jun 2019 15:40:30 +0300 Subject: [PATCH 01/61] kbn top nav in discover --- src/legacy/core_plugins/data/public/index.ts | 1 + .../core_plugins/data/public/search/index.tsx | 2 + .../kibana/public/discover/index.html | 93 +++++++++---------- src/legacy/core_plugins/kibana_react/index.ts | 42 +++++++++ .../kibana_react/public/index.scss | 0 .../core_plugins/kibana_react/public/index.ts | 26 ++++++ .../kibana_react/public/kbn_top_nav/index.ts | 20 ++++ .../public/kbn_top_nav/top_nav_menu.tsx | 53 +++++++++++ .../public/kbn_top_nav/top_nav_menu_item.tsx | 67 +++++++++++++ src/legacy/ui/public/kbn_top_nav/index.js | 1 + .../ui/public/kbn_top_nav/kbn_top_nav2.js | 34 +++++++ 11 files changed, 289 insertions(+), 50 deletions(-) create mode 100644 src/legacy/core_plugins/kibana_react/index.ts create mode 100644 src/legacy/core_plugins/kibana_react/public/index.scss create mode 100644 src/legacy/core_plugins/kibana_react/public/index.ts create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/index.ts create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx create mode 100644 src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js diff --git a/src/legacy/core_plugins/data/public/index.ts b/src/legacy/core_plugins/data/public/index.ts index 679a835a0477e..16777a8714d34 100644 --- a/src/legacy/core_plugins/data/public/index.ts +++ b/src/legacy/core_plugins/data/public/index.ts @@ -87,3 +87,4 @@ export { ExpressionRenderer, ExpressionRendererProps, ExpressionRunner } from '. /** @public types */ export { IndexPattern, StaticIndexPattern, StaticIndexPatternField, Field } from './index_patterns'; export { Query } from './query'; +export { SearchBar } from './search'; diff --git a/src/legacy/core_plugins/data/public/search/index.tsx b/src/legacy/core_plugins/data/public/search/index.tsx index b0687ea3c6bcd..eeeff59f26283 100644 --- a/src/legacy/core_plugins/data/public/search/index.tsx +++ b/src/legacy/core_plugins/data/public/search/index.tsx @@ -18,3 +18,5 @@ */ export { SearchService, SearchSetup } from './search_service'; + +export { SearchBar } from './search_bar'; diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html index 7a7dc9ca3f4b8..d89753ec0c03b 100644 --- a/src/legacy/core_plugins/kibana/public/discover/index.html +++ b/src/legacy/core_plugins/kibana/public/discover/index.html @@ -1,57 +1,50 @@ - - -
- -
-

- - - -

-
- {{(hits || 0) | number:0}} - -
-
+ + - -
- -
+
+

+ + + +

+
+ {{(hits || 0) | number:0}} +
- +
+
diff --git a/src/legacy/core_plugins/kibana_react/index.ts b/src/legacy/core_plugins/kibana_react/index.ts new file mode 100644 index 0000000000000..eb936b94c37ef --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/index.ts @@ -0,0 +1,42 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { resolve } from 'path'; +import { Legacy } from '../../../../kibana'; + +// eslint-disable-next-line import/no-default-export +export default function DataPlugin(kibana: any) { + const config: Legacy.PluginSpecOptions = { + id: 'kibana_react', + require: [], + publicDir: resolve(__dirname, 'public'), + config: (Joi: any) => { + return Joi.object({ + enabled: Joi.boolean().default(true), + }).default(); + }, + init: (server: Legacy.Server) => ({}), + uiExports: { + injectDefaultVars: () => ({}), + styleSheetPaths: resolve(__dirname, 'public/index.scss'), + }, + }; + + return new kibana.Plugin(config); +} diff --git a/src/legacy/core_plugins/kibana_react/public/index.scss b/src/legacy/core_plugins/kibana_react/public/index.scss new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/legacy/core_plugins/kibana_react/public/index.ts b/src/legacy/core_plugins/kibana_react/public/index.ts new file mode 100644 index 0000000000000..8ca877e232765 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/index.ts @@ -0,0 +1,26 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +// TODO these are imports from the old plugin world. +// Once the new platform is ready, they can get removed +// and handled by the platform itself in the setup method +// of the ExpressionExectorService + +/** @public types */ +export { TopNavMenu } from './kbn_top_nav'; diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/index.ts b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/index.ts new file mode 100644 index 0000000000000..1ee14c578d8fc --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { TopNavMenu } from './top_nav_menu'; diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx new file mode 100644 index 0000000000000..8ded9301771a1 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -0,0 +1,53 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { Component } from 'react'; + +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; + +import { SearchBar } from 'plugins/data'; +import { TopNavMenuData, TopNavMenuItem } from './top_nav_menu_item'; + +interface Props { + config: TopNavMenuData[]; + name: string; + searchBarOptions?: any; +} + +interface State { + isVisible: boolean; +} + +export class TopNavMenu extends Component { + public render() { + return ( + + {this.renderItems()} + + ); + } + + private renderItems() { + return this.props.config.map((menuItem, i) => ( + + + + )); + } +} diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx new file mode 100644 index 0000000000000..8c91e321d1863 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx @@ -0,0 +1,67 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { Component } from 'react'; +import { EuiButtonEmpty, EuiFlexItem } from '@elastic/eui'; + +export type TopNavMenuAction = (menuItem: any, navController: any, anchorElement: any) => void; + +export interface TopNavMenuData { + key: string; + label: string; + run: TopNavMenuAction; + description?: string; + testId?: string; + className?: string; + disableButton?: boolean | (() => boolean); + tooltip?: string | (() => string); +} + +interface Props { + data: TopNavMenuData; +} + +interface State { + isDisabled: boolean; +} + +export class TopNavMenuItem extends Component { + private isDisabled(): boolean { + const menuData = this.props.data; + const val = + typeof menuData.disableButton === 'function' + ? menuData.disableButton() + : menuData.disableButton; + return val || false; + } + + private handleClick() { + const menuData = this.props.data; + menuData.run(null, null, arguments[0].currentTarget); + } + + public render() { + const menuData = this.props.data; + return ( + + {menuData.label || menuData.key} + + ); + } +} diff --git a/src/legacy/ui/public/kbn_top_nav/index.js b/src/legacy/ui/public/kbn_top_nav/index.js index 8a93972c4b226..4bca1972e9904 100644 --- a/src/legacy/ui/public/kbn_top_nav/index.js +++ b/src/legacy/ui/public/kbn_top_nav/index.js @@ -18,3 +18,4 @@ */ import './kbn_top_nav'; +import './kbn_top_nav2'; diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js new file mode 100644 index 0000000000000..ff7c0ccc1ae0d --- /dev/null +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -0,0 +1,34 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import 'ngreact'; +import { wrapInI18nContext } from 'ui/i18n'; +import { uiModules } from 'ui/modules'; +import { TopNavMenu } from '../../../core_plugins/kibana_react/public'; + +const module = uiModules.get('kibana'); + +module.directive('kbnTopNav2', (reactDirective) => { + return reactDirective( + wrapInI18nContext(TopNavMenu), + undefined, + {}, + {} + ); +}); From d5d7e3866d719c8d7e7ca0c8c282e3148c17920a Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 19 Jun 2019 16:18:30 +0300 Subject: [PATCH 02/61] New top nav in dashboard and vis editor --- .../public/dashboard/dashboard_app.html | 45 +++++++++---------- .../public/visualize/editor/editor.html | 12 +++-- .../public/kbn_top_nav/top_nav_menu.tsx | 4 +- .../public/kbn_top_nav/top_nav_menu_item.tsx | 10 +++-- .../ui/public/kbn_top_nav/kbn_top_nav2.js | 2 +- .../ui/public/styles/_legacy/_base.scss | 2 +- 6 files changed, 36 insertions(+), 39 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html index d73e15287077c..74a5557aab1dc 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -3,30 +3,27 @@ ng-class="{'dshAppContainer--withMargins': model.useMargins}" > - - -
- -
- -
-
- + + + +
+ +
- - -
- -
+ + + +
-
- - -
-
- - - - - - - - - {{f.icon.code}} - - - + - - + + + +
+ +
+
+ + + + + + + + + {{f.icon.code}} + + + + + + + + + + +
+
+ - - - - -
- - -
- -
+
+
- +
diff --git a/x-pack/legacy/plugins/graph/public/templates/load_workspace.html b/x-pack/legacy/plugins/graph/public/templates/load_workspace.html index bf1ea0729deb2..5f8948caf1e97 100644 --- a/x-pack/legacy/plugins/graph/public/templates/load_workspace.html +++ b/x-pack/legacy/plugins/graph/public/templates/load_workspace.html @@ -1,12 +1,15 @@ -
- - +
+
+ + + +
\ No newline at end of file diff --git a/x-pack/legacy/plugins/graph/public/templates/settings.html b/x-pack/legacy/plugins/graph/public/templates/settings.html index d187567fb9085..c31474ca917f7 100644 --- a/x-pack/legacy/plugins/graph/public/templates/settings.html +++ b/x-pack/legacy/plugins/graph/public/templates/settings.html @@ -1,4 +1,5 @@ -
+
+ +
\ No newline at end of file From 8a7ba6b9850b8c6e33a404a1c173641703e20a11 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 27 Jun 2019 11:36:10 +0300 Subject: [PATCH 05/61] Combined css --- x-pack/legacy/plugins/graph/public/templates/_graph.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/templates/_graph.scss b/x-pack/legacy/plugins/graph/public/templates/_graph.scss index 598482cc5159a..b8a6213aef746 100644 --- a/x-pack/legacy/plugins/graph/public/templates/_graph.scss +++ b/x-pack/legacy/plugins/graph/public/templates/_graph.scss @@ -71,11 +71,7 @@ fill: $euiColorEmptyShade; } -.gphGraph__menus { - margin: $euiSizeM; -} - -.gphGraph__bar { +.gphGraph__menus, .gphGraph__bar { margin: $euiSizeM; } From 344b0551991e73182c7386f98018eea04989c681 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 27 Jun 2019 15:22:29 +0300 Subject: [PATCH 06/61] console top nav --- src/legacy/core_plugins/console/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 76a9f5bc42b58..8a085743388aa 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -1,4 +1,4 @@ - +
From 3c5878bc64272857fccec5a2da065e84ca2810c8 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 27 Jun 2019 15:41:43 +0300 Subject: [PATCH 07/61] Removed unnecessary use of kbn-top-nav in dev tools app (wrapping tabs) --- .../core_plugins/console/public/index.html | 2 +- .../dev_tools/partials/dev_tools_app.html | 43 ++++++++----------- 2 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 76a9f5bc42b58..0e22c64d10de2 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -1,5 +1,5 @@ - +
diff --git a/src/legacy/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html b/src/legacy/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html index 1302a03fac02f..e9424534cd9d2 100644 --- a/src/legacy/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html +++ b/src/legacy/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html @@ -1,27 +1,22 @@
- - - - + +
+ + {{::item.display}} + +
From 366b03a36d6effe6d60a145eec83e0b254a8d727 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 27 Jun 2019 15:55:47 +0300 Subject: [PATCH 08/61] Changed console menu to new directive --- src/legacy/core_plugins/console/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 0e22c64d10de2..13fd0857ffa98 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -1,4 +1,4 @@ - +
From 47665109c34be92b37c8481547a1c08fb99898b8 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 1 Jul 2019 14:20:06 +0300 Subject: [PATCH 09/61] CSS adjustments + functional implementation of top nav menu item --- .../public/dashboard/dashboard_app.html | 2 +- .../kibana/public/discover/index.html | 6 ++- .../public/visualize/editor/editor.html | 1 - .../public/kbn_top_nav/top_nav_menu.tsx | 41 ++++++++++--------- .../public/kbn_top_nav/top_nav_menu_data.tsx | 37 +++++++++++++++++ .../public/kbn_top_nav/top_nav_menu_item.tsx | 21 ++++------ .../ui/public/styles/_legacy/_base.scss | 8 ++++ .../plugins/maps/public/angular/map.html | 39 ++++++++---------- x-pack/legacy/plugins/maps/public/index.js | 1 - .../public/components/nav_menu/nav_menu.html | 2 +- 10 files changed, 99 insertions(+), 59 deletions(-) create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html index 74a5557aab1dc..9b8e7177f185c 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -6,7 +6,7 @@ -
+
- -

@@ -30,6 +28,10 @@

+ +
diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index eb8631dc4f7b7..cf72cdd2e92d5 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -17,35 +17,38 @@ * under the License. */ -import React, { Component } from 'react'; +import React from 'react'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { TopNavMenuData, TopNavMenuItem } from './top_nav_menu_item'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui'; +import { TopNavMenuData, TopNavMenuAction } from './top_nav_menu_data'; +import { TopNavMenuItem } from './top_nav_menu_item'; interface Props { config: TopNavMenuData[]; name: string; searchBarOptions?: any; + activeItem: string; } -interface State { - isVisible: boolean; -} - -export class TopNavMenu extends Component { - public render() { - return ( - - {this.renderItems()} - - ); - } - - private renderItems() { - return this.props.config.map((menuItem, i) => ( +export function TopNavMenu(props: Props) { + function renderItems() { + return props.config.map((menuItem, i) => ( - + )); } + + function menuItemClickHandler(key: string, action: TopNavMenuAction, target?: any) { + action(null, null, target); + } + + return ( +
+ + {renderItems()} + + +
+ ); } diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx new file mode 100644 index 0000000000000..674eb269e3abe --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx @@ -0,0 +1,37 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export type CloseHandler = (() => void) | undefined; + +export type TopNavMenuAction = ( + menuItem: any, + navController: any, + anchorElement: any +) => CloseHandler; + +export interface TopNavMenuData { + key: string; + label: string; + run: TopNavMenuAction; + description?: string; + testId?: string; + className?: string; + disableButton?: boolean | (() => boolean); + tooltip?: string | (() => string); +} diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx index dfa8058f316b6..65e870e3986cc 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx @@ -20,28 +20,23 @@ import React, { Component } from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; -export type TopNavMenuAction = (menuItem: any, navController: any, anchorElement: any) => void; - -export interface TopNavMenuData { - key: string; - label: string; - run: TopNavMenuAction; - description?: string; - testId?: string; - className?: string; - disableButton?: boolean | (() => boolean); - tooltip?: string | (() => string); -} +import { TopNavMenuData, CloseHandler, TopNavMenuAction } from './top_nav_menu_data'; interface Props { data: TopNavMenuData; + onClick: (key: string, action: TopNavMenuAction, target?: any) => void; } interface State { isDisabled: boolean; + closeHandler: CloseHandler; } export class TopNavMenuItem extends Component { + constructor(props: Props) { + super(props); + } + private isDisabled(): boolean { const menuData = this.props.data; const val = @@ -53,7 +48,7 @@ export class TopNavMenuItem extends Component { private handleClick() { const menuData = this.props.data; - menuData.run(null, null, arguments[0].currentTarget); + this.props.onClick(menuData.key, menuData.run, arguments[0].currentTarget); } public render() { diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/legacy/ui/public/styles/_legacy/_base.scss index d719cdf738835..17aa3989eda01 100644 --- a/src/legacy/ui/public/styles/_legacy/_base.scss +++ b/src/legacy/ui/public/styles/_legacy/_base.scss @@ -61,6 +61,14 @@ input[type="checkbox"], > kbn-top-nav, kbn-top-nav2 { z-index: 5; + + > div { + padding: $euiSizeS 0px; + } + } + + .globalQueryBar { + padding: 0px $euiSizeS $euiSizeS $euiSizeS; } > nav, diff --git a/x-pack/legacy/plugins/maps/public/angular/map.html b/x-pack/legacy/plugins/maps/public/angular/map.html index c95117d906d16..36e2965d7a174 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map.html +++ b/x-pack/legacy/plugins/maps/public/angular/map.html @@ -1,30 +1,27 @@
- -
- -
- + + -
-
-
-
+
+ +
+
- +
diff --git a/x-pack/legacy/plugins/maps/public/index.js b/x-pack/legacy/plugins/maps/public/index.js index 85d519dddd6c4..b53ad87afcd61 100644 --- a/x-pack/legacy/plugins/maps/public/index.js +++ b/x-pack/legacy/plugins/maps/public/index.js @@ -21,7 +21,6 @@ import { capabilities } from 'ui/capabilities'; import chrome from 'ui/chrome'; import routes from 'ui/routes'; import 'ui/kbn_top_nav'; -import 'ui/angular-bootstrap'; // required for kbn-top-nav button tooltips import { uiModules } from 'ui/modules'; import { docTitle } from 'ui/doc_title'; import 'ui/autoload/styles'; diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html b/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html index 73befd0e149ad..edaedab362193 100644 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html +++ b/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html @@ -1,4 +1,4 @@ - +
From 929ed9c5da6b0e8bd0db36495d213a30bab3fcb1 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 2 Jul 2019 13:52:07 +0300 Subject: [PATCH 10/61] Fixed DevTools top nav toggle --- .../core_plugins/console/public/src/helpers/get_top_nav.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts b/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts index 4b9b598da8d4f..7668ab16bd3c1 100644 --- a/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts +++ b/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts @@ -36,7 +36,7 @@ export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) { defaultMessage: 'History', }), run: () => { - toggleHistory(); + $scope.$evalAsync(toggleHistory); }, testId: 'consoleHistoryButton', }, From 6adc5128916ea72df5f7846ab6cc3a4decbf528d Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 2 Jul 2019 14:08:39 +0300 Subject: [PATCH 11/61] Optional show-border --- src/legacy/core_plugins/console/public/index.html | 2 +- .../kibana_react/public/kbn_top_nav/top_nav_menu.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 13fd0857ffa98..6994ebb073308 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -1,4 +1,4 @@ - +
diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index cf72cdd2e92d5..5f930981260a0 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -26,6 +26,7 @@ import { TopNavMenuItem } from './top_nav_menu_item'; interface Props { config: TopNavMenuData[]; name: string; + showBorder?: boolean; searchBarOptions?: any; activeItem: string; } @@ -39,6 +40,11 @@ export function TopNavMenu(props: Props) { )); } + function getBorder() { + if (!props.showBorder) return; + return ; + } + function menuItemClickHandler(key: string, action: TopNavMenuAction, target?: any) { action(null, null, target); } @@ -48,7 +54,7 @@ export function TopNavMenu(props: Props) { {renderItems()} - + {getBorder()}
); } From 0f2445791e46ce67ff5bd9d6d57ac40a86579a90 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 2 Jul 2019 14:15:06 +0300 Subject: [PATCH 12/61] timelion menu works --- .../core_plugins/timelion/public/app.js | 45 ++++++++++--------- .../core_plugins/timelion/public/index.html | 33 +++++++------- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/legacy/core_plugins/timelion/public/app.js b/src/legacy/core_plugins/timelion/public/app.js index 547934788147d..ffe68c41ff66a 100644 --- a/src/legacy/core_plugins/timelion/public/app.js +++ b/src/legacy/core_plugins/timelion/public/app.js @@ -146,7 +146,7 @@ app.controller('timelion', function ( $timeout(function () { if (config.get('timelion:showTutorial', true)) { - $scope.kbnTopNav.open('help'); + $scope.toggleMenu('showHelp'); } }, 0); @@ -184,7 +184,9 @@ app.controller('timelion', function ( description: i18n.translate('timelion.topNavMenu.addChartButtonAriaLabel', { defaultMessage: 'Add a chart', }), - run: function () { $scope.newCell(); }, + run: function () { + $scope.$evalAsync(() => $scope.newCell()); + }, testId: 'timelionAddChartButton', }; @@ -197,9 +199,7 @@ app.controller('timelion', function ( defaultMessage: 'Save Sheet', }), run: () => { - const curState = $scope.menus.showSave; - $scope.closeMenus(); - $scope.menus.showSave = !curState; + $scope.$evalAsync(() => $scope.toggleMenu('showSave')); }, testId: 'timelionSaveButton', }; @@ -241,12 +241,15 @@ app.controller('timelion', function ( }), }; - confirmModal( - i18n.translate('timelion.topNavMenu.delete.modal.warningText', { - defaultMessage: `You can't recover deleted sheets.`, - }), - confirmModalOptions - ); + $scope.$evalAsync(() => { + confirmModal( + i18n.translate('timelion.topNavMenu.delete.modal.warningText', { + defaultMessage: `You can't recover deleted sheets.`, + }), + confirmModalOptions + ); + }); + }, testId: 'timelionDeleteButton', }; @@ -260,9 +263,7 @@ app.controller('timelion', function ( defaultMessage: 'Open Sheet', }), run: () => { - const curState = $scope.menus.showLoad; - $scope.closeMenus(); - $scope.menus.showLoad = !curState; + $scope.$evalAsync(() => $scope.toggleMenu('showLoad')); }, testId: 'timelionOpenButton', }; @@ -276,9 +277,7 @@ app.controller('timelion', function ( defaultMessage: 'Options', }), run: () => { - const curState = $scope.menus.showOptions; - $scope.closeMenus(); - $scope.menus.showOptions = !curState; + $scope.$evalAsync(() => $scope.toggleMenu('showOptions')); }, testId: 'timelionOptionsButton', }; @@ -292,9 +291,7 @@ app.controller('timelion', function ( defaultMessage: 'Help', }), run: () => { - const curState = $scope.menus.showHelp; - $scope.closeMenus(); - $scope.menus.showHelp = !curState; + $scope.$evalAsync(() => $scope.toggleMenu('showHelp')); }, testId: 'timelionDocsButton', }; @@ -321,7 +318,7 @@ app.controller('timelion', function ( dontShowHelp: function () { config.set('timelion:showTutorial', false); $scope.setPage(0); - $scope.kbnTopNav.close('help'); + $scope.closeMenus(); } }; @@ -332,6 +329,12 @@ app.controller('timelion', function ( showOptions: false, }; + $scope.toggleMenu = (menuName) => { + const curState = $scope.menus[menuName]; + $scope.closeMenus(); + $scope.menus[menuName] = !curState; + }; + $scope.closeMenus = () => { _.forOwn($scope.menus, function (value, key) { $scope.menus[key] = false; diff --git a/src/legacy/core_plugins/timelion/public/index.html b/src/legacy/core_plugins/timelion/public/index.html index 41fa46b975bec..27bacfad9f199 100644 --- a/src/legacy/core_plugins/timelion/public/index.html +++ b/src/legacy/core_plugins/timelion/public/index.html @@ -1,23 +1,20 @@
+ + + + + - - -
-
- - - - - -
-
- + + + +
From f6906b76ba7c020afa9cd36e68cdba94beeaca29 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 3 Jul 2019 13:16:30 +0300 Subject: [PATCH 13/61] Improve filter sorting logic to be more stable --- .../public/filter/filter_manager/filter_manager.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/legacy/core_plugins/data/public/filter/filter_manager/filter_manager.ts b/src/legacy/core_plugins/data/public/filter/filter_manager/filter_manager.ts index dfa7bc9c216bc..89e340314f18f 100644 --- a/src/legacy/core_plugins/data/public/filter/filter_manager/filter_manager.ts +++ b/src/legacy/core_plugins/data/public/filter/filter_manager/filter_manager.ts @@ -86,9 +86,18 @@ export class FilterManager { // global filters should always be first newFilters.sort( (a: Filter, b: Filter): number => { - if (a.$state && a.$state.store === FilterStateStore.GLOBAL_STATE) { + // TypeScript, this shouldn't happen + if (!a.$state || !b.$state) return 0; + + if ( + a.$state.store === FilterStateStore.GLOBAL_STATE && + b.$state.store !== FilterStateStore.GLOBAL_STATE + ) { return -1; - } else if (b.$state && b.$state.store === FilterStateStore.GLOBAL_STATE) { + } else if ( + a.$state.store !== FilterStateStore.GLOBAL_STATE && + b.$state.store === FilterStateStore.GLOBAL_STATE + ) { return 1; } else { return 0; From 20a992213ea0e3895ce4711bfb129104b16e8567 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 3 Jul 2019 15:34:23 +0300 Subject: [PATCH 14/61] Support showing filter bar as part of top nav --- src/legacy/core_plugins/data/public/index.ts | 2 +- .../core_plugins/data/public/search/index.tsx | 2 +- .../search/search_bar/components/index.tsx | 2 +- .../search_bar/components/search_bar.tsx | 4 +- .../data/public/search/search_bar/index.tsx | 2 +- .../public/dashboard/dashboard_app.html | 40 ++++++++-------- .../public/kbn_top_nav/top_nav_menu.tsx | 47 +++++++++++++++---- .../ui/public/kbn_top_nav/kbn_top_nav2.js | 31 ++++++++++-- 8 files changed, 93 insertions(+), 37 deletions(-) diff --git a/src/legacy/core_plugins/data/public/index.ts b/src/legacy/core_plugins/data/public/index.ts index c16ed374da358..adfcc2f03c25a 100644 --- a/src/legacy/core_plugins/data/public/index.ts +++ b/src/legacy/core_plugins/data/public/index.ts @@ -90,7 +90,7 @@ export { ExpressionRenderer, ExpressionRendererProps, ExpressionRunner } from '. /** @public types */ export { IndexPattern, StaticIndexPattern, StaticIndexPatternField, Field } from './index_patterns'; export { Query } from './query'; -export { SearchBar } from './search'; +export { SearchBar, SearchBarProps } from './search'; export { FilterManager, FilterStateManager, uniqFilters } from './filter/filter_manager'; /** @public static code */ diff --git a/src/legacy/core_plugins/data/public/search/index.tsx b/src/legacy/core_plugins/data/public/search/index.tsx index eeeff59f26283..6a9687ba7e325 100644 --- a/src/legacy/core_plugins/data/public/search/index.tsx +++ b/src/legacy/core_plugins/data/public/search/index.tsx @@ -19,4 +19,4 @@ export { SearchService, SearchSetup } from './search_service'; -export { SearchBar } from './search_bar'; +export * from './search_bar'; diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx index 131c6059934a4..24ffa939a746e 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/index.tsx @@ -17,4 +17,4 @@ * under the License. */ -export { SearchBar } from './search_bar'; +export * from './search_bar'; diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx index 26a641b7bc153..b65bea1689037 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx @@ -39,7 +39,7 @@ interface DateRange { * NgReact lib requires that changes to the props need to be made in the directive config as well * See [search_bar\directive\index.js] file */ -interface Props { +export interface SearchBarProps { query: Query; onQuerySubmit: (payload: { dateRange: DateRange; query: Query }) => void; disableAutoFocus?: boolean; @@ -65,7 +65,7 @@ interface State { isFiltersVisible: boolean; } -class SearchBarUI extends Component { +class SearchBarUI extends Component { public static defaultProps = { showQueryBar: true, showFilterBar: true, diff --git a/src/legacy/core_plugins/data/public/search/search_bar/index.tsx b/src/legacy/core_plugins/data/public/search/search_bar/index.tsx index b181b43e0e527..357e28d181ae3 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/index.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/index.tsx @@ -17,7 +17,7 @@ * under the License. */ -export { SearchBar } from './components'; +export * from './components'; // @ts-ignore export { setupDirective } from './directive'; diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html index 9b8e7177f185c..aac55e2eb63ff 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -3,28 +3,28 @@ ng-class="{'dshAppContainer--withMargins': model.useMargins}" > - + -
- -
- - - - - +
+
+ {{ ::'kbn.visualize.linkedToSearchInfoText' | i18n: { defaultMessage: 'Linked to Saved Search' } }} + -
- {{ ::'kbn.visualize.linkedToSearchInfoText' | i18n: { defaultMessage: 'Linked to Saved Search' } }} - - {{ savedVis.savedSearch.title }} - -   - - - -
- -
- -
-
+ {{ savedVis.savedSearch.title }} + +   + + + +
+
+ + + + - + diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 73cbc5c2be551..fab59ce755080 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -42,12 +42,18 @@ module.directive('kbnTopNav2', (reactDirective) => { ['indexPatterns', { watchDepth: 'collection' }], ['filters', { watchDepth: 'collection' }], + // All modifiers default to true. + // Set to false to hide subcomponents. 'showSearchBar', - 'appName', - 'screenTitle', 'showFilterBar', 'showQueryBar', + 'showQueryInput', 'showDatePicker', + + 'showSearchBarInline', // temp solution for timelion app + + 'appName', + 'screenTitle', 'dateRangeFrom', 'dateRangeTo', 'isRefreshPaused', diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/legacy/ui/public/styles/_legacy/_base.scss index 17aa3989eda01..2f61f088b14c5 100644 --- a/src/legacy/ui/public/styles/_legacy/_base.scss +++ b/src/legacy/ui/public/styles/_legacy/_base.scss @@ -62,8 +62,8 @@ input[type="checkbox"], > kbn-top-nav, kbn-top-nav2 { z-index: 5; - > div { - padding: $euiSizeS 0px; + .topNavMenu { + padding: $euiSizeS 0px $euiSizeXS; } } diff --git a/x-pack/legacy/plugins/maps/public/angular/map.html b/x-pack/legacy/plugins/maps/public/angular/map.html index ce41a13b788c5..6d3b8438046e8 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map.html +++ b/x-pack/legacy/plugins/maps/public/angular/map.html @@ -6,11 +6,11 @@ config="topNavMenu" show-search-bar="chrome.getVisible()" show-filter-bar="false" + show-date-picker="showDatePicker" query="query" app-name="'maps'" on-query-submit="updateQueryAndDispatch" index-patterns="indexPatterns" - show-date-picker="showDatePicker" date-range-from="time.from" date-range-to="time.to" is-refresh-paused="refreshConfig.isPaused" From 3117fce7b8f6d93ece2804e24a65feff056b7d36 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 4 Jul 2019 15:36:11 +0300 Subject: [PATCH 18/61] Reverted change in ML, removed unused css --- src/legacy/core_plugins/kibana_react/index.ts | 1 - src/legacy/core_plugins/kibana_react/public/index.scss | 0 .../legacy/plugins/ml/public/components/nav_menu/nav_menu.html | 2 +- 3 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 src/legacy/core_plugins/kibana_react/public/index.scss diff --git a/src/legacy/core_plugins/kibana_react/index.ts b/src/legacy/core_plugins/kibana_react/index.ts index eb936b94c37ef..80049ef937c06 100644 --- a/src/legacy/core_plugins/kibana_react/index.ts +++ b/src/legacy/core_plugins/kibana_react/index.ts @@ -34,7 +34,6 @@ export default function DataPlugin(kibana: any) { init: (server: Legacy.Server) => ({}), uiExports: { injectDefaultVars: () => ({}), - styleSheetPaths: resolve(__dirname, 'public/index.scss'), }, }; diff --git a/src/legacy/core_plugins/kibana_react/public/index.scss b/src/legacy/core_plugins/kibana_react/public/index.scss deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html b/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html index edaedab362193..73befd0e149ad 100644 --- a/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html +++ b/x-pack/legacy/plugins/ml/public/components/nav_menu/nav_menu.html @@ -1,4 +1,4 @@ - +
From e749bd4761a2fc7c97145f834557a2a856ef2d0c Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 4 Jul 2019 16:42:55 +0300 Subject: [PATCH 19/61] Added data test subj to top nav menu items --- .../kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx index 65e870e3986cc..2c37fa1cfe0d6 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx @@ -58,6 +58,7 @@ export class TopNavMenuItem extends Component { size="xs" isDisabled={this.isDisabled()} onClick={this.handleClick.bind(this)} + data-test-subj={menuData.testId} > {_.capitalize(menuData.label || menuData.key)} From fa5332d8b81d9928be876730b4c0669ba0306e30 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 4 Jul 2019 17:57:57 +0300 Subject: [PATCH 20/61] Watch config by value --- src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index fab59ce755080..2d59d0688b708 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -29,7 +29,7 @@ module.directive('kbnTopNav2', (reactDirective) => { wrapInI18nContext(TopNavMenu), [ ['name', { watchDepth: 'reference' }], - ['config', { watchDepth: 'reference' }], + ['config', { watchDepth: 'value' }], ['query', { watchDepth: 'reference' }], ['store', { watchDepth: 'reference' }], From 833d49fad3dc9081540b4828c8e7bbc9d07633d2 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sat, 6 Jul 2019 00:35:09 +0300 Subject: [PATCH 21/61] Some directive magic to make sure that disabledButtons functions are watched correctly. --- .../ui/public/kbn_top_nav/kbn_top_nav2.js | 41 ++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 2d59d0688b708..12a3319dcc07e 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -24,12 +24,51 @@ import { TopNavMenu } from '../../../core_plugins/kibana_react/public'; const module = uiModules.get('kibana'); -module.directive('kbnTopNav2', (reactDirective) => { +module.directive('kbnTopNav2', () => { + return { + restrict: 'E', + template: '', + compile: (elem) => { + const child = document.createElement('kbn-top-nav2-helper'); + + // Copy attributes to the child directive + for (const attr of elem[0].attributes) { + child.setAttribute(attr.name, attr.value); + } + + // Add a special attribute that will change every time that one + // of the config array's disableButton function return value changes. + child.setAttribute('disabled-buttons', 'disabledButtons'); + elem.append(child); + + const linkFn = ($scope, _, $attr) => { + // Watch the disableButton functions + $scope.$watch(() => { + const config = $scope.$eval($attr.config); + return config.map((item) => { + if (typeof item.disableButton === 'function') { + return item.disableButton(); + } + return item.disableButton; + }); + }, (newVal) => { + $scope.disabledButtons = newVal; + }, + true); + }; + + return linkFn; + } + }; +}); + +module.directive('kbnTopNav2Helper', (reactDirective) => { return reactDirective( wrapInI18nContext(TopNavMenu), [ ['name', { watchDepth: 'reference' }], ['config', { watchDepth: 'value' }], + ['disabledButtons', { watchDepth: 'reference' }], ['query', { watchDepth: 'reference' }], ['store', { watchDepth: 'reference' }], From 8fee73ac3edae1aed8cfef53b5f9e2b5da9a8d77 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 12:36:35 +0300 Subject: [PATCH 22/61] Fix missing controls from new top nav in some visualizations --- .../public/visualize/editor/editor.html | 6 ++++-- .../kibana/public/visualize/editor/editor.js | 21 ++++++++++++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html index db6e04eea5289..67c414ead39a3 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html @@ -29,9 +29,11 @@ name="visualize" config="topNavMenu" show-search-bar="true" + show-search-bar-inline="showTimePickerInline()" show-query-bar="showQueryBar()" - show-filter-bar="vis.type.options.showFilterBar && chrome.getVisible()" - show-date-picker="enableQueryBarTimeRangeSelector" + show-query-input="showQueryInput()" + show-date-picker="showQueryBarTimePicker()" + show-filter-bar="showFilterBar() && chrome.getVisible()" show-auto-refresh-only="showAutoRefreshOnlyInQueryBar" query="state.query" screen-title="state.vis.title" diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js index 8432268a4ee94..9ddad9d605a8f 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js @@ -351,10 +351,28 @@ function VisEditor( $scope.isAddToDashMode = () => addToDashMode; + $scope.showTimePickerInline = () => { + return $scope.showQueryBarTimePicker() && + !$scope.showQueryInput() && + !$scope.showFilterBar(); + }; + + $scope.showFilterBar = () => { + return vis.type.options.showFilterBar; + }; + $scope.showQueryBar = () => { + return $scope.showQueryInput() || vis.type.options.showTimePicker; + }; + + $scope.showQueryInput = () => { return vis.type.requiresSearch && vis.type.options.showQueryBar; }; + $scope.showQueryBarTimePicker = () => { + return vis.type.options.showTimePicker; + }; + $scope.timeRange = timefilter.getTime(); $scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode'); @@ -380,19 +398,16 @@ function VisEditor( if (showQueryBar) { timefilter.disableTimeRangeSelector(); timefilter.disableAutoRefreshSelector(); - $scope.enableQueryBarTimeRangeSelector = true; $scope.showAutoRefreshOnlyInQueryBar = !showTimeFilter; } else if (showTimeFilter) { timefilter.enableTimeRangeSelector(); timefilter.enableAutoRefreshSelector(); - $scope.enableQueryBarTimeRangeSelector = false; $scope.showAutoRefreshOnlyInQueryBar = false; } else { timefilter.disableTimeRangeSelector(); timefilter.enableAutoRefreshSelector(); - $scope.enableQueryBarTimeRangeSelector = false; $scope.showAutoRefreshOnlyInQueryBar = false; } }); From d368c9485bcfbad562c5ff6d481bca28667622f7 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 13:13:52 +0300 Subject: [PATCH 23/61] showAutoRefreshOnly in input controls visualization --- .../query/query_bar/components/query_bar.tsx | 8 +++- .../public/visualize/editor/editor.html | 4 +- .../kibana/public/visualize/editor/editor.js | 39 ++++++------------- 3 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index b350a23a3fb4b..406a857a61029 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -280,6 +280,10 @@ export class QueryBarUI extends Component { ); } + private shouldRenderDatePicker() { + return this.props.showDatePicker || this.props.showAutoRefreshOnly; + } + private renderUpdateButton() { const button = this.props.customSubmitButton ? ( React.cloneElement(this.props.customSubmitButton, { onClick: this.onClickSubmitButton }) @@ -292,7 +296,7 @@ export class QueryBarUI extends Component { /> ); - if (!this.props.showDatePicker) { + if (!this.shouldRenderDatePicker()) { return button; } @@ -305,7 +309,7 @@ export class QueryBarUI extends Component { } private renderDatePicker() { - if (!this.props.showDatePicker) { + if (!this.shouldRenderDatePicker()) { return null; } diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html index 67c414ead39a3..7296bac83fde4 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html @@ -29,12 +29,12 @@ name="visualize" config="topNavMenu" show-search-bar="true" - show-search-bar-inline="showTimePickerInline()" + show-search-bar-inline="showSearchBarInline()" show-query-bar="showQueryBar()" show-query-input="showQueryInput()" show-date-picker="showQueryBarTimePicker()" show-filter-bar="showFilterBar() && chrome.getVisible()" - show-auto-refresh-only="showAutoRefreshOnlyInQueryBar" + show-auto-refresh-only="showAutoRefreshOnly()" query="state.query" screen-title="state.vis.title" on-query-submit="updateQueryAndFetch" diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js index 9ddad9d605a8f..18c8e43f9df66 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js @@ -351,8 +351,10 @@ function VisEditor( $scope.isAddToDashMode = () => addToDashMode; - $scope.showTimePickerInline = () => { - return $scope.showQueryBarTimePicker() && + $scope.showSearchBarInline = () => { + // Show inline with menu, if it's only the timepicker \ autorefresh component + return ($scope.showQueryBarTimePicker() || + $scope.showAutoRefreshOnly()) && !$scope.showQueryInput() && !$scope.showFilterBar(); }; @@ -362,7 +364,10 @@ function VisEditor( }; $scope.showQueryBar = () => { - return $scope.showQueryInput() || vis.type.options.showTimePicker; + // Show querybar if input or timepicker are required. + return $scope.showQueryInput() || + $scope.showQueryBarTimePicker() || + $scope.showAutoRefreshOnly(); }; $scope.showQueryInput = () => { @@ -373,6 +378,10 @@ function VisEditor( return vis.type.options.showTimePicker; }; + $scope.showAutoRefreshOnly = () => { + return !$scope.showQueryBarTimePicker(); + }; + $scope.timeRange = timefilter.getTime(); $scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode'); @@ -388,30 +397,6 @@ function VisEditor( $state.replace(); - $scope.$watchMulti([ - 'searchSource.getField("index")', - 'vis.type.options.showTimePicker', - $scope.showQueryBar, - ], function ([index, requiresTimePicker, showQueryBar]) { - const showTimeFilter = Boolean((!index || index.timeFieldName) && requiresTimePicker); - - if (showQueryBar) { - timefilter.disableTimeRangeSelector(); - timefilter.disableAutoRefreshSelector(); - $scope.showAutoRefreshOnlyInQueryBar = !showTimeFilter; - } - else if (showTimeFilter) { - timefilter.enableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); - $scope.showAutoRefreshOnlyInQueryBar = false; - } - else { - timefilter.disableTimeRangeSelector(); - timefilter.enableAutoRefreshSelector(); - $scope.showAutoRefreshOnlyInQueryBar = false; - } - }); - const updateTimeRange = () => { $scope.timeRange = timefilter.getTime(); // In case we are running in embedded mode (i.e. we used the visualize loader to embed) From 000eeb29a5c1be19926f3e0566f0e1aae52764a1 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 13:30:22 +0300 Subject: [PATCH 24/61] Fixed inspector disabled test --- test/functional/services/inspector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/services/inspector.js b/test/functional/services/inspector.js index 393af9f7d5897..67d3c1113103b 100644 --- a/test/functional/services/inspector.js +++ b/test/functional/services/inspector.js @@ -30,7 +30,7 @@ export function InspectorProvider({ getService }) { return new class Inspector { async getIsEnabled() { - const ariaDisabled = await testSubjects.getAttribute('openInspectorButton', 'aria-disabled'); + const ariaDisabled = await testSubjects.getAttribute('openInspectorButton', 'disabled'); return ariaDisabled !== 'true'; } From efe00bf3ebe6fd07f83930970909e250c5321d37 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 15:54:42 +0300 Subject: [PATCH 25/61] Fix dashboard action links rewrite top nav menu item to functional style --- .../dashboard/dashboard_app_controller.tsx | 6 ++- .../public/kbn_top_nav/top_nav_menu_item.tsx | 46 +++++++------------ 2 files changed, 21 insertions(+), 31 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx index 557c780f6192e..3d3ff8ed3aa0c 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx @@ -423,11 +423,13 @@ export class DashboardAppController { $scope.showAddPanel = () => { dashboardStateManager.setFullScreenMode(false); - $scope.kbnTopNav.click(TopNavIds.ADD); + // Temp solution for triggering menu click. + navActions[TopNavIds.ADD](null, null, null); }; $scope.enterEditMode = () => { dashboardStateManager.setFullScreenMode(false); - $scope.kbnTopNav.click('edit'); + // Temp solution for triggering menu click. + navActions[TopNavIds.ENTER_EDIT_MODE](null, null, null); }; const navActions: { [key: string]: NavAction; diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx index 2c37fa1cfe0d6..db2a06c2f44ab 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx @@ -17,28 +17,20 @@ * under the License. */ -import React, { Component } from 'react'; +import React, { MouseEvent } from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; -import { TopNavMenuData, CloseHandler, TopNavMenuAction } from './top_nav_menu_data'; +import { TopNavMenuData, TopNavMenuAction } from './top_nav_menu_data'; interface Props { data: TopNavMenuData; onClick: (key: string, action: TopNavMenuAction, target?: any) => void; } -interface State { - isDisabled: boolean; - closeHandler: CloseHandler; -} - -export class TopNavMenuItem extends Component { - constructor(props: Props) { - super(props); - } +export function TopNavMenuItem(props: Props) { + const menuData = props.data; - private isDisabled(): boolean { - const menuData = this.props.data; + function isDisabled(): boolean { const val = typeof menuData.disableButton === 'function' ? menuData.disableButton() @@ -46,22 +38,18 @@ export class TopNavMenuItem extends Component { return val || false; } - private handleClick() { - const menuData = this.props.data; - this.props.onClick(menuData.key, menuData.run, arguments[0].currentTarget); + function handleClick(e: MouseEvent) { + props.onClick(menuData.key, menuData.run, e.currentTarget); } - public render() { - const menuData = this.props.data; - return ( - - {_.capitalize(menuData.label || menuData.key)} - - ); - } + return ( + + {_.capitalize(menuData.label || menuData.key)} + + ); } From 97496c66dcf77bce46a7dc1913ed6d3c0f77431c Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 16:05:57 +0300 Subject: [PATCH 26/61] snapshots --- .../__snapshots__/query_bar.test.tsx.snap | 50 ------------------- 1 file changed, 50 deletions(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap index bc0b15ca88e3e..c2c1278ca06ed 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap @@ -6,56 +6,6 @@ exports[`QueryBar Should render the given query 1`] = ` gutterSize="s" responsive={false} > - - - From d52e5817cd56b6549331e867a4e5120f179e38da Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 17:17:51 +0300 Subject: [PATCH 27/61] Fixed maps filter bar --- .../data/public/query/query_bar/components/query_bar.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index 406a857a61029..e4eaaec524122 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -80,6 +80,11 @@ interface State { } export class QueryBarUI extends Component { + public static defaultProps = { + showQueryInput: true, + showDatePicker: true, + }; + public static getDerivedStateFromProps(nextProps: Props, prevState: State) { if (isEqual(prevState.currentProps, nextProps)) { return null; From 8c06d3936700963285abd4e49ca6c4f1155cc757 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Sun, 7 Jul 2019 17:19:34 +0300 Subject: [PATCH 28/61] Remvoed comment --- src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 12a3319dcc07e..98337ec1510bf 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -89,7 +89,7 @@ module.directive('kbnTopNav2Helper', (reactDirective) => { 'showQueryInput', 'showDatePicker', - 'showSearchBarInline', // temp solution for timelion app + 'showSearchBarInline', 'appName', 'screenTitle', From 5f71b4e3d783b93dd80f1fc4ba0db7dc1dd8c986 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 8 Jul 2019 11:09:23 +0300 Subject: [PATCH 29/61] Update Query Bar defaults --- .../__snapshots__/query_bar.test.tsx.snap | 50 +++++++++++++++++++ .../query/query_bar/components/query_bar.tsx | 3 +- .../search_bar/components/search_bar.tsx | 1 + 3 files changed, 53 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap index c2c1278ca06ed..bc0b15ca88e3e 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap @@ -6,6 +6,56 @@ exports[`QueryBar Should render the given query 1`] = ` gutterSize="s" responsive={false} > + + + diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index e4eaaec524122..6e06133dc6ca0 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -82,7 +82,8 @@ interface State { export class QueryBarUI extends Component { public static defaultProps = { showQueryInput: true, - showDatePicker: true, + showDatePicker: false, + showAutoRefreshOnly: false, }; public static getDerivedStateFromProps(nextProps: Props, prevState: State) { diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx index 7353383a6d23a..1eb6010f4798c 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx @@ -75,6 +75,7 @@ class SearchBarUI extends Component { showQueryBar: true, showFilterBar: true, showDatePicker: true, + showAutoRefreshOnly: false, }; public filterBarRef: Element | null = null; From 86dbbbcc7ca856687e989698213adb0817be806a Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 8 Jul 2019 12:04:58 +0300 Subject: [PATCH 30/61] Top nav menu item tests --- .../top_nav_menu_item.test.tsx.snap | 54 +++++++++ .../public/kbn_top_nav/top_nav_menu_data.tsx | 8 +- .../kbn_top_nav/top_nav_menu_item.test.tsx | 104 ++++++++++++++++++ .../public/kbn_top_nav/top_nav_menu_item.tsx | 2 + 4 files changed, 161 insertions(+), 7 deletions(-) create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/__snapshots__/top_nav_menu_item.test.tsx.snap create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.test.tsx diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/__snapshots__/top_nav_menu_item.test.tsx.snap b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/__snapshots__/top_nav_menu_item.test.tsx.snap new file mode 100644 index 0000000000000..b04054dcaff16 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/__snapshots__/top_nav_menu_item.test.tsx.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TopNavMenu Should render and click an item 1`] = ` + + Test + +`; + +exports[`TopNavMenu Should render disabled item and it shouldnt be clickable 1`] = ` + + Test + +`; + +exports[`TopNavMenu Should render item with all attributes 1`] = ` + + Test + +`; + +exports[`TopNavMenu Should render item with disable function and it shouldnt be clickable 1`] = ` + + Test + +`; diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx index 674eb269e3abe..3fbcfdf037699 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx @@ -17,13 +17,7 @@ * under the License. */ -export type CloseHandler = (() => void) | undefined; - -export type TopNavMenuAction = ( - menuItem: any, - navController: any, - anchorElement: any -) => CloseHandler; +export type TopNavMenuAction = (menuItem: any, navController: any, anchorElement: any) => void; export interface TopNavMenuData { key: string; diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.test.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.test.tsx new file mode 100644 index 0000000000000..6f739adb41223 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.test.tsx @@ -0,0 +1,104 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { TopNavMenuItem } from './top_nav_menu_item'; +import { TopNavMenuData } from './top_nav_menu_data'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; + +describe('TopNavMenu', () => { + beforeEach(() => {}); + + it('Should render and click an item', () => { + const data: TopNavMenuData = { + key: 'test', + label: 'test', + run: jest.fn(), + }; + + const clickHandler = jest.fn(); + + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + + const event = { currentTarget: { value: 'a' } }; + component.simulate('click', event); + expect(clickHandler).toBeCalledTimes(1); + expect(clickHandler).toHaveBeenCalledWith(data.key, data.run, event.currentTarget); + + component.simulate('click', event); + expect(clickHandler).toBeCalledTimes(2); + }); + + it('Should render item with all attributes', () => { + const data: TopNavMenuData = { + key: 'test', + label: 'test', + description: 'description', + testId: 'test-class-name', + disableButton: false, + run: jest.fn(), + }; + + const clickHandler = jest.fn(); + + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + + const event = { currentTarget: { value: 'a' } }; + component.simulate('click', event); + expect(clickHandler).toHaveBeenCalled(); + }); + + it('Should render disabled item and it shouldnt be clickable', () => { + const data: TopNavMenuData = { + key: 'test', + label: 'test', + disableButton: true, + run: jest.fn(), + }; + + const clickHandler = jest.fn(); + + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + + const event = { currentTarget: { value: 'a' } }; + component.simulate('click', event); + expect(clickHandler).toHaveBeenCalledTimes(0); + }); + + it('Should render item with disable function and it shouldnt be clickable', () => { + const data: TopNavMenuData = { + key: 'test', + label: 'test', + disableButton: () => true, + run: jest.fn(), + }; + + const clickHandler = jest.fn(); + + const component = shallowWithIntl(); + expect(component).toMatchSnapshot(); + + const event = { currentTarget: { value: 'a' } }; + component.simulate('click', event); + expect(clickHandler).toHaveBeenCalledTimes(0); + }); +}); diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx index db2a06c2f44ab..245c1b7735b27 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx @@ -17,6 +17,7 @@ * under the License. */ +import _ from 'lodash'; import React, { MouseEvent } from 'react'; import { EuiButtonEmpty } from '@elastic/eui'; @@ -39,6 +40,7 @@ export function TopNavMenuItem(props: Props) { } function handleClick(e: MouseEvent) { + if (isDisabled()) return; props.onClick(menuData.key, menuData.run, e.currentTarget); } From e6260ea9bf896473dcefb463a9e438aba02ad808 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 8 Jul 2019 18:10:02 +0300 Subject: [PATCH 31/61] Moved storage instantiation to angular directive --- .../query/query_bar/components/query_bar.tsx | 2 +- .../search_bar/components/search_bar.tsx | 100 +++++++++--------- .../public/kbn_top_nav/top_nav_menu.tsx | 31 ++++-- .../ui/public/kbn_top_nav/kbn_top_nav2.js | 9 ++ 4 files changed, 82 insertions(+), 60 deletions(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index 6e06133dc6ca0..30bc6d99b7488 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -18,7 +18,6 @@ */ import { doesKueryExpressionHaveLuceneSyntaxError } from '@kbn/es-query'; -import { IndexPattern } from 'ui/index_patterns'; import classNames from 'classnames'; import _ from 'lodash'; @@ -37,6 +36,7 @@ import { documentationLinks } from 'ui/documentation_links'; import { Toast, toastNotifications } from 'ui/notify'; import chrome from 'ui/chrome'; import { PersistedLog } from 'ui/persisted_log'; +import { IndexPattern } from '../../../index_patterns'; import { QueryBarInput } from './query_bar_input'; import { getQueryLog } from '../lib/get_query_log'; diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx index 1eb6010f4798c..26c2b31eea0b7 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx @@ -41,16 +41,15 @@ interface DateRange { */ export interface SearchBarProps { appName: string; - screenTitle?: string; - store: Storage; intl: InjectedIntl; indexPatterns: IndexPattern[]; - disableAutoFocus?: boolean; // Query bar showQueryBar?: boolean; showQueryInput?: boolean; - query: Query; - onQuerySubmit: (payload: { dateRange: DateRange; query?: Query }) => void; + screenTitle?: string; + store?: Storage; + query?: Query; + onQuerySubmit?: (payload: { dateRange: DateRange; query?: Query }) => void; // Filter bar showFilterBar?: boolean; filters?: Filter[]; @@ -166,54 +165,59 @@ class SearchBarUI extends Component { 'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible, }); - return ( -
- {this.props.showQueryBar ? ( - - ) : ( - '' - )} - - {this.props.showFilterBar && this.props.filters ? ( + let queryBar; + if (this.props.showQueryBar && this.props.onQuerySubmit && this.props.store) { + queryBar = ( + + ); + } + + let filterBar; + if (this.props.showFilterBar && this.props.filters) { + filterBar = ( +
{ + this.filterBarWrapperRef = node; + }} + className={classes} + >
{ - this.filterBarWrapperRef = node; + this.filterBarRef = node; }} - className={classes} > -
{ - this.filterBarRef = node; - }} - > - -
+
- ) : ( - '' - )} +
+ ); + } + + return ( +
+ {queryBar} + {filterBar}
); } diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index 347271ebd067b..e460d0d167cee 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -19,27 +19,22 @@ import React from 'react'; -import { Storage } from 'ui/storage'; - import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { I18nProvider } from '@kbn/i18n/react'; import { TopNavMenuData, TopNavMenuAction } from './top_nav_menu_data'; import { TopNavMenuItem } from './top_nav_menu_item'; import { SearchBar, SearchBarProps } from '../../../../core_plugins/data/public'; -const localStorage = new Storage(window.localStorage); - -interface Props extends SearchBarProps { - config: TopNavMenuData[]; +type Props = Partial & { name: string; - showBorder?: boolean; - activeItem: string; - showSearchBar: boolean; + config?: TopNavMenuData[]; + showSearchBar?: boolean; showSearchBarInline?: boolean; -} +}; export function TopNavMenu(props: Props) { function renderItems() { + if (!props.config) return; return props.config.map((menuItem, i) => ( @@ -53,6 +48,19 @@ export function TopNavMenu(props: Props) { function renderSearchBar() { if (!props.showSearchBar) return; + + // Validate presense of all required fields + if ( + !props.appName || + !props.query || + !props.screenTitle || + !props.onQuerySubmit || + !props.indexPatterns || + !props.store + ) { + throw 'Missing attributes to initialize search bar'; + } + return ( ); } @@ -122,4 +130,5 @@ TopNavMenu.defaultProps = { showQueryInput: true, showDatePicker: true, showFilterBar: true, + screenTitle: '', }; diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 98337ec1510bf..5e3808e5b565c 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -21,6 +21,7 @@ import 'ngreact'; import { wrapInI18nContext } from 'ui/i18n'; import { uiModules } from 'ui/modules'; import { TopNavMenu } from '../../../core_plugins/kibana_react/public'; +import { Storage } from 'ui/storage'; const module = uiModules.get('kibana'); @@ -39,9 +40,17 @@ module.directive('kbnTopNav2', () => { // Add a special attribute that will change every time that one // of the config array's disableButton function return value changes. child.setAttribute('disabled-buttons', 'disabledButtons'); + + // Pass in storage + const localStorage = new Storage(window.localStorage); + child.setAttribute('storage', 'storage'); + + // Append helper directive elem.append(child); const linkFn = ($scope, _, $attr) => { + $scope.storage = localStorage; + // Watch the disableButton functions $scope.$watch(() => { const config = $scope.$eval($attr.config); From ddcdda0966b61c450c8461874bad53550e3d3e46 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 8 Jul 2019 18:42:42 +0300 Subject: [PATCH 32/61] SearchBar jest tests --- .../search_bar/components/search_bar.test.tsx | 206 ++++++++++++++++++ .../search_bar/components/search_bar.tsx | 2 +- 2 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx new file mode 100644 index 0000000000000..677c1fe98ee58 --- /dev/null +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx @@ -0,0 +1,206 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { mountWithIntl } from 'test_utils/enzyme_helpers'; +import { SearchBar } from './search_bar'; + +jest.mock('../../../filter/filter_bar', () => { + return { + FilterBar: () =>
, + }; +}); + +jest.mock('../../../query/query_bar', () => { + return { + QueryBar: () =>
, + }; +}); + +const noop = () => { + return; +}; + +const createMockWebStorage = () => ({ + clear: jest.fn(), + getItem: jest.fn(), + key: jest.fn(), + removeItem: jest.fn(), + setItem: jest.fn(), + length: 0, +}); + +const createMockStorage = () => ({ + store: createMockWebStorage(), + get: jest.fn(), + set: jest.fn(), + remove: jest.fn(), + clear: jest.fn(), +}); + +const mockIndexPattern = { + id: '1234', + title: 'logstash-*', + fields: [ + { + name: 'response', + type: 'number', + esTypes: ['integer'], + aggregatable: true, + filterable: true, + searchable: true, + }, + ], +}; + +const kqlQuery = { + query: 'response:200', + language: 'kuery', +}; + +describe('SearchBar', () => { + const SEARCH_BAR_ROOT = '.globalQueryBar'; + const FILTER_BAR = '.filterBar'; + const QUERY_BAR = '.queryBar'; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('Should render an empty search bar', () => { + const component = mountWithIntl( + + ); + + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(0); + expect(component.find(QUERY_BAR).length).toBe(0); + }); + + it('Should render an empty search bar, if options are not provided', () => { + const component = mountWithIntl( + + ); + + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(0); + expect(component.find(QUERY_BAR).length).toBe(0); + }); + + it('Should render filter bar, when required fields are probided', () => { + const component = mountWithIntl( + + ); + + expect(component).toMatchSnapshot(); + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(1); + expect(component.find(QUERY_BAR).length).toBe(0); + }); + + it('Should NOT render filter bar, if disabled', () => { + const component = mountWithIntl( + + ); + + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(0); + expect(component.find(QUERY_BAR).length).toBe(0); + }); + + it('Should render query bar, when required fields are provided', () => { + const component = mountWithIntl( + + ); + + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(0); + expect(component.find(QUERY_BAR).length).toBe(1); + }); + + it('Should NOT render query bar, if disabled', () => { + const component = mountWithIntl( + + ); + + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(0); + expect(component.find(QUERY_BAR).length).toBe(0); + }); + + it('Should render query bar and filter bar', () => { + const component = mountWithIntl( + + ); + + expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); + expect(component.find(FILTER_BAR).length).toBe(1); + expect(component.find(QUERY_BAR).length).toBe(1); + }); +}); diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx index 26c2b31eea0b7..533a96e652e21 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx @@ -24,9 +24,9 @@ import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import classNames from 'classnames'; import React, { Component } from 'react'; import ResizeObserver from 'resize-observer-polyfill'; -import { IndexPattern } from 'ui/index_patterns'; import { Storage } from 'ui/storage'; +import { IndexPattern } from '../../../index_patterns'; import { Query, QueryBar } from '../../../query/query_bar'; import { FilterBar } from '../../../filter/filter_bar'; From 9a68d7a2c5f1203876acf091538899e140520ea6 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 8 Jul 2019 19:36:28 +0300 Subject: [PATCH 33/61] Query bar additional tests --- .../query_bar/components/query_bar.test.tsx | 104 ++++++++++++++++++ .../query/query_bar/components/query_bar.tsx | 4 +- .../components/query_bar_input.test.mocks.ts | 10 ++ 3 files changed, 117 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx index 2be00deb16d9e..777af7c6f4ba8 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx @@ -66,6 +66,8 @@ const mockIndexPattern = { }; describe('QueryBar', () => { + const QUERY_BAR_SELECTOR = 'InjectIntl(QueryBarInputUI)'; + const TIMEPICKER_SELECTOR = 'EuiSuperDatePicker'; beforeEach(() => { jest.clearAllMocks(); }); @@ -102,4 +104,106 @@ describe('QueryBar', () => { expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery'); }); + + it('Should render empty', () => { + const component = shallowWithIntl( + + ); + + expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + }); + + it('Should render query input bar', () => { + const component = shallowWithIntl( + + ); + + expect(component.find(QUERY_BAR_SELECTOR).length).toBe(1); + }); + + it('Should NOT render query input bar if disabled', () => { + const component = shallowWithIntl( + + ); + + expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + }); + + it('Should NOT render timepicker, if options not provided', () => { + const component = shallowWithIntl( + + ); + + expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0); + }); + + it('Should NOT render timepicker, if options are provided, but showDatePicker is not specified', () => { + const component = shallowWithIntl( + + ); + + expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0); + }); + + it('Should render timepicker', () => { + const component = shallowWithIntl( + + ); + + expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1); + }); }); diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index 30bc6d99b7488..eee8e30cd4941 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -287,7 +287,9 @@ export class QueryBarUI extends Component { } private shouldRenderDatePicker() { - return this.props.showDatePicker || this.props.showAutoRefreshOnly; + return ( + (this.props.showDatePicker && this.props.dateRangeFrom) || this.props.showAutoRefreshOnly + ); } private renderUpdateButton() { diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts index 30736e9fd5a5e..b2f308127b0e1 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.test.mocks.ts @@ -42,6 +42,16 @@ const mockChromeFactory = jest.fn(() => { return { get: (key: string) => { switch (key) { + case 'timepicker:quickRanges': + return [ + { + from: 'now/d', + to: 'now/d', + display: 'Today', + }, + ]; + case 'dateFormat': + return 'YY'; case 'history:limit': return 10; default: From c2bc4d3ac020ea1ea73d2b73f1324249520d5d41 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Mon, 8 Jul 2019 19:44:17 +0300 Subject: [PATCH 34/61] Top nav menu tests --- .../public/kbn_top_nav/top_nav_menu.test.tsx | 65 +++++++++++++++++++ .../public/kbn_top_nav/top_nav_menu.tsx | 5 +- 2 files changed, 67 insertions(+), 3 deletions(-) create mode 100644 src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx new file mode 100644 index 0000000000000..a4f3424d6e586 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx @@ -0,0 +1,65 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { TopNavMenu } from './top_nav_menu'; +import { TopNavMenuData } from './top_nav_menu_data'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; + +jest.mock('ui/new_platform'); + +describe('TopNavMenu', () => { + const menuItems: TopNavMenuData[] = [ + { + key: 'test', + label: 'test', + run: jest.fn(), + }, + { + key: 'test2', + label: 'test2', + run: jest.fn(), + }, + { + key: 'test3', + label: 'test3', + run: jest.fn(), + }, + ]; + + beforeEach(() => {}); + + it('Should render nothing', () => { + const component = shallowWithIntl(); + + expect(component.find('InjectIntl(TopNavMenuItem)').length).toBe(0); + }); + + it('Should render 1 menu item', () => { + const component = shallowWithIntl(); + + expect(component.find('InjectIntl(TopNavMenuItem)').length).toBe(1); + }); + + it('Should render multiple menu items', () => { + const component = shallowWithIntl(); + + expect(component.find('InjectIntl(TopNavMenuItem)').length).toBe(menuItems.length); + }); +}); diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index e460d0d167cee..c8be6833b5db5 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -47,10 +47,9 @@ export function TopNavMenu(props: Props) { } function renderSearchBar() { - if (!props.showSearchBar) return; - // Validate presense of all required fields if ( + !props.showSearchBar || !props.appName || !props.query || !props.screenTitle || @@ -58,7 +57,7 @@ export function TopNavMenu(props: Props) { !props.indexPatterns || !props.store ) { - throw 'Missing attributes to initialize search bar'; + return; } return ( From 247a4f713409f708f1fe99f689ee5da86b700627 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 9 Jul 2019 13:00:54 +0300 Subject: [PATCH 35/61] Pass store into top nav menu correctly --- .../kibana_react/public/kbn_top_nav/top_nav_menu.tsx | 2 +- src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index c8be6833b5db5..2bc570306940b 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -124,7 +124,7 @@ export function TopNavMenu(props: Props) { TopNavMenu.defaultProps = { showSearchBar: false, - showQueryBarInline: false, + showSearchBarInline: false, showQueryBar: true, showQueryInput: true, showDatePicker: true, diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 5e3808e5b565c..3290b536b3884 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -43,13 +43,13 @@ module.directive('kbnTopNav2', () => { // Pass in storage const localStorage = new Storage(window.localStorage); - child.setAttribute('storage', 'storage'); + child.setAttribute('store', 'store'); // Append helper directive elem.append(child); const linkFn = ($scope, _, $attr) => { - $scope.storage = localStorage; + $scope.store = localStorage; // Watch the disableButton functions $scope.$watch(() => { @@ -102,6 +102,7 @@ module.directive('kbnTopNav2Helper', (reactDirective) => { 'appName', 'screenTitle', + 'store', 'dateRangeFrom', 'dateRangeTo', 'isRefreshPaused', From e5fb6d8348c24d908940bd869eeec34e4995a14c Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 9 Jul 2019 13:22:57 +0300 Subject: [PATCH 36/61] watch store by reference --- src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 3290b536b3884..3340828c11e6e 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -82,6 +82,7 @@ module.directive('kbnTopNav2Helper', (reactDirective) => { ['query', { watchDepth: 'reference' }], ['store', { watchDepth: 'reference' }], ['intl', { watchDepth: 'reference' }], + ['store', { watchDepth: 'reference' }], ['onQuerySubmit', { watchDepth: 'reference' }], ['onFiltersUpdated', { watchDepth: 'reference' }], @@ -102,7 +103,6 @@ module.directive('kbnTopNav2Helper', (reactDirective) => { 'appName', 'screenTitle', - 'store', 'dateRangeFrom', 'dateRangeTo', 'isRefreshPaused', From 7786fa9230227c325de58467fde3a4ba9fcd6319 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 9 Jul 2019 15:26:06 +0300 Subject: [PATCH 37/61] Added not null assertion --- .../kibana_react/public/kbn_top_nav/top_nav_menu.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index 2bc570306940b..6e48ecc722b4f 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -50,9 +50,7 @@ export function TopNavMenu(props: Props) { // Validate presense of all required fields if ( !props.showSearchBar || - !props.appName || !props.query || - !props.screenTitle || !props.onQuerySubmit || !props.indexPatterns || !props.store @@ -68,8 +66,8 @@ export function TopNavMenu(props: Props) { showQueryInput={props.showQueryInput} showFilterBar={props.showFilterBar} showDatePicker={props.showDatePicker} - appName={props.appName} - screenTitle={props.screenTitle} + appName={props.appName!} + screenTitle={props.screenTitle!} onQuerySubmit={props.onQuerySubmit} onFiltersUpdated={props.onFiltersUpdated} dateRangeFrom={props.dateRangeFrom} From bcb66744d1491b3b6fba9f0e62cc2d7a446bbd24 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 9 Jul 2019 16:02:20 +0300 Subject: [PATCH 38/61] Make index patterns optional (for timepicker only setup) --- .../query/query_bar/components/query_bar.tsx | 8 ++++---- .../search/search_bar/components/search_bar.tsx | 14 +++++++------- .../public/kbn_top_nav/top_nav_menu.tsx | 10 +--------- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index eee8e30cd4941..933a60a7e98db 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -55,7 +55,7 @@ interface Props { disableAutoFocus?: boolean; appName: string; screenTitle?: string; - indexPatterns: Array; + indexPatterns?: Array; store: Storage; intl: InjectedIntl; prepend?: any; @@ -267,15 +267,15 @@ export class QueryBarUI extends Component { } private renderQueryInput() { - if (!this.props.showQueryInput || !this.state.query) return; + if (!this.props.showQueryInput) return; return ( { }); let queryBar; - if (this.props.showQueryBar && this.props.onQuerySubmit && this.props.store) { + if (this.props.showQueryBar) { queryBar = ( { } let filterBar; - if (this.props.showFilterBar && this.props.filters) { + if (this.props.showFilterBar) { filterBar = (
{ >
diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx index 6e48ecc722b4f..1939f07567d40 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx @@ -48,15 +48,7 @@ export function TopNavMenu(props: Props) { function renderSearchBar() { // Validate presense of all required fields - if ( - !props.showSearchBar || - !props.query || - !props.onQuerySubmit || - !props.indexPatterns || - !props.store - ) { - return; - } + if (!props.showSearchBar) return; return ( Date: Tue, 9 Jul 2019 23:58:23 +0300 Subject: [PATCH 39/61] QueryBar tests again --- .../__snapshots__/query_bar.test.tsx.snap | 58 ++++++++++++++++--- .../query_bar/components/query_bar.test.tsx | 56 +++++++++--------- .../query/query_bar/components/query_bar.tsx | 12 ++-- 3 files changed, 83 insertions(+), 43 deletions(-) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap index bc0b15ca88e3e..8680f269d93ed 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar.test.tsx.snap @@ -2,9 +2,9 @@ exports[`QueryBar Should render the given query 1`] = ` - + + + + + + + + `; diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx index 777af7c6f4ba8..a612581bf7b85 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx @@ -66,7 +66,7 @@ const mockIndexPattern = { }; describe('QueryBar', () => { - const QUERY_BAR_SELECTOR = 'InjectIntl(QueryBarInputUI)'; + const QUERY_INPUT_SELECTOR = 'InjectIntl(QueryBarInputUI)'; const TIMEPICKER_SELECTOR = 'EuiSuperDatePicker'; beforeEach(() => { jest.clearAllMocks(); @@ -105,105 +105,103 @@ describe('QueryBar', () => { expect(mockPersistedLogFactory.mock.calls[0][0]).toBe('typeahead:discover-kuery'); }); - it('Should render empty', () => { + it('Should render only timepicker when no options provided', () => { const component = shallowWithIntl( ); - expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1); }); - it('Should render query input bar', () => { + it('Should disable timepicker when asked', () => { const component = shallowWithIntl( ); - expect(component.find(QUERY_BAR_SELECTOR).length).toBe(1); + expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0); }); - it('Should NOT render query input bar if disabled', () => { + it('Should render timepicker with options', () => { const component = shallowWithIntl( ); - expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1); }); - it('Should NOT render timepicker, if options not provided', () => { + it('Should render only query input bar', () => { const component = shallowWithIntl( ); - expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(1); expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0); }); - it('Should NOT render timepicker, if options are provided, but showDatePicker is not specified', () => { + it('Should NOT render query input bar if disabled', () => { const component = shallowWithIntl( ); - expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); + expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0); expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0); }); - it('Should render timepicker', () => { + it('Should NOT render query input bar if missing options', () => { const component = shallowWithIntl( ); - expect(component.find(QUERY_BAR_SELECTOR).length).toBe(0); - expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1); + expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0); + expect(component.find(TIMEPICKER_SELECTOR).length).toBe(0); }); }); diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx index 933a60a7e98db..19a584e34a978 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.tsx @@ -82,7 +82,7 @@ interface State { export class QueryBarUI extends Component { public static defaultProps = { showQueryInput: true, - showDatePicker: false, + showDatePicker: true, showAutoRefreshOnly: false, }; @@ -267,7 +267,7 @@ export class QueryBarUI extends Component { } private renderQueryInput() { - if (!this.props.showQueryInput) return; + if (!this.shouldRenderQueryInput()) return; return ( { } private shouldRenderDatePicker() { - return ( - (this.props.showDatePicker && this.props.dateRangeFrom) || this.props.showAutoRefreshOnly - ); + return this.props.showDatePicker || this.props.showAutoRefreshOnly; + } + + private shouldRenderQueryInput() { + return this.props.showQueryInput && this.props.indexPatterns && this.props.query; } private renderUpdateButton() { From d7b9941246261a6624dbc9f2506b4c9c5076406a Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 10 Jul 2019 00:09:09 +0300 Subject: [PATCH 40/61] Search bar tests --- .../search_bar/components/search_bar.test.tsx | 12 ++++++------ .../search/search_bar/components/search_bar.tsx | 15 +++++++++++++-- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx index 677c1fe98ee58..81990560ced31 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx @@ -83,7 +83,7 @@ describe('SearchBar', () => { jest.clearAllMocks(); }); - it('Should render an empty search bar', () => { + it('Should render query bar when no options provided (in reality - timepicker)', () => { const component = mountWithIntl( { expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); expect(component.find(FILTER_BAR).length).toBe(0); - expect(component.find(QUERY_BAR).length).toBe(0); + expect(component.find(QUERY_BAR).length).toBe(1); }); - it('Should render an empty search bar, if options are not provided', () => { + it('Should render empty when timepicker disabled and no options provided', () => { const component = mountWithIntl( ); @@ -121,10 +120,10 @@ describe('SearchBar', () => { intl={null as any} filters={[]} onFiltersUpdated={noop} + showDatePicker={false} /> ); - expect(component).toMatchSnapshot(); expect(component.find(SEARCH_BAR_ROOT).length).toBe(1); expect(component.find(FILTER_BAR).length).toBe(1); expect(component.find(QUERY_BAR).length).toBe(0); @@ -139,6 +138,7 @@ describe('SearchBar', () => { showFilterBar={false} filters={[]} onFiltersUpdated={noop} + showDatePicker={false} /> ); diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx index b78fef8de87f8..0dc1be616f9f8 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx @@ -97,6 +97,17 @@ class SearchBarUI extends Component { return (filters: Filter[]) => {}; } + private shouldRenderQueryBar() { + const showDatePicker = this.props.showDatePicker || this.props.showAutoRefreshOnly; + const showQueryInput = + this.props.showQueryInput && this.props.indexPatterns && this.props.query; + return this.props.showQueryBar && (showDatePicker || showQueryInput); + } + + private shouldRenderFilterBar() { + return this.props.showFilterBar && this.props.filters && this.props.indexPatterns; + } + public setFilterBarHeight = () => { requestAnimationFrame(() => { const height = @@ -166,7 +177,7 @@ class SearchBarUI extends Component { }); let queryBar; - if (this.props.showQueryBar) { + if (this.shouldRenderQueryBar()) { queryBar = ( { } let filterBar; - if (this.props.showFilterBar) { + if (this.shouldRenderFilterBar()) { filterBar = (
Date: Wed, 10 Jul 2019 00:19:33 +0300 Subject: [PATCH 41/61] Top nav tests --- .../public/kbn_top_nav/top_nav_menu.test.tsx | 32 ++++++++++++++++--- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx index a4f3424d6e586..04bce2b63e851 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx @@ -22,9 +22,18 @@ import { TopNavMenu } from './top_nav_menu'; import { TopNavMenuData } from './top_nav_menu_data'; import { shallowWithIntl } from 'test_utils/enzyme_helpers'; +jest.mock('../../../../core_plugins/data/public', () => { + return { + SearchBar: () =>
, + SearchBarProps: {}, + }; +}); + jest.mock('ui/new_platform'); describe('TopNavMenu', () => { + const TOP_NAV_ITEM_SELECTOR = 'TopNavMenuItem'; + const SEARCH_BAR_SELECTOR = 'SearchBar'; const menuItems: TopNavMenuData[] = [ { key: 'test', @@ -47,19 +56,32 @@ describe('TopNavMenu', () => { it('Should render nothing', () => { const component = shallowWithIntl(); - - expect(component.find('InjectIntl(TopNavMenuItem)').length).toBe(0); + expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0); }); it('Should render 1 menu item', () => { const component = shallowWithIntl(); - - expect(component.find('InjectIntl(TopNavMenuItem)').length).toBe(1); + expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(1); }); it('Should render multiple menu items', () => { const component = shallowWithIntl(); + expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length); + }); + + it('Should render search bar', () => { + const component = shallowWithIntl(); + + expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0); + expect(component.find(`span > ${SEARCH_BAR_SELECTOR}`).length).toBe(1); + }); + + it('Should render search bar inline', () => { + const component = shallowWithIntl( + + ); - expect(component.find('InjectIntl(TopNavMenuItem)').length).toBe(menuItems.length); + expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0); + expect(component.find(`EuiFlexItem > ${SEARCH_BAR_SELECTOR}`).length).toBe(1); }); }); From 01b359c5d6dcfb4d7d0f00dc89d29ee507b04d43 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 10 Jul 2019 00:20:47 +0300 Subject: [PATCH 42/61] Top nav menu tests --- .../kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx index 04bce2b63e851..9bd5a6f691522 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx @@ -57,16 +57,19 @@ describe('TopNavMenu', () => { it('Should render nothing', () => { const component = shallowWithIntl(); expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0); + expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0); }); it('Should render 1 menu item', () => { const component = shallowWithIntl(); expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(1); + expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0); }); it('Should render multiple menu items', () => { const component = shallowWithIntl(); expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(menuItems.length); + expect(component.find(SEARCH_BAR_SELECTOR).length).toBe(0); }); it('Should render search bar', () => { From 541c8133edb12d3bac4cd2f34faac1dcbb03b8d3 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Wed, 10 Jul 2019 00:36:24 +0300 Subject: [PATCH 43/61] removed unnecessary ui/new_platform mock --- .../kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx index 9bd5a6f691522..1883fc7fb55bd 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx +++ b/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx @@ -29,8 +29,6 @@ jest.mock('../../../../core_plugins/data/public', () => { }; }); -jest.mock('ui/new_platform'); - describe('TopNavMenu', () => { const TOP_NAV_ITEM_SELECTOR = 'TopNavMenuItem'; const SEARCH_BAR_SELECTOR = 'SearchBar'; From 5cac8c978ce963b646a9c01100ea52b601fa7842 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 11 Jul 2019 12:00:44 +0300 Subject: [PATCH 44/61] Moved discover result count away from top nav --- .../kibana/public/discover/_discover.scss | 5 +++ .../kibana/public/discover/index.html | 38 +++++-------------- 2 files changed, 15 insertions(+), 28 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss index 6f3d5f93b0c9c..e672f7fe6552b 100644 --- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss @@ -35,6 +35,11 @@ discover-app { } } +.dscResultCount { + padding-top: $euiSizeXS; + padding-left: $euiSizeM; +} + .dscTimechart__header { display: flex; justify-content: center; diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html index 568b1ec812696..5d28dbddb0c2a 100644 --- a/src/legacy/core_plugins/kibana/public/discover/index.html +++ b/src/legacy/core_plugins/kibana/public/discover/index.html @@ -1,34 +1,6 @@ -
-

- - - -

-
- {{(hits || 0) | number:0}} - -
-
- + + {{(hits || 0) | number:0}} + +
+
Date: Thu, 11 Jul 2019 12:57:23 +0300 Subject: [PATCH 45/61] Moved and improved top nav menu css --- src/legacy/core_plugins/kibana_react/index.ts | 1 + src/legacy/core_plugins/kibana_react/package.json | 4 ++++ src/legacy/core_plugins/kibana_react/public/index.scss | 3 +++ src/legacy/core_plugins/kibana_react/public/index.ts | 2 +- .../__snapshots__/top_nav_menu_item.test.tsx.snap | 0 .../kibana_react/public/top_nav_menu/_index.scss | 7 +++++++ .../public/{kbn_top_nav => top_nav_menu}/index.ts | 0 .../{kbn_top_nav => top_nav_menu}/top_nav_menu.test.tsx | 0 .../public/{kbn_top_nav => top_nav_menu}/top_nav_menu.tsx | 8 ++++---- .../{kbn_top_nav => top_nav_menu}/top_nav_menu_data.tsx | 0 .../top_nav_menu_item.test.tsx | 0 .../{kbn_top_nav => top_nav_menu}/top_nav_menu_item.tsx | 0 src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss | 4 ++++ src/legacy/ui/public/styles/_legacy/_base.scss | 8 -------- 14 files changed, 24 insertions(+), 13 deletions(-) create mode 100644 src/legacy/core_plugins/kibana_react/package.json create mode 100644 src/legacy/core_plugins/kibana_react/public/index.scss rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/__snapshots__/top_nav_menu_item.test.tsx.snap (100%) create mode 100644 src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/index.ts (100%) rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/top_nav_menu.test.tsx (100%) rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/top_nav_menu.tsx (96%) rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/top_nav_menu_data.tsx (100%) rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/top_nav_menu_item.test.tsx (100%) rename src/legacy/core_plugins/kibana_react/public/{kbn_top_nav => top_nav_menu}/top_nav_menu_item.tsx (100%) diff --git a/src/legacy/core_plugins/kibana_react/index.ts b/src/legacy/core_plugins/kibana_react/index.ts index 80049ef937c06..eb936b94c37ef 100644 --- a/src/legacy/core_plugins/kibana_react/index.ts +++ b/src/legacy/core_plugins/kibana_react/index.ts @@ -34,6 +34,7 @@ export default function DataPlugin(kibana: any) { init: (server: Legacy.Server) => ({}), uiExports: { injectDefaultVars: () => ({}), + styleSheetPaths: resolve(__dirname, 'public/index.scss'), }, }; diff --git a/src/legacy/core_plugins/kibana_react/package.json b/src/legacy/core_plugins/kibana_react/package.json new file mode 100644 index 0000000000000..3f7cf717a1963 --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/package.json @@ -0,0 +1,4 @@ +{ + "name": "kibana_react", + "version": "kibana" +} diff --git a/src/legacy/core_plugins/kibana_react/public/index.scss b/src/legacy/core_plugins/kibana_react/public/index.scss new file mode 100644 index 0000000000000..4c969b1a37e8c --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/index.scss @@ -0,0 +1,3 @@ +@import 'src/legacy/ui/public/styles/styling_constants'; + +@import './top_nav_menu/index'; diff --git a/src/legacy/core_plugins/kibana_react/public/index.ts b/src/legacy/core_plugins/kibana_react/public/index.ts index 8ca877e232765..5c918e05adb45 100644 --- a/src/legacy/core_plugins/kibana_react/public/index.ts +++ b/src/legacy/core_plugins/kibana_react/public/index.ts @@ -23,4 +23,4 @@ // of the ExpressionExectorService /** @public types */ -export { TopNavMenu } from './kbn_top_nav'; +export { TopNavMenu } from './top_nav_menu'; diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/__snapshots__/top_nav_menu_item.test.tsx.snap b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap similarity index 100% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/__snapshots__/top_nav_menu_item.test.tsx.snap rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss new file mode 100644 index 0000000000000..2950bee65c22e --- /dev/null +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss @@ -0,0 +1,7 @@ +.topNavMenu__wrapper { + z-index: 5; + + .topNavMenu { + padding: $euiSizeS 0px $euiSizeXS; + } +} diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/index.ts b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts similarity index 100% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/index.ts rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx similarity index 100% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.test.tsx rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx similarity index 96% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index 1939f07567d40..f6922fd8cfa6f 100644 --- a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -77,7 +77,7 @@ export function TopNavMenu(props: Props) { function renderLayout() { if (props.showSearchBarInline) { return ( -
+
- + {renderItems()} {renderSearchBar()} @@ -94,11 +94,11 @@ export function TopNavMenu(props: Props) { ); } else { return ( - + {renderItems()} diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx similarity index 100% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_data.tsx rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx similarity index 100% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.test.tsx rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx diff --git a/src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx similarity index 100% rename from src/legacy/core_plugins/kibana_react/public/kbn_top_nav/top_nav_menu_item.tsx rename to src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx diff --git a/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss b/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss index 8b58691cd18ca..1ae0e843e9eb8 100644 --- a/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss +++ b/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss @@ -2,6 +2,10 @@ * 1. Make sure the timepicker is always one right, even if the main menu doesn't exist */ + kbn-top-nav { + z-index: 5; +} + .kbnTopNav { background-color: $euiPageBackgroundColor; border-bottom: $euiBorderThin; diff --git a/src/legacy/ui/public/styles/_legacy/_base.scss b/src/legacy/ui/public/styles/_legacy/_base.scss index 2f61f088b14c5..aad90a99ac357 100644 --- a/src/legacy/ui/public/styles/_legacy/_base.scss +++ b/src/legacy/ui/public/styles/_legacy/_base.scss @@ -59,14 +59,6 @@ input[type="checkbox"], padding-bottom: $euiSizeS; } - > kbn-top-nav, kbn-top-nav2 { - z-index: 5; - - .topNavMenu { - padding: $euiSizeS 0px $euiSizeXS; - } - } - .globalQueryBar { padding: 0px $euiSizeS $euiSizeS $euiSizeS; } From 4d64d6611f8882214bf26b7bd41f03e4c741dc4e Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Thu, 11 Jul 2019 14:16:22 +0300 Subject: [PATCH 46/61] remove unused translations --- x-pack/plugins/translations/translations/ja-JP.json | 5 +---- x-pack/plugins/translations/translations/zh-CN.json | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index cc8a85e5f7d82..fff8b52828175 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -1586,9 +1586,6 @@ "kbn.discover.notifications.notSavedSearchTitle": "検索「{savedSearchTitle}」は保存されませんでした。", "kbn.discover.notifications.savedSearchTitle": "検索「{savedSearchTitle}」が保存されました。", "kbn.discover.painlessError.painlessScriptedFieldErrorMessage": "Painless スクリプトのフィールド「{script}」のエラー.", - "kbn.discover.reloadSavedSearchAriaLabel": "保存された検索を再読み込みします", - "kbn.discover.reloadSavedSearchButton": "再読み込み", - "kbn.discover.reloadSavedSearchTooltip": "保存された検索を再読み込みします", "kbn.discover.rootBreadcrumb": "ディスカバリ", "kbn.discover.savedSearch.newSavedSearchTitle": "新しく保存された検索", "kbn.discover.savedSearch.savedObjectName": "保存された検索", @@ -10878,4 +10875,4 @@ "xpack.watcher.watchActions.logging.logTextIsRequiredValidationMessage": "ログテキストが必要です。", "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。" } -} +} \ No newline at end of file diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 0cd3c18718e51..06fa20f481f17 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -1586,9 +1586,6 @@ "kbn.discover.notifications.notSavedSearchTitle": "搜索 “{savedSearchTitle}” 未保存。", "kbn.discover.notifications.savedSearchTitle": "搜索 “{savedSearchTitle}” 已保存", "kbn.discover.painlessError.painlessScriptedFieldErrorMessage": "Painless 脚本字段 “{script}” 有错误。", - "kbn.discover.reloadSavedSearchAriaLabel": "重新加载已保存搜索", - "kbn.discover.reloadSavedSearchButton": "重新加载", - "kbn.discover.reloadSavedSearchTooltip": "重新加载已保存搜索", "kbn.discover.rootBreadcrumb": "Discover", "kbn.discover.savedSearch.newSavedSearchTitle": "新保存的搜索", "kbn.discover.savedSearch.savedObjectName": "已保存搜索", @@ -10878,4 +10875,4 @@ "xpack.watcher.watchActions.logging.logTextIsRequiredValidationMessage": "“日志文本”必填。", "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。" } -} +} \ No newline at end of file From 209797d32c42929bbe30ea295ac21ce02508245f Mon Sep 17 00:00:00 2001 From: Liza K Date: Wed, 17 Jul 2019 16:00:31 +0300 Subject: [PATCH 47/61] Code review part 1 --- .../core_plugins/console/public/index.html | 4 +- .../console/public/src/helpers/get_top_nav.ts | 6 +-- .../search_bar/components/search_bar.test.tsx | 6 +-- .../search_bar/components/search_bar.tsx | 9 +++- .../public/dashboard/dashboard_app.html | 4 +- .../dashboard/dashboard_app_controller.tsx | 12 ++++- .../dashboard/top_nav/get_top_nav_config.ts | 16 +++--- .../public/discover/controllers/discover.js | 10 ++-- .../kibana/public/discover/index.html | 4 +- .../public/visualize/editor/editor.html | 4 +- .../kibana/public/visualize/editor/editor.js | 8 +-- .../top_nav_menu_item.test.tsx.snap | 54 ------------------- .../public/top_nav_menu/top_nav_menu.test.tsx | 4 +- .../public/top_nav_menu/top_nav_menu.tsx | 26 +++++++-- .../public/top_nav_menu/top_nav_menu_data.tsx | 5 +- .../top_nav_menu/top_nav_menu_item.test.tsx | 29 +++++----- .../public/top_nav_menu/top_nav_menu_item.tsx | 45 ++++++++++------ .../core_plugins/timelion/public/app.js | 14 ++--- .../core_plugins/timelion/public/index.html | 4 +- .../ui/public/kbn_top_nav/_kbn_top_nav.scss | 2 +- .../ui/public/kbn_top_nav/kbn_top_nav2.js | 6 +-- .../plugins/maps/public/angular/map.html | 4 +- .../maps/public/angular/map_controller.js | 6 +-- 23 files changed, 132 insertions(+), 150 deletions(-) delete mode 100644 src/legacy/core_plugins/kibana_react/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 1cb470b3dabef..0934bf48f390b 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -1,7 +1,7 @@ - +>
diff --git a/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts b/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts index 7668ab16bd3c1..3b5fae6ff669d 100644 --- a/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts +++ b/src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts @@ -28,7 +28,7 @@ import { showHelpPanel } from './help_show_panel'; export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) { return [ { - key: 'history', + id: 'history', label: i18n.translate('console.topNav.historyTabLabel', { defaultMessage: 'History', }), @@ -41,7 +41,7 @@ export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) { testId: 'consoleHistoryButton', }, { - key: 'settings', + id: 'settings', label: i18n.translate('console.topNav.settingsTabLabel', { defaultMessage: 'Settings', }), @@ -54,7 +54,7 @@ export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) { testId: 'consoleSettingsButton', }, { - key: 'help', + id: 'help', label: i18n.translate('console.topNav.helpTabLabel', { defaultMessage: 'Help', }), diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx index 81990560ced31..ae0728d154cab 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.test.tsx @@ -33,9 +33,7 @@ jest.mock('../../../query/query_bar', () => { }; }); -const noop = () => { - return; -}; +const noop = jest.fn(); const createMockWebStorage = () => ({ clear: jest.fn(), @@ -112,7 +110,7 @@ describe('SearchBar', () => { expect(component.find(QUERY_BAR).length).toBe(0); }); - it('Should render filter bar, when required fields are probided', () => { + it('Should render filter bar, when required fields are provided', () => { const component = mountWithIntl( { defaultMessage: 'Select to show', }); + const filterCount = this.getFilterLength(); const filterTriggerButton = ( Filters diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html index e93cd3032937f..71ea8b35a0da9 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -3,7 +3,7 @@ ng-class="{'dshAppContainer--withMargins': model.useMargins}" > - - + - - +
diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html index 7296bac83fde4..12f5424905ae8 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html @@ -25,7 +25,7 @@
- - + - - +
diff --git a/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss b/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss index 1ae0e843e9eb8..47fd377681c9f 100644 --- a/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss +++ b/src/legacy/ui/public/kbn_top_nav/_kbn_top_nav.scss @@ -2,7 +2,7 @@ * 1. Make sure the timepicker is always one right, even if the main menu doesn't exist */ - kbn-top-nav { +kbn-top-nav { z-index: 5; } diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 3340828c11e6e..0e8636e982f60 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -25,12 +25,12 @@ import { Storage } from 'ui/storage'; const module = uiModules.get('kibana'); -module.directive('kbnTopNav2', () => { +module.directive('kbnTopNavV2', () => { return { restrict: 'E', template: '', compile: (elem) => { - const child = document.createElement('kbn-top-nav2-helper'); + const child = document.createElement('kbn-top-nav-v2-helper'); // Copy attributes to the child directive for (const attr of elem[0].attributes) { @@ -71,7 +71,7 @@ module.directive('kbnTopNav2', () => { }; }); -module.directive('kbnTopNav2Helper', (reactDirective) => { +module.directive('kbnTopNavV2Helper', (reactDirective) => { return reactDirective( wrapInI18nContext(TopNavMenu), [ diff --git a/x-pack/legacy/plugins/maps/public/angular/map.html b/x-pack/legacy/plugins/maps/public/angular/map.html index 6d3b8438046e8..0a83766677a03 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map.html +++ b/x-pack/legacy/plugins/maps/public/angular/map.html @@ -1,7 +1,7 @@
- - +
diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js index 38ad432387d24..afda01fcb7841 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js +++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js @@ -332,7 +332,7 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta timefilter.disableAutoRefreshSelector(); $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar $scope.topNavMenu = [{ - key: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', { + id: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', { defaultMessage: `full screen` }), description: i18n.translate('xpack.maps.mapController.fullScreenDescription', { @@ -343,7 +343,7 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta store.dispatch(enableFullScreen()); } }, { - key: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', { + id: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', { defaultMessage: `inspect` }), description: i18n.translate('xpack.maps.mapController.openInspectorDescription', { @@ -355,7 +355,7 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta Inspector.open(inspectorAdapters, {}); } }, ...(capabilities.get().maps.save ? [{ - key: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', { + id: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', { defaultMessage: `save` }), description: i18n.translate('xpack.maps.mapController.saveMapDescription', { From 37d7a986f50a84af3a3284924b18c50398e39a98 Mon Sep 17 00:00:00 2001 From: Liza K Date: Wed, 17 Jul 2019 16:21:01 +0300 Subject: [PATCH 48/61] Code review part 2 - clean up top nav menu item run interface --- .../dashboard/dashboard_app_controller.tsx | 8 +++--- .../kibana/public/dashboard/types.ts | 2 +- .../public/discover/controllers/discover.js | 2 +- .../kibana/public/visualize/editor/editor.js | 2 +- .../public/top_nav_menu/top_nav_menu.tsx | 8 ++---- .../public/top_nav_menu/top_nav_menu_data.tsx | 2 +- .../top_nav_menu/top_nav_menu_item.test.tsx | 27 +++++++------------ .../public/top_nav_menu/top_nav_menu_item.tsx | 10 +++---- 8 files changed, 23 insertions(+), 38 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx index 6c611bc5b357b..7c31bf60bd736 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app_controller.tsx @@ -552,7 +552,7 @@ export class DashboardAppController { * When de-angularizing this code, please call the underlaying action function * directly and not via the top nav object. **/ - navActions[TopNavIds.ADD](null, null, null); + navActions[TopNavIds.ADD](); }; $scope.enterEditMode = () => { dashboardStateManager.setFullScreenMode(false); @@ -561,7 +561,7 @@ export class DashboardAppController { * When de-angularizing this code, please call the underlaying action function * directly and not via the top nav object. **/ - navActions[TopNavIds.ENTER_EDIT_MODE](null, null, null); + navActions[TopNavIds.ENTER_EDIT_MODE](); }; const navActions: { [key: string]: NavAction; @@ -651,7 +651,7 @@ export class DashboardAppController { } }; - navActions[TopNavIds.OPTIONS] = (menuItem, navController, anchorElement) => { + navActions[TopNavIds.OPTIONS] = anchorElement => { showOptionsPopover({ anchorElement, useMargins: dashboardStateManager.getUseMargins(), @@ -664,7 +664,7 @@ export class DashboardAppController { }, }); }; - navActions[TopNavIds.SHARE] = (menuItem, navController, anchorElement) => { + navActions[TopNavIds.SHARE] = anchorElement => { showShareContextMenu({ anchorElement, allowEmbed: true, diff --git a/src/legacy/core_plugins/kibana/public/dashboard/types.ts b/src/legacy/core_plugins/kibana/public/dashboard/types.ts index ed2f4904580d1..a0a8fde0b3a04 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/types.ts +++ b/src/legacy/core_plugins/kibana/public/dashboard/types.ts @@ -32,7 +32,7 @@ import { import { ViewMode } from '../../../embeddable_api/public'; -export type NavAction = (menuItem: any, navController: any, anchorElement: any) => void; +export type NavAction = (anchorElement?: any) => void; export interface GridData { w: number; diff --git a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js index 861f1c0be135e..6cbb0404740c7 100644 --- a/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js +++ b/src/legacy/core_plugins/kibana/public/discover/controllers/discover.js @@ -317,7 +317,7 @@ function discoverController( defaultMessage: 'Share Search', }), testId: 'shareTopNavButton', - run: async (menuItem, navController, anchorElement) => { // eslint-disable-line no-unused-vars + run: async (anchorElement) => { const sharingData = await this.getSharingData(); showShareContextMenu({ anchorElement, diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js index 318ee29026c7f..6c724ba48f5b7 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.js @@ -208,7 +208,7 @@ function VisEditor( defaultMessage: 'Share Visualization', }), testId: 'shareTopNavButton', - run: (menuItem, navController, anchorElement) => { + run: (anchorElement) => { const hasUnappliedChanges = vis.dirty; const hasUnsavedChanges = $appStatus.dirty; showShareContextMenu({ diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index bed87f3eb5097..e4c5eeabd69c6 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { I18nProvider } from '@kbn/i18n/react'; -import { TopNavMenuData, TopNavMenuAction } from './top_nav_menu_data'; +import { TopNavMenuData } from './top_nav_menu_data'; import { TopNavMenuItem } from './top_nav_menu_item'; import { SearchBar, SearchBarProps } from '../../../../core_plugins/data/public'; @@ -52,16 +52,12 @@ export function TopNavMenu(props: Props) { } return ( - + ); }); } - function menuItemClickHandler(key: string, action: TopNavMenuAction, target?: any) { - action(null, null, target); - } - function renderSearchBar() { // Validate presense of all required fields if (!props.showSearchBar) return; diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx index a1d44bfc83d9d..53a079368b762 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx @@ -17,7 +17,7 @@ * under the License. */ -export type TopNavMenuAction = (menuItem: any, navController: any, anchorElement: any) => void; +export type TopNavMenuAction = (anchorElement: EventTarget) => void; export interface TopNavMenuData { // key is to be deprecated and replaced with ID. diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx index 7fb0faabb5013..4816ef3c95869 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.test.tsx @@ -30,18 +30,16 @@ describe('TopNavMenu', () => { run: jest.fn(), }; - const clickHandler = jest.fn(); - - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component.prop('isDisabled')).toEqual(false); const event = { currentTarget: { value: 'a' } }; component.simulate('click', event); - expect(clickHandler).toBeCalledTimes(1); - expect(clickHandler).toHaveBeenCalledWith(data.id, data.run, event.currentTarget); + expect(data.run).toBeCalledTimes(1); + expect(data.run).toHaveBeenCalledWith(event.currentTarget); component.simulate('click', event); - expect(clickHandler).toBeCalledTimes(2); + expect(data.run).toBeCalledTimes(2); }); it('Should render item with all attributes', () => { @@ -54,13 +52,12 @@ describe('TopNavMenu', () => { run: jest.fn(), }; - const clickHandler = jest.fn(); - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component.prop('isDisabled')).toEqual(false); const event = { currentTarget: { value: 'a' } }; component.simulate('click', event); - expect(clickHandler).toHaveBeenCalled(); + expect(data.run).toHaveBeenCalled(); }); it('Should render disabled item and it shouldnt be clickable', () => { @@ -71,14 +68,12 @@ describe('TopNavMenu', () => { run: jest.fn(), }; - const clickHandler = jest.fn(); - - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component.prop('isDisabled')).toEqual(true); const event = { currentTarget: { value: 'a' } }; component.simulate('click', event); - expect(clickHandler).toHaveBeenCalledTimes(0); + expect(data.run).toHaveBeenCalledTimes(0); }); it('Should render item with disable function and it shouldnt be clickable', () => { @@ -89,13 +84,11 @@ describe('TopNavMenu', () => { run: jest.fn(), }; - const clickHandler = jest.fn(); - - const component = shallowWithIntl(); + const component = shallowWithIntl(); expect(component.prop('isDisabled')).toEqual(true); const event = { currentTarget: { value: 'a' } }; component.simulate('click', event); - expect(clickHandler).toHaveBeenCalledTimes(0); + expect(data.run).toHaveBeenCalledTimes(0); }); }); diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx index 45746f02edbdb..d4d1c159906aa 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_item.tsx @@ -21,13 +21,9 @@ import { capitalize, isFunction } from 'lodash'; import React, { MouseEvent } from 'react'; import { EuiButtonEmpty, EuiToolTip } from '@elastic/eui'; -import { TopNavMenuData, TopNavMenuAction } from './top_nav_menu_data'; +import { TopNavMenuData } from './top_nav_menu_data'; -interface Props extends TopNavMenuData { - onClick: (key: string, action: TopNavMenuAction, target?: EventTarget) => void; -} - -export function TopNavMenuItem(props: Props) { +export function TopNavMenuItem(props: TopNavMenuData) { function isDisabled(): boolean { const val = isFunction(props.disableButton) ? props.disableButton() : props.disableButton; return val!; @@ -40,7 +36,7 @@ export function TopNavMenuItem(props: Props) { function handleClick(e: MouseEvent) { if (isDisabled()) return; - props.onClick(props.id!, props.run, e.currentTarget); + props.run(e.currentTarget); } const btn = ( From 8729b57c4feedd75e57ca0664d02d887cdf7e362 Mon Sep 17 00:00:00 2001 From: Liza K Date: Wed, 17 Jul 2019 16:50:35 +0300 Subject: [PATCH 49/61] Give top nav items better keys --- .../kibana_react/public/top_nav_menu/top_nav_menu.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index e4c5eeabd69c6..192082bd8b1f8 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -47,11 +47,12 @@ export function TopNavMenu(props: Props) { return props.config.map((menuItem, i) => { if (menuItem.key && !menuItem.id) { // Copy key into id, as it's a reserved react propery. + // This is done for 3rd party developer backward compatibility. // In the future, ID should be used, rather than key. menuItem.id = menuItem.key; } return ( - + ); From d6f904f1531178e5969c86c6419a9746ab198d05 Mon Sep 17 00:00:00 2001 From: Liza K Date: Wed, 17 Jul 2019 17:06:13 +0300 Subject: [PATCH 50/61] Simplified top nav construction logic in editor --- .../kibana/public/visualize/editor/editor.html | 15 +++++++++++---- .../kibana/public/visualize/editor/editor.js | 16 +--------------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html index 12f5424905ae8..df010840b7bc0 100644 --- a/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html +++ b/src/legacy/core_plugins/kibana/public/visualize/editor/editor.html @@ -24,17 +24,24 @@
- + { // Show inline with menu, if it's only the timepicker \ autorefresh component - return ($scope.showQueryBarTimePicker() || - $scope.showAutoRefreshOnly()) && - !$scope.showQueryInput() && - !$scope.showFilterBar(); + return !$scope.showQueryInput() && !$scope.showFilterBar(); }; $scope.showFilterBar = () => { return vis.type.options.showFilterBar; }; - $scope.showQueryBar = () => { - // Show querybar if input or timepicker are required. - return $scope.showQueryInput() || - $scope.showQueryBarTimePicker() || - $scope.showAutoRefreshOnly(); - }; - $scope.showQueryInput = () => { return vis.type.requiresSearch && vis.type.options.showQueryBar; }; @@ -378,10 +368,6 @@ function VisEditor( return vis.type.options.showTimePicker; }; - $scope.showAutoRefreshOnly = () => { - return !$scope.showQueryBarTimePicker(); - }; - $scope.timeRange = timefilter.getTime(); $scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode'); From d127cfd0700cda375bdfea95006a69a4db8e14e5 Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 12:21:10 +0300 Subject: [PATCH 51/61] Moved filter trigger button rendering to helper function --- .../search_bar/components/search_bar.tsx | 75 +++++++++---------- 1 file changed, 36 insertions(+), 39 deletions(-) diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx index 1f5da335d85a7..a3842e0baf5ab 100644 --- a/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx +++ b/src/legacy/core_plugins/data/public/search/search_bar/components/search_bar.tsx @@ -108,6 +108,37 @@ class SearchBarUI extends Component { return this.props.showFilterBar && this.props.filters && this.props.indexPatterns; } + private getFilterTriggerButton() { + const filtersAppliedText = this.props.intl.formatMessage({ + id: 'data.search.searchBar.filtersButtonFiltersAppliedTitle', + defaultMessage: 'filters applied.', + }); + const clickToShowOrHideText = this.state.isFiltersVisible + ? this.props.intl.formatMessage({ + id: 'data.search.searchBar.filtersButtonClickToShowTitle', + defaultMessage: 'Select to hide', + }) + : this.props.intl.formatMessage({ + id: 'data.search.searchBar.filtersButtonClickToHideTitle', + defaultMessage: 'Select to show', + }); + + const filterCount = this.getFilterLength(); + return ( + + Filters + + ); + } + public setFilterBarHeight = () => { requestAnimationFrame(() => { const height = @@ -144,43 +175,6 @@ class SearchBarUI extends Component { } public render() { - const filtersAppliedText = this.props.intl.formatMessage({ - id: 'data.search.searchBar.filtersButtonFiltersAppliedTitle', - defaultMessage: 'filters applied.', - }); - const clickToShowOrHideText = this.state.isFiltersVisible - ? this.props.intl.formatMessage({ - id: 'data.search.searchBar.filtersButtonClickToShowTitle', - defaultMessage: 'Select to hide', - }) - : this.props.intl.formatMessage({ - id: 'data.search.searchBar.filtersButtonClickToHideTitle', - defaultMessage: 'Select to show', - }); - - const filterCount = this.getFilterLength(); - const filterTriggerButton = ( - - Filters - - ); - - const classes = classNames('globalFilterGroup__wrapper', { - 'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible, - }); - let queryBar; if (this.shouldRenderQueryBar()) { queryBar = ( @@ -191,7 +185,7 @@ class SearchBarUI extends Component { appName={this.props.appName} indexPatterns={this.props.indexPatterns} store={this.props.store!} - prepend={this.props.showFilterBar ? filterTriggerButton : ''} + prepend={this.props.showFilterBar ? this.getFilterTriggerButton() : ''} showDatePicker={this.props.showDatePicker} showQueryInput={this.props.showQueryInput} dateRangeFrom={this.props.dateRangeFrom} @@ -206,13 +200,16 @@ class SearchBarUI extends Component { let filterBar; if (this.shouldRenderFilterBar()) { + const filterGroupClasses = classNames('globalFilterGroup__wrapper', { + 'globalFilterGroup__wrapper-isVisible': this.state.isFiltersVisible, + }); filterBar = (
{ this.filterBarWrapperRef = node; }} - className={classes} + className={filterGroupClasses} >
{ From 541a779ffb1eabc536f9bdf742513f5bb2fa0739 Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 12:22:17 +0300 Subject: [PATCH 52/61] Remove responsiveness from top nav items --- .../kibana_react/public/top_nav_menu/top_nav_menu.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index 192082bd8b1f8..98bfa0070af5e 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -98,7 +98,7 @@ export function TopNavMenu(props: Props) { wrap={true} className="topNavMenu" > - + {renderItems()} {renderSearchBar()} @@ -113,6 +113,7 @@ export function TopNavMenu(props: Props) { justifyContent="flexStart" gutterSize="none" className="topNavMenu" + responsive={false} > {renderItems()} From a6ba593d1e5c1bfb677af7fb1b323803a23b2853 Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 12:27:57 +0300 Subject: [PATCH 53/61] vertical align for cases where showSearchBarInline is true (i.e. only menu and time picker in the same row) --- .../kibana_react/public/top_nav_menu/top_nav_menu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index 98bfa0070af5e..a76ffb8f172ec 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -96,6 +96,7 @@ export function TopNavMenu(props: Props) { justifyContent="spaceBetween" gutterSize="none" wrap={true} + alignItems="center" className="topNavMenu" > From f5ea79dba2d83e4984bb43ed64e43c74d620d6fd Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 14:59:09 +0300 Subject: [PATCH 54/61] Export TopNavMenuData type --- src/legacy/core_plugins/kibana_react/public/index.ts | 2 +- .../core_plugins/kibana_react/public/top_nav_menu/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana_react/public/index.ts b/src/legacy/core_plugins/kibana_react/public/index.ts index 5c918e05adb45..980fbe2e46167 100644 --- a/src/legacy/core_plugins/kibana_react/public/index.ts +++ b/src/legacy/core_plugins/kibana_react/public/index.ts @@ -23,4 +23,4 @@ // of the ExpressionExectorService /** @public types */ -export { TopNavMenu } from './top_nav_menu'; +export { TopNavMenu, TopNavMenuData } from './top_nav_menu'; diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts index 1ee14c578d8fc..b45baaf0e4711 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/index.ts @@ -18,3 +18,4 @@ */ export { TopNavMenu } from './top_nav_menu'; +export { TopNavMenuData } from './top_nav_menu_data'; From 045efb038330539b4baab8335202aad227edbd51 Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 15:11:38 +0300 Subject: [PATCH 55/61] Removed unused name attribute in top nav. Use app-name instead. --- src/legacy/core_plugins/console/public/index.html | 2 +- .../core_plugins/kibana/public/dashboard/dashboard_app.html | 3 +-- src/legacy/core_plugins/kibana/public/discover/index.html | 3 +-- .../core_plugins/kibana/public/visualize/editor/editor.html | 3 +-- src/legacy/core_plugins/timelion/public/index.html | 3 +-- x-pack/legacy/plugins/maps/public/angular/map.html | 3 +-- 6 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 0934bf48f390b..91bcb05bf64cc 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -1,5 +1,5 @@ diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html index 71ea8b35a0da9..4b77a7e3733ca 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html +++ b/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html @@ -4,7 +4,7 @@ >
Date: Thu, 18 Jul 2019 17:56:57 +0300 Subject: [PATCH 56/61] Copy KEY => ID in angular directive React only uses ID attr now --- .../kibana_react/public/top_nav_menu/top_nav_menu.tsx | 6 ------ .../public/top_nav_menu/top_nav_menu_data.tsx | 3 --- src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js | 10 +++++++++- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index a76ffb8f172ec..0b702354416c8 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -45,12 +45,6 @@ export function TopNavMenu(props: Props) { function renderItems() { if (!props.config) return; return props.config.map((menuItem, i) => { - if (menuItem.key && !menuItem.id) { - // Copy key into id, as it's a reserved react propery. - // This is done for 3rd party developer backward compatibility. - // In the future, ID should be used, rather than key. - menuItem.id = menuItem.key; - } return ( diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx index 53a079368b762..4ab45005892e0 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu_data.tsx @@ -20,9 +20,6 @@ export type TopNavMenuAction = (anchorElement: EventTarget) => void; export interface TopNavMenuData { - // key is to be deprecated and replaced with ID. - // It's a reserved React property https://reactjs.org/warnings/special-props.html - key?: string; id?: string; label: string; run: TopNavMenuAction; diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index 0e8636e982f60..c0b886f9fb86f 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -51,10 +51,18 @@ module.directive('kbnTopNavV2', () => { const linkFn = ($scope, _, $attr) => { $scope.store = localStorage; - // Watch the disableButton functions + // Watch config changes $scope.$watch(() => { const config = $scope.$eval($attr.config); return config.map((item) => { + // Copy key into id, as it's a reserved react propery. + // This is done for Angular directive backward compatibility. + // In React only id is recognized. + if (item.key && !item.id) { + item.id = item.key; + } + + // Watch the disableButton functions if (typeof item.disableButton === 'function') { return item.disableButton(); } From b848d3a38bbcb7e631f7ac99ea3063dd0742029d Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 18:31:09 +0300 Subject: [PATCH 57/61] Fix top nav menu test TS --- .../kibana_react/public/top_nav_menu/top_nav_menu.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx index 3dbe8034e37e0..1d38347e82445 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx @@ -34,17 +34,17 @@ describe('TopNavMenu', () => { const SEARCH_BAR_SELECTOR = 'SearchBar'; const menuItems: TopNavMenuData[] = [ { - key: 'test', + id: 'test', label: 'test', run: jest.fn(), }, { - key: 'test2', + id: 'test2', label: 'test2', run: jest.fn(), }, { - key: 'test3', + id: 'test3', label: 'test3', run: jest.fn(), }, From c084f141c91078be7a12e9140a8a1ba271c79665 Mon Sep 17 00:00:00 2001 From: Liza K Date: Thu, 18 Jul 2019 18:35:00 +0300 Subject: [PATCH 58/61] Minor ts fix --- .../kibana_react/public/top_nav_menu/top_nav_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index 0b702354416c8..aa918780b4594 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -44,7 +44,7 @@ type Props = Partial & { export function TopNavMenu(props: Props) { function renderItems() { if (!props.config) return; - return props.config.map((menuItem, i) => { + return props.config.map((menuItem: TopNavMenuData, i: number) => { return ( From 07d0d3fcf05a672e19b519f4bda8311700812a75 Mon Sep 17 00:00:00 2001 From: Liza K Date: Fri, 19 Jul 2019 23:48:12 +0300 Subject: [PATCH 59/61] @cchaos code review fixes --- .../filter_bar/_global_filter_group.scss | 4 ++ .../query_bar/components/query_bar.test.tsx | 2 +- .../search_bar/components/search_bar.test.tsx | 2 +- .../search_bar/components/search_bar.tsx | 2 +- .../dashboard/top_nav/get_top_nav_config.ts | 24 ++++++--- .../kibana/public/discover/_discover.scss | 10 ++++ .../kibana/public/discover/index.html | 15 +++++- .../public/visualize/editor/editor.html | 1 - .../kibana/public/visualize/editor/editor.js | 17 +++---- .../public/top_nav_menu/_index.scss | 4 +- .../public/top_nav_menu/top_nav_menu.test.tsx | 9 ---- .../public/top_nav_menu/top_nav_menu.tsx | 50 ++++++------------- .../ui/public/kbn_top_nav/kbn_top_nav2.js | 2 - .../maps/public/angular/map_controller.js | 9 ++-- 14 files changed, 77 insertions(+), 74 deletions(-) diff --git a/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss index e1c89a538dc87..7fbe295b95571 100644 --- a/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss +++ b/src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss @@ -1,4 +1,8 @@ // SASSTODO: Probably not the right file for this selector, but temporary until the files get re-organized +.globalQueryBar { + padding: 0px $euiSizeS $euiSizeS $euiSizeS; +} + .globalQueryBar:not(:empty) { padding-bottom: $euiSizeS; } diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx index a612581bf7b85..87bcebc4c510a 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar.test.tsx @@ -119,7 +119,7 @@ describe('QueryBar', () => { expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1); }); - it('Should disable timepicker when asked', () => { + it('Should not show timepicker when asked', () => { const component = shallowWithIntl( { expect(component.find(QUERY_BAR).length).toBe(1); }); - it('Should render empty when timepicker disabled and no options provided', () => { + it('Should render empty when timepicker is off and no options provided', () => { const component = mountWithIntl( { appName={this.props.appName} indexPatterns={this.props.indexPatterns} store={this.props.store!} - prepend={this.props.showFilterBar ? this.getFilterTriggerButton() : ''} + prepend={this.props.showFilterBar ? this.getFilterTriggerButton() : undefined} showDatePicker={this.props.showDatePicker} showQueryInput={this.props.showQueryInput} dateRangeFrom={this.props.dateRangeFrom} diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts index 97942cd4c7167..09879f863aee5 100644 --- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts +++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.ts @@ -61,7 +61,8 @@ export function getTopNavConfig( function getFullScreenConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.fullScreenButtonAriaLabel', { + id: 'full-screen', + label: i18n.translate('kbn.dashboard.topNave.fullScreenButtonAriaLabel', { defaultMessage: 'full screen', }), description: i18n.translate('kbn.dashboard.topNave.fullScreenConfigDescription', { @@ -77,7 +78,8 @@ function getFullScreenConfig(action: NavAction) { */ function getEditConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.editButtonAriaLabel', { + id: 'edit', + label: i18n.translate('kbn.dashboard.topNave.editButtonAriaLabel', { defaultMessage: 'edit', }), description: i18n.translate('kbn.dashboard.topNave.editConfigDescription', { @@ -96,7 +98,8 @@ function getEditConfig(action: NavAction) { */ function getSaveConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.saveButtonAriaLabel', { + id: 'save', + label: i18n.translate('kbn.dashboard.topNave.saveButtonAriaLabel', { defaultMessage: 'save', }), description: i18n.translate('kbn.dashboard.topNave.saveConfigDescription', { @@ -112,7 +115,8 @@ function getSaveConfig(action: NavAction) { */ function getViewConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.cancelButtonAriaLabel', { + id: 'cancel', + label: i18n.translate('kbn.dashboard.topNave.cancelButtonAriaLabel', { defaultMessage: 'cancel', }), description: i18n.translate('kbn.dashboard.topNave.viewConfigDescription', { @@ -128,7 +132,8 @@ function getViewConfig(action: NavAction) { */ function getCloneConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.cloneButtonAriaLabel', { + id: 'clone', + label: i18n.translate('kbn.dashboard.topNave.cloneButtonAriaLabel', { defaultMessage: 'clone', }), description: i18n.translate('kbn.dashboard.topNave.cloneConfigDescription', { @@ -144,7 +149,8 @@ function getCloneConfig(action: NavAction) { */ function getAddConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.addButtonAriaLabel', { + id: 'add', + label: i18n.translate('kbn.dashboard.topNave.addButtonAriaLabel', { defaultMessage: 'add', }), description: i18n.translate('kbn.dashboard.topNave.addConfigDescription', { @@ -160,7 +166,8 @@ function getAddConfig(action: NavAction) { */ function getShareConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.shareButtonAriaLabel', { + id: 'share', + label: i18n.translate('kbn.dashboard.topNave.shareButtonAriaLabel', { defaultMessage: 'share', }), description: i18n.translate('kbn.dashboard.topNave.shareConfigDescription', { @@ -176,7 +183,8 @@ function getShareConfig(action: NavAction) { */ function getOptionsConfig(action: NavAction) { return { - id: i18n.translate('kbn.dashboard.topNave.optionsButtonAriaLabel', { + id: 'options', + label: i18n.translate('kbn.dashboard.topNave.optionsButtonAriaLabel', { defaultMessage: 'options', }), description: i18n.translate('kbn.dashboard.topNave.optionsConfigDescription', { diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss index ec345d33406be..5d918cb61cfb2 100644 --- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss @@ -36,8 +36,18 @@ discover-app { } .dscResultCount { + display: flex; + justify-content: center; padding-top: $euiSizeXS; padding-left: $euiSizeM; + + .dscResultHits { + padding-left: $euiSizeXS; + } + + > button { + padding-left: $euiSizeM; + } } .dscTimechart__header { diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html index 522d23463ff99..ab59ae8a3c2db 100644 --- a/src/legacy/core_plugins/kibana/public/discover/index.html +++ b/src/legacy/core_plugins/kibana/public/discover/index.html @@ -91,12 +91,25 @@
- {{(hits || 0) | number:0}} + {{(hits || 0) | number:0}} +
addToDashMode; - $scope.showSearchBarInline = () => { - // Show inline with menu, if it's only the timepicker \ autorefresh component - return !$scope.showQueryInput() && !$scope.showFilterBar(); - }; - $scope.showFilterBar = () => { return vis.type.options.showFilterBar; }; diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss index 2950bee65c22e..4a0e6af3f7f70 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/_index.scss @@ -1,7 +1,7 @@ -.topNavMenu__wrapper { +.kbnTopNavMenu__wrapper { z-index: 5; - .topNavMenu { + .kbnTopNavMenu { padding: $euiSizeS 0px $euiSizeXS; } } diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx index 1d38347e82445..764e93a8685ea 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.test.tsx @@ -74,13 +74,4 @@ describe('TopNavMenu', () => { expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0); expect(component.find(`span > ${SEARCH_BAR_SELECTOR}`).length).toBe(1); }); - - it('Should render search bar inline', () => { - const component = shallowWithIntl( - - ); - - expect(component.find(TOP_NAV_ITEM_SELECTOR).length).toBe(0); - expect(component.find(`EuiFlexItem > ${SEARCH_BAR_SELECTOR}`).length).toBe(1); - }); }); diff --git a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx index aa918780b4594..e0c705ece7b4b 100644 --- a/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx +++ b/src/legacy/core_plugins/kibana_react/public/top_nav_menu/top_nav_menu.tsx @@ -29,7 +29,6 @@ type Props = Partial & { name: string; config?: TopNavMenuData[]; showSearchBar?: boolean; - showSearchBarInline?: boolean; }; /* @@ -82,40 +81,20 @@ export function TopNavMenu(props: Props) { } function renderLayout() { - if (props.showSearchBarInline) { - return ( -
- - - {renderItems()} - - {renderSearchBar()} - -
- ); - } else { - return ( - - - {renderItems()} - - {renderSearchBar()} - - ); - } + return ( + + + {renderItems()} + + {renderSearchBar()} + + ); } return {renderLayout()}; @@ -123,7 +102,6 @@ export function TopNavMenu(props: Props) { TopNavMenu.defaultProps = { showSearchBar: false, - showSearchBarInline: false, showQueryBar: true, showQueryInput: true, showDatePicker: true, diff --git a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js index c0b886f9fb86f..8c1feb922a25b 100644 --- a/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js +++ b/src/legacy/ui/public/kbn_top_nav/kbn_top_nav2.js @@ -107,8 +107,6 @@ module.directive('kbnTopNavV2Helper', (reactDirective) => { 'showQueryInput', 'showDatePicker', - 'showSearchBarInline', - 'appName', 'screenTitle', 'dateRangeFrom', diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js index afda01fcb7841..d386be39818ca 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js +++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js @@ -332,7 +332,8 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta timefilter.disableAutoRefreshSelector(); $scope.showDatePicker = true; // used by query-bar directive to enable timepikcer in query bar $scope.topNavMenu = [{ - id: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', { + id: 'full-screen', + label: i18n.translate('xpack.maps.mapController.fullScreenButtonLabel', { defaultMessage: `full screen` }), description: i18n.translate('xpack.maps.mapController.fullScreenDescription', { @@ -343,7 +344,8 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta store.dispatch(enableFullScreen()); } }, { - id: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', { + id: 'inspect', + label: i18n.translate('xpack.maps.mapController.openInspectorButtonLabel', { defaultMessage: `inspect` }), description: i18n.translate('xpack.maps.mapController.openInspectorDescription', { @@ -355,7 +357,8 @@ app.controller('GisMapController', ($scope, $route, kbnUrl, localStorage, AppSta Inspector.open(inspectorAdapters, {}); } }, ...(capabilities.get().maps.save ? [{ - id: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', { + id: 'save', + label: i18n.translate('xpack.maps.mapController.saveMapButtonLabel', { defaultMessage: `save` }), description: i18n.translate('xpack.maps.mapController.saveMapDescription', { From 1994d2cf7fcee842b79c0cc99b842d681302f57c Mon Sep 17 00:00:00 2001 From: Liza K Date: Sun, 21 Jul 2019 14:12:04 +0300 Subject: [PATCH 60/61] Minor discover code review fixes --- src/legacy/core_plugins/kibana/public/discover/_discover.scss | 2 +- src/legacy/core_plugins/kibana/public/discover/index.html | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss index 5d918cb61cfb2..a2b5bd98c6a0f 100644 --- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss @@ -45,7 +45,7 @@ discover-app { padding-left: $euiSizeXS; } - > button { + > .kuiLink { padding-left: $euiSizeM; } } diff --git a/src/legacy/core_plugins/kibana/public/discover/index.html b/src/legacy/core_plugins/kibana/public/discover/index.html index ab59ae8a3c2db..e1cdcc3365bdf 100644 --- a/src/legacy/core_plugins/kibana/public/discover/index.html +++ b/src/legacy/core_plugins/kibana/public/discover/index.html @@ -103,9 +103,6 @@ class="kuiLink" type="button" id="reload_saved_search" - aria-label="{{::'kbn.discover.reloadSavedSearchAriaLabel' | i18n: {defaultMessage: 'Reload saved search'} }}" - tooltip="{{::'kbn.discover.reloadSavedSearchTooltip' | i18n: {defaultMessage: 'Reload saved search'} }}" - tooltip-append-to-body="1" ng-click="resetQuery()" > {{::'kbn.discover.reloadSavedSearchButton' | i18n: {defaultMessage: 'Reset search'} }} From 0c5b15a2bebb5d7228ea1ae4fd9ba8b4ce6a3a60 Mon Sep 17 00:00:00 2001 From: Liza K Date: Sun, 21 Jul 2019 14:12:59 +0300 Subject: [PATCH 61/61] css fix --- src/legacy/core_plugins/kibana/public/discover/_discover.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss index a2b5bd98c6a0f..2e142d475be24 100644 --- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss @@ -36,8 +36,7 @@ discover-app { } .dscResultCount { - display: flex; - justify-content: center; + text-align: center; padding-top: $euiSizeXS; padding-left: $euiSizeM;