update collapse button position

Signed-off-by: Hailong Cui <[email protected]>
ruanyl · Apr 9, 2024 · 18f63b8 · 18f63b8
1 parent ed42c8a
commit 18f63b8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts
@@ -41,6 +41,7 @@ import { notificationServiceMock } from '../notifications/notifications_service.
 import { uiSettingsServiceMock } from '../ui_settings/ui_settings_service.mock';
 import { ChromeService } from './chrome_service';
 import { getAppInfo } from '../application/utils';
+import { workspacesServiceMock } from '../mocks';
 
 class FakeApp implements App {
   public title: string;
@@ -70,6 +71,7 @@ function defaultStartDeps(availableApps?: App[]) {
     injectedMetadata: injectedMetadataServiceMock.createStartContract(),
     notifications: notificationServiceMock.createStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
+    workspaces: workspacesServiceMock.createStartContract(),
   };
 
   if (availableApps) {

diff --git a/src/plugins/workspace/public/components/workspace_overview/index.tsx b/src/plugins/workspace/public/components/workspace_overview/index.tsx
@@ -42,7 +42,7 @@ export const WorkspaceOverview = () => {
   } = useOpenSearchDashboards<CoreStart & { workspaceClient: WorkspaceClient }>();
 
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isStartWorkingVisible, setIsStartWorkingVisible] = useState(true);
+  const [isGettingStartVisible, setIsStartWorkingVisible] = useState(true);
   const isPermissionEnabled = application.capabilities.workspaces.permissionEnabled;
 
   const currentWorkspace = useObservable(workspaces.currentWorkspace$);
@@ -56,6 +56,10 @@ export const WorkspaceOverview = () => {
     return getStartCards.filter((card) => !card.appId || featureFilter({ id: card.appId }));
   }, [currentWorkspace]);
 
+  if (!currentWorkspace) {
+    return null;
+  }
+
   const pageTitle = (
     <EuiFlexGroup gutterSize="none" alignItems="baseline" justifyContent="flexStart">
       <EuiFlexItem grow={false}>{currentWorkspace?.name}</EuiFlexItem>
@@ -77,15 +81,15 @@ export const WorkspaceOverview = () => {
 
     const userList = allUserAndGroup.slice(0, 3).map((user) => {
       return (
-        <EuiFlexItem key="user">
+        <EuiFlexItem key={user}>
           <EuiAvatar size="m" name={user} />
         </EuiFlexItem>
       );
     });
     if (allUserAndGroup.length > 3) {
       userList.push(
         <EuiFlexItem key="more">
-          <EuiText>+{allUserAndGroup.length - 3}</EuiText>
+          <EuiText size="m">+{allUserAndGroup.length - 3}</EuiText>
         </EuiFlexItem>
       );
     }
@@ -121,18 +125,34 @@ export const WorkspaceOverview = () => {
     },
   ];
 
-  if (!currentWorkspace) {
-    return null;
+  const collapseButton = (
+    <EuiBadge
+      color="#fff"
+      style={{ backgroundColor: 'transparent', padding: '8px' }}
+      iconType={isGettingStartVisible ? 'arrowUp' : 'arrowDown'}
+      iconSide="right"
+      onClickAriaLabel="Click to toggle start working cards"
+      onClick={() => {
+        setIsStartWorkingVisible(!isGettingStartVisible);
+      }}
+    >
+      {isGettingStartVisible ? 'collapse' : 'expand'}
+    </EuiBadge>
+  );
+
+  let rightSideItems: ReactNode[] = userGroupsList ? [userGroupsList] : [];
+  if (!isGettingStartVisible) {
+    rightSideItems = [collapseButton, ...rightSideItems];
   }
 
   return (
     <EuiPage>
       <EuiPageBody>
         <EuiPageHeader
           pageTitle={pageTitle}
-          rightSideItems={userGroupsList ? [userGroupsList] : undefined}
+          rightSideItems={rightSideItems.length ? rightSideItems : undefined}
         >
-          {isStartWorkingVisible ? (
+          {isGettingStartVisible ? (
             <>
               <EuiTitle size="s">
                 <p>
@@ -169,25 +189,13 @@ export const WorkspaceOverview = () => {
               </EuiFlexGroup>
             </>
           ) : null}
-          <EuiFlexGroup>
-            <EuiFlexItem />
-            <EuiFlexItem grow={false}>
-              <EuiBadge
-                color="#fff"
-                style={{ backgroundColor: 'transparent' }}
-                iconType={isStartWorkingVisible ? 'arrowUp' : 'arrowDown'}
-                iconSide="right"
-                onClickAriaLabel="Click to toggle start working cards"
-                onClick={() => {
-                  setIsStartWorkingVisible(!isStartWorkingVisible);
-                }}
-              >
-                {isStartWorkingVisible ? 'collapse' : 'expand'}
-              </EuiBadge>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          {isGettingStartVisible ? (
+            <EuiFlexGroup>
+              <EuiFlexItem />
+              <EuiFlexItem grow={false}>{collapseButton}</EuiFlexItem>
+            </EuiFlexGroup>
+          ) : null}
         </EuiPageHeader>
-        <EuiSpacer />
         <EuiPageContent>
           <EuiTabbedContent
             tabs={tabs}

diff --git a/src/plugins/workspace/public/plugin.test.ts b/src/plugins/workspace/public/plugin.test.ts
@@ -23,7 +23,7 @@ describe('Workspace plugin', () => {
     await workspacePlugin.setup(setupMock, {
       savedObjectsManagement: savedObjectManagementSetupMock,
     });
-    expect(setupMock.application.register).toBeCalledTimes(5);
+    expect(setupMock.application.register).toBeCalledTimes(3);
     expect(WorkspaceClientMock).toBeCalledTimes(1);
     expect(workspaceClientMock.enterWorkspace).toBeCalledTimes(0);
     expect(savedObjectManagementSetupMock.columns.register).toBeCalledTimes(1);