[Bug][Workspace] Navigate to detail page when clicking all use case w…

…orkspace (opensearch-project#7405) (opensearch-project#7430)

* [Bug] Clicking workspace with all use case in the picker should navigate to workspace details page



* Changeset file for PR opensearch-project#7405 created/updated

---------



(cherry picked from commit 67670fd)

Signed-off-by: yubonluo <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

changelogs/fragments/7405.yml

@@ -0,0 +1,2 @@
+fix:
+- [Bug][Workspace] Navigate to detail page when clicking all use case workspace ([#7405](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7405))

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

@@ -4,12 +4,12 @@
  */
 
 import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } 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 { BehaviorSubject } from 'rxjs';
 import { IntlProvider } from 'react-intl';
 import { recentWorkspaceManager } from '../../recent_workspace_manager';
 import { WORKSPACE_USE_CASES } from '../../../common/constants';
@@ -109,7 +109,7 @@ describe('<WorkspaceMenu />', () => {
     expect(screen.getByText('Observability')).toBeInTheDocument();
   });
 
-  it('should navigate to the workspace', () => {
+  it('should navigate to the first feature of workspace use case', () => {
     coreStartMock.workspaces.workspaceList$.next([
       { id: 'workspace-1', name: 'workspace 1', features: ['use-case-observability'] },
     ]);
@@ -134,6 +134,31 @@ describe('<WorkspaceMenu />', () => {
     });
   });
 
+  it('should navigate to the workspace detail page when use case is all', () => {
+    coreStartMock.workspaces.workspaceList$.next([
+      { id: 'workspace-1', name: 'workspace 1', features: ['use-case-all'] },
+    ]);
+
+    const originalLocation = window.location;
+    Object.defineProperty(window, 'location', {
+      value: {
+        assign: jest.fn(),
+      },
+    });
+
+    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'
+    );
+
+    Object.defineProperty(window, 'location', {
+      value: originalLocation,
+    });
+  });
+
   it('should navigate to workspace management page', () => {
     coreStartMock.workspaces.currentWorkspace$.next({
       id: 'workspace-1',

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

@@ -32,7 +32,7 @@ import {
   WORKSPACE_DETAIL_APP_ID,
 } from '../../../common/constants';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
-import { CoreStart, WorkspaceObject } from '../../../../../core/public';
+import { ALL_USE_CASE_ID, CoreStart, WorkspaceObject } from '../../../../../core/public';
 import { getFirstUseCaseOfFeatureConfigs } from '../../utils';
 import { recentWorkspaceManager } from '../../recent_workspace_manager';
 import { WorkspaceUseCase } from '../../types';
@@ -129,7 +129,9 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
 
   const getWorkspaceListGroup = (filterWorkspaceList: WorkspaceObject[], itemType: string) => {
     const listItems = filterWorkspaceList.map((workspace: WorkspaceObject) => {
-      const appId = getUseCase(workspace)?.features[0] ?? WORKSPACE_DETAIL_APP_ID;
+      const useCase = getUseCase(workspace);
+      const appId =
+        (useCase?.id !== ALL_USE_CASE_ID && useCase?.features?.[0]) || WORKSPACE_DETAIL_APP_ID;
       const useCaseURL = formatUrlWithWorkspaceId(
         coreStart.application.getUrlForApp(appId, {
           absolute: false,
@@ -141,6 +143,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
         <EuiListGroupItem
           key={workspace.id}
           style={{ paddingLeft: '0' }}
+          className="eui-textTruncate"
           size="s"
           data-test-subj={`workspace-menu-item-${itemType}-${workspace.id}`}
           icon={
@@ -152,17 +155,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
               initialsLength={2}
             />
           }
-          label={
-            <EuiToolTip
-              anchorClassName="eui-textTruncate"
-              position="bottom"
-              content={workspace.name}
-            >
-              <EuiText style={{ maxWidth: '220px' }} className="eui-textTruncate">
-                {workspace.name}
-              </EuiText>
-            </EuiToolTip>
-          }
+          label={workspace.name}
           onClick={() => {
             closePopover();
             window.location.assign(useCaseURL);
@@ -175,7 +168,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
         <EuiTitle size="xxs">
           <h4>{itemType === 'all' ? allWorkspacesTitle : recentWorkspacesTitle}</h4>
         </EuiTitle>
-        <EuiListGroup flush gutterSize="none" maxWidth={280}>
+        <EuiListGroup showToolTips flush gutterSize="none" wrapText maxWidth={240}>
           {listItems}
         </EuiListGroup>
       </>
@@ -213,16 +206,16 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
               <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
                 <EuiToolTip
                   anchorClassName="eui-textTruncate"
-                  position="bottom"
+                  position="right"
                   content={currentWorkspaceName}
                 >
-                  <EuiText style={{ maxWidth: '220px' }} className="eui-textTruncate">
+                  <EuiText size="s" style={{ maxWidth: '195px' }} className="eui-textTruncate">
                     {currentWorkspaceName}
                   </EuiText>
                 </EuiToolTip>
               </EuiFlexItem>
               <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-use-case">
-                {getUseCase(currentWorkspace)?.title ?? ''}
+                <EuiText size="s">{getUseCase(currentWorkspace)?.title ?? ''}</EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiSmallButton