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 index 9fcdcd9aac8a..86091ada7077 100644 --- 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('', () => { 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(); + + 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(); @@ -96,28 +117,7 @@ describe('', () => { 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(); - - 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('', () => { 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 index 007e518a367e..49c929c4ff31 100644 --- 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 ? ( <> - + { {getUseCase(currentWorkspace)?.title ?? ''} - - - handleSearchInput({ text: e.target.value })} - placeholder={searchFieldPlaceholder} - /> - ) : ( <> @@ -177,16 +174,15 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => { {currentWorkspaceName} - - - handleSearchInput({ text: e.target.value })} - placeholder={searchFieldPlaceholder} - /> - )} + + handleSearchInput({ text: e.target.value })} + placeholder={searchFieldPlaceholder} + /> + 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 dcaf28232c1d..dd95098636dc 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 @@ -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 ( -

No workspace available

+

+ {i18n.translate('workspace.picker.empty.state.title', { + defaultMessage: 'No workspace available', + })} +

} body={

{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', + })}

} @@ -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 ( {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()