[Workspace] Refactor the UI of workspace picker

changelogs/fragments/7045.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Refactor the UI of workspace picker ([#7045](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7045))

src/core/public/chrome/index.ts

@@ -46,7 +46,11 @@ export {
 } from './ui/header/header_help_menu';
 export { NavType, RightNavigationButton, RightNavigationButtonProps } from './ui';
 export { ChromeNavLink, ChromeNavLinks, ChromeNavLinkUpdateableFields } from './nav_links';
-export { ChromeRecentlyAccessed, ChromeRecentlyAccessedHistoryItem } from './recently_accessed';
+export {
+  ChromeRecentlyAccessed,
+  ChromeRecentlyAccessedHistoryItem,
+  PersistedLog,
+} from './recently_accessed';
 export { ChromeNavControl, ChromeNavControls } from './nav_controls';
 export { ChromeDocTitle } from './doc_title';
 export { RightNavigationOrder } from './constants';

src/core/public/chrome/recently_accessed/index.ts

@@ -33,3 +33,5 @@ export {
   ChromeRecentlyAccessedHistoryItem,
   RecentlyAccessedService,
 } from './recently_accessed_service';
+
+export { PersistedLog } from './persisted_log';

src/core/public/index.ts

@@ -73,6 +73,7 @@ import {
   RightNavigationButtonProps,
   ChromeRegistrationNavLink,
   ChromeNavGroupUpdater,
+  PersistedLog,
   NavGroupItemInMap,
   fulfillRegistrationLinksToChromeNavLinks,
 } from './chrome';
@@ -375,6 +376,7 @@ export {
   RightNavigationButtonProps,
   ChromeRegistrationNavLink,
   ChromeNavGroupUpdater,
+  PersistedLog,
   NavGroupItemInMap,
   fulfillRegistrationLinksToChromeNavLinks,
 };

src/plugins/workspace/common/constants.ts

@@ -182,4 +182,6 @@ export const WORKSPACE_USE_CASES = Object.freeze({
   },
 });
 
+export const MAX_WORKSPACE_PICKER_NUM = 3;
+export const RECENT_WORKSPACES_KEY = 'recentWorkspaces';
 export const CURRENT_USER_PLACEHOLDER = '%me%';

src/plugins/workspace/public/components/workspace_menu/workspace_menu.scss

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.custom-title {
+  text-transform: none !important;
+  font-size: 15px !important;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 220px;
+}

src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx

@@ -9,18 +9,50 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { WorkspaceMenu } from './workspace_menu';
 import { coreMock } from '../../../../../core/public/mocks';
 import { CoreStart } from '../../../../../core/public';
+import { BehaviorSubject, of } from 'rxjs';
+import { IntlProvider } from 'react-intl';
+import { recentWorkspaceManager } from '../../recent_workspace_manager';
+import { WORKSPACE_USE_CASES } from '../../../common/constants';
 
 describe('<WorkspaceMenu />', () => {
   let coreStartMock: CoreStart;
+  const navigateToApp = jest.fn();
+  const registeredUseCases$ = new BehaviorSubject([
+    WORKSPACE_USE_CASES.observability,
+    WORKSPACE_USE_CASES['security-analytics'],
+    WORKSPACE_USE_CASES.analytics,
+    WORKSPACE_USE_CASES.search,
+  ]);
 
   beforeEach(() => {
     coreStartMock = coreMock.createStart();
+    coreStartMock.application.capabilities = {
+      navLinks: {},
+      management: {},
+      catalogue: {},
+      savedObjectsManagement: {},
+      workspaces: { permissionEnabled: true },
+      dashboards: { isDashboardAdmin: true },
+    };
+    coreStartMock.application = {
+      ...coreStartMock.application,
+      navigateToApp,
+    };
+
     coreStartMock.workspaces.initialized$.next(true);
     jest.spyOn(coreStartMock.application, 'getUrlForApp').mockImplementation((appId: string) => {
       return `https://test.com/app/${appId}`;
     });
   });
 
+  const WorkspaceMenuCreatorComponent = () => {
+    return (
+      <IntlProvider locale="en">
+        <WorkspaceMenu coreStart={coreStartMock} registeredUseCases$={registeredUseCases$} />
+      </IntlProvider>
+    );
+  };
+
   afterEach(() => {
     jest.clearAllMocks();
     jest.restoreAllMocks();
@@ -32,34 +64,72 @@ describe('<WorkspaceMenu />', () => {
       { id: 'workspace-2', name: 'workspace 2' },
     ]);
 
-    render(<WorkspaceMenu coreStart={coreStartMock} />);
-    fireEvent.click(screen.getByText(/select a workspace/i));
+    render(<WorkspaceMenuCreatorComponent />);
+    const selectButton = screen.getByTestId('workspace-select-button');
+    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();
+  });
+
+  it('should display a list of recent workspaces in the dropdown', () => {
+    jest.spyOn(recentWorkspaceManager, 'getRecentWorkspaces').mockReturnValue([
+      { id: 'workspace-1', timestamp: 1234567890 },
+      { id: 'workspace-2', timestamp: 1234567899 },
+    ]);
+
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1' },
+      { id: 'workspace-2', name: 'workspace 2' },
+    ]);
+
+    render(<WorkspaceMenuCreatorComponent />);
+
+    const selectButton = screen.getByTestId('workspace-select-button');
+    fireEvent.click(selectButton);
 
-    expect(screen.getByText(/workspace 1/i)).toBeInTheDocument();
-    expect(screen.getByText(/workspace 2/i)).toBeInTheDocument();
+    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();
   });
 
-  it('should display current workspace name', () => {
-    coreStartMock.workspaces.currentWorkspace$.next({ id: 'workspace-1', name: 'workspace 1' });
-    render(<WorkspaceMenu coreStart={coreStartMock} />);
-    expect(screen.getByText(/workspace 1/i)).toBeInTheDocument();
+  it('should display current workspace name and use case name', () => {
+    coreStartMock.workspaces.currentWorkspace$.next({
+      id: 'workspace-1',
+      name: 'workspace 1',
+      features: ['use-case-observability'],
+    });
+    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.getByText('Observability')).toBeInTheDocument();
   });
 
   it('should close the workspace dropdown list', async () => {
-    render(<WorkspaceMenu coreStart={coreStartMock} />);
-    fireEvent.click(screen.getByText(/select a workspace/i));
+    render(<WorkspaceMenuCreatorComponent />);
+
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
 
-    expect(screen.getByLabelText(/close workspace dropdown/i)).toBeInTheDocument();
-    fireEvent.click(screen.getByLabelText(/close workspace dropdown/i));
+    expect(screen.getByText(/all workspaces/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
     await waitFor(() => {
-      expect(screen.queryByLabelText(/close workspace dropdown/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/all workspaces/i)).not.toBeInTheDocument();
     });
   });
 
   it('should navigate to the workspace', () => {
+    jest.spyOn(coreStartMock.chrome.navGroup, 'getNavGroupsMap$').mockImplementation(() => {
+      return of({
+        observability: {
+          navLinks: [{ id: 'dashboard', title: '', description: '' }],
+        },
+      });
+    });
     coreStartMock.workspaces.workspaceList$.next([
-      { id: 'workspace-1', name: 'workspace 1' },
-      { id: 'workspace-2', name: 'workspace 2' },
+      { id: 'workspace-1', name: 'workspace 1', features: ['use-case-observability'] },
     ]);
 
     const originalLocation = window.location;
@@ -69,52 +139,63 @@ describe('<WorkspaceMenu />', () => {
       },
     });
 
-    render(<WorkspaceMenu coreStart={coreStartMock} />);
-    fireEvent.click(screen.getByText(/select a workspace/i));
+    render(<WorkspaceMenuCreatorComponent />);
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
     fireEvent.click(screen.getByText(/workspace 1/i));
 
     expect(window.location.assign).toHaveBeenCalledWith(
-      'https://test.com/w/workspace-1/app/workspace_detail'
+      'https://test.com/w/workspace-1/app/discover'
     );
 
     Object.defineProperty(window, 'location', {
       value: originalLocation,
     });
   });
 
-  it('should navigate to create workspace page', () => {
+  it('should navigate to workspace management page', () => {
+    coreStartMock.workspaces.currentWorkspace$.next({
+      id: 'workspace-1',
+      name: 'workspace 1',
+      features: ['use-case-observability'],
+    });
     const originalLocation = window.location;
     Object.defineProperty(window, 'location', {
       value: {
         assign: jest.fn(),
       },
     });
+    render(<WorkspaceMenuCreatorComponent />);
 
-    render(<WorkspaceMenu coreStart={coreStartMock} />);
-    fireEvent.click(screen.getByText(/select a workspace/i));
-    fireEvent.click(screen.getByText(/create workspace/i));
-    expect(window.location.assign).toHaveBeenCalledWith('https://test.com/app/workspace_create');
-
+    fireEvent.click(screen.getByTestId('current-workspace-button'));
+    const button = screen.getByText(/Manage workspace/i);
+    fireEvent.click(button);
+    expect(window.location.assign).toHaveBeenCalledWith(
+      'https://test.com/w/workspace-1/app/workspace_detail'
+    );
     Object.defineProperty(window, 'location', {
       value: originalLocation,
     });
   });
 
-  it('should navigate to workspace list page', () => {
-    const originalLocation = window.location;
-    Object.defineProperty(window, 'location', {
-      value: {
-        assign: jest.fn(),
-      },
-    });
+  it('should navigate to workspaces management page', () => {
+    render(<WorkspaceMenuCreatorComponent />);
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
+    fireEvent.click(screen.getByText(/manage workspaces/i));
+    expect(coreStartMock.application.navigateToApp).toHaveBeenCalledWith('workspace_list');
+  });
 
-    render(<WorkspaceMenu coreStart={coreStartMock} />);
-    fireEvent.click(screen.getByText(/select a workspace/i));
-    fireEvent.click(screen.getByText(/all workspace/i));
-    expect(window.location.assign).toHaveBeenCalledWith('https://test.com/app/workspace_list');
+  it('should navigate to create workspace page', () => {
+    render(<WorkspaceMenuCreatorComponent />);
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
+    fireEvent.click(screen.getByText(/create workspace/i));
+    expect(coreStartMock.application.navigateToApp).toHaveBeenCalledWith('workspace_create');
+  });
 
-    Object.defineProperty(window, 'location', {
-      value: originalLocation,
-    });
+  it('should navigate to workspace list page', () => {
+    render(<WorkspaceMenuCreatorComponent />);
+
+    fireEvent.click(screen.getByTestId('workspace-select-button'));
+    fireEvent.click(screen.getByText(/View all/i));
+    expect(coreStartMock.application.navigateToApp).toHaveBeenCalledWith('workspace_list');
   });
 });