[Workspace] Refactor workspace detail page

changelogs/fragments/7598.yml

@@ -0,0 +1,2 @@
+feat:
+- [Workspace] Refactor workspace detail page ([#7598](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7598))

src/plugins/workspace/common/types.ts

@@ -5,7 +5,10 @@
 
 import { DataSourceAttributes } from 'src/plugins/data_source/common/data_sources';
 
-export type DataSource = Pick<DataSourceAttributes, 'title'> & {
+export type DataSource = Pick<
+  DataSourceAttributes,
+  'title' | 'description' | 'dataSourceEngineType'
+> & {
   // Id defined in SavedObjectAttribute could be single or array, here only should be single string.
   id: string;
 };

src/plugins/workspace/public/application.tsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { AppMountParameters, ScopedHistory } from '../../../core/public';
 import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public';
 import { WorkspaceFatalError } from './components/workspace_fatal_error';
@@ -14,6 +15,7 @@ import { Services } from './types';
 import { WorkspaceCreatorProps } from './components/workspace_creator/workspace_creator';
 import { WorkspaceDetailApp } from './components/workspace_detail_app';
 import { WorkspaceDetailProps } from './components/workspace_detail/workspace_detail';
+import { DetailTab } from './components/workspace_form/constants';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -70,7 +72,14 @@ export const renderDetailApp = (
 ) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceDetailApp {...props} />
+      <Router>
+        <Switch>
+          <Route>
+            <WorkspaceDetailApp {...props} />
+          </Route>
+          <Redirect to={`?tab=${DetailTab.Details}`} />
+        </Switch>
+      </Router>
     </OpenSearchDashboardsContextProvider>,
     element
   );

src/plugins/workspace/public/components/utils/workspace.test.ts

@@ -22,19 +22,28 @@ describe('workspace utils', () => {
 
   describe('navigateToWorkspaceDetail', () => {
     it('should redirect if newUrl is returned', () => {
-      Object.defineProperty(window, 'location', {
-        value: {
-          href: defaultUrl,
-        },
-        writable: true,
-      });
       // @ts-ignore
-      formatUrlWithWorkspaceId.mockImplementation(() => 'new_url');
+      formatUrlWithWorkspaceId.mockImplementation(() => 'localhost:5601/w/id/app/workspace_detail');
       navigateToWorkspaceDetail(
         { application: coreStartMock.application, http: coreStartMock.http },
-        ''
+        'id'
+      );
+      expect(mockNavigateToUrl).toHaveBeenCalledWith(
+        'localhost:5601/w/id/app/workspace_detail#/?tab=details'
+      );
+    });
+
+    it('should redirect to collaborators if newUrl is returned and tab id is collaborators', () => {
+      // @ts-ignore
+      formatUrlWithWorkspaceId.mockImplementation(() => 'localhost:5601/w/id/app/workspace_detail');
+      navigateToWorkspaceDetail(
+        { application: coreStartMock.application, http: coreStartMock.http },
+        'id',
+        'collaborators'
+      );
+      expect(mockNavigateToUrl).toHaveBeenCalledWith(
+        'localhost:5601/w/id/app/workspace_detail#/?tab=collaborators'
       );
-      expect(mockNavigateToUrl).toHaveBeenCalledWith('new_url');
     });
 
     it('should not redirect if newUrl is not returned', () => {

src/plugins/workspace/public/components/utils/workspace.ts

@@ -6,10 +6,15 @@
 import { WORKSPACE_DETAIL_APP_ID } from '../../../common/constants';
 import { CoreStart } from '../../../../../core/public';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+import { DetailTab } from '../workspace_form/constants';
 
 type Core = Pick<CoreStart, 'application' | 'http'>;
 
-export const navigateToWorkspaceDetail = ({ application, http }: Core, id: string) => {
+export const navigateToWorkspaceDetail = (
+  { application, http }: Core,
+  id: string,
+  tabId: string = DetailTab.Details
+) => {
   const newUrl = formatUrlWithWorkspaceId(
     application.getUrlForApp(WORKSPACE_DETAIL_APP_ID, {
       absolute: true,
@@ -18,6 +23,8 @@ export const navigateToWorkspaceDetail = ({ application, http }: Core, id: strin
     http.basePath
   );
   if (newUrl) {
-    application.navigateToUrl(newUrl);
+    const url = new URL(newUrl);
+    url.hash = `/?tab=${tabId}`;
+    application.navigateToUrl(url.toString());
   }
 };