Skip to content

Commit

Permalink
Move header to pageSection
Browse files Browse the repository at this point in the history
  • Loading branch information
@saarikabhasi
saarikabhasi committed Apr 25, 2023
1 parent f43d6a5 commit 24bc34f
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 56 deletions.
124 changes: 74 additions & 50 deletions ...terprise_search_content/components/engine/engine_search_preview/engine_search_preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
EuiHorizontalRule,
EuiIcon,
EuiLink,
EuiPageSection,
EuiPanel,
EuiPopover,
EuiSpacer,
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -304,6 +306,7 @@ export const EngineSearchPreview: React.FC = () => {

return (
<EnterpriseSearchEnginesPageTemplate
customPageSections
pageChrome={[
engineName,
i18n.translate('xpack.enterpriseSearch.content.engine.searchPreview.pageChrome', {
Expand All @@ -312,57 +315,77 @@ 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,
// pageTitle: (
// <FormattedMessage
// id="xpack.enterpriseSearch.content.engine.searchPreview.pageTitle"
// defaultMessage="{engineName}"
// values={{ engineName }}
// />
// ),
// rightSideItems: [
// <>
// <ConfigurationPopover
// engineName={engineName}
// showConfiguration={showConfigurationPopover}
// setCloseConfiguration={() => setShowConfigurationPopover(!showConfigurationPopover)}
// />
// </>,
// ],
// }}
engineName={engineName}
>
<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 />
{/*
<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 />
{/*
Uncomment when view this API call needed
{showAPICallFlyout && lastAPICall && (
Expand All @@ -373,7 +396,8 @@ export const EngineSearchPreview: React.FC = () => {
/>
)}
*/}
</DocumentProvider>
</DocumentProvider>
</KibanaPageTemplate.Section>
</EnterpriseSearchEnginesPageTemplate>
);
};
1 change: 0 additions & 1 deletion ..._search/public/applications/enterprise_search_content/components/engines/engines_list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@ export const EnginesList: React.FC<ListProps> = ({ createEngineFlyoutOpen }) =>
}),
]}
pageHeader={{
bottomBorder: false,
description: (
<FormattedMessage
id="xpack.enterpriseSearch.content.searchApplications.description"
Expand Down
11 changes: 6 additions & 5 deletions ...public/applications/enterprise_search_content/components/layout/engines_page_template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,14 @@ export const EnterpriseSearchEnginesPageTemplate: React.FC<
EnterpriseSearchEnginesPageTemplateProps
> = ({ 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 (
<EnterpriseSearchPageTemplateWrapper
panelled
{...pageTemplateProps}
solutionNav={{
items: navItems,
Expand Down

0 comments on commit 24bc34f

Please sign in to comment.