with scss

elastic · Apr 25, 2023 · 8140eff · 8140eff
1 parent 24bc34f
commit 8140eff
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 76 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',
  {
@@ -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/...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
@@ -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/...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',
@@ -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/...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 @@
+
+.searchApplciationHeaderBackgroundColor{
+ background-color: rgba(247, 248, 252, 1);
+
+}
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
@@ -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';