Skip to content

Commit

Permalink
Replace menuContext with listGroup
Browse files Browse the repository at this point in the history 
Signed-off-by: yubonluo <yubonluo@amazon.com>
  • Loading branch information
@yubonluo
yubonluo committed Jul 19, 2024
1 parent 125b43e commit fce6aa6
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 116 deletions.
5 changes: 0 additions & 5 deletions src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ describe('<WorkspaceMenu />', () => {
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', () => {
Expand All @@ -91,8 +91,8 @@ describe('<WorkspaceMenu />', () => {
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', () => {
Expand All @@ -104,8 +104,8 @@ describe('<WorkspaceMenu />', () => {
render(<WorkspaceMenuCreatorComponent />);

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();
});

Expand Down
196 changes: 91 additions & 105 deletions src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<WorkspaceUseCase[]>;
Expand Down Expand Up @@ -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: <EuiText className="text-ellipsis">{workspaceName}</EuiText>,
key: workspace.id,
'data-test-subj': `context-menu-item-${itemType}-${workspace.id}`,
icon: (
<EuiAvatar
size="s"
type="space"
name={workspaceName}
color={workspace.color}
initialsLength={2}
/>
),
onClick: () => {
window.location.assign(useCaseURL);
},
};
};

const getWorkspaceListItems = (panelsWorkspaceList: WorkspaceObject[], itemType: string) => {
const workspaceListItems = panelsWorkspaceList.map((workspace) =>
workspaceToItem(workspace, itemType)
);
return workspaceListItems;
};

const currentWorkspaceButton = currentWorkspace ? (
<EuiButtonEmpty flush="left" onClick={openPopover} data-test-subj="current-workspace-button">
<EuiAvatar
Expand All @@ -131,37 +122,49 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
/>
);

const allWorkspacesPanels = [
{
id: 0,
title: (
<span className="custom-title">
<FormattedMessage
id="workspace.menu.title.allWorkspaces"
defaultMessage="All workspaces"
/>
</span>
),
width: 280,
items: getWorkspaceListItems(filteredWorkspaceList, 'all'),
},
];

const recentWorkspacesPanels = [
{
id: 0,
title: (
<span className="custom-title">
<FormattedMessage
id="workspace.menu.title.recentWorkspaces"
defaultMessage="Recent workspaces"
/>
</span>
),
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 (
<EuiListGroupItem
key={workspace.id}
style={{ paddingLeft: '0' }}
size="s"
data-test-subj={`workspace-menu-item-${itemType}-${workspace.id}`}
icon={
<EuiAvatar
size="s"
type="space"
name={workspace.name}
color={workspace.color}
initialsLength={2}
/>
}
label={<EuiText className="text-ellipsis">{workspace.name}</EuiText>}
onClick={() => {
window.location.assign(useCaseURL);
}}
/>
);
});
return (
<>
<EuiTitle size="xxs">
<h4>{itemType === 'all' ? allWorkspacesTitle : recentWorkspacesTitle}</h4>
</EuiTitle>
<EuiListGroup flush gutterSize="none" maxWidth={280}>
{listItems}
</EuiListGroup>
</>
);
};

return (
<EuiPopover
Expand All @@ -173,7 +176,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
panelPaddingSize="none"
anchorPosition="downCenter"
>
<EuiPanel paddingSize="m" hasBorder={false} color="transparent">
<EuiPanel paddingSize="s" hasBorder={false} color="transparent">
<EuiFlexGroup
justifyContent="spaceAround"
alignItems="center"
Expand All @@ -191,10 +194,10 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
initialsLength={2}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="context-menu-current-workspace-name">
<EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
<EuiText className="text-ellipsis">{currentWorkspaceName}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="context-menu-current-use-case">
<EuiFlexItem grow={false} data-test-subj="workspace-menu-current-use-case">
{getUseCase(currentWorkspace)?.title ?? ''}
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -204,10 +207,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
navigateToWorkspaceDetail(coreStart, currentWorkspace.id);
}}
>
<FormattedMessage
id="workspace.menu.button.manageWorkspace"
defaultMessage="Manage workspace"
/>
{manageWorkspaceButton}
</EuiButton>
</EuiFlexItem>
</>
Expand All @@ -216,7 +216,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
<EuiFlexItem grow={false}>
<EuiAvatar size="m" color="plain" name="spacesApp" iconType="spacesApp" />
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="context-menu-current-workspace-name">
<EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
{currentWorkspaceName}
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -226,41 +226,30 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
}}
>
<FormattedMessage
id="workspace.menu.button.manageWorkspaces"
defaultMessage="Manage workspaces"
/>
{manageWorkspacesButton}
</EuiButton>
</EuiFlexItem>
</>
)}
</EuiFlexGroup>
</EuiPanel>
<EuiContextMenu
initialPanelId={0}
panels={recentWorkspacesPanels}
size="s"
data-test-subj="context-menu-recent-workspaces"
/>
<EuiContextMenu
initialPanelId={0}
panels={allWorkspacesPanels}
size="s"
data-test-subj="context-menu-all-workspaces"
/>
<EuiPanel paddingSize="s" hasBorder={false} color="transparent">
{getWorkspaceListGroup(filteredWorkspaceList, 'all')}
{getWorkspaceListGroup(filteredRecentWorkspaces, 'recent')}
</EuiPanel>
<EuiPanel paddingSize="s" hasBorder={false} color="transparent">
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
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);
}}
>
<FormattedMessage id="workspace.menu.button.viewAll" defaultMessage="View all" />
{viewAllButton}
</EuiButtonEmpty>
</EuiFlexItem>
{isDashboardAdmin && (
Expand All @@ -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);
}}
>
<FormattedMessage
id="workspace.menu.button.createWorkspace"
defaultMessage="Create workspace"
/>
{createWorkspaceButton}
</EuiButton>
</EuiFlexItem>
)}
Expand Down

0 comments on commit fce6aa6

Please sign in to comment.