[workspace]feat/add workspace selector to left nav bar. (opensearch-project#8364) (opensearch-project#8418)

* feat/add_workspace_selector



* Add_workspace_selector_to_left_nav, adjust style



* Add_workspace_selector_to_left_nav, adjust styles



* Add_workspace_selector_to_left_nav, keep the origin width of nav bar



* Add_workspace_selector_to_left_nav, keep the origin width of nav bar, and adjust width



* fix/the_UI_of_recent_assets, resolve comments



* fix/the_UI_of_recent_assets, add tests



* fix/the_UI_of_recent_assets, set scss



* fix/the_UI_of_recent_assets, resolve conflicts



* fix/the_UI_of_recent_assets, delete workspace list



* feat: show nav group when not in a workspace



* feat: format scss file



* feat: optimize code



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




* fix: unit test



---------





(cherry picked from commit 0831c99)

Signed-off-by: Qxisylolo <[email protected]>
Signed-off-by: SuZhou-Joe <[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: SuZhou-Joe <[email protected]>
Co-authored-by: Yulong Ruan <[email protected]>

Author: 4 people

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx

@@ -8,7 +8,6 @@ import {
   EuiFlyout,
   EuiPanel,
   EuiHorizontalRule,
-  EuiSpacer,
   EuiHideFor,
   EuiFlyoutProps,
   EuiShowFor,
@@ -79,6 +78,7 @@ export function CollapsibleNavGroupEnabled({
   id,
   isNavOpen,
   storage = window.localStorage,
+  currentWorkspace$,
   closeNav,
   navigateToApp,
   navigateToUrl,
@@ -94,7 +94,6 @@ export function CollapsibleNavGroupEnabled({
   const appId = useObservable(observables.appId$, '');
   const navGroupsMap = useObservable(observables.navGroupsMap$, {});
   const currentNavGroup = useObservable(observables.currentNavGroup$, undefined);
-
   const visibleUseCases = useMemo(() => getVisibleUseCases(navGroupsMap), [navGroupsMap]);
 
   const currentNavGroupId = useMemo(() => {
@@ -115,9 +114,6 @@ export function CollapsibleNavGroupEnabled({
     ? !currentNavGroupId
     : currentNavGroupId === ALL_USE_CASE_ID;
 
-  const shouldShowCollapsedNavHeaderContent =
-    isNavOpen && !!collapsibleNavHeaderRender && !currentNavGroupId;
-
   const navLinksForRender: ChromeNavLink[] = useMemo(() => {
     const getSystemNavGroups = () => {
       const result: ChromeNavLink[] = [];
@@ -300,6 +296,7 @@ export function CollapsibleNavGroupEnabled({
             <CollapsibleNavTop
               homeLink={homeLink}
               navGroupsMap={navGroupsMap}
+              collapsibleNavHeaderRender={collapsibleNavHeaderRender}
               navLinks={navLinks}
               navigateToApp={navigateToApp}
               logos={logos}
@@ -308,7 +305,7 @@ export function CollapsibleNavGroupEnabled({
               shouldShrinkNavigation={!isNavOpen}
               onClickShrink={closeNav}
               visibleUseCases={visibleUseCases}
-              currentWorkspace$={observables.currentWorkspace$}
+              currentWorkspace$={currentWorkspace$}
             />
           </EuiPanel>
         )}
@@ -320,12 +317,6 @@ export function CollapsibleNavGroupEnabled({
             hasShadow={false}
             className="eui-yScroll flex-1-container"
           >
-            {shouldShowCollapsedNavHeaderContent && collapsibleNavHeaderRender ? (
-              <>
-                {collapsibleNavHeaderRender()}
-                <EuiSpacer />
-              </>
-            ) : null}
             <NavGroups
               navLinks={navLinksForRender}
               navigateToApp={navigateToApp}

src/core/public/chrome/ui/header/collapsible_nav_group_enabled_top.tsx

@@ -11,10 +11,10 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
   EuiIcon,
   EuiPanel,
   EuiSpacer,
-  EuiText,
 } from '@elastic/eui';
 import { InternalApplicationStart } from 'src/core/public/application';
 import { createEuiListItem } from './nav_link';
@@ -25,6 +25,7 @@ import { fulfillRegistrationLinksToChromeNavLinks } from '../../utils';
 import './collapsible_nav_group_enabled_top.scss';
 
 export interface CollapsibleNavTopProps {
+  collapsibleNavHeaderRender?: () => JSX.Element | null;
   homeLink?: ChromeNavLink;
   navGroupsMap: Record<string, NavGroupItemInMap>;
   currentNavGroup?: NavGroupItemInMap;
@@ -39,6 +40,7 @@ export interface CollapsibleNavTopProps {
 }
 
 export const CollapsibleNavTop = ({
+  collapsibleNavHeaderRender,
   currentNavGroup,
   navigateToApp,
   logos,
@@ -52,7 +54,6 @@ export const CollapsibleNavTop = ({
   navLinks,
 }: CollapsibleNavTopProps) => {
   const currentWorkspace = useObservable(currentWorkspace$);
-
   const firstVisibleNavLinkInFirstVisibleUseCase = useMemo(
     () =>
       fulfillRegistrationLinksToChromeNavLinks(
@@ -148,12 +149,19 @@ export const CollapsibleNavTop = ({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      {currentNavGroup?.title && (
-        <>
-          <EuiSpacer />
-          <EuiText>{currentNavGroup?.title}</EuiText>
-        </>
-      )}
+      {
+        // Nav groups with type are system(global) nav group and we should show title for those nav groups
+        (currentNavGroup?.type || collapsibleNavHeaderRender) && (
+          <>
+            <EuiSpacer />
+            {currentNavGroup?.type ? (
+              <EuiText>{currentNavGroup?.title}</EuiText>
+            ) : (
+              collapsibleNavHeaderRender?.()
+            )}
+          </>
+        )
+      }
     </EuiPanel>
   );
 };

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

@@ -0,0 +1,3 @@
+.workspaceMenuHeader {
+  padding: $ouiSizeL;
+}

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-
+import moment from 'moment';
 import { WorkspaceMenu } from './workspace_menu';
 import { coreMock } from '../../../../../core/public/mocks';
 import { CoreStart, DEFAULT_NAV_GROUPS } from '../../../../../core/public';
@@ -64,16 +64,14 @@ describe('<WorkspaceMenu />', () => {
     const selectButton = screen.getByTestId('workspace-select-button');
     fireEvent.click(selectButton);
 
-    expect(screen.getByText(/all workspaces/i)).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-all-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-all-workspace-2')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-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 },
-    ]);
+  it('should display viewed xx ago for recent workspaces', () => {
+    jest
+      .spyOn(recentWorkspaceManager, 'getRecentWorkspaces')
+      .mockReturnValue([{ id: 'workspace-1', timestamp: 1234567890 }]);
 
     coreStartMock.workspaces.workspaceList$.next([
       { id: 'workspace-1', name: 'workspace 1', features: [] },
@@ -85,9 +83,7 @@ describe('<WorkspaceMenu />', () => {
     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();
+    expect(screen.getByText(`viewed ${moment(1234567890).fromNow()}`)).toBeInTheDocument();
   });
 
   it('should be able to display empty state when the workspace list is empty', () => {
@@ -98,7 +94,7 @@ describe('<WorkspaceMenu />', () => {
     expect(screen.getByText(/no workspace available/i)).toBeInTheDocument();
   });
 
-  it('should be able to perform search and filter and the results will be shown in both all and recent section', () => {
+  it('should be able to perform search and filter and the results will be shown', () => {
     coreStartMock.workspaces.workspaceList$.next([
       { id: 'workspace-1', name: 'workspace 1', features: [] },
       { id: 'test-2', name: 'test 2', features: [] },
@@ -113,8 +109,8 @@ describe('<WorkspaceMenu />', () => {
 
     const searchInput = screen.getByRole('searchbox');
     fireEvent.change(searchInput, { target: { value: 'works' } });
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-item-recent-workspace-1')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-item-workspace-1')).toBeInTheDocument();
+    expect(screen.queryByText('workspace-menu-item-workspace-1')).not.toBeInTheDocument();
   });
 
   it('should be able to display empty state when seach is not found', () => {
@@ -145,7 +141,7 @@ describe('<WorkspaceMenu />', () => {
 
     fireEvent.click(screen.getByTestId('workspace-select-button'));
     expect(screen.getByTestId('workspace-menu-current-workspace-name')).toBeInTheDocument();
-    expect(screen.getByTestId('workspace-menu-current-use-case')).toBeInTheDocument();
+    expect(screen.getByTestId('workspace-menu-current-workspace-use-case')).toBeInTheDocument();
     expect(screen.getByTestId('current-workspace-icon-wsObservability')).toBeInTheDocument();
     expect(screen.getByText('Observability')).toBeInTheDocument();
   });