feat: management workspace customization (opensearch-project#153)

* add data sources and remove workspace settings for management workspace Signed-off-by: yuye-aws <yuyezhu@amazon.com> * remove special logic for reserved workspaces Signed-off-by: yuye-aws <yuyezhu@amazon.com> * register dev tools into opensearch features category Signed-off-by: yuye-aws <yuyezhu@amazon.com> * update snapshots Signed-off-by: yuye-aws <yuyezhu@amazon.com> * add workspace settings to management workspace Signed-off-by: yuye-aws <yuyezhu@amazon.com> --------- Signed-off-by: yuye-aws <yuyezhu@amazon.com>
raintygao · Sep 15, 2023 · 564e94e · 564e94e
1 parent 4873399
commit 564e94e
Show file tree

Hide file tree

Showing 8 changed files with 3,125 additions and 8,407 deletions.
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -56,7 +56,6 @@ import {
 } from './nav_link';
 import { ChromeBranding } from '../../chrome_service';
 import { CollapsibleNavHeader } from './collapsible_nav_header';
-import { MANAGEMENT_WORKSPACE_ID } from '../../../utils';
 
 function getAllCategories(allCategorizedLinks: Record<string, CollapsibleNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
@@ -154,20 +153,14 @@ export function CollapsibleNav({
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
   const recentlyAccessed = useObservable(observables.recentlyAccessed$, []);
-  const workspaceEnabled = useObservable(workspaces.workspaceEnabled$, false);
-  const currentWorkspaceId = useObservable(workspaces.currentWorkspaceId$, '');
   const allNavLinks: CollapsibleNavLink[] = [...navLinks];
-  if (!workspaceEnabled || currentWorkspaceId !== MANAGEMENT_WORKSPACE_ID) {
-    // no recently visited in management workspace
-    if (recentlyAccessed.length) {
-      allNavLinks.push(
-        ...recentlyAccessed.map((link) => createRecentChromeNavLink(link, navLinks, basePath))
-      );
-    } else {
-      allNavLinks.push(emptyRecentlyVisited);
-    }
+  if (recentlyAccessed.length) {
+    allNavLinks.push(
+      ...recentlyAccessed.map((link) => createRecentChromeNavLink(link, navLinks, basePath))
+    );
+  } else {
+    allNavLinks.push(emptyRecentlyVisited);
   }
-
   const appId = useObservable(observables.appId$, '');
   const lockRef = useRef<HTMLButtonElement>(null);
   const groupedNavLinks = groupBy(allNavLinks, (link) => link?.category?.id);

diff --git a/src/core/utils/default_app_categories.ts b/src/core/utils/default_app_categories.ts
@@ -64,12 +64,20 @@ export const DEFAULT_APP_CATEGORIES: Record<string, AppCategory> = Object.freeze
     order: 4000,
     euiIconType: 'logoSecurity',
   },
+  openSearchFeatures: {
+    id: 'openSearchFeatures',
+    label: i18n.translate('core.ui.openSearchFeaturesNavList.label', {
+      defaultMessage: 'OpenSearch Features',
+    }),
+    order: 5000,
+    euiIconType: 'folderClosed',
+  },
   management: {
     id: 'management',
     label: i18n.translate('core.ui.managementNavList.label', {
       defaultMessage: 'Management',
     }),
-    order: 5000,
+    order: 6000,
     euiIconType: 'managementApp',
   },
 });
diff --git a/src/plugins/dev_tools/public/plugin.ts b/src/plugins/dev_tools/public/plugin.ts
@@ -85,7 +85,7 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
       icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
       /* the order of dev tools, it shows as last item of management section */
       order: 9070,
-      category: DEFAULT_APP_CATEGORIES.management,
+      category: DEFAULT_APP_CATEGORIES.openSearchFeatures,
       mount: async (params: AppMountParameters) => {
         const { element, history } = params;
         element.classList.add('devAppWrapper');

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_form.tsx
@@ -28,14 +28,11 @@ import {
   EuiComboBoxProps,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-
 import {
   App,
   AppNavLinkStatus,
   ApplicationStart,
   DEFAULT_APP_CATEGORIES,
-  MANAGEMENT_WORKSPACE_ID,
-  PUBLIC_WORKSPACE_ID,
 } from '../../../../../core/public';
 import { useApplications } from '../../hooks';
 import {
@@ -77,6 +74,7 @@ export interface WorkspaceFormSubmitData {
 
 export interface WorkspaceFormData extends WorkspaceFormSubmitData {
   id: string;
+  reserved?: boolean;
 }
 
 type WorkspaceFormErrors = Omit<{ [key in keyof WorkspaceFormData]?: string }, 'permissions'> & {
@@ -122,12 +120,8 @@ export const WorkspaceForm = ({
   opType,
   permissionFirstRowDeletable,
 }: WorkspaceFormProps) => {
-  const workspaceId = defaultValues?.id;
-  const workspaceNameReadOnly =
-    workspaceId === PUBLIC_WORKSPACE_ID || workspaceId === MANAGEMENT_WORKSPACE_ID;
-  const isShowingWorkspaceFeatures = workspaceId !== MANAGEMENT_WORKSPACE_ID;
   const applications = useApplications(application);
-
+  const workspaceNameReadOnly = defaultValues?.reserved;
   const [name, setName] = useState(defaultValues?.name);
   const [description, setDescription] = useState(defaultValues?.description);
   const [color, setColor] = useState(defaultValues?.color);
@@ -403,73 +397,69 @@ export const WorkspaceForm = ({
         </EuiFormRow>
       </EuiPanel>
       <EuiSpacer />
-      {isShowingWorkspaceFeatures && (
-        <EuiPanel>
-          <EuiTitle size="s">
-            <h2>Workspace features</h2>
-          </EuiTitle>
-          <EuiFlexGrid style={{ paddingLeft: 20, paddingTop: 20 }} columns={2}>
-            {featureOrGroups.map((featureOrGroup) => {
-              const features = isWorkspaceFeatureGroup(featureOrGroup)
+      <EuiPanel>
+        <EuiTitle size="s">
+          <h2>Workspace features</h2>
+        </EuiTitle>
+        <EuiFlexGrid style={{ paddingLeft: 20, paddingTop: 20 }} columns={2}>
+          {featureOrGroups.map((featureOrGroup) => {
+            const features = isWorkspaceFeatureGroup(featureOrGroup) ? featureOrGroup.features : [];
+            const selectedIds = selectedFeatureIds.filter((id) =>
+              (isWorkspaceFeatureGroup(featureOrGroup)
                 ? featureOrGroup.features
-                : [];
-              const selectedIds = selectedFeatureIds.filter((id) =>
-                (isWorkspaceFeatureGroup(featureOrGroup)
-                  ? featureOrGroup.features
-                  : [featureOrGroup]
-                ).find((item) => item.id === id)
-              );
-              return (
-                <EuiFlexItem key={featureOrGroup.name}>
-                  <EuiCheckbox
-                    id={
-                      isWorkspaceFeatureGroup(featureOrGroup)
-                        ? featureOrGroup.name
-                        : featureOrGroup.id
-                    }
-                    onChange={
-                      isWorkspaceFeatureGroup(featureOrGroup)
-                        ? handleFeatureGroupChange
-                        : handleFeatureCheckboxChange
-                    }
-                    label={`${featureOrGroup.name}${
-                      features.length > 0 ? `(${selectedIds.length}/${features.length})` : ''
-                    }`}
-                    checked={selectedIds.length > 0}
-                    disabled={
-                      !isWorkspaceFeatureGroup(featureOrGroup) &&
-                      isDefaultCheckedFeatureId(featureOrGroup.id)
-                    }
-                    indeterminate={
-                      isWorkspaceFeatureGroup(featureOrGroup) &&
-                      selectedIds.length > 0 &&
-                      selectedIds.length < features.length
-                    }
+                : [featureOrGroup]
+              ).find((item) => item.id === id)
+            );
+            return (
+              <EuiFlexItem key={featureOrGroup.name}>
+                <EuiCheckbox
+                  id={
+                    isWorkspaceFeatureGroup(featureOrGroup)
+                      ? featureOrGroup.name
+                      : featureOrGroup.id
+                  }
+                  onChange={
+                    isWorkspaceFeatureGroup(featureOrGroup)
+                      ? handleFeatureGroupChange
+                      : handleFeatureCheckboxChange
+                  }
+                  label={`${featureOrGroup.name}${
+                    features.length > 0 ? `(${selectedIds.length}/${features.length})` : ''
+                  }`}
+                  checked={selectedIds.length > 0}
+                  disabled={
+                    !isWorkspaceFeatureGroup(featureOrGroup) &&
+                    isDefaultCheckedFeatureId(featureOrGroup.id)
+                  }
+                  indeterminate={
+                    isWorkspaceFeatureGroup(featureOrGroup) &&
+                    selectedIds.length > 0 &&
+                    selectedIds.length < features.length
+                  }
+                />
+                {isWorkspaceFeatureGroup(featureOrGroup) && (
+                  <EuiCheckboxGroup
+                    options={featureOrGroup.features.map((item) => ({
+                      id: item.id,
+                      label: item.name,
+                      disabled: isDefaultCheckedFeatureId(item.id),
+                    }))}
+                    idToSelectedMap={selectedIds.reduce(
+                      (previousValue, currentValue) => ({
+                        ...previousValue,
+                        [currentValue]: true,
+                      }),
+                      {}
+                    )}
+                    onChange={handleFeatureChange}
+                    style={{ marginLeft: 40 }}
                   />
-                  {isWorkspaceFeatureGroup(featureOrGroup) && (
-                    <EuiCheckboxGroup
-                      options={featureOrGroup.features.map((item) => ({
-                        id: item.id,
-                        label: item.name,
-                        disabled: isDefaultCheckedFeatureId(item.id),
-                      }))}
-                      idToSelectedMap={selectedIds.reduce(
-                        (previousValue, currentValue) => ({
-                          ...previousValue,
-                          [currentValue]: true,
-                        }),
-                        {}
-                      )}
-                      onChange={handleFeatureChange}
-                      style={{ marginLeft: 40 }}
-                    />
-                  )}
-                </EuiFlexItem>
-              );
-            })}
-          </EuiFlexGrid>
-        </EuiPanel>
-      )}
+                )}
+              </EuiFlexItem>
+            );
+          })}
+        </EuiFlexGrid>
+      </EuiPanel>
       <EuiSpacer />
       <EuiPanel>
         <EuiTitle size="s">

diff --git a/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx b/src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx
@@ -61,11 +61,12 @@ export const WorkspaceMenu = ({ basePath, getUrlForApp, observables }: Props) =>
       defaultMessage: 'OpenSearch Dashboards',
     }
   );
-  const managementWorkspaceName =
-    workspaceList.find((workspace) => workspace.id === MANAGEMENT_WORKSPACE_ID)?.name ??
-    i18n.translate('core.ui.primaryNav.workspacePickerMenu.managementWorkspaceName', {
+  const managementWorkspaceName = i18n.translate(
+    'core.ui.primaryNav.workspacePickerMenu.managementWorkspaceName',
+    {
       defaultMessage: 'Management',
-    });
+    }
+  );
   const filteredWorkspaceList = getFilteredWorkspaceList(workspaceList, currentWorkspace);
   const currentWorkspaceName = currentWorkspace?.name ?? defaultHeaderName;
 

diff --git a/src/plugins/workspace/server/plugin.ts b/src/plugins/workspace/server/plugin.ts
@@ -4,7 +4,6 @@
  */
 import { i18n } from '@osd/i18n';
 import { Observable } from 'rxjs';
-
 import {
   PluginInitializerContext,
   CoreSetup,
@@ -135,6 +134,8 @@ export class WorkspacePlugin implements Plugin<{}, {}> {
     const managementWorkspaceACL = new ACL().addPermission([WorkspacePermissionMode.LibraryRead], {
       users: ['*'],
     });
+    const DSM_APP_ID = 'dataSources';
+    const DEV_TOOLS_APP_ID = 'dev_tools';
 
     await Promise.all([
       this.checkAndCreateWorkspace(
@@ -159,6 +160,8 @@ export class WorkspacePlugin implements Plugin<{}, {}> {
             `@${DEFAULT_APP_CATEGORIES.management.id}`,
             WORKSPACE_OVERVIEW_APP_ID,
             WORKSPACE_UPDATE_APP_ID,
+            DSM_APP_ID,
+            DEV_TOOLS_APP_ID,
           ],
         },
         managementWorkspaceACL.getPermissions()