From 557aac8033630d54fd7761ae7215af842c4ccc02 Mon Sep 17 00:00:00 2001
From: Qxisylolo <qianxisy@amazon.com>
Date: Wed, 11 Sep 2024 18:11:32 +0800
Subject: [PATCH 1/3] fix/ fix the UI of menu content picker

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
---
 .../workspace_menu/workspace_menu.tsx         | 194 +++++++++---------
 .../workspace_picker_content.tsx              |  15 +-
 2 files changed, 108 insertions(+), 101 deletions(-)

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 bf36fc3844ff..0be39281f384 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -14,6 +14,7 @@ import {
   EuiButtonIcon,
   EuiFlexItem,
   EuiIcon,
+  EuiSpacer,
   EuiFlexGroup,
   EuiHorizontalRule,
   EuiButtonEmpty,
@@ -86,106 +87,111 @@ 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"
+      <EuiPanel hasBorder={false} color="transparent" paddingSize="none" style={{ width: '280px' }}>
+        <EuiPanel paddingSize="m" hasBorder={false} color="transparent">
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
+            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">
+                  <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}
+          color="transparent"
+          style={{ height: '25vh' }}
+          className="eui-fullHeight"
         >
-          {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>
+          <WorkspacePickerContent
+            coreStart={coreStart}
+            registeredUseCases$={registeredUseCases$}
+            onClickWorkspace={() => setPopover(false)}
+          />
+        </EuiPanel>
 
-      <EuiPanel
-        paddingSize="s"
-        hasBorder={false}
-        color="transparent"
-        style={{ height: '30vh' }}
-        className="eui-fullHeight"
-      >
-        <WorkspacePickerContent
-          coreStart={coreStart}
-          registeredUseCases$={registeredUseCases$}
-          onClickWorkspace={() => setPopover(false)}
-        />
+        {isDashboardAdmin ? (
+          <>
+            <EuiHorizontalRule margin="none" size="full" />
+            <EuiPanel paddingSize="m" hasBorder={false} color="transparent">
+              <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="none">
+                <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>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </>
+        ) : (
+          <EuiSpacer />
+        )}
       </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>
-          </EuiFlexGroup>
-        </EuiPanel>
-      )}
     </EuiPopover>
   );
 };
diff --git a/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx b/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
index 72fdd67b7367..322ce72bfd85 100644
--- a/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
+++ b/src/plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
@@ -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',
@@ -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)}
             />
@@ -156,17 +156,18 @@ 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}
@@ -174,13 +175,13 @@ export const WorkspacePickerContent = ({
         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')}

From 1ad2dc4a47bc16698187adc7c8330e7c8980e4ed Mon Sep 17 00:00:00 2001
From: Qxisylolo <qianxisy@amazon.com>
Date: Thu, 12 Sep 2024 14:28:01 +0800
Subject: [PATCH 2/3] fix/ fix manage button position

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
---
 .../workspace_menu/workspace_menu.tsx         | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

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 0be39281f384..dc20cb7542d8 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -91,13 +91,19 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
       anchorPosition="downCenter"
       repositionOnScroll={true}
     >
-      <EuiPanel hasBorder={false} color="transparent" paddingSize="none" style={{ width: '280px' }}>
+      <EuiPanel
+        hasBorder={false}
+        color="transparent"
+        hasShadow={false}
+        paddingSize="none"
+        style={{ width: '280px' }}
+      >
         <EuiPanel paddingSize="m" hasBorder={false} color="transparent">
           <EuiFlexGroup
             justifyContent="spaceBetween"
             alignItems="center"
             direction="column"
-            gutterSize="s"
+            gutterSize="xs"
           >
             {currentWorkspace ? (
               <>
@@ -140,8 +146,9 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
         <EuiPanel
           paddingSize="s"
           hasBorder={false}
+          hasShadow={false}
           color="transparent"
-          style={{ height: '25vh' }}
+          style={{ height: '30vh' }}
           className="eui-fullHeight"
         >
           <WorkspacePickerContent
@@ -154,19 +161,20 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
         {isDashboardAdmin ? (
           <>
             <EuiHorizontalRule margin="none" size="full" />
-            <EuiPanel paddingSize="m" hasBorder={false} color="transparent">
+            <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false} color="transparent">
               <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="none">
-                <EuiFlexItem>
+                <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>
+                    <EuiText size="s"> {manageWorkspacesButton}</EuiText>
                   </EuiButtonEmpty>
                 </EuiFlexItem>
 
@@ -174,6 +182,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
                   <EuiButton
                     color="primary"
                     iconType="plus"
+                    className="eui-textRight"
                     size="s"
                     key={WORKSPACE_CREATE_APP_ID}
                     data-test-subj="workspace-menu-create-workspace-button"

From 7fa9d130e9e8b7df5fde64f464612df0c6c1c0c3 Mon Sep 17 00:00:00 2001
From: Qxisylolo <qianxisy@amazon.com>
Date: Thu, 12 Sep 2024 14:44:05 +0800
Subject: [PATCH 3/3] fix/ fix manage button position and padding

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
---
 .../public/components/workspace_menu/workspace_menu.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 dc20cb7542d8..649275e43f18 100644
--- a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
+++ b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -161,7 +161,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
         {isDashboardAdmin ? (
           <>
             <EuiHorizontalRule margin="none" size="full" />
-            <EuiPanel paddingSize="s" hasBorder={false} hasShadow={false} color="transparent">
+            <EuiPanel paddingSize="m" hasBorder={false} hasShadow={false} color="transparent">
               <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="none">
                 <EuiFlexItem grow={false}>
                   <EuiButtonEmpty