Skip to content

Commit

Permalink
[Enterprise Search] Fix EuiPageTemplate child usages (#182711)
Browse files Browse the repository at this point in the history
👋 Hey y'all ent search folks! I missed this fix/update update in our
latest EUI upgrade (#182023). It's directly related to this change in
EUI v94.2.0:

> - Fixed an `EuiPageTemplate` bug where prop updates would not cascade
down to child sections
([#7648](elastic/eui#7648))
> - To cascade props down to the sidebar, `EuiPageTemplate` now
explicitly requires using the `EuiPageTemplate.Sidebar` rather than
`EuiPageSidebar`

In general, it's also a best practice to use EuiPageTemplate's
namespaced children instead of the direct `EuiPage*` components (which
are meant for direct usage within a`EuiPage` component instead), so I've
made similar changes to your code as well. I would suggest pulling down
this PR to QA that your page still looks as expected/as before.
  • Loading branch information
cee-chen committed May 9, 2024
1 parent 1bcec40 commit 03a65d2
Showing 1 changed file with 22 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,7 @@ import { useRouteMatch } from 'react-router-dom';

import { useValues } from 'kea';

import {
EuiPageSidebar,
EuiPageBody,
EuiPageSection,
EuiCallOut,
EuiSpacer,
EuiPageTemplate,
} from '@elastic/eui';
import { EuiCallOut, EuiSpacer, EuiPageTemplate } from '@elastic/eui';

import { AccountHeader, AccountSettingsSidebar, PrivateSourcesSidebar } from '..';
import { FlashMessages } from '../../../../shared/flash_messages';
Expand Down Expand Up @@ -47,37 +40,35 @@ export const PersonalDashboardLayout: FC<PropsWithChildren<LayoutProps>> = ({
<>
{pageChrome && <SetWorkplaceSearchChrome trail={pageChrome} />}
<AccountHeader />
<EuiPageTemplate className="personalDashboardLayout" paddingSize="none">
<EuiPageSidebar
<EuiPageTemplate className="personalDashboardLayout" paddingSize="none" panelled>
<EuiPageTemplate.Sidebar
role="navigation"
className="personalDashboardLayout__sideBar"
sticky
minWidth="480px"
>
{useRouteMatch(PRIVATE_SOURCES_PATH) && <PrivateSourcesSidebar />}
{useRouteMatch(PERSONAL_SETTINGS_PATH) && <AccountSettingsSidebar />}
</EuiPageSidebar>
<EuiPageBody component="main" panelled role="main">
<EuiPageSection
className="personalDashboardLayout__body"
paddingSize="none"
restrictWidth
>
{readOnlyMode && (
<>
<EuiCallOut
color="warning"
iconType="lock"
title={PERSONAL_DASHBOARD_READ_ONLY_MODE_WARNING}
/>
<EuiSpacer />
</>
)}
<FlashMessages />
</EuiPageTemplate.Sidebar>
<EuiPageTemplate.Section
className="personalDashboardLayout__body"
paddingSize="none"
restrictWidth
>
{readOnlyMode && (
<>
<EuiCallOut
color="warning"
iconType="lock"
title={PERSONAL_DASHBOARD_READ_ONLY_MODE_WARNING}
/>
<EuiSpacer />
</>
)}
<FlashMessages />

{isLoading ? <Loading /> : children}
</EuiPageSection>
</EuiPageBody>
{isLoading ? <Loading /> : children}
</EuiPageTemplate.Section>
</EuiPageTemplate>
</>
);
Expand Down

0 comments on commit 03a65d2

Please sign in to comment.