From 6c172ead1963bec6c078a1e1bc0047029bc5dbea Mon Sep 17 00:00:00 2001 From: Larry Gregory Date: Tue, 29 Jun 2021 14:38:56 -0400 Subject: [PATCH] Convert security management pages to new layout (#101660) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../api_keys_grid/api_keys_grid_page.tsx | 81 ++-- .../permission_denied/permission_denied.tsx | 46 +-- .../no_compatible_realms.tsx | 4 +- .../permission_denied/permission_denied.tsx | 46 +-- .../edit_role_mapping_page.tsx | 105 +++-- .../mapping_info_panel/mapping_info_panel.tsx | 2 +- .../rule_editor_panel/rule_editor_panel.tsx | 2 +- .../rule_editor_panel/rule_group_editor.tsx | 2 + .../role_mappings_grid_page.tsx | 4 +- .../collapsible_panel.test.tsx.snap | 5 +- .../collapsible_panel/collapsible_panel.tsx | 2 +- .../roles/edit_role/edit_role_page.tsx | 2 +- .../elasticsearch_privileges.test.tsx.snap | 2 +- .../es/elasticsearch_privileges.tsx | 2 +- .../space_aware_privilege_section.tsx | 2 +- .../roles_grid_page.test.tsx.snap | 185 +++++---- .../permission_denied/permission_denied.tsx | 46 +-- .../roles/roles_grid/roles_grid_page.tsx | 173 ++++---- .../users/edit_user/create_user_page.tsx | 42 +- .../users/edit_user/edit_user_page.tsx | 380 +++++++++--------- .../users/users_grid/users_grid_page.tsx | 116 +++--- x-pack/plugins/spaces/kibana.json | 1 + .../edit_space/manage_space_page.tsx | 59 +-- .../__snapshots__/section_panel.test.tsx.snap | 5 +- .../section_panel/section_panel.tsx | 2 +- .../spaces_grid_page.test.tsx.snap | 197 ++++----- .../spaces_grid/spaces_grid_page.tsx | 109 +++-- .../management/spaces_management_app.test.tsx | 6 +- .../management/spaces_management_app.tsx | 3 +- x-pack/plugins/spaces/tsconfig.json | 1 + .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 32 files changed, 796 insertions(+), 838 deletions(-) diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx index 452b119e8392..9b05876c419d 100644 --- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx +++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx @@ -17,11 +17,9 @@ import { EuiInMemoryTable, EuiPageContent, EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, + EuiPageHeader, EuiSpacer, EuiText, - EuiTitle, EuiToolTip, } from '@elastic/eui'; import type { History } from 'history'; @@ -126,7 +124,7 @@ export class APIKeysGridPage extends Component { if (!apiKeys) { if (isLoadingApp) { return ( - + { if (error) { return ( - + { if (!isLoadingTable && apiKeys && apiKeys.length === 0) { return ( - + - + { const concatenated = `${this.state.createdApiKey?.id}:${this.state.createdApiKey?.api_key}`; return ( - - - - -

+ <> + + } + description={ + <> + {isAdmin ? ( -

- - -

- {isAdmin ? ( - - ) : ( - - )} -

- - - - + ) : ( + + )} + + } + rightSideItems={[ + - - - + , + ]} + /> + + {this.state.createdApiKey && !this.state.isLoadingTable && ( <> @@ -302,7 +307,7 @@ export class APIKeysGridPage extends Component { )} {this.renderTable()} - + ); } diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/permission_denied/permission_denied.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/permission_denied/permission_denied.tsx index de97de0516e2..994963b6e3d9 100644 --- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/permission_denied/permission_denied.tsx +++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/permission_denied/permission_denied.tsx @@ -5,33 +5,31 @@ * 2.0. */ -import { EuiEmptyPrompt, EuiFlexGroup, EuiPageContent } from '@elastic/eui'; +import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; export const PermissionDenied = () => ( - - - - - - } - body={ -

- -

- } - /> - - + + + + + } + body={ +

+ +

+ } + /> + ); diff --git a/x-pack/plugins/security/public/management/role_mappings/components/no_compatible_realms/no_compatible_realms.tsx b/x-pack/plugins/security/public/management/role_mappings/components/no_compatible_realms/no_compatible_realms.tsx index facf543601d7..dbc0c6e5d1f5 100644 --- a/x-pack/plugins/security/public/management/role_mappings/components/no_compatible_realms/no_compatible_realms.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/components/no_compatible_realms/no_compatible_realms.tsx @@ -19,7 +19,7 @@ export const NoCompatibleRealms: React.FunctionComponent = () => { title={ } color="warning" @@ -27,7 +27,7 @@ export const NoCompatibleRealms: React.FunctionComponent = () => { > diff --git a/x-pack/plugins/security/public/management/role_mappings/components/permission_denied/permission_denied.tsx b/x-pack/plugins/security/public/management/role_mappings/components/permission_denied/permission_denied.tsx index 65af6482a0b8..b6e7eff4099e 100644 --- a/x-pack/plugins/security/public/management/role_mappings/components/permission_denied/permission_denied.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/components/permission_denied/permission_denied.tsx @@ -5,33 +5,31 @@ * 2.0. */ -import { EuiEmptyPrompt, EuiFlexGroup, EuiPageContent } from '@elastic/eui'; +import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; export const PermissionDenied = () => ( - - - - - - } - body={ -

- -

- } - /> - - + + + + + } + body={ +

+ +

+ } + /> + ); diff --git a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.tsx b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.tsx index 4f238f819f32..00f03b94436e 100644 --- a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.tsx @@ -13,11 +13,10 @@ import { EuiForm, EuiLink, EuiPageContent, + EuiPageHeader, EuiSpacer, - EuiText, - EuiTitle, } from '@elastic/eui'; -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -96,17 +95,50 @@ export class EditRoleMappingPage extends Component { if (loadState === 'loading') { return ( - + ); } return ( -
+ <> + + + + + ), + }} + /> + {!this.state.hasCompatibleRealms && ( + <> + + + + )} + + } + /> + + + - {this.getFormTitle()} - this.setState({ roleMapping })} @@ -135,57 +167,24 @@ export class EditRoleMappingPage extends Component { {this.getFormButtons()} -
+ ); } private getFormTitle = () => { + if (this.editingExistingRoleMapping()) { + return ( + + ); + } return ( - - -

- {this.editingExistingRoleMapping() ? ( - - ) : ( - - )} -

- - -

- - - - ), - }} - /> -

- - {!this.state.hasCompatibleRealms && ( - <> - - - - )} - + ); }; diff --git a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/mapping_info_panel/mapping_info_panel.tsx b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/mapping_info_panel/mapping_info_panel.tsx index 3eb935e152f3..2c239709f145 100644 --- a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/mapping_info_panel/mapping_info_panel.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/mapping_info_panel/mapping_info_panel.tsx @@ -61,7 +61,7 @@ export class MappingInfoPanel extends Component { } public render() { return ( - +

{ } return ( - +

{ return ( diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx index 0e8b1c18fdc1..60999c6b0a79 100644 --- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx @@ -88,7 +88,7 @@ export class RoleMappingsGridPage extends Component { if (loadState === 'loadingApp') { return ( - + { } = error; return ( - + + { public render() { return ( - + {this.getTitle()} {this.getForm()} diff --git a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx index 0f49aaf48c39..ef1338ab9d97 100644 --- a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx +++ b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx @@ -374,7 +374,7 @@ export const EditRolePage: FunctionComponent = ({ const getRoleName = () => { return ( - + { {this.props.editable && ( - + { diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap b/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap index f36a1bf477b0..74127617bfd4 100644 --- a/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap +++ b/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap @@ -2,61 +2,86 @@ exports[` renders permission denied if required 1`] = ` - -
- - + +

+ } + iconType="securityApp" + title={ +

+ +

+ } >
- - -

- } - iconType="securityApp" - title={ -

- -

- } + + + +
+ + +

- - - + You need permission to manage roles + +

+ + + @@ -64,59 +89,29 @@ exports[` renders permission denied if required 1`] = ` className="euiSpacer euiSpacer--m" /> - -

+
- - You need permission to manage roles - -

- - - - -
- - -
-

- - Contact your system administrator. - -

-
- - - -
- + Contact your system administrator. + +

+
+ + +
- - -
- + + + + `; diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/permission_denied/permission_denied.tsx b/x-pack/plugins/security/public/management/roles/roles_grid/permission_denied/permission_denied.tsx index 5506bce345ff..7b93ce48b6d3 100644 --- a/x-pack/plugins/security/public/management/roles/roles_grid/permission_denied/permission_denied.tsx +++ b/x-pack/plugins/security/public/management/roles/roles_grid/permission_denied/permission_denied.tsx @@ -5,33 +5,31 @@ * 2.0. */ -import { EuiEmptyPrompt, EuiFlexGroup, EuiPageContent } from '@elastic/eui'; +import { EuiEmptyPrompt, EuiPageContent } from '@elastic/eui'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; export const PermissionDenied = () => ( - - - - -

- } - body={ -

- -

- } - /> - - + + + +

+ } + body={ +

+ +

+ } + /> + ); diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx index 5f90774d7dfe..909c5b1193cd 100644 --- a/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx +++ b/x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.tsx @@ -13,13 +13,10 @@ import { EuiFlexItem, EuiInMemoryTable, EuiLink, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, + EuiPageHeader, + EuiSpacer, EuiSwitch, EuiText, - EuiTitle, } from '@elastic/eui'; import _ from 'lodash'; import React, { Component } from 'react'; @@ -90,100 +87,96 @@ export class RolesGridPage extends Component { private getPageContent = () => { const { roles } = this.state; return ( - - - - -

- -

- - -

- -

- - - + <> + + } + description={ + + } + rightSideItems={[ - - - - - {this.state.showDeleteConfirmation ? ( - role.name)} - callback={this.handleDelete} - notifications={this.props.notifications} - rolesAPIClient={this.props.rolesAPIClient} - /> - ) : null} + , + ]} + /> - { - !role.metadata || !role.metadata._reserved, - selectableMessage: (selectable: boolean) => (!selectable ? 'Role is reserved' : ''), - onSelectionChange: (selection: Role[]) => this.setState({ selection }), - }} - pagination={{ - initialPageSize: 20, - pageSizeOptions: [10, 20, 30, 50, 100], - }} - items={this.state.visibleRoles} - loading={roles.length === 0} - search={{ - toolsLeft: this.renderToolsLeft(), - toolsRight: this.renderToolsRight(), - box: { - incremental: true, - 'data-test-subj': 'searchRoles', - }, - onChange: (query: Record) => { - this.setState({ - filter: query.queryText, - visibleRoles: this.getVisibleRoles( - this.state.roles, - query.queryText, - this.state.includeReservedRoles - ), - }); - }, - }} - sorting={{ - sort: { - field: 'name', - direction: 'asc', - }, - }} - rowProps={() => { - return { - 'data-test-subj': 'roleRow', - }; - }} - isSelectable - /> - } - - + + + {this.state.showDeleteConfirmation ? ( + role.name)} + callback={this.handleDelete} + notifications={this.props.notifications} + rolesAPIClient={this.props.rolesAPIClient} + /> + ) : null} + + !role.metadata || !role.metadata._reserved, + selectableMessage: (selectable: boolean) => (!selectable ? 'Role is reserved' : ''), + onSelectionChange: (selection: Role[]) => this.setState({ selection }), + }} + pagination={{ + initialPageSize: 20, + pageSizeOptions: [10, 20, 30, 50, 100], + }} + items={this.state.visibleRoles} + loading={roles.length === 0} + search={{ + toolsLeft: this.renderToolsLeft(), + toolsRight: this.renderToolsRight(), + box: { + incremental: true, + 'data-test-subj': 'searchRoles', + }, + onChange: (query: Record) => { + this.setState({ + filter: query.queryText, + visibleRoles: this.getVisibleRoles( + this.state.roles, + query.queryText, + this.state.includeReservedRoles + ), + }); + }, + }} + sorting={{ + sort: { + field: 'name', + direction: 'asc', + }, + }} + rowProps={() => { + return { + 'data-test-subj': 'roleRow', + }; + }} + isSelectable + /> + ); }; diff --git a/x-pack/plugins/security/public/management/users/edit_user/create_user_page.tsx b/x-pack/plugins/security/public/management/users/edit_user/create_user_page.tsx index cb76d54981a1..c82ea52b0747 100644 --- a/x-pack/plugins/security/public/management/users/edit_user/create_user_page.tsx +++ b/x-pack/plugins/security/public/management/users/edit_user/create_user_page.tsx @@ -5,14 +5,7 @@ * 2.0. */ -import { - EuiHorizontalRule, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiTitle, -} from '@elastic/eui'; +import { EuiPageHeader, EuiSpacer } from '@elastic/eui'; import type { FunctionComponent } from 'react'; import React from 'react'; import { useHistory } from 'react-router-dom'; @@ -26,23 +19,20 @@ export const CreateUserPage: FunctionComponent = () => { const backToUsers = () => history.push('/'); return ( - - - - -

- -

- - - - - - - - + <> + + } + /> + + + + + ); }; diff --git a/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx b/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx index 74a5a923aac6..66216da49be9 100644 --- a/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx +++ b/x-pack/plugins/security/public/management/users/edit_user/edit_user_page.tsx @@ -15,10 +15,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, + EuiPageHeader, EuiPanel, EuiSpacer, EuiText, @@ -82,9 +79,10 @@ export const EditUserPage: FunctionComponent = ({ username }) const displayName = getUserDisplayName(user); return ( - - - + <> + @@ -96,227 +94,227 @@ export const EditUserPage: FunctionComponent = ({ username }) {user.email} - - - - - {isDeprecatedUser ? ( - <> - + + + + {isDeprecatedUser ? ( + <> + + } + iconType="alert" + color="warning" + > + {user.metadata?._deprecated_reason?.replace(/\[(.+)\]/, "'$1'")} + + + + ) : isReservedUser ? ( + <> + + } + iconType="lock" + /> + + + ) : user.enabled === false ? ( + <> + + } + > + setAction('enableUser')} size="s"> + + + + + + ) : undefined} + + + + {action === 'changePassword' ? ( + setAction('none')} + onSuccess={() => setAction('none')} + /> + ) : action === 'disableUser' ? ( + setAction('none')} + onSuccess={() => { + setAction('none'); + getUser(); + }} + /> + ) : action === 'enableUser' ? ( + setAction('none')} + onSuccess={() => { + setAction('none'); + getUser(); + }} + /> + ) : action === 'deleteUser' ? ( + setAction('none')} + onSuccess={backToUsers} + /> + ) : undefined} + + + + + + + + + - } - iconType="alert" - color="warning" - > - {user.metadata?._deprecated_reason?.replace(/\[(.+)\]/, "'$1'")} - - - - ) : isReservedUser ? ( - <> - + - } - iconType="lock" - /> - - - ) : user.enabled === false ? ( - <> - - } - > + + + + + setAction('changePassword')} size="s"> + + + + + + + + {user.enabled === false ? ( + + + + + + + + + + + + + setAction('enableUser')} size="s"> - - - - ) : undefined} - - - - {action === 'changePassword' ? ( - setAction('none')} - onSuccess={() => setAction('none')} - /> - ) : action === 'disableUser' ? ( - setAction('none')} - onSuccess={() => { - setAction('none'); - getUser(); - }} - /> - ) : action === 'enableUser' ? ( - setAction('none')} - onSuccess={() => { - setAction('none'); - getUser(); - }} - /> - ) : action === 'deleteUser' ? ( - setAction('none')} - onSuccess={backToUsers} - /> - ) : undefined} - - - - - + + + + ) : ( + - setAction('changePassword')} size="s"> + setAction('disableUser')} size="s"> + )} - - {user.enabled === false ? ( - + {!isReservedUser && ( + <> + + - - - - - - - - setAction('enableUser')} size="s"> - - - - - - ) : ( - - - - - - - - - - - - - - setAction('disableUser')} size="s"> - - - - - - )} - - {!isReservedUser && ( - <> - - - - - - - - - - - - - - - setAction('deleteUser')} size="s" color="danger"> - - - - - - - )} - - + + + + + + + + setAction('deleteUser')} size="s" color="danger"> + + + + + + + )} + ); }; diff --git a/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx b/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx index 5b44c2f3c716..b7cdf27dc6be 100644 --- a/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx +++ b/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx @@ -14,11 +14,9 @@ import { EuiInMemoryTable, EuiLink, EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, + EuiPageHeader, + EuiSpacer, EuiSwitch, - EuiTitle, } from '@elastic/eui'; import React, { Component } from 'react'; @@ -80,7 +78,7 @@ export class UsersGridPage extends Component { if (permissionDenied) { return ( - + { }; return ( -
- - - - -

- -

- - - - - - - - - - {showDeleteConfirmation ? ( - user.username)} - callback={this.handleDelete} - userAPIClient={this.props.userAPIClient} - notifications={this.props.notifications} + <> + + } + rightSideItems={[ + + - ) : null} + , + ]} + /> - { - - } - - -
+ + + {showDeleteConfirmation ? ( + user.username)} + callback={this.handleDelete} + userAPIClient={this.props.userAPIClient} + notifications={this.props.notifications} + /> + ) : null} + + { + + } + ); } diff --git a/x-pack/plugins/spaces/kibana.json b/x-pack/plugins/spaces/kibana.json index 673055b24e8b..e01224d03bfc 100644 --- a/x-pack/plugins/spaces/kibana.json +++ b/x-pack/plugins/spaces/kibana.json @@ -20,6 +20,7 @@ "ui": true, "extraPublicDirs": ["common"], "requiredBundles": [ + "esUiShared", "kibanaReact", "savedObjectsManagement", "home" diff --git a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx b/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx index d00ee0bb26a3..5d9ef3e1316f 100644 --- a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx +++ b/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx @@ -10,10 +10,9 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, - EuiLoadingSpinner, - EuiPageContentBody, + EuiPageContent, + EuiPageHeader, EuiSpacer, - EuiText, EuiTitle, } from '@elastic/eui'; import _ from 'lodash'; @@ -29,8 +28,10 @@ import type { } from 'src/core/public'; import type { Space } from 'src/plugins/spaces_oss/common'; +import { SectionLoading } from '../../../../../../src/plugins/es_ui_shared/public'; import type { FeaturesPluginStart, KibanaFeature } from '../../../../features/public'; import { isReservedSpace } from '../../../common'; +import { getSpacesFeatureDescription } from '../../constants'; import type { SpacesManager } from '../../spaces_manager'; import { UnauthorizedPrompt } from '../components'; import { toSpaceIdentifier } from '../lib'; @@ -110,46 +111,48 @@ export class ManageSpacePage extends Component { } public render() { - const content = this.state.isLoading ? this.getLoadingIndicator() : this.getForm(); + if (!this.props.capabilities.spaces.manage) { + return ( + + + + ); + } + + if (this.state.isLoading) { + return this.getLoadingIndicator(); + } return ( - {content} + + + + {this.getForm()} ); } public getLoadingIndicator = () => ( -
- {' '} - -

Loading...

- -
+ + + + + ); public getForm = () => { - if (!this.props.capabilities.spaces.manage) { - return ; - } - const { showAlteringActiveSpaceDialog } = this.state; return (
- {this.getFormHeading()} - - - - - - - - - + { public render() { return ( - + {this.getTitle()} {this.getForm()} diff --git a/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_page.test.tsx.snap b/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_page.test.tsx.snap index a754eaf73620..b61012f0cd33 100644 --- a/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_page.test.tsx.snap +++ b/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_page.test.tsx.snap @@ -5,41 +5,22 @@ exports[`SpacesGridPage renders as expected 1`] = ` className="spcGridPage" data-test-subj="spaces-grid-page" > - - - - -

- -

- - -

- Organize your dashboards and other saved objects into meaningful categories. -

- - - + + } + rightSideItems={ + Array [ - - - - - - } - pagination={true} - responsive={true} - rowHeader="name" - search={ + , + ] + } + /> + + + } + pagination={true} + responsive={true} + rowHeader="name" + search={ + Object { + "box": Object { + "placeholder": "Search", + }, } - sorting={true} - tableCaption="Kibana spaces" - tableLayout="fixed" - /> - + } + sorting={true} + tableCaption="Kibana spaces" + tableLayout="fixed" + />
`; diff --git a/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx b/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx index a4f797e441ab..1e3fde827b05 100644 --- a/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx +++ b/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx @@ -8,17 +8,15 @@ import { EuiButton, EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, EuiInMemoryTable, EuiLink, EuiLoadingSpinner, EuiPageContent, + EuiPageHeader, EuiSpacer, EuiText, - EuiTitle, } from '@elastic/eui'; -import React, { Component, Fragment, lazy, Suspense } from 'react'; +import React, { Component, lazy, Suspense } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -83,7 +81,19 @@ export class SpacesGridPage extends Component { public render() { return (
- {this.getPageContent()} + + } + description={getSpacesFeatureDescription()} + rightSideItems={[this.getPrimaryActionButton()]} + /> + + {this.getPageContent()} {this.getConfirmDeleteModal()}
); @@ -91,61 +101,45 @@ export class SpacesGridPage extends Component { public getPageContent() { if (!this.props.capabilities.spaces.manage) { - return ; + return ( + + + + ); } return ( - - - - -

- -

- - -

{getSpacesFeatureDescription()}

- - - {this.getPrimaryActionButton()} - - - - - ) : undefined - } - /> - + + ) : undefined + } + /> ); } @@ -153,6 +147,7 @@ export class SpacesGridPage extends Component { return ( diff --git a/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx b/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx index 76467bd838a1..9e419862893b 100644 --- a/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx +++ b/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx @@ -83,7 +83,7 @@ describe('spacesManagementApp', () => { expect(container).toMatchInlineSnapshot(`
Spaces Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"notifications":{"toasts":{}},"spacesManager":{"onActiveSpaceChange$":{"_isScalar":false}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/","search":"","hash":""}}}
@@ -109,7 +109,7 @@ describe('spacesManagementApp', () => { expect(container).toMatchInlineSnapshot(`
Spaces Edit Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"notifications":{"toasts":{}},"spacesManager":{"onActiveSpaceChange$":{"_isScalar":false}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/create","search":"","hash":""}}}
@@ -141,7 +141,7 @@ describe('spacesManagementApp', () => { expect(container).toMatchInlineSnapshot(`
Spaces Edit Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"notifications":{"toasts":{}},"spacesManager":{"onActiveSpaceChange$":{"_isScalar":false}},"spaceId":"some-space","history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/some-space","search":"","hash":""}}}
diff --git a/x-pack/plugins/spaces/public/management/spaces_management_app.tsx b/x-pack/plugins/spaces/public/management/spaces_management_app.tsx index c97ec5fbcc22..12573ce1eac1 100644 --- a/x-pack/plugins/spaces/public/management/spaces_management_app.tsx +++ b/x-pack/plugins/spaces/public/management/spaces_management_app.tsx @@ -14,6 +14,7 @@ import type { StartServicesAccessor } from 'src/core/public'; import type { RegisterManagementAppArgs } from 'src/plugins/management/public'; import type { Space } from 'src/plugins/spaces_oss/common'; +import { APP_WRAPPER_CLASS } from '../../../../../src/core/public'; import { KibanaContextProvider, RedirectAppLinks, @@ -125,7 +126,7 @@ export const spacesManagementApp = Object.freeze({ render( - + diff --git a/x-pack/plugins/spaces/tsconfig.json b/x-pack/plugins/spaces/tsconfig.json index 95fbecaa9093..3888519555d2 100644 --- a/x-pack/plugins/spaces/tsconfig.json +++ b/x-pack/plugins/spaces/tsconfig.json @@ -11,6 +11,7 @@ "references": [ { "path": "../features/tsconfig.json" }, { "path": "../licensing/tsconfig.json" }, + { "path": "../../../src/plugins/es_ui_shared/tsconfig.json" }, { "path": "../../../src/plugins/advanced_settings/tsconfig.json" }, { "path": "../../../src/plugins/home/tsconfig.json" }, { "path": "../../../src/plugins/kibana_react/tsconfig.json" }, diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 3e66830e8fc5..5b521ae59378 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -22017,7 +22017,6 @@ "xpack.spaces.management.manageSpacePage.errorLoadingSpaceTitle": "スペースの読み込み中にエラーが発生：{message}", "xpack.spaces.management.manageSpacePage.errorSavingSpaceTitle": "スペースの保存中にエラーが発生：{message}", "xpack.spaces.management.manageSpacePage.loadErrorTitle": "利用可能な機能の読み込みエラー", - "xpack.spaces.management.manageSpacePage.manageDescription": "保存済みオブジェクトをわかりやすいカテゴリー別に整理します。", "xpack.spaces.management.manageSpacePage.nameFormRowLabel": "名前", "xpack.spaces.management.manageSpacePage.spaceDescriptionFormRowLabel": "説明 (オプション) ", "xpack.spaces.management.manageSpacePage.spaceDescriptionHelpText": "説明はスペース選択画面に表示されます。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 72f13d2ec4b5..881420a1fa6c 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -22371,7 +22371,6 @@ "xpack.spaces.management.manageSpacePage.errorLoadingSpaceTitle": "加载空间时出错：{message}", "xpack.spaces.management.manageSpacePage.errorSavingSpaceTitle": "保存空间时出错：{message}", "xpack.spaces.management.manageSpacePage.loadErrorTitle": "加载可用功能时出错", - "xpack.spaces.management.manageSpacePage.manageDescription": "将已保存对象组织到有意义的类别中。", "xpack.spaces.management.manageSpacePage.nameFormRowLabel": "名称", "xpack.spaces.management.manageSpacePage.spaceDescriptionFormRowLabel": "描述 (可选) ", "xpack.spaces.management.manageSpacePage.spaceDescriptionHelpText": "描述显示在”工作区选择“屏幕上。",