github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fixes the space selector page layout (#150503)

Browse source 
closes #150319

Use of the KibanaPageTemplate.EmptyPrompt on the space selector page was
causing the grid of space cards to render in only 2 columns. After
trying to tweak several properties (e.g. restrictWidth, etc.), only
removing the EmptyPrompt or changing it to a KibanaPageTemplate.Section
solved the issue.

EmptyPrompt Render:
<img width="1224" alt="Screenshot 2023-02-07 at 5 13 03 PM"
src="https://user-images.githubusercontent.com/103939324/217378769-bb0120de-4e7f-43d4-a018-99b6fec26876.png">

New Section Render:
<img width="1189" alt="Screenshot 2023-02-08 at 5 06 45 PM"
src="https://user-images.githubusercontent.com/103939324/217662105-e9032546-caff-436a-be91-5c72764abf66.png">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Jeramy Soucy 2023-02-09 14:19:43 -05:00 • committed by GitHub
parent 5d4c880573
commit 13f5c4c558
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

25
x-pack/plugins/spaces/public/space_selector/__snapshots__/space_selector.test.tsx.snap generated
View file

@ -6,8 +6,9 @@ exports[`it renders without crashing 1`] = `
data-test-subj="kibanaSpaceSelector"
panelled={true}
>
<_EuiPageEmptyPrompt
<_EuiPageSection
className="spcSpaceSelector__pageContent"
color="transparent"
>
<EuiText
size="s"
@ -23,19 +24,19 @@ exports[`it renders without crashing 1`] = `
<EuiSpacer
size="xxl"
/>
<h1
className="eui spcSpaceSelector__pageHeader"
tabIndex={0}
>
<FormattedMessage
defaultMessage="Select your space"
id="xpack.spaces.spaceSelector.selectSpacesTitle"
values={Object {}}
/>
</h1>
<EuiTextColor
color="subdued"
>
<h1
className="eui spcSpaceSelector__pageHeader"
tabIndex={0}
>
<FormattedMessage
defaultMessage="Select your space"
id="xpack.spaces.spaceSelector.selectSpacesTitle"
values={Object {}}
/>
</h1>
<p>
<FormattedMessage
defaultMessage="You can change your space at anytime."
@ -51,6 +52,6 @@ exports[`it renders without crashing 1`] = `
<EuiLoadingSpinner
size="xl"
/>
</_EuiPageEmptyPrompt>
</_EuiPageSection>
</_KibanaPageTemplate>
`;

26
x-pack/plugins/spaces/public/space_selector/space_selector.tsx
View file

@ -107,23 +107,23 @@ export class SpaceSelector extends Component<Props, State> {
data-test-subj="kibanaSpaceSelector"
panelled
>
<KibanaPageTemplate.EmptyPrompt className="spcSpaceSelector__pageContent">
<KibanaPageTemplate.Section className="spcSpaceSelector__pageContent" color="transparent">
<EuiText textAlign="center" size="s">
<EuiSpacer size="xxl" />
<KibanaSolutionAvatar name="Elastic" size="xl" />
<EuiSpacer size="xxl" />
<h1
// plain `eui` class undos forced focus style on non-EUI components
className="eui spcSpaceSelector__pageHeader"
tabIndex={0}
ref={this.setHeaderRef}
>
<FormattedMessage
id="xpack.spaces.spaceSelector.selectSpacesTitle"
defaultMessage="Select your space"
/>
</h1>
<EuiTextColor color="subdued">
<h1
// plain `eui` class undos forced focus style on non-EUI components
className="eui spcSpaceSelector__pageHeader"
tabIndex={0}
ref={this.setHeaderRef}
>
<FormattedMessage
id="xpack.spaces.spaceSelector.selectSpacesTitle"
defaultMessage="Select your space"
/>
</h1>
<p>
<FormattedMessage
id="xpack.spaces.spaceSelector.changeSpaceAnytimeAvailabilityText"
@ -183,7 +183,7 @@ export class SpaceSelector extends Component<Props, State> {
</EuiPanel>
</Fragment>
)}
</KibanaPageTemplate.EmptyPrompt>
</KibanaPageTemplate.Section>
</KibanaPageTemplate>
);
}