[Workspace] feat: support use case populate for workspace create and …

…list page (#8422) * feat: support use case populate for workspace create and list page Signed-off-by: tygao <[email protected]> * style: update data source column width Signed-off-by: tygao <[email protected]> * Changeset file for PR #8422 created/updated * update navigate function Signed-off-by: tygao <[email protected]> * test: add utils test Signed-off-by: tygao <[email protected]> --------- Signed-off-by: tygao <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Oct 3, 2024 · 49cca7b · 49cca7b
1 parent 638f753
commit 49cca7b
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 177 deletions.
diff --git a/changelogs/fragments/8422.yml b/changelogs/fragments/8422.yml
@@ -0,0 +1,2 @@
+feat:
+- Support use case populate for workspace create and list page ([#8422](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8422))
diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
@@ -25,7 +25,13 @@ export const renderCreatorApp = (
 ) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceCreatorApp {...props} />
+      <Router>
+        <Switch>
+          <Route>
+            <WorkspaceCreatorApp {...props} />
+          </Route>
+        </Switch>
+      </Router>
     </OpenSearchDashboardsContextProvider>,
     element
   );
@@ -56,7 +62,13 @@ export const renderListApp = (
 ) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceListApp {...props} />
+      <Router>
+        <Switch>
+          <Route>
+            <WorkspaceListApp {...props} />
+          </Route>
+        </Switch>
+      </Router>
     </OpenSearchDashboardsContextProvider>,
     element
   );

diff --git a/src/plugins/workspace/public/components/utils/workspace.test.ts b/src/plugins/workspace/public/components/utils/workspace.test.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { navigateToWorkspaceDetail } from './workspace';
+import { navigateToWorkspaceDetail, navigateToWorkspaceListWithUseCase } from './workspace';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 jest.mock('../../../../../core/public/utils');
 
@@ -62,4 +62,16 @@ describe('workspace utils', () => {
       expect(mockNavigateToUrl).not.toBeCalled();
     });
   });
+
+  describe('navigateToWorkspaceListWithUseCase', () => {
+    it('should redirect if newUrl is returned', () => {
+      coreStartMock.application.getUrlForApp.mockImplementation(
+        () => 'localhost:5601/app/workspace_list'
+      );
+      navigateToWorkspaceListWithUseCase(coreStartMock.application, 'Search');
+      expect(mockNavigateToUrl).toHaveBeenCalledWith(
+        'localhost:5601/app/workspace_list#/?useCase=Search'
+      );
+    });
+  });
 });
diff --git a/src/plugins/workspace/public/components/utils/workspace.ts b/src/plugins/workspace/public/components/utils/workspace.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { WORKSPACE_DETAIL_APP_ID } from '../../../common/constants';
+import { WORKSPACE_DETAIL_APP_ID, WORKSPACE_LIST_APP_ID } from '../../../common/constants';
 import { CoreStart } from '../../../../../core/public';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { DetailTab } from '../workspace_form/constants';
@@ -23,6 +23,18 @@ export const navigateToWorkspaceDetail = (
   );
 };
 
+export const navigateToWorkspaceListWithUseCase = (
+  application: Core['application'],
+  useCaseTitle: string
+) => {
+  const newUrl = application.getUrlForApp(WORKSPACE_LIST_APP_ID, { absolute: true });
+  if (newUrl) {
+    const url = new URL(newUrl);
+    url.hash = `/?useCase=${useCaseTitle}`;
+    application.navigateToUrl(url.toString());
+  }
+};
+
 export const navigateToAppWithinWorkspace = (
   { application, http }: Core,
   workspaceId: string,

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -19,6 +19,16 @@ import { DataSourceEngineType } from '../../../../data_source/common/data_source
 import { DataSourceConnectionType } from '../../../common/types';
 import * as utils from '../../utils';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    search: '',
+    pathname: '',
+    hash: '',
+    state: undefined,
+  }),
+}));
+
 const workspaceClientCreate = jest
   .fn()
   .mockReturnValue({ result: { id: 'successResult' }, success: true });

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import { EuiPage, EuiPageBody, EuiPageContent, euiPaletteColorBlind } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { BehaviorSubject } from 'rxjs';
 
+import { useLocation } from 'react-router-dom';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
 import { WORKSPACE_DETAIL_APP_ID } from '../../../common/constants';
@@ -53,16 +54,28 @@ export const WorkspaceCreator = (props: WorkspaceCreatorProps) => {
     onlyAllowEssentialEnabled: true,
   });
 
-  const defaultSelectedUseCase = availableUseCases?.[0];
-  const defaultWorkspaceFormValues: Partial<WorkspaceFormSubmitData> = {
-    color: euiPaletteColorBlind()[0],
-    ...(defaultSelectedUseCase
-      ? {
-          name: defaultSelectedUseCase.title,
-          features: [getUseCaseFeatureConfig(defaultSelectedUseCase.id)],
-        }
-      : {}),
-  };
+  const location = useLocation();
+
+  const defaultWorkspaceFormValues = useMemo(() => {
+    let defaultSelectedUseCase;
+    const params = new URLSearchParams(location.search);
+    const useCaseTitle = params.get('useCase');
+    if (useCaseTitle) {
+      defaultSelectedUseCase =
+        availableUseCases?.find(({ title }) => title === useCaseTitle) || availableUseCases?.[0];
+    } else {
+      defaultSelectedUseCase = availableUseCases?.[0];
+    }
+    return {
+      color: euiPaletteColorBlind()[0],
+      ...(defaultSelectedUseCase
+        ? {
+            name: defaultSelectedUseCase.title,
+            features: [getUseCaseFeatureConfig(defaultSelectedUseCase.id)],
+          }
+        : {}),
+    };
+  }, [location.search, availableUseCases]);
 
   const handleWorkspaceFormSubmit = useCallback(
     async (data: WorkspaceFormSubmitData) => {

diff --git a/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
diff --git a/src/plugins/workspace/public/components/workspace_list/default_workspace.test.tsx b/src/plugins/workspace/public/components/workspace_list/default_workspace.test.tsx
@@ -38,6 +38,16 @@ jest.mock('../../utils', () => {
   };
 });
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    search: '',
+    pathname: '',
+    hash: '',
+    state: undefined,
+  }),
+}));
+
 function getWrapUserDefaultWorkspaceList(
   workspaceList = [
     {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		feat:
		- Support use case populate for workspace create and list page ([#8422](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8422))