Register application "See more", "Home", "Create" and "Workspace Sett…

…ings" (opensearch-project#68) * fix typo Signed-off-by: yuye-aws <[email protected]> * change url when enter workspace Signed-off-by: yuye-aws <[email protected]> * change default path to overview for workspace app Signed-off-by: yuye-aws <[email protected]> * register create update list overview workspace as applications Signed-off-by: yuye-aws <[email protected]> * implemenet four apps for workspaces Signed-off-by: yuye-aws <[email protected]> * integrate four apps in workspace plugin.ts Signed-off-by: yuye-aws <[email protected]> * remove hard code alerts and favorites Signed-off-by: yuye-aws <[email protected]> * hide see more when inside workspace Signed-off-by: yuye-aws <[email protected]> * when switch workspace, change destination from update to overview Signed-off-by: yuye-aws <[email protected]> * Use new APP ID Co-authored-by: SuZhou-Joe <[email protected]> * fix format error Signed-off-by: yuye-aws <[email protected]> * add four workspace app names to constants Signed-off-by: yuye-aws <[email protected]> * refactor mount parameter for application register Signed-off-by: yuye-aws <[email protected]> * remove createbreadcrumb for workspace apps Signed-off-by: yuye-aws <[email protected]> * remove router and set chrome breadcrumb in four workspace apps Signed-off-by: yuye-aws <[email protected]> * remove appbasepath in four workspace apps Signed-off-by: yuye-aws <[email protected]> * rename variable Signed-off-by: yuye-aws <[email protected]> --------- Signed-off-by: yuye-aws <[email protected]> Co-authored-by: SuZhou-Joe <[email protected]>
SuZhou-Joe · Aug 31, 2023 · f1fefdf · f1fefdf
1 parent 12a3cf2
commit f1fefdf
Show file tree

Hide file tree

Showing 16 changed files with 285 additions and 274 deletions.
diff --git a/src/core/public/chrome/nav_links/nav_links_service.ts b/src/core/public/chrome/nav_links/nav_links_service.ts
@@ -151,8 +151,8 @@ export class NavLinksService {
           return linkUpdaters.reduce((links, updater) => updater(links), appLinks);
         })
       )
-      .subscribe((navlinks) => {
-        navLinks$.next(navlinks);
+      .subscribe((navLinks) => {
+        navLinks$.next(navLinks);
       });
 
     const forceAppSwitcherNavigation$ = new BehaviorSubject(false);

diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -270,42 +270,6 @@ export function CollapsibleNav({
           )}
         </EuiCollapsibleNavGroup>
 
-        {/* Alerts and Favorites */}
-        {/* (
-          <>
-            <EuiCollapsibleNavGroup
-              onClick={closeNav}
-              iconType={'bell'}
-              title={i18n.translate('core.ui.primaryNavSection.alerts', {
-                defaultMessage: 'Alerts',
-              })}
-            />
-            <EuiCollapsibleNavGroup
-              iconType={'starEmpty'}
-              title={i18n.translate('core.ui.primaryNavSection.favorites', {
-                defaultMessage: 'Favorites',
-              })}
-              isCollapsible={true}
-              initialIsOpen={true}
-            >
-              <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
-                <p>
-                  {i18n.translate('core.ui.EmptyFavoriteList', {
-                    defaultMessage: 'No Favorites',
-                  })}
-                </p>
-              </EuiText>
-              <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
-                <p>
-                  {i18n.translate('core.ui.SeeMoreFavorite', {
-                    defaultMessage: 'SEE MORE',
-                  })}
-                </p>
-              </EuiText>
-            </EuiCollapsibleNavGroup>
-          </>
-        ) */}
-
         {/* merged NavLinks */}
         {mergedNavLinks.map((item, i) => {
           if (typeof item === 'string') {

diff --git a/src/plugins/workspace/common/constants.ts b/src/plugins/workspace/common/constants.ts
@@ -6,9 +6,10 @@
 import { i18n } from '@osd/i18n';
 import { AppCategory } from '../../../core/types';
 
-export const WORKSPACE_APP_ID = 'workspace';
-export const WORKSPACE_APP_NAME = 'Workspace';
-
+export const WORKSPACE_CREATE_APP_ID = 'workspace_create';
+export const WORKSPACE_LIST_APP_ID = 'workspace_list';
+export const WORKSPACE_UPDATE_APP_ID = 'workspace_update';
+export const WORKSPACE_OVERVIEW_APP_ID = 'workspace_overview';
 export const PATHS = {
   create: '/create',
   overview: '/overview',

diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx
@@ -5,22 +5,68 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router } from 'react-router-dom';
-
 import { AppMountParameters, CoreStart } from '../../../core/public';
-import { OpenSearchDashboardsContextProvider } from '../../../plugins/opensearch_dashboards_react/public';
-import { WorkspaceApp } from './components/workspace_app';
+import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public';
+import { WorkspaceListApp } from './components/workspace_list_app';
+import { WorkspaceCreatorApp } from './components/workspace_creator_app';
+import { WorkspaceUpdaterApp } from './components/workspace_updater_app';
+import { WorkspaceOverviewApp } from './components/workspace_overview_app';
+
+export const renderListApp = (
+  { element, history, appBasePath }: AppMountParameters,
+  services: CoreStart
+) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceListApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
+export const renderCreatorApp = (
+  { element, history, appBasePath }: AppMountParameters,
+  services: CoreStart
+) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceCreatorApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
+
+export const renderUpdateApp = (
+  { element, history, appBasePath }: AppMountParameters,
+  services: CoreStart
+) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceUpdaterApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
 
-export const renderApp = (
+export const renderOverviewApp = (
   { element, history, appBasePath }: AppMountParameters,
   services: CoreStart
 ) => {
   ReactDOM.render(
-    <Router history={history}>
-      <OpenSearchDashboardsContextProvider services={services}>
-        <WorkspaceApp appBasePath={appBasePath} />
-      </OpenSearchDashboardsContextProvider>
-    </Router>,
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceOverviewApp />
+    </OpenSearchDashboardsContextProvider>,
     element
   );
 

diff --git a/src/plugins/workspace/public/components/utils/breadcrumbs.test.ts b/src/plugins/workspace/public/components/utils/breadcrumbs.test.ts
diff --git a/src/plugins/workspace/public/components/utils/breadcrumbs.ts b/src/plugins/workspace/public/components/utils/breadcrumbs.ts
diff --git a/src/plugins/workspace/public/components/utils/workspace.ts b/src/plugins/workspace/public/components/utils/workspace.ts
@@ -3,15 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { WORKSPACE_APP_ID, PATHS } from '../../../common/constants';
+import { WORKSPACE_OVERVIEW_APP_ID } from '../../../common/constants';
 import { CoreStart } from '../../../../../core/public';
 
 type Core = Pick<CoreStart, 'workspaces' | 'application'>;
 
 export const switchWorkspace = ({ workspaces, application }: Core, id: string) => {
   const newUrl = workspaces?.formatUrlWithWorkspaceId(
-    application.getUrlForApp(WORKSPACE_APP_ID, {
-      path: PATHS.update,
+    application.getUrlForApp(WORKSPACE_OVERVIEW_APP_ID, {
       absolute: true,
     }),
     id

diff --git a/src/plugins/workspace/public/components/workspace_app.tsx b/src/plugins/workspace/public/components/workspace_app.tsx
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
@@ -10,7 +10,7 @@ import { i18n } from '@osd/i18n';
 import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
 
 import { WorkspaceForm, WorkspaceFormData } from './workspace_form';
-import { PATHS, WORKSPACE_APP_ID, WORKSPACE_OP_TYPE_CREATE } from '../../../common/constants';
+import { WORKSPACE_OVERVIEW_APP_ID, WORKSPACE_OP_TYPE_CREATE } from '../../../common/constants';
 
 export const WorkspaceCreator = () => {
   const {
@@ -39,8 +39,7 @@ export const WorkspaceCreator = () => {
         });
         if (application && workspaces) {
           window.location.href = workspaces.formatUrlWithWorkspaceId(
-            application.getUrlForApp(WORKSPACE_APP_ID, {
-              path: PATHS.overview,
+            application.getUrlForApp(WORKSPACE_OVERVIEW_APP_ID, {
               absolute: true,
             }),
             result.result.id

diff --git a/src/plugins/workspace/public/components/workspace_creator_app.tsx b/src/plugins/workspace/public/components/workspace_creator_app.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceCreator } from './workspace_creator';
+
+export const WorkspaceCreatorApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.workspaceCreateTitle', {
+          defaultMessage: 'Workspace Create',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceCreator />
+    </I18nProvider>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_list_app.tsx b/src/plugins/workspace/public/components/workspace_list_app.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect } from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
+import { WorkspaceList } from './workspace_list';
+
+export const WorkspaceListApp = () => {
+  const {
+    services: { chrome },
+  } = useOpenSearchDashboards();
+
+  /**
+   * set breadcrumbs to chrome
+   */
+  useEffect(() => {
+    chrome?.setBreadcrumbs([
+      {
+        text: i18n.translate('workspace.workspaceCreateTitle', {
+          defaultMessage: 'Workspace Create',
+        }),
+      },
+    ]);
+  }, [chrome]);
+
+  return (
+    <I18nProvider>
+      <WorkspaceList />
+    </I18nProvider>
+  );
+};