From fce6aa6a595fb48e3e4242f88834311bceef0d97 Mon Sep 17 00:00:00 2001 From: yubonluo Date: Sat, 20 Jul 2024 01:36:51 +0800 Subject: [PATCH] Replace menuContext with listGroup Signed-off-by: yubonluo --- .../workspace_menu/workspace_menu.scss | 5 - .../workspace_menu/workspace_menu.test.tsx | 12 +- .../workspace_menu/workspace_menu.tsx | 196 ++++++++---------- 3 files changed, 97 insertions(+), 116 deletions(-) diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss index b02d496303d9..bf3d21eeac0e 100644 --- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss +++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss @@ -3,11 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -.custom-title { - text-transform: none !important; - font-size: 15px !important; -} - .text-ellipsis { white-space: nowrap; overflow: hidden; diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx index 4b6ea00ec42e..d3578498c858 100644 --- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx +++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx @@ -70,8 +70,8 @@ describe('', () => { fireEvent.click(selectButton); expect(screen.getByText(/all workspaces/i)).toBeInTheDocument(); - expect(screen.getByTestId('context-menu-item-all-workspace-1')).toBeInTheDocument(); - expect(screen.getByTestId('context-menu-item-all-workspace-2')).toBeInTheDocument(); + expect(screen.getByTestId('workspace-menu-item-all-workspace-1')).toBeInTheDocument(); + expect(screen.getByTestId('workspace-menu-item-all-workspace-2')).toBeInTheDocument(); }); it('should display a list of recent workspaces in the dropdown', () => { @@ -91,8 +91,8 @@ describe('', () => { fireEvent.click(selectButton); expect(screen.getByText(/recent workspaces/i)).toBeInTheDocument(); - expect(screen.getByTestId('context-menu-item-recent-workspace-1')).toBeInTheDocument(); - expect(screen.getByTestId('context-menu-item-recent-workspace-2')).toBeInTheDocument(); + expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument(); + expect(screen.getByTestId('workspace-menu-item-recent-workspace-2')).toBeInTheDocument(); }); it('should display current workspace name and use case name', () => { @@ -104,8 +104,8 @@ describe('', () => { render(); fireEvent.click(screen.getByTestId('current-workspace-button')); - expect(screen.getByTestId('context-menu-current-workspace-name')).toBeInTheDocument(); - expect(screen.getByTestId('context-menu-current-use-case')).toBeInTheDocument(); + expect(screen.getByTestId('workspace-menu-current-workspace-name')).toBeInTheDocument(); + expect(screen.getByTestId('workspace-menu-current-use-case')).toBeInTheDocument(); expect(screen.getByText('Observability')).toBeInTheDocument(); }); diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx index c140a7c16a18..f89e7f7ba994 100644 --- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx +++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx @@ -8,16 +8,18 @@ import { i18n } from '@osd/i18n'; import React, { useMemo, useState } from 'react'; import { useObservable } from 'react-use'; import { + EuiText, + EuiPanel, + EuiTitle, EuiAvatar, EuiButton, - EuiButtonEmpty, - EuiButtonIcon, - EuiContextMenu, - EuiFlexGroup, - EuiFlexItem, - EuiPanel, EuiPopover, - EuiText, + EuiFlexItem, + EuiFlexGroup, + EuiListGroup, + EuiButtonIcon, + EuiButtonEmpty, + EuiListGroupItem, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { BehaviorSubject } from 'rxjs'; @@ -37,6 +39,31 @@ import { navigateToWorkspaceDetail } from '../utils/workspace'; const defaultHeaderName = i18n.translate('workspace.menu.defaultHeaderName', { defaultMessage: 'Workspaces', }); + +const allWorkspacesTitle = i18n.translate('workspace.menu.title.allWorkspaces', { + defaultMessage: 'All workspaces', +}); + +const recentWorkspacesTitle = i18n.translate('workspace.menu.title.recentWorkspaces', { + defaultMessage: 'recent workspaces', +}); + +const createWorkspaceButton = i18n.translate('workspace.menu.button.createWorkspace', { + defaultMessage: 'Create workspace', +}); + +const viewAllButton = i18n.translate('workspace.menu.button.viewAll', { + defaultMessage: 'View all', +}); + +const manageWorkspaceButton = i18n.translate('workspace.menu.button.manageWorkspace', { + defaultMessage: 'Manage workspace', +}); + +const manageWorkspacesButton = i18n.translate('workspace.menu.button.manageWorkspaces', { + defaultMessage: 'Manage workspaces', +}); + interface Props { coreStart: CoreStart; registeredUseCases$: BehaviorSubject; @@ -76,42 +103,6 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { setPopover(false); }; - const workspaceToItem = (workspace: WorkspaceObject, itemType: string) => { - const appId = getUseCase(workspace)?.features[0] ?? WORKSPACE_DETAIL_APP_ID; - const workspaceName = workspace.name; - const useCaseURL = formatUrlWithWorkspaceId( - coreStart.application.getUrlForApp(appId, { - absolute: false, - }), - workspace.id, - coreStart.http.basePath - ); - return { - name: {workspaceName}, - key: workspace.id, - 'data-test-subj': `context-menu-item-${itemType}-${workspace.id}`, - icon: ( - - ), - onClick: () => { - window.location.assign(useCaseURL); - }, - }; - }; - - const getWorkspaceListItems = (panelsWorkspaceList: WorkspaceObject[], itemType: string) => { - const workspaceListItems = panelsWorkspaceList.map((workspace) => - workspaceToItem(workspace, itemType) - ); - return workspaceListItems; - }; - const currentWorkspaceButton = currentWorkspace ? ( { /> ); - const allWorkspacesPanels = [ - { - id: 0, - title: ( - - - - ), - width: 280, - items: getWorkspaceListItems(filteredWorkspaceList, 'all'), - }, - ]; - - const recentWorkspacesPanels = [ - { - id: 0, - title: ( - - - - ), - width: 280, - items: getWorkspaceListItems(filteredRecentWorkspaces, 'recent'), - }, - ]; + const getWorkspaceListGroup = (filterWorkspaceList: WorkspaceObject[], itemType: string) => { + const listItems = filterWorkspaceList.map((workspace: WorkspaceObject) => { + const appId = getUseCase(workspace)?.features[0] ?? WORKSPACE_DETAIL_APP_ID; + const useCaseURL = formatUrlWithWorkspaceId( + coreStart.application.getUrlForApp(appId, { + absolute: false, + }), + workspace.id, + coreStart.http.basePath + ); + return ( + + } + label={{workspace.name}} + onClick={() => { + window.location.assign(useCaseURL); + }} + /> + ); + }); + return ( + <> + +

{itemType === 'all' ? allWorkspacesTitle : recentWorkspacesTitle}

+ + + {listItems} + + + ); + }; return ( { panelPaddingSize="none" anchorPosition="downCenter" > - + { initialsLength={2} /> - + {currentWorkspaceName} - + {getUseCase(currentWorkspace)?.title ?? ''} @@ -204,10 +207,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { navigateToWorkspaceDetail(coreStart, currentWorkspace.id); }} > - + {manageWorkspaceButton} @@ -216,7 +216,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { - + {currentWorkspaceName} @@ -226,28 +226,17 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID); }} > - + {manageWorkspacesButton} )} - - + + {getWorkspaceListGroup(filteredWorkspaceList, 'all')} + {getWorkspaceListGroup(filteredRecentWorkspaces, 'recent')} + @@ -255,12 +244,12 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { size="xs" flush="left" key={WORKSPACE_LIST_APP_ID} - data-test-subj="context-menu-view-all-button" + data-test-subj="workspace-menu-view-all-button" onClick={() => { coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID); }} > - + {viewAllButton} {isDashboardAdmin && ( @@ -270,15 +259,12 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { iconType="plus" size="s" key={WORKSPACE_CREATE_APP_ID} - data-test-subj="context-menu-create-workspace-button" + data-test-subj="workspace-menu-create-workspace-button" onClick={() => { coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID); }} > - + {createWorkspaceButton} )}