From 62df460e36c0dff292e6192a98952bdc0529f937 Mon Sep 17 00:00:00 2001 From: saarikabhasi Date: Tue, 25 Apr 2023 09:42:56 -0400 Subject: [PATCH 1/7] update nav from Preview to Search Preview --- .../public/applications/shared/layout/nav.test.tsx | 2 +- .../enterprise_search/public/applications/shared/layout/nav.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx index 11458565f781a..27878b355c600 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.test.tsx @@ -287,7 +287,7 @@ describe('useEnterpriseSearchEngineNav', () => { { href: `/app/enterprise_search/content/engines/${engineName}/preview`, id: 'enterpriseSearchEnginePreview', - name: 'Preview', + name: 'Search Preview', }, { href: `/app/enterprise_search/content/engines/${engineName}/indices`, diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx index f06e32b9e30c8..086e02645edb3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/nav.tsx @@ -196,7 +196,7 @@ export const useEnterpriseSearchEngineNav = (engineName?: string, isEmptyState?: { id: 'enterpriseSearchEnginePreview', name: i18n.translate('xpack.enterpriseSearch.nav.engine.previewTitle', { - defaultMessage: 'Preview', + defaultMessage: 'Search Preview', }), ...generateNavLink({ shouldNotCreateHref: true, From e120d843d9c9cbcfcd72f36125b638b06d478c7f Mon Sep 17 00:00:00 2001 From: saarikabhasi Date: Tue, 25 Apr 2023 11:42:12 -0400 Subject: [PATCH 2/7] Remove bottom border from nav and test color --- .../components/engine/engine_connect/engine_connect.tsx | 3 +++ .../engine/engine_search_preview/engine_search_preview.tsx | 5 ++++- .../components/engine/engine_view.tsx | 2 ++ .../components/engine/search_application_content.tsx | 2 ++ .../components/engines/engines_list.tsx | 1 + .../components/layout/engines_page_template.tsx | 5 ++++- 6 files changed, 16 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx index a6c29285f4f66..5b119ad2f18a2 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx @@ -68,6 +68,8 @@ export const EngineConnect: React.FC = () => { pageViewTelemetry={EngineViewTabs.CONNECT} isLoading={isLoadingEngine} pageHeader={{ + bottomBorder: false, + // css: { 'background-color': color }, pageTitle, rightSideItems: [], }} @@ -84,6 +86,7 @@ export const EngineConnect: React.FC = () => { pageViewTelemetry={EngineViewTabs.CONNECT} isLoading={isLoadingEngine} pageHeader={{ + bottomBorder: false, pageTitle, rightSideItems: [], tabs: [ diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx index 5cd4895c3aa35..31453e350f93a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx @@ -23,6 +23,7 @@ import { EuiSpacer, EuiTextColor, EuiTitle, + useEuiBackgroundColor, } from '@elastic/eui'; import { PagingInfo, @@ -299,7 +300,7 @@ export const EngineSearchPreview: React.FC = () => { }, }; }, [http, engineName, resultFields, searchableFields]); - + const color = useEuiBackgroundColor('subdued'); if (!engineData) return null; return ( @@ -313,6 +314,8 @@ export const EngineSearchPreview: React.FC = () => { pageViewTelemetry={EngineViewTabs.PREVIEW} isLoading={isLoadingEngine} pageHeader={{ + bottomBorder: false, + css: { 'background-color': color }, pageTitle: ( { pageChrome={[engineName]} pageViewTelemetry={tabId} pageHeader={{ + bottomBorder: false, pageTitle: engineName, rightSideItems: [], }} @@ -91,6 +92,7 @@ export const EngineView: React.FC = () => { pageChrome={[engineName]} pageViewTelemetry={tabId} pageHeader={{ + bottomBorder: false, pageTitle: engineName, rightSideItems: [], }} diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx index 4bf79b31a1491..6705d46ae2e0b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx @@ -78,6 +78,7 @@ export const SearchApplicationContent = () => { pageViewTelemetry={EngineViewTabs.CONTENT} isLoading={isLoadingEngine} pageHeader={{ + bottomBorder: false, pageTitle, rightSideItems: [], }} @@ -103,6 +104,7 @@ export const SearchApplicationContent = () => { pageViewTelemetry={EngineViewTabs.CONTENT} isLoading={isLoadingEngine} pageHeader={{ + bottomBorder: false, breadcrumbs: [ { color: 'primary', diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx index 7b93214e0af8b..1f26c588510ae 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx @@ -163,6 +163,7 @@ export const EnginesList: React.FC = ({ createEngineFlyoutOpen }) => }), ]} pageHeader={{ + bottomBorder: false, description: ( = ({ children, pageChrome, pageViewTelemetry, engineName, ...pageTemplateProps }) => { +> = ({ children, pageChrome, pageViewTelemetry, engineName, color, ...pageTemplateProps }) => { const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState); + return ( Date: Tue, 25 Apr 2023 12:37:19 -0400 Subject: [PATCH 3/7] Updated color in wrapper --- .../engine_search_preview/engine_search_preview.tsx | 5 ++--- .../components/layout/engines_page_template.tsx | 9 ++++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx index 31453e350f93a..c8bc7ab34f47e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx @@ -23,7 +23,6 @@ import { EuiSpacer, EuiTextColor, EuiTitle, - useEuiBackgroundColor, } from '@elastic/eui'; import { PagingInfo, @@ -300,7 +299,7 @@ export const EngineSearchPreview: React.FC = () => { }, }; }, [http, engineName, resultFields, searchableFields]); - const color = useEuiBackgroundColor('subdued'); + // const color = useEuiBackgroundColor('subdued'); if (!engineData) return null; return ( @@ -315,7 +314,7 @@ export const EngineSearchPreview: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - css: { 'background-color': color }, + // css: { 'background-color': color }, pageTitle: ( = ({ children, pageChrome, pageViewTelemetry, engineName, color, ...pageTemplateProps }) => { +> = ({ children, pageChrome, pageViewTelemetry, engineName, ...pageTemplateProps }) => { const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState); - + const color = useEuiBackgroundColor('subdued'); + pageTemplateProps.pageHeader = { + ...pageTemplateProps.pageHeader, + css: { 'background-color': color }, + }; return ( Date: Tue, 25 Apr 2023 13:03:33 -0400 Subject: [PATCH 4/7] remove comments --- .../components/engine/engine_connect/engine_connect.tsx | 1 - .../engine/engine_search_preview/engine_search_preview.tsx | 3 +-- .../components/layout/engines_page_template.tsx | 3 ++- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx index 5b119ad2f18a2..4681ee7417d48 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx @@ -69,7 +69,6 @@ export const EngineConnect: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - // css: { 'background-color': color }, pageTitle, rightSideItems: [], }} diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx index c8bc7ab34f47e..e75da0a64792c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx @@ -299,7 +299,7 @@ export const EngineSearchPreview: React.FC = () => { }, }; }, [http, engineName, resultFields, searchableFields]); - // const color = useEuiBackgroundColor('subdued'); + if (!engineData) return null; return ( @@ -314,7 +314,6 @@ export const EngineSearchPreview: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - // css: { 'background-color': color }, pageTitle: ( Date: Tue, 25 Apr 2023 15:18:58 -0400 Subject: [PATCH 5/7] Move header to pageSection --- .../engine_search_preview.tsx | 124 +++++++++++------- .../components/engines/engines_list.tsx | 1 - .../layout/engines_page_template.tsx | 11 +- 3 files changed, 80 insertions(+), 56 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx index e75da0a64792c..ffea55611693e 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx @@ -18,6 +18,7 @@ import { EuiHorizontalRule, EuiIcon, EuiLink, + EuiPageSection, EuiPanel, EuiPopover, EuiSpacer, @@ -72,6 +73,7 @@ import { ResultsView, Sorting, } from './search_ui_components'; +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; class InternalEngineTransporter implements Transporter { constructor( @@ -304,6 +306,7 @@ export const EngineSearchPreview: React.FC = () => { return ( { ]} pageViewTelemetry={EngineViewTabs.PREVIEW} isLoading={isLoadingEngine} - pageHeader={{ - bottomBorder: false, - pageTitle: ( - - ), - rightSideItems: [ - <> - setShowConfigurationPopover(!showConfigurationPopover)} - /> - , - ], - }} + // pageHeader={{ + // bottomBorder: false, + // pageTitle: ( + // + // ), + // rightSideItems: [ + // <> + // setShowConfigurationPopover(!showConfigurationPopover)} + // /> + // , + // ], + // }} engineName={engineName} > - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* + + + } + rightSideItems={[ + <> + setShowConfigurationPopover(!showConfigurationPopover)} + /> + , + ]} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Uncomment when view this API call needed {showAPICallFlyout && lastAPICall && ( @@ -373,7 +396,8 @@ export const EngineSearchPreview: React.FC = () => { /> )} */} - + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx index 1f26c588510ae..7b93214e0af8b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engines/engines_list.tsx @@ -163,7 +163,6 @@ export const EnginesList: React.FC = ({ createEngineFlyoutOpen }) => }), ]} pageHeader={{ - bottomBorder: false, description: ( = ({ children, pageChrome, pageViewTelemetry, engineName, ...pageTemplateProps }) => { const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState); - const color = useEuiBackgroundColor('subdued'); - pageTemplateProps.pageHeader = { - ...pageTemplateProps.pageHeader, - css: { 'background-color': color }, - }; + + // pageTemplateProps.pageHeader = { + // ...pageTemplateProps.pageHeader, + // css: { 'background-color': color }, + // }; return ( Date: Tue, 25 Apr 2023 17:42:48 -0400 Subject: [PATCH 6/7] Page template with scss --- .../engine/engine_connect/engine_connect.tsx | 4 + .../engine_search_preview.tsx | 126 ++++++++---------- .../engine/search_application_content.tsx | 3 + .../engine/search_application_layout.scss | 5 + .../layout/engines_page_template.tsx | 7 - 5 files changed, 64 insertions(+), 81 deletions(-) create mode 100644 x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx index 4681ee7417d48..d07951ba74444 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx @@ -26,6 +26,8 @@ import { EngineViewLogic } from '../engine_view_logic'; import { SearchApplicationAPI } from './search_application_api'; +import '../search_application_layout.scss'; + const pageTitle = i18n.translate( 'xpack.enterpriseSearch.content.searchApplications.connect.pageTitle', { @@ -69,6 +71,7 @@ export const EngineConnect: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, + className: 'searchApplciationHeaderBackgroundColor', pageTitle, rightSideItems: [], }} @@ -86,6 +89,7 @@ export const EngineConnect: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, + className: 'searchApplciationHeaderBackgroundColor', pageTitle, rightSideItems: [], tabs: [ diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx index ffea55611693e..35c8d6d3d57ae 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx @@ -18,7 +18,6 @@ import { EuiHorizontalRule, EuiIcon, EuiLink, - EuiPageSection, EuiPanel, EuiPopover, EuiSpacer, @@ -73,7 +72,7 @@ import { ResultsView, Sorting, } from './search_ui_components'; -import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; +import '../search_application_layout.scss'; class InternalEngineTransporter implements Transporter { constructor( @@ -306,7 +305,6 @@ export const EngineSearchPreview: React.FC = () => { return ( { ]} pageViewTelemetry={EngineViewTabs.PREVIEW} isLoading={isLoadingEngine} - // pageHeader={{ - // bottomBorder: false, - // pageTitle: ( - // - // ), - // rightSideItems: [ - // <> - // setShowConfigurationPopover(!showConfigurationPopover)} - // /> - // , - // ], - // }} + pageHeader={{ + bottomBorder: false, + className: 'searchApplciationHeaderBackgroundColor', + pageTitle: ( + + ), + rightSideItems: [ + <> + setShowConfigurationPopover(!showConfigurationPopover)} + /> + , + ], + }} engineName={engineName} > - - - } - rightSideItems={[ - <> - setShowConfigurationPopover(!showConfigurationPopover)} - /> - , - ]} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Uncomment when view this API call needed {showAPICallFlyout && lastAPICall && ( @@ -396,8 +375,7 @@ export const EngineSearchPreview: React.FC = () => { /> )} */} - - + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx index 6705d46ae2e0b..b06409adc1015 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_content.tsx @@ -30,6 +30,7 @@ import { EngineIndices } from './engine_indices'; import { EngineIndicesLogic } from './engine_indices_logic'; import { EngineSchema } from './engine_schema'; import { EngineViewLogic } from './engine_view_logic'; +import './search_application_layout.scss'; const pageTitle = i18n.translate( 'xpack.enterpriseSearch.content.searchApplications.content.pageTitle', @@ -79,6 +80,7 @@ export const SearchApplicationContent = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, + className: 'searchApplciationHeaderBackgroundColor', pageTitle, rightSideItems: [], }} @@ -121,6 +123,7 @@ export const SearchApplicationContent = () => { ), }, ], + className: 'searchApplciationHeaderBackgroundColor', pageTitle, rightSideItems: [ = ({ children, pageChrome, pageViewTelemetry, engineName, ...pageTemplateProps }) => { const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState); - - // pageTemplateProps.pageHeader = { - // ...pageTemplateProps.pageHeader, - // css: { 'background-color': color }, - // }; return ( Date: Wed, 26 Apr 2023 11:31:20 -0400 Subject: [PATCH 7/7] change background color shade and minor cleanup --- .../components/engine/engine_connect/engine_connect.tsx | 4 ++-- .../engine/engine_search_preview/engine_search_preview.tsx | 2 +- .../components/engine/search_application_content.tsx | 4 ++-- .../components/engine/search_application_layout.scss | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx index d07951ba74444..018470da69410 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx @@ -71,7 +71,7 @@ export const EngineConnect: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - className: 'searchApplciationHeaderBackgroundColor', + className: 'searchApplicationHeaderBackgroundColor', pageTitle, rightSideItems: [], }} @@ -89,7 +89,7 @@ export const EngineConnect: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - className: 'searchApplciationHeaderBackgroundColor', + className: 'searchApplicationHeaderBackgroundColor', pageTitle, rightSideItems: [], tabs: [ diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx index 35c8d6d3d57ae..25818607f102f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx @@ -315,7 +315,7 @@ export const EngineSearchPreview: React.FC = () => { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - className: 'searchApplciationHeaderBackgroundColor', + className: 'searchApplicationHeaderBackgroundColor', pageTitle: ( { isLoading={isLoadingEngine} pageHeader={{ bottomBorder: false, - className: 'searchApplciationHeaderBackgroundColor', + className: 'searchApplicationHeaderBackgroundColor', pageTitle, rightSideItems: [], }} @@ -123,7 +123,7 @@ export const SearchApplicationContent = () => { ), }, ], - className: 'searchApplciationHeaderBackgroundColor', + className: 'searchApplicationHeaderBackgroundColor', pageTitle, rightSideItems: [