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

[Space Selector Screen] General visual and styles cleanup (#128565)

Browse source
This commit is contained in:
Caroline Horn 2022-03-28 15:54:59 -04:00 • committed by GitHub
parent 45948d5d81
commit 610fe94a00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 157 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/core/public/core_app/styles/_mixins.scss
View file

@ -91,7 +91,7 @@
}
&::before {
position: absolute;
position: fixed;
top: 0;
left: 0;
z-index: 1;

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

@ -1,66 +1,60 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`it renders without crashing 1`] = `
<EuiPage
<KibanaPageTemplate
className="spcSpaceSelector"
data-test-subj="kibanaSpaceSelector"
pageContentBodyProps={
Object {
"className": "spcSpaceSelector__pageContent",
}
}
template="empty"
>
<EuiPageBody>
<EuiPageHeader
className="spcSpaceSelector__heading"
<EuiText
size="s"
textAlign="center"
>
<EuiSpacer
size="xxl"
/>
<ForwardRef
name="Elastic"
size="xl"
/>
<EuiSpacer
size="xxl"
/>
<h1
className="eui spcSpaceSelector__pageHeader"
tabIndex={0}
>
<EuiSpacer
size="xxl"
<FormattedMessage
defaultMessage="Select your space"
id="xpack.spaces.spaceSelector.selectSpacesTitle"
values={Object {}}
/>
<span
className="spcSpaceSelector__logo"
>
<EuiIcon
size="xxl"
type="logoElastic"
</h1>
<EuiTextColor
color="subdued"
>
<p>
<FormattedMessage
defaultMessage="You can change your space at anytime."
id="xpack.spaces.spaceSelector.changeSpaceAnytimeAvailabilityText"
values={Object {}}
/>
</span>
<EuiTitle
size="l"
>
<h1
tabIndex={0}
>
<FormattedMessage
defaultMessage="Select your space"
id="xpack.spaces.spaceSelector.selectSpacesTitle"
values={Object {}}
/>
</h1>
</EuiTitle>
<EuiText
color="subdued"
size="s"
>
<p>
<FormattedMessage
defaultMessage="You can change your space at anytime"
id="xpack.spaces.spaceSelector.changeSpaceAnytimeAvailabilityText"
values={Object {}}
/>
</p>
</EuiText>
</EuiPageHeader>
<EuiPageContent
className="spcSpaceSelector__pageContent"
>
<EuiFlexGroup
alignItems="center"
direction="column"
responsive={false}
/>
<EuiSpacer
size="xl"
/>
<EuiLoadingSpinner
size="xl"
/>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</p>
</EuiTextColor>
</EuiText>
<EuiSpacer
size="xxl"
/>
<EuiSpacer
size="xl"
/>
<EuiLoadingSpinner
size="xl"
/>
</KibanaPageTemplate>
`;

2
x-pack/plugins/spaces/public/space_selector/components/space_card.tsx
View file

@ -42,7 +42,7 @@ function renderSpaceAvatar(space: Space) {
// not announcing space name here because the title of the EuiCard that the SpaceAvatar lives in is already
// announcing it. See https://github.com/elastic/kibana/issues/27748
return (
<Suspense fallback={<EuiLoadingSpinner />}>
<Suspense fallback={<EuiLoadingSpinner size="xxl" />}>
<LazySpaceAvatar space={space} size={'l'} announceSpaceName={false} />
</Suspense>
);

29
x-pack/plugins/spaces/public/space_selector/space_selector.scss
View file

@ -3,37 +3,26 @@
}
.spcSpaceSelector__pageContent {
background-color: transparent;
box-shadow: none;
border: none;
text-align: center;
position: relative;
z-index: 10;
}
.spcSpaceSelector__heading {
flex-direction: column;
flex-shrink: 0;
position: relative;
padding: $euiSizeXL;
z-index: 10;
}
.spcSpaceSelector__logo {
@include kibanaCircleLogo;
@include euiBottomShadowMedium;
margin-bottom: $euiSizeXL;
// Fix forced focus outline on text that isn't a link to just be an underline
.spcSpaceSelector__pageHeader {
&:focus {
outline: none;
text-decoration: underline;
}
}
.spcSpaceSelector__searchHolder {
width: $euiFormMaxWidth; // make sure it's as wide as our default form element width
max-width: 100%;
margin-inline: auto;
}
.spcSpaceSelector__errorPanel {
position: relative;
margin: auto;
padding-left: $euiSizeXL;
padding-right: $euiSizeXL;
text-align: center;
margin-inline: auto;
max-width: 700px;
}

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

@ -9,17 +9,11 @@ import './space_selector.scss';
import {
EuiFieldSearch,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLoadingSpinner,
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageHeader,
EuiPanel,
EuiSpacer,
EuiText,
EuiTextColor,
EuiTitle,
} from '@elastic/eui';
import React, { Component, Fragment } from 'react';
@ -27,9 +21,13 @@ import ReactDOM from 'react-dom';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { KibanaSolutionAvatar } from '@kbn/shared-ux-components';
import type { AppMountParameters, CoreStart } from 'src/core/public';
import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
import {
KibanaPageTemplate,
KibanaThemeProvider,
} from '../../../../../src/plugins/kibana_react/public';
import type { Space } from '../../common';
import { SPACE_SEARCH_COUNT_THRESHOLD } from '../../common/constants';
import type { SpacesManager } from '../spaces_manager';
@ -106,84 +104,90 @@ export class SpaceSelector extends Component<Props, State> {
}
return (
<EuiPage className="spcSpaceSelector" data-test-subj="kibanaSpaceSelector">
<EuiPageBody>
<EuiPageHeader className="spcSpaceSelector__heading">
<EuiSpacer size="xxl" />
<span className="spcSpaceSelector__logo">
<EuiIcon size="xxl" type={`logoElastic`} />
</span>
<KibanaPageTemplate
template="empty"
className="spcSpaceSelector"
data-test-subj="kibanaSpaceSelector"
pageContentBodyProps={{ className: 'spcSpaceSelector__pageContent' }}
>
<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">
<p>
<FormattedMessage
id="xpack.spaces.spaceSelector.changeSpaceAnytimeAvailabilityText"
defaultMessage="You can change your space at anytime."
/>
</p>
</EuiTextColor>
</EuiText>
<EuiSpacer size="xxl" />
<EuiTitle size="l">
<h1 tabIndex={0} ref={this.setHeaderRef}>
<FormattedMessage
id="xpack.spaces.spaceSelector.selectSpacesTitle"
defaultMessage="Select your space"
/>
</h1>
</EuiTitle>
<EuiText size="s" color="subdued">
<p>
<FormattedMessage
id="xpack.spaces.spaceSelector.changeSpaceAnytimeAvailabilityText"
defaultMessage="You can change your space at anytime"
/>
</p>
</EuiText>
</EuiPageHeader>
<EuiPageContent className="spcSpaceSelector__pageContent">
<EuiFlexGroup
// @ts-ignore
direction="column"
alignItems="center"
responsive={false}
>
{this.getSearchField()}
</EuiFlexGroup>
{this.getSearchField()}
<EuiSpacer size="xl" />
<EuiSpacer size="xl" />
{this.state.loading && <EuiLoadingSpinner size="xl" />}
{this.state.loading && <EuiLoadingSpinner size="xl" />}
{!this.state.loading && (
<SpaceCards spaces={filteredSpaces} serverBasePath={this.props.serverBasePath} />
)}
{!this.state.loading && (
<SpaceCards spaces={filteredSpaces} serverBasePath={this.props.serverBasePath} />
)}
{!this.state.loading && !this.state.error && filteredSpaces.length === 0 && (
<Fragment>
<EuiSpacer />
<EuiText color="subdued" textAlign="center">
{!this.state.loading && !this.state.error && filteredSpaces.length === 0 && (
<Fragment>
<EuiSpacer />
<EuiPanel className="spcSpaceSelector__errorPanel" color="subdued">
<EuiTitle size="xs">
<h2>
{i18n.translate(
'xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription',
{
defaultMessage: 'No spaces match {searchTerm}',
values: { searchTerm: `"${this.state.searchTerm}"` },
}
)}
</h2>
</EuiTitle>
</EuiPanel>
</Fragment>
)}
{!this.state.loading && this.state.error && (
<Fragment>
<EuiSpacer />
<EuiPanel color="danger" className="spcSpaceSelector__errorPanel">
<EuiText size="s" color="danger">
<h2>
<FormattedMessage
id="xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription"
defaultMessage="No spaces match search criteria"
id="xpack.spaces.spaceSelector.errorLoadingSpacesDescription"
defaultMessage="Error loading spaces ({message})"
values={{ message: this.state.error.message }}
/>
</EuiText>
</Fragment>
)}
{!this.state.loading && this.state.error && (
<Fragment>
<EuiSpacer />
<EuiPanel className="spcSpaceSelector__errorPanel">
<EuiText color="danger" style={{ textAlign: 'center' }}>
<FormattedMessage
id="xpack.spaces.spaceSelector.errorLoadingSpacesDescription"
defaultMessage="Error loading spaces ({message})"
values={{ message: this.state.error.message }}
/>
</EuiText>
<EuiText style={{ textAlign: 'center' }}>
<FormattedMessage
id="xpack.spaces.spaceSelector.contactSysAdminDescription"
defaultMessage="Contact your system administrator."
/>
</EuiText>
</EuiPanel>
</Fragment>
)}
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</h2>
<p>
<FormattedMessage
id="xpack.spaces.spaceSelector.contactSysAdminDescription"
defaultMessage="Contact your system administrator."
/>
</p>
</EuiText>
</EuiPanel>
</Fragment>
)}
</KibanaPageTemplate>
);
}
@ -191,19 +195,20 @@ export class SpaceSelector extends Component<Props, State> {
if (!this.state.spaces || this.state.spaces.length < SPACE_SEARCH_COUNT_THRESHOLD) {
return null;
}
const inputLabel = i18n.translate('xpack.spaces.spaceSelector.findSpacePlaceholder', {
defaultMessage: 'Find a space',
});
return (
<EuiFlexItem className="spcSpaceSelector__searchHolder">
{
<EuiFieldSearch
className="spcSpaceSelector__searchField"
placeholder={i18n.translate('xpack.spaces.spaceSelector.findSpacePlaceholder', {
defaultMessage: 'Find a space',
})}
incremental={true}
onSearch={this.onSearch}
/>
}
</EuiFlexItem>
<div className="spcSpaceSelector__searchHolder">
<EuiFieldSearch
placeholder={inputLabel}
aria-label={inputLabel}
incremental={true}
onSearch={this.onSearch}
/>
</div>
);
};

1
x-pack/plugins/translations/translations/fr-FR.json
View file

@ -23321,7 +23321,6 @@
"xpack.spaces.spaceSelector.contactSysAdminDescription": "Contactez votre administrateur système.",
"xpack.spaces.spaceSelector.errorLoadingSpacesDescription": "Erreur lors du chargement des espaces ({message})",
"xpack.spaces.spaceSelector.findSpacePlaceholder": "Rechercher un espace",
"xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription": "Aucun espace ne correspond aux critères de recherche",
"xpack.spaces.spaceSelector.selectSpacesTitle": "Sélectionner votre espace",
"xpack.spaces.spacesTitle": "Espaces",
"xpack.spaces.uiApi.errorBoundaryToastMessage": "Rechargez la page pour continuer.",

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -26650,7 +26650,6 @@
"xpack.spaces.spaceSelector.contactSysAdminDescription": "システム管理者にお問い合わせください。",
"xpack.spaces.spaceSelector.errorLoadingSpacesDescription": "スペースの読み込みエラー（{message}）",
"xpack.spaces.spaceSelector.findSpacePlaceholder": "スペースを検索",
"xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription": "検索条件に一致するスペースがありません",
"xpack.spaces.spaceSelector.selectSpacesTitle": "スペースの選択",
"xpack.spaces.spacesTitle": "スペース",
"xpack.spaces.uiApi.errorBoundaryToastMessage": "続行するにはページを再読み込みしてください。",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -26679,7 +26679,6 @@
"xpack.spaces.spaceSelector.contactSysAdminDescription": "请联系您的系统管理员。",
"xpack.spaces.spaceSelector.errorLoadingSpacesDescription": "加载工作区时出错 ({message})",
"xpack.spaces.spaceSelector.findSpacePlaceholder": "查找工作区",
"xpack.spaces.spaceSelector.noSpacesMatchSearchCriteriaDescription": "没有匹配搜索条件的空间",
"xpack.spaces.spaceSelector.selectSpacesTitle": "选择您的空间",
"xpack.spaces.spacesTitle": "工作区",
"xpack.spaces.uiApi.errorBoundaryToastMessage": "重新加载页面以继续。",