Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Workspace]fix the UI of menu content picker #8138

Closed
wants to merge 3 commits into from
Closed

[Workspace]fix the UI of menu content picker #8138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
557aac8
fix/ fix the UI of menu content picker
Qxisylolo Sep 11, 2024
1ad2dc4
fix/ fix manage button position
Qxisylolo Sep 12, 2024
7fa9d13
fix/ fix manage button position and padding
Qxisylolo Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 106 additions & 91 deletions src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
EuiButtonIcon,
EuiFlexItem,
EuiIcon,
EuiSpacer,
EuiFlexGroup,
EuiHorizontalRule,
EuiButtonEmpty,
Expand Down Expand Up @@ -86,106 +87,120 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
button={currentWorkspaceButton}
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="s"
panelPaddingSize="none"
anchorPosition="downCenter"
repositionOnScroll={true}
>
<EuiPanel hasBorder={false} color="transparent">
<EuiFlexGroup
justifyContent="spaceAround"
alignItems="center"
direction="column"
gutterSize="s"
>
{currentWorkspace ? (
<>
<EuiFlexItem grow={false}>
<EuiIcon
size="xl"
data-test-subj={`current-workspace-icon-${getUseCase(currentWorkspace)?.icon}`}
type={getUseCase(currentWorkspace)?.icon || 'wsSelector'}
color={getValidWorkspaceColor(currentWorkspace.color)}
/>
</EuiFlexItem>
<EuiFlexItem
grow={false}
data-test-subj="workspace-menu-current-workspace-name"
style={{ maxWidth: '200px' }}
>
<EuiText textAlign="center">{currentWorkspaceName}</EuiText>
<EuiText
size="xs"
data-test-subj="workspace-menu-current-use-case"
textAlign="center"
color="subdued"
>
{getUseCase(currentWorkspace)?.title ?? ''}
</EuiText>
</EuiFlexItem>
</>
) : (
<>
<EuiFlexItem grow={false}>
<EuiIcon size="xl" color="subdued" type="wsSelector" />
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
<EuiText textAlign="center">{currentWorkspaceName}</EuiText>
</EuiFlexItem>
</>
)}
</EuiFlexGroup>
</EuiPanel>

<EuiPanel
paddingSize="s"
hasBorder={false}
color="transparent"
style={{ height: '30vh' }}
className="eui-fullHeight"
hasShadow={false}
paddingSize="none"
style={{ width: '280px' }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we consider a stylesheet? vs inline styles?

@AMoo-Miki @virajsanghvi @zhongnansu is this the proper setting for look and feel?

>
<WorkspacePickerContent
coreStart={coreStart}
registeredUseCases$={registeredUseCases$}
onClickWorkspace={() => setPopover(false)}
/>
</EuiPanel>

{isDashboardAdmin && (
<EuiPanel paddingSize="s" hasBorder={false} color="transparent">
<EuiHorizontalRule />
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
<EuiFlexItem>
<EuiButtonEmpty
color="primary"
size="xs"
data-test-subj="workspace-menu-manage-button"
onClick={() => {
closePopover();
coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
}}
>
<EuiText size="s">{manageWorkspacesButton}</EuiText>
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton
color="primary"
iconType="plus"
size="s"
key={WORKSPACE_CREATE_APP_ID}
data-test-subj="workspace-menu-create-workspace-button"
onClick={() => {
closePopover();
coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID);
}}
>
<EuiText size="s">{createWorkspaceButton}</EuiText>
</EuiButton>
</EuiFlexItem>
<EuiPanel paddingSize="m" hasBorder={false} color="transparent">
<EuiFlexGroup
justifyContent="spaceBetween"
alignItems="center"
direction="column"
gutterSize="xs"
>
{currentWorkspace ? (
<>
<EuiFlexItem grow={false}>
<EuiIcon
size="xl"
data-test-subj={`current-workspace-icon-${getUseCase(currentWorkspace)?.icon}`}
type={getUseCase(currentWorkspace)?.icon || 'wsSelector'}
color={getValidWorkspaceColor(currentWorkspace.color)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
<EuiText textAlign="center" size="m">
{currentWorkspaceName}
</EuiText>
<EuiText
size="s"
data-test-subj="workspace-menu-current-use-case"
textAlign="center"
color="subdued"
>
{getUseCase(currentWorkspace)?.title ?? ''}
</EuiText>
</EuiFlexItem>
</>
) : (
<>
<EuiFlexItem grow={false}>
<EuiIcon size="xl" color="subdued" type="wsSelector" />
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
<EuiText textAlign="center">{currentWorkspaceName}</EuiText>
</EuiFlexItem>
</>
)}
</EuiFlexGroup>
</EuiPanel>
)}

<EuiHorizontalRule margin="none" size="full" />
<EuiPanel
paddingSize="s"
hasBorder={false}
hasShadow={false}
color="transparent"
style={{ height: '30vh' }}
className="eui-fullHeight"
>
<WorkspacePickerContent
coreStart={coreStart}
registeredUseCases$={registeredUseCases$}
onClickWorkspace={() => setPopover(false)}
/>
</EuiPanel>

{isDashboardAdmin ? (
<>
<EuiHorizontalRule margin="none" size="full" />
<EuiPanel paddingSize="m" hasBorder={false} hasShadow={false} color="transparent">
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="primary"
size="xs"
flush="left"
data-test-subj="workspace-menu-manage-button"
onClick={() => {
closePopover();
coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
}}
>
<EuiText size="s"> {manageWorkspacesButton}</EuiText>
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton
color="primary"
iconType="plus"
className="eui-textRight"
size="s"
key={WORKSPACE_CREATE_APP_ID}
data-test-subj="workspace-menu-create-workspace-button"
onClick={() => {
closePopover();
coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID);
}}
>
<EuiText size="s">{createWorkspaceButton}</EuiText>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</>
) : (
<EuiSpacer />
)}
</EuiPanel>
</EuiPopover>
);
};
15 changes: 8 additions & 7 deletions ...plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const WorkspacePickerContent = ({
iconType="wsSelector"
data-test-subj="empty-workspace-prompt"
title={
<EuiText size="m">
<EuiText size="s">
<p>
{i18n.translate('workspace.picker.empty.state.title', {
defaultMessage: 'No workspace available',
Expand Down Expand Up @@ -138,7 +138,7 @@ export const WorkspacePickerContent = ({
data-test-subj={`workspace-menu-item-${itemType}-${workspace.id}`}
icon={
<EuiIcon
size="s"
size="m"
type={useCase?.icon || 'wsSelector'}
color={getValidWorkspaceColor(workspace.color)}
/>
Expand All @@ -156,31 +156,32 @@ export const WorkspacePickerContent = ({
<EuiTitle size="xxs">
<h4>{itemType === 'all' ? allWorkspacesTitle : recentWorkspacesTitle}</h4>
</EuiTitle>
<EuiSpacer size="s" />
<EuiListGroup showToolTips flush gutterSize="none" wrapText maxWidth={240}>
<EuiSpacer size="xs" />
<EuiListGroup flush gutterSize="none" maxWidth={240}>
{listItems}
</EuiListGroup>
<EuiSpacer size="s" />
<EuiSpacer size="xs" />
</>
);
};

return (
<>
<EuiSpacer size="s" />
<EuiFieldSearch
compressed={true}
fullWidth={true}
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={searchFieldPlaceholder}
/>
<EuiSpacer />
<EuiSpacer size="s" />

<EuiPanel
paddingSize="none"
color="transparent"
hasBorder={false}
className="eui-yScrollWithShadows"
className="euiYScrollWithShadows"
>
{queriedRecentWorkspace.length > 0 &&
getWorkspaceListGroup(queriedRecentWorkspace, 'recent')}
Expand Down
Loading