[Search Application] Update pageTemplate header to grey and rename na…

…v item to "Search preview" (elastic#155795) ## Summary * Rename nav item from "Preview" to "Search Preview" * Update page Header to grey ### Screenshots <img width="1728" alt="Search preview" src="https://user-images.githubusercontent.com/55930906/234397633-003e4e99-680d-4531-8d94-528152fa2799.png"> <img width="1728" alt="Content" src="https://user-images.githubusercontent.com/55930906/234397654-fb678a29-2c55-47d7-8d96-d8ce9f5164a2.png"> <img width="1728" alt="Connect" src="https://user-images.githubusercontent.com/55930906/234397677-57823b14-16bf-44eb-9f01-eb6adca2a3fa.png">
kibanamachine · Apr 27, 2023 · e199282 · e199282
1 parent ef99b85
commit e199282
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,