[8.8] [Search Application] Update pageTemplate header to grey and ren…

…ame nav item to "Search preview" (#155795) (#156071) # Backport This will backport the following commits from `main` to `8.8`: - [[Search Application] Update pageTemplate header to grey and rename nav item to "Search preview" (#155795)](#155795)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
elastic · Apr 27, 2023 · 4ef2af3 · 4ef2af3
1 parent 1a79030
commit 4ef2af3
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 2 deletions.
diff --git a/...pplications/enterprise_search_content/components/engine/engine_connect/engine_connect.tsx b/...pplications/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',
  {
@@ -68,6 +70,8 @@ export const EngineConnect: React.FC = () => {
  pageViewTelemetry={EngineViewTabs.CONNECT}
  isLoading={isLoadingEngine}
  pageHeader={{
+ bottomBorder: false,
+ className: 'searchApplicationHeaderBackgroundColor',
  pageTitle,
  rightSideItems: [],
  }}
@@ -84,6 +88,8 @@ export const EngineConnect: React.FC = () => {
  pageViewTelemetry={EngineViewTabs.CONNECT}
  isLoading={isLoadingEngine}
  pageHeader={{
+ bottomBorder: false,
+ className: 'searchApplicationHeaderBackgroundColor',
  pageTitle,
  rightSideItems: [],
  tabs: [

diff --git a/...terprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx b/...terprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
@@ -72,6 +72,7 @@ import {
  ResultsView,
  Sorting,
 } from './search_ui_components';
+import '../search_application_layout.scss';
 
 class InternalEngineTransporter implements Transporter {
  constructor(
@@ -313,6 +314,8 @@ export const EngineSearchPreview: React.FC = () => {
  pageViewTelemetry={EngineViewTabs.PREVIEW}
  isLoading={isLoadingEngine}
  pageHeader={{
+ bottomBorder: false,
+ className: 'searchApplicationHeaderBackgroundColor',
  pageTitle: (
  <FormattedMessage
  id="xpack.enterpriseSearch.content.engine.searchPreview.pageTitle"

diff --git a/...se_search/public/applications/enterprise_search_content/components/engine/engine_view.tsx b/...se_search/public/applications/enterprise_search_content/components/engine/engine_view.tsx
@@ -55,6 +55,7 @@ export const EngineView: React.FC = () => {
  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/...c/applications/enterprise_search_content/components/engine/search_application_content.tsx b/...c/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',
@@ -78,6 +79,8 @@ export const SearchApplicationContent = () => {
  pageViewTelemetry={EngineViewTabs.CONTENT}
  isLoading={isLoadingEngine}
  pageHeader={{
+ bottomBorder: false,
+ className: 'searchApplicationHeaderBackgroundColor',
  pageTitle,
  rightSideItems: [],
  }}
@@ -103,6 +106,7 @@ export const SearchApplicationContent = () => {
  pageViewTelemetry={EngineViewTabs.CONTENT}
  isLoading={isLoadingEngine}
  pageHeader={{
+ bottomBorder: false,
  breadcrumbs: [
  {
  color: 'primary',
@@ -119,6 +123,7 @@ export const SearchApplicationContent = () => {
  ),
  },
  ],
+ className: 'searchApplicationHeaderBackgroundColor',
  pageTitle,
  rightSideItems: [
  <EuiButton

diff --git a/...c/applications/enterprise_search_content/components/engine/search_application_layout.scss b/...c/applications/enterprise_search_content/components/engine/search_application_layout.scss
@@ -0,0 +1,5 @@
+
+.searchApplicationHeaderBackgroundColor {
+ background-color: $euiColorLightestShade;
+
+}
diff --git a/...public/applications/enterprise_search_content/components/layout/engines_page_template.tsx b/...public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
@@ -23,6 +23,7 @@ export const EnterpriseSearchEnginesPageTemplate: React.FC<
  const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState);
  return (
  <EnterpriseSearchPageTemplateWrapper
+ panelled
  {...pageTemplateProps}
  solutionNav={{
  items: navItems,

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
@@ -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}/content`,

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
@@ -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,