refactor workspace list page to use workspaceConfigurableApps

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>

src/plugins/workspace/public/application.tsx

@@ -15,6 +15,7 @@ import { WorkspaceUpdaterProps } from './components/workspace_updater';
 import { Services } from './types';
 import { WorkspaceOverviewApp } from './components/workspace_overview_app';
 import { WorkspaceCreatorProps } from './components/workspace_creator/workspace_creator';
+import { WorkspaceListProps } from './components/workspace_list';
 
 export const renderCreatorApp = (
   { element }: AppMountParameters,
@@ -65,10 +66,14 @@ export const renderFatalErrorApp = (params: AppMountParameters, services: Servic
   };
 };
 
-export const renderListApp = ({ element }: AppMountParameters, services: Services) => {
+export const renderListApp = (
+  { element }: AppMountParameters,
+  services: Services,
+  props: WorkspaceListProps
+) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <WorkspaceListApp />
+      <WorkspaceListApp {...props} />
     </OpenSearchDashboardsContextProvider>,
     element
   );

src/plugins/workspace/public/components/workspace_list/index.tsx

@@ -15,9 +15,9 @@ import {
   EuiSearchBarProps,
 } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
-import { of } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
 import { i18n } from '@osd/i18n';
-import { debounce, WorkspaceObject } from '../../../../../core/public';
+import { debounce, PublicAppInfo, WorkspaceObject } from '../../../../../core/public';
 import { WorkspaceAttribute } from '../../../../../core/public';
 import { useOpenSearchDashboards } from '../../../../../plugins/opensearch_dashboards_react/public';
 import { switchWorkspace, updateWorkspace } from '../utils/workspace';
@@ -26,17 +26,20 @@ import { WORKSPACE_CREATE_APP_ID } from '../../../common/constants';
 
 import { cleanWorkspaceId } from '../../../../../core/public';
 import { DeleteWorkspaceModal } from '../delete_workspace_modal';
-import { useApplications } from '././../../hooks';
 import { getSelectedFeatureQuantities } from '../../utils';
 
-const WORKSPACE_LIST_PAGE_DESCRIPTIOIN = i18n.translate('workspace.list.description', {
+export interface WorkspaceListProps {
+  workspaceConfigurableApps$?: BehaviorSubject<PublicAppInfo[]>;
+}
+
+const WORKSPACE_LIST_PAGE_DESCRIPTION = i18n.translate('workspace.list.description', {
   defaultMessage:
     'Workspace allow you to save and organize library items, such as index patterns, visualizations, dashboards, saved searches, and share them with other OpenSearch Dashboards users. You can control which features are visible in each workspace, and which users and groups have read and write access to the library items in the workspace.',
 });
 
 const emptyWorkspaceList: WorkspaceObject[] = [];
 
-export const WorkspaceList = () => {
+export const WorkspaceList = (props: WorkspaceListProps) => {
   const {
     services: { workspaces, application, http },
   } = useOpenSearchDashboards();
@@ -54,7 +57,7 @@ export const WorkspaceList = () => {
     pageSizeOptions: [5, 10, 20],
   });
   const [deletedWorkspace, setDeletedWorkspace] = useState<WorkspaceAttribute | null>(null);
-  const applications = useApplications(application);
+  const applications = useObservable(props.workspaceConfigurableApps$ ?? of(undefined));
 
   const handleSwitchWorkspace = useCallback(
     (id: string) => {
@@ -115,7 +118,7 @@ export const WorkspaceList = () => {
       isExpander: true,
       hasActions: true,
       render: (features: string[]) => {
-        const { total, selected } = getSelectedFeatureQuantities(features, applications);
+        const { total, selected } = getSelectedFeatureQuantities(features, applications || []);
         return `${selected}/${total}`;
       },
     },
@@ -189,7 +192,7 @@ export const WorkspaceList = () => {
         <EuiPageHeader
           restrictWidth
           pageTitle="Workspaces"
-          description={WORKSPACE_LIST_PAGE_DESCRIPTIOIN}
+          description={WORKSPACE_LIST_PAGE_DESCRIPTION}
           style={{ paddingBottom: 0, borderBottom: 0 }}
         />
         <EuiPageContent

src/plugins/workspace/public/components/workspace_list_app.tsx

@@ -7,9 +7,9 @@ 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';
+import { WorkspaceList, WorkspaceListProps } from './workspace_list';
 
-export const WorkspaceListApp = () => {
+export const WorkspaceListApp = (props: WorkspaceListProps) => {
   const {
     services: { chrome },
   } = useOpenSearchDashboards();
@@ -29,7 +29,7 @@ export const WorkspaceListApp = () => {
 
   return (
     <I18nProvider>
-      <WorkspaceList />
+      <WorkspaceList {...props} />
     </I18nProvider>
   );
 };

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

@@ -127,18 +127,18 @@ describe('workspace utils: getSelectedFeatureQuantities', () => {
       navLinkStatus: 1,
     },
   ] as PublicAppInfo[];
-  it('should support * rules and exclude management category', () => {
+  it('should support * rules', () => {
     const { total, selected } = getSelectedFeatureQuantities(['*'], defaultApplications);
-    expect(total).toBe(1);
-    expect(selected).toBe(1);
+    expect(total).toBe(2);
+    expect(selected).toBe(2);
   });
 
-  it('should get quantity normally and exclude management category', () => {
+  it('should get quantity of selected app', () => {
     const { total, selected } = getSelectedFeatureQuantities(
       ['dev_tools', '!@management'],
       defaultApplications
     );
-    expect(total).toBe(1);
+    expect(total).toBe(2);
     expect(selected).toBe(0);
   });
 });

src/plugins/workspace/public/utils.ts

@@ -70,25 +70,14 @@ export const featureMatchesConfig = (featureConfigs: string[]) => ({
   return matched;
 };
 
-// Get all apps excluding management category
-export const getAllExcludingManagementApps = (applications: PublicAppInfo[]): PublicAppInfo[] => {
-  return applications.filter(
-    ({ navLinkStatus, chromeless, category }) =>
-      navLinkStatus !== AppNavLinkStatus.hidden &&
-      !chromeless &&
-      category?.id !== DEFAULT_APP_CATEGORIES.management.id
-  );
-};
-
 export const getSelectedFeatureQuantities = (
   featuresConfig: string[],
   applications: PublicAppInfo[]
 ) => {
-  const visibleApplications = getAllExcludingManagementApps(applications);
   const featureFilter = featureMatchesConfig(featuresConfig);
-  const selectedApplications = visibleApplications.filter((app) => featureFilter(app));
+  const selectedApplications = applications.filter((app) => featureFilter(app));
   return {
-    total: visibleApplications.length,
+    total: applications.length,
     selected: selectedApplications.length,
   };
 };