optimize the code

Signed-off-by: yubonluo <[email protected]>
opensearch-project · Jul 21, 2024 · 5a2a1d8 · 5a2a1d8
1 parent 29c80dd
commit 5a2a1d8
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 27 deletions.
diff --git a/src/plugins/content_management/public/components/page_render.tsx b/src/plugins/content_management/public/components/page_render.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { useObservable } from 'react-use';
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
 
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Page } from '../services';
 import { SectionRender } from './section_render';
 import { EmbeddableStart } from '../../../embeddable/public';
@@ -21,16 +22,22 @@ export const PageRender = ({ page, embeddable, savedObjectsClient }: Props) => {
   const sections = useObservable(page.getSections$()) || [];
 
   return (
-    <div className="contentManagement-page" style={{ margin: '10px 20px' }}>
+    <EuiFlexGroup
+      direction="column"
+      className="contentManagement-page"
+      style={{ margin: '10px 20px' }}
+    >
       {sections.map((section) => (
-        <SectionRender
-          key={section.id}
-          embeddable={embeddable}
-          section={section}
-          savedObjectsClient={savedObjectsClient}
-          contents$={page.getContents$(section.id)}
-        />
+        <EuiFlexItem>
+          <SectionRender
+            key={section.id}
+            embeddable={embeddable}
+            section={section}
+            savedObjectsClient={savedObjectsClient}
+            contents$={page.getContents$(section.id)}
+          />
+        </EuiFlexItem>
       ))}
-    </div>
+    </EuiFlexGroup>
   );
 };
diff --git a/src/plugins/content_management/public/components/section_render.tsx b/src/plugins/content_management/public/components/section_render.tsx
@@ -61,7 +61,7 @@ const CardSection = ({ section, embeddable, contents$ }: Props) => {
 
   if (section.kind === 'card' && factory && input) {
     return (
-      <EuiPanel style={{ margin: '0px 8px' }}>
+      <EuiPanel>
         <EuiTitle size="s">
           <h2>
             <EuiButtonIcon

diff --git a/src/plugins/home/public/index.ts b/src/plugins/home/public/index.ts
@@ -53,3 +53,5 @@ import { HomePublicPlugin } from './plugin';
 
 export const plugin = (initializerContext: PluginInitializerContext) =>
   new HomePublicPlugin(initializerContext);
+
+export { HOME_PAGE_ID, HOME_CONTENT_AREAS } from '../common/constants';
diff --git a/src/plugins/workspace/opensearch_dashboards.json b/src/plugins/workspace/opensearch_dashboards.json
@@ -8,5 +8,5 @@
     "opensearchDashboardsReact"
   ],
   "optionalPlugins": ["savedObjectsManagement","management","dataSourceManagement","contentManagement"],
-  "requiredBundles": ["opensearchDashboardsReact"]
+  "requiredBundles": ["opensearchDashboardsReact", "home"]
 }
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
@@ -109,18 +109,6 @@ describe('<WorkspaceMenu />', () => {
     expect(screen.getByText('Observability')).toBeInTheDocument();
   });
 
-  it('should close the workspace dropdown list', async () => {
-    render(<WorkspaceMenuCreatorComponent />);
-
-    fireEvent.click(screen.getByTestId('workspace-select-button'));
-
-    expect(screen.getByText(/all workspaces/i)).toBeInTheDocument();
-    fireEvent.click(screen.getByTestId('workspace-select-button'));
-    await waitFor(() => {
-      expect(screen.queryByText(/all workspaces/i)).not.toBeInTheDocument();
-    });
-  });
-
   it('should navigate to the workspace', () => {
     coreStartMock.workspaces.workspaceList$.next([
       { id: 'workspace-1', name: 'workspace 1', features: ['use-case-observability'] },

diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -44,7 +44,7 @@ const allWorkspacesTitle = i18n.translate('workspace.menu.title.allWorkspaces',
 });
 
 const recentWorkspacesTitle = i18n.translate('workspace.menu.title.recentWorkspaces', {
-  defaultMessage: 'recent workspaces',
+  defaultMessage: 'Recent workspaces',
 });
 
 const createWorkspaceButton = i18n.translate('workspace.menu.button.createWorkspace', {
@@ -158,6 +158,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
             </EuiToolTip>
           }
           onClick={() => {
+            closePopover();
             window.location.assign(useCaseURL);
           }}
         />
@@ -221,6 +222,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
                 <EuiButton
                   color="text"
                   onClick={() => {
+                    closePopover();
                     navigateToWorkspaceDetail(coreStart, currentWorkspace.id);
                   }}
                 >
@@ -240,6 +242,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
                 <EuiButton
                   color="text"
                   onClick={() => {
+                    closePopover();
                     coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
                   }}
                 >
@@ -251,8 +254,9 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
         </EuiFlexGroup>
       </EuiPanel>
       <EuiPanel paddingSize="s" hasBorder={false} color="transparent">
-        {getWorkspaceListGroup(filteredRecentWorkspaces, 'recent')}
-        {getWorkspaceListGroup(filteredWorkspaceList, 'all')}
+        {filteredRecentWorkspaces.length > 0 &&
+          getWorkspaceListGroup(filteredRecentWorkspaces, 'recent')}
+        {filteredWorkspaceList.length > 0 && getWorkspaceListGroup(filteredWorkspaceList, 'all')}
       </EuiPanel>
       <EuiPanel paddingSize="s" hasBorder={false} color="transparent">
         <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
@@ -263,6 +267,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
               key={WORKSPACE_LIST_APP_ID}
               data-test-subj="workspace-menu-view-all-button"
               onClick={() => {
+                closePopover();
                 coreStart.application.navigateToApp(WORKSPACE_LIST_APP_ID);
               }}
             >
@@ -278,6 +283,7 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
                 key={WORKSPACE_CREATE_APP_ID}
                 data-test-subj="workspace-menu-create-workspace-button"
                 onClick={() => {
+                  closePopover();
                   coreStart.application.navigateToApp(WORKSPACE_CREATE_APP_ID);
                 }}
               >

diff --git a/src/plugins/workspace/public/plugin.ts b/src/plugins/workspace/public/plugin.ts
@@ -50,6 +50,7 @@ import { toMountPoint } from '../../opensearch_dashboards_react/public';
 import { UseCaseService } from './services/use_case_service';
 import { ContentManagementPluginStart } from '../../../plugins/content_management/public';
 import { UseCaseFooter } from './components/home_get_start_card';
+import { HOME_CONTENT_AREAS } from '../../home/public';
 
 type WorkspaceAppType = (
   params: AppMountParameters,
@@ -395,7 +396,7 @@ export class WorkspacePlugin
     useCases.forEach((useCase, index) => {
       contentManagement.registerContentProvider({
         id: `home_get_start_${useCase.id}`,
-        getTargetArea: () => `osd_homepage/get_started`,
+        getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,
         getContent: () => ({
           id: useCase.id,
           kind: 'card',