From f1322163ca4573e07d4e3ec37acf25bfe47ecec9 Mon Sep 17 00:00:00 2001
From: saarikabhasi <nairsaarika.bhasi@elastic.co>
Date: Tue, 25 Apr 2023 17:42:48 -0400
Subject: [PATCH] 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 (
     <EnterpriseSearchEnginesPageTemplate
-      customPageSections
       pageChrome={[
         engineName,
         i18n.translate('xpack.enterpriseSearch.content.engine.searchPreview.pageChrome', {
@@ -315,77 +313,58 @@ export const EngineSearchPreview: React.FC = () => {
       ]}
       pageViewTelemetry={EngineViewTabs.PREVIEW}
       isLoading={isLoadingEngine}
-      // pageHeader={{
-      //   bottomBorder: false,
-      //   pageTitle: (
-      //     <FormattedMessage
-      //       id="xpack.enterpriseSearch.content.engine.searchPreview.pageTitle"
-      //       defaultMessage="{engineName}"
-      //       values={{ engineName }}
-      //     />
-      //   ),
-      //   rightSideItems: [
-      //     <>
-      //       <ConfigurationPopover
-      //         engineName={engineName}
-      //         showConfiguration={showConfigurationPopover}
-      //         setCloseConfiguration={() => setShowConfigurationPopover(!showConfigurationPopover)}
-      //       />
-      //     </>,
-      //   ],
-      // }}
+      pageHeader={{
+        bottomBorder: false,
+        className: 'searchApplciationHeaderBackgroundColor',
+        pageTitle: (
+          <FormattedMessage
+            id="xpack.enterpriseSearch.content.engine.searchPreview.pageTitle"
+            defaultMessage="{engineName}"
+            values={{ engineName }}
+          />
+        ),
+        rightSideItems: [
+          <>
+            <ConfigurationPopover
+              engineName={engineName}
+              showConfiguration={showConfigurationPopover}
+              setCloseConfiguration={() => setShowConfigurationPopover(!showConfigurationPopover)}
+            />
+          </>,
+        ],
+      }}
       engineName={engineName}
     >
-      <KibanaPageTemplate.Section color="subdued">
-        <KibanaPageTemplate.Header
-          bottomBorder={false}
-          pageTitle={
-            <FormattedMessage
-              id="xpack.enterpriseSearch.content.engine.searchPreview.pageTitle"
-              defaultMessage="{engineName}"
-              values={{ engineName }}
-            />
-          }
-          rightSideItems={[
-            <>
-              <ConfigurationPopover
-                engineName={engineName}
-                showConfiguration={showConfigurationPopover}
-                setCloseConfiguration={() => setShowConfigurationPopover(!showConfigurationPopover)}
-              />
-            </>,
-          ]}
-        />
-        <DocumentProvider>
-          <SearchProvider config={config}>
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <SearchBox inputView={InputView} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer size="m" />
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false} css={{ minWidth: '240px' }}>
-                <ResultsPerPage view={ResultsPerPageView} options={RESULTS_PER_PAGE_OPTIONS} />
-                <EuiSpacer size="m" />
-                <Sorting sortableFields={sortableFields} />
-                <EuiSpacer size="m" />
-                <EuiLink href={docLinks.enterpriseSearchEngines} target="_blank">
-                  <FormattedMessage
-                    id="xpack.enterpriseSearch.content.engine.searchPreview.improveResultsLink"
-                    defaultMessage="Improve these results"
-                  />
-                </EuiLink>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <PagingInfo view={PagingInfoView} />
-                <EuiSpacer size="m" />
-                <Results view={ResultsView} resultView={ResultView} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </SearchProvider>
-          <DocumentFlyout />
-          {/*
+      <DocumentProvider>
+        <SearchProvider config={config}>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <SearchBox inputView={InputView} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false} css={{ minWidth: '240px' }}>
+              <ResultsPerPage view={ResultsPerPageView} options={RESULTS_PER_PAGE_OPTIONS} />
+              <EuiSpacer size="m" />
+              <Sorting sortableFields={sortableFields} />
+              <EuiSpacer size="m" />
+              <EuiLink href={docLinks.enterpriseSearchEngines} target="_blank">
+                <FormattedMessage
+                  id="xpack.enterpriseSearch.content.engine.searchPreview.improveResultsLink"
+                  defaultMessage="Improve these results"
+                />
+              </EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <PagingInfo view={PagingInfoView} />
+              <EuiSpacer size="m" />
+              <Results view={ResultsView} resultView={ResultView} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </SearchProvider>
+        <DocumentFlyout />
+        {/*
         Uncomment when view this API call needed
 
         {showAPICallFlyout && lastAPICall && (
@@ -396,8 +375,7 @@ export const EngineSearchPreview: React.FC = () => {
           />
         )}
         */}
-        </DocumentProvider>
-      </KibanaPageTemplate.Section>
+      </DocumentProvider>
     </EnterpriseSearchEnginesPageTemplate>
   );
 };
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: [
           <EuiButton
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss
new file mode 100644
index 0000000000000..cbb5fd23739dc
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/engine/search_application_layout.scss
@@ -0,0 +1,5 @@
+
+.searchApplciationHeaderBackgroundColor {
+  background-color:  rgba(247, 248, 252, 1);
+
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
index cec8b4a9e93b1..ed0cd55b7549a 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
@@ -7,8 +7,6 @@
 
 import React from 'react';
 
-import { useEuiBackgroundColor } from '@elastic/eui';
-
 import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants';
 import { SetEnterpriseSearchEnginesChrome } from '../../../shared/kibana_chrome';
 import { EnterpriseSearchPageTemplateWrapper, PageTemplateProps } from '../../../shared/layout';
@@ -23,11 +21,6 @@ export const EnterpriseSearchEnginesPageTemplate: React.FC<
   EnterpriseSearchEnginesPageTemplateProps
 > = ({ children, pageChrome, pageViewTelemetry, engineName, ...pageTemplateProps }) => {
   const navItems = useEnterpriseSearchEngineNav(engineName, pageTemplateProps.isEmptyState);
-
-  // pageTemplateProps.pageHeader = {
-  //   ...pageTemplateProps.pageHeader,
-  //   css: { 'background-color': color },
-  // };
   return (
     <EnterpriseSearchPageTemplateWrapper
       panelled