02-enable-associated-icon

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
opensearch-project · Aug 28, 2024 · 0afaea9 · 0afaea9
1 parent 883eb94
commit 0afaea9
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 62 deletions.
diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.test.tsx
@@ -69,6 +69,27 @@ describe('<WorkspaceMenu />', () => {
     expect(screen.getByTestId('workspace-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', features: [] },
+      { id: 'workspace-2', name: 'workspace 2', features: [] },
+    ]);
+
+    render(<WorkspaceMenuCreatorComponent />);
+
+    const selectButton = screen.getByTestId('workspace-select-button');
+    fireEvent.click(selectButton);
+
+    expect(screen.getByText(/recent workspaces/i)).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-recent-workspace-2')).toBeInTheDocument();
+  });
+
   it('should be able to display empty state when the workspace list is empty', () => {
     coreStartMock.workspaces.workspaceList$.next([]);
     render(<WorkspaceMenuCreatorComponent />);
@@ -96,28 +117,7 @@ describe('<WorkspaceMenu />', () => {
     expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).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', features: [] },
-      { id: 'workspace-2', name: 'workspace 2', features: [] },
-    ]);
-
-    render(<WorkspaceMenuCreatorComponent />);
-
-    const selectButton = screen.getByTestId('workspace-select-button');
-    fireEvent.click(selectButton);
-
-    expect(screen.getByText(/recent workspaces/i)).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-2')).toBeInTheDocument();
-  });
-
-  it('should display current workspace name and use case name', () => {
+  it('should display current workspace name, use case name and associated icon', () => {
     coreStartMock.workspaces.currentWorkspace$.next({
       id: 'workspace-1',
       name: 'workspace 1',
@@ -128,6 +128,7 @@ describe('<WorkspaceMenu />', () => {
     fireEvent.click(screen.getByTestId('current-workspace-button'));
     expect(screen.getByTestId('workspace-menu-current-workspace-name')).toBeInTheDocument();
     expect(screen.getByTestId('workspace-menu-current-use-case')).toBeInTheDocument();
+    expect(screen.getByTestId('current-workspace-icon-observability')).toBeInTheDocument();
     expect(screen.getByText('Observability')).toBeInTheDocument();
   });
 

diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -135,7 +135,12 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
           {currentWorkspace ? (
             <>
               <EuiFlexItem grow={false}>
-                <EuiIcon size="xl" color="success" type="wsObservability" />
+                <EuiIcon
+                  size="xl"
+                  color="success"
+                  data-test-subj={`current-workspace-icon-${getUseCase(currentWorkspace)?.id}`}
+                  type={`ws${getUseCase(currentWorkspace)?.title}`}
+                />
               </EuiFlexItem>
               <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
                 <EuiToolTip
@@ -160,14 +165,6 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
                   {getUseCase(currentWorkspace)?.title ?? ''}
                 </EuiText>
               </EuiFlexItem>
-
-              <EuiFlexItem grow={false} style={{ width: '100%' }}>
-                <EuiFieldSearch
-                  value={querySearch}
-                  onChange={(e) => handleSearchInput({ text: e.target.value })}
-                  placeholder={searchFieldPlaceholder}
-                />
-              </EuiFlexItem>
             </>
           ) : (
             <>
@@ -177,16 +174,15 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
               <EuiFlexItem grow={false} data-test-subj="workspace-menu-current-workspace-name">
                 <EuiText textAlign="center">{currentWorkspaceName}</EuiText>
               </EuiFlexItem>
-
-              <EuiFlexItem grow={false} style={{ width: '100%' }}>
-                <EuiFieldSearch
-                  value={querySearch}
-                  onChange={(e) => handleSearchInput({ text: e.target.value })}
-                  placeholder={searchFieldPlaceholder}
-                />
-              </EuiFlexItem>
             </>
           )}
+          <EuiFlexItem grow={false} style={{ width: '100%' }}>
+            <EuiFieldSearch
+              value={querySearch}
+              onChange={(e) => handleSearchInput({ text: e.target.value })}
+              placeholder={searchFieldPlaceholder}
+            />
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>
 

diff --git a/...plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx b/...plugins/workspace/public/components/workspace_picker_content/workspace_picker_content.tsx
@@ -56,27 +56,26 @@ export const WorkspacePickerContent = ({
       .filter((workspace): workspace is WorkspaceObject => workspace !== undefined);
   }, [workspaceList]);
 
-  const queryedWorkspace = useMemo(() => {
-    if (searchQuery) {
-      const normalizedQuery = searchQuery.toLowerCase();
-      const result = workspaceList.filter((item) => {
-        return item.name.toLowerCase().indexOf(normalizedQuery) > -1;
-      });
-      return result;
+  const queryFromList = ({ list, query }: { list: WorkspaceObject[]; query: string }) => {
+    if (!list || list.length === 0) {
+      return [];
     }
-    return workspaceList;
-  }, [workspaceList, searchQuery]);
 
-  const queryedRecentWorkspace = useMemo(() => {
-    if (searchQuery) {
-      const normalizedQuery = searchQuery.toLowerCase();
-      const result = filteredRecentWorkspaces.filter((item) => {
-        return item.name.toLowerCase().indexOf(normalizedQuery) > -1;
-      });
+    if (query && query.trim() !== '') {
+      const normalizedQuery = query.toLowerCase();
+      const result = list.filter((item) => item.name.toLowerCase().includes(normalizedQuery));
       return result;
     }
-    return workspaceList;
-  }, [filteredRecentWorkspaces, searchQuery, workspaceList]);
+
+    return list;
+  };
+  const queriedWorkspace = useMemo(() => {
+    return queryFromList({ list: workspaceList, query: searchQuery });
+  }, [workspaceList, searchQuery]);
+
+  const queriedRecentWorkspace = useMemo(() => {
+    return queryFromList({ list: filteredRecentWorkspaces, query: searchQuery });
+  }, [filteredRecentWorkspaces, searchQuery]);
 
   const getUseCase = (workspace: WorkspaceObject) => {
     if (!workspace.features) {
@@ -90,17 +89,27 @@ export const WorkspacePickerContent = ({
     return (
       <EuiEmptyPrompt
         iconType="wsSelector"
+        data-test-subj="empty-workspace-prompt"
         title={
           <EuiText size="m">
-            <p>No workspace available</p>
+            <p>
+              {i18n.translate('workspace.picker.empty.state.title', {
+                defaultMessage: 'No workspace available',
+              })}
+            </p>
           </EuiText>
         }
         body={
           <EuiText size="s">
             <p>
               {isDashboardAdmin
-                ? 'Create a workspace to get start'
-                : 'Contact your administrator to create a workspace or to be added to an existing one'}
+                ? i18n.translate('workspace.picker.empty.state.description.admin', {
+                    defaultMessage: 'Create a workspace to get start',
+                  })
+                : i18n.translate('workspace.picker.empty.state.description.noAdmin', {
+                    defaultMessage:
+                      'Contact your administrator to create a workspace or to be added to an existing one',
+                  })}
             </p>
           </EuiText>
         }
@@ -112,6 +121,7 @@ export const WorkspacePickerContent = ({
     const listItems = filterWorkspaceList.map((workspace: WorkspaceObject) => {
       const useCase = getUseCase(workspace);
       const useCaseURL = getUseCaseUrl(useCase, workspace, coreStart.application, coreStart.http);
+
       return (
         <EuiListGroupItem
           key={workspace.id}
@@ -151,11 +161,11 @@ export const WorkspacePickerContent = ({
   return (
     <>
       {searchQuery ? (
-        queryedWorkspace && queryedWorkspace.length > 0 ? (
+        queriedWorkspace && queriedWorkspace.length > 0 ? (
           <>
             {filteredRecentWorkspaces.length > 0 &&
-              getWorkspaceListGroup(queryedRecentWorkspace, 'recent')}
-            {workspaceList.length > 0 && getWorkspaceListGroup(queryedWorkspace, 'all')}
+              getWorkspaceListGroup(queriedRecentWorkspace, 'recent')}
+            {workspaceList.length > 0 && getWorkspaceListGroup(queriedWorkspace, 'all')}
           </>
         ) : (
           getEmptyStatePrompt()