From 1ab12558013657780ed9b3ea8efc2dda62d019ce Mon Sep 17 00:00:00 2001 From: Eyo Okon Eyo Date: Thu, 13 Jun 2024 14:34:53 +0200 Subject: [PATCH] add switch to space icon on space list table --- x-pack/plugins/spaces/common/index.ts | 6 +- .../spaces/common/lib/spaces_url_parser.ts | 19 ++++- .../spaces_grid/spaces_grid_page.tsx | 78 ++++++++++++++----- .../management/spaces_management_app.tsx | 1 + .../management/view_space/view_space.tsx | 13 ++-- 5 files changed, 87 insertions(+), 30 deletions(-) diff --git a/x-pack/plugins/spaces/common/index.ts b/x-pack/plugins/spaces/common/index.ts index 4a767fb403ee22..0a0a84886647e0 100644 --- a/x-pack/plugins/spaces/common/index.ts +++ b/x-pack/plugins/spaces/common/index.ts @@ -12,7 +12,11 @@ export { ENTER_SPACE_PATH, DEFAULT_SPACE_ID, } from './constants'; -export { addSpaceIdToPath, getSpaceIdFromPath } from './lib/spaces_url_parser'; +export { + addSpaceIdToPath, + getSpaceIdFromPath, + getSpaceNavigationURL, +} from './lib/spaces_url_parser'; export type { Space, GetAllSpacesOptions, diff --git a/x-pack/plugins/spaces/common/lib/spaces_url_parser.ts b/x-pack/plugins/spaces/common/lib/spaces_url_parser.ts index 9b24a70792030a..b847655aa9a874 100644 --- a/x-pack/plugins/spaces/common/lib/spaces_url_parser.ts +++ b/x-pack/plugins/spaces/common/lib/spaces_url_parser.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { DEFAULT_SPACE_ID } from '../constants'; +import { DEFAULT_SPACE_ID, ENTER_SPACE_PATH } from '../constants'; const spaceContextRegex = /^\/s\/([a-z0-9_\-]+)/; @@ -75,6 +75,23 @@ export function addSpaceIdToPath( return `${normalizedBasePath}${requestedPath}` || '/'; } +/** + * Builds URL that will navigate a user to the space for the spaceId provided + */ +export function getSpaceNavigationURL({ + serverBasePath, + spaceId, +}: { + serverBasePath: string; + spaceId: string; +}) { + return addSpaceIdToPath( + serverBasePath, + spaceId, + `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/view/${spaceId}` + ); +} + function stripServerBasePath(requestBasePath: string, serverBasePath: string) { if (serverBasePath && serverBasePath !== '/' && requestBasePath.startsWith(serverBasePath)) { return requestBasePath.substr(serverBasePath.length); 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 49f7f13f256142..5721de2d20647b 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 @@ -6,6 +6,7 @@ */ import { + type EuiBasicTableColumn, EuiButton, EuiButtonIcon, EuiCallOut, @@ -30,7 +31,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public'; -import type { Space } from '../../../common'; +import { getSpaceNavigationURL, type Space } from '../../../common'; import { isReservedSpace } from '../../../common'; import { DEFAULT_SPACE_ID } from '../../../common/constants'; import { getSpacesFeatureDescription } from '../../constants'; @@ -47,6 +48,7 @@ const LazySpaceAvatar = lazy(() => interface Props { spacesManager: SpacesManager; notifications: NotificationsStart; + serverBasePath: string; getFeatures: FeaturesPluginStart['getFeatures']; capabilities: Capabilities; history: ScopedHistory; @@ -56,6 +58,7 @@ interface Props { interface State { spaces: Space[]; + activeSpace: Space | null; features: KibanaFeature[]; loading: boolean; showConfirmDeleteModal: boolean; @@ -67,6 +70,7 @@ export class SpacesGridPage extends Component { super(props); this.state = { spaces: [], + activeSpace: null, features: [], loading: true, showConfirmDeleteModal: false, @@ -133,7 +137,7 @@ export class SpacesGridPage extends Component { rowProps={(item) => ({ 'data-test-subj': `spacesListTableRow-${item.id}`, })} - columns={this.getColumnConfig()} + columns={this.getColumnConfig({ serverBasePath: this.props.serverBasePath })} pagination={true} sorting={true} search={{ @@ -216,12 +220,18 @@ export class SpacesGridPage extends Component { }); const getSpaces = spacesManager.getSpaces(); + const getActiveSpace = spacesManager.getActiveSpace(); try { - const [spaces, features] = await Promise.all([getSpaces, getFeatures()]); + const [spaces, activeSpace, features] = await Promise.all([ + getSpaces, + getActiveSpace, + getFeatures(), + ]); this.setState({ loading: false, spaces, + activeSpace, features, }); } catch (error) { @@ -236,17 +246,23 @@ export class SpacesGridPage extends Component { } }; - public getColumnConfig() { + public getColumnConfig({ + serverBasePath, + }: { + serverBasePath: string; + }): Array> { return [ { field: 'initials', name: '', width: '50px', - render: (_value: string, record: Space) => { + render: (_value: string, rowRecord) => { return ( }> - - + + ); @@ -258,10 +274,10 @@ export class SpacesGridPage extends Component { defaultMessage: 'Space', }), sortable: true, - render: (value: string, record: Space) => ( + render: (value: string, rowRecord) => ( {value} @@ -282,8 +298,8 @@ export class SpacesGridPage extends Component { sortable: (space: Space) => { return getEnabledFeatures(this.state.features, space).length; }, - render: (_disabledFeatures: string[], record: Space) => { - const enabledFeatureCount = getEnabledFeatures(this.state.features, record).length; + render: (_disabledFeatures: string[], rowRecord) => { + const enabledFeatureCount = getEnabledFeatures(this.state.features, rowRecord).length; if (enabledFeatureCount === this.state.features.length) { return ( { }), actions: [ { - render: (record: Space) => ( + isPrimary: true, + available: (rowRecord) => this.state.activeSpace?.name !== rowRecord.name, + render: (rowRecord: Space) => { + return ( + + ); + }, + }, + { + render: (rowRecord: Space) => ( ), }, { - available: (record: Space) => !isReservedSpace(record), - render: (record: Space) => ( + available: (rowRecord: Space) => !isReservedSpace(rowRecord), + render: (rowRecord: Space) => ( this.onDeleteSpaceClick(record)} + onClick={() => this.onDeleteSpaceClick(rowRecord)} /> ), }, 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 5741006d19bd67..d068df15e6fb86 100644 --- a/x-pack/plugins/spaces/public/management/spaces_management_app.tsx +++ b/x-pack/plugins/spaces/public/management/spaces_management_app.tsx @@ -71,6 +71,7 @@ export const spacesManagementApp = Object.freeze({ getFeatures={features.getFeatures} notifications={notifications} spacesManager={spacesManager} + serverBasePath={http.basePath.serverBasePath} history={history} getUrlForApp={application.getUrlForApp} maxSpaces={config.maxSpaces} diff --git a/x-pack/plugins/spaces/public/management/view_space/view_space.tsx b/x-pack/plugins/spaces/public/management/view_space/view_space.tsx index d9bca36de47848..4491393d373e36 100644 --- a/x-pack/plugins/spaces/public/management/view_space/view_space.tsx +++ b/x-pack/plugins/spaces/public/management/view_space/view_space.tsx @@ -30,7 +30,7 @@ import type { Role } from '@kbn/security-plugin-types-common'; import { TAB_ID_CONTENT, TAB_ID_FEATURES, TAB_ID_ROLES } from './constants'; import { useTabs } from './hooks/use_tabs'; import { ViewSpaceContextProvider } from './hooks/view_space_context_provider'; -import { addSpaceIdToPath, ENTER_SPACE_PATH, type Space } from '../../../common'; +import { getSpaceNavigationURL, type Space } from '../../../common'; import { getSpaceAvatarComponent } from '../../space_avatar'; import type { SpacesManager } from '../../spaces_manager'; @@ -187,11 +187,6 @@ export const ViewSpacePage: FC = (props) => { } const { serverBasePath } = props; - const urlToSelectedSpace = addSpaceIdToPath( - serverBasePath, - space.id, - `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/view/${space.id}` - ); if (userActiveSpace?.id === space.id) { return null; @@ -199,7 +194,11 @@ export const ViewSpacePage: FC = (props) => { // use href to force full page reload (needed in order to change spaces) return ( - +