diff --git a/src/plugins/workspace/public/application.tsx b/src/plugins/workspace/public/application.tsx index ef15f775115c..a82f74ed9fb5 100644 --- a/src/plugins/workspace/public/application.tsx +++ b/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( - + , element ); diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx index f529524d797e..a1295bcc1e1f 100644 --- a/src/plugins/workspace/public/components/workspace_list/index.tsx +++ b/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; +} + +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(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 = () => { { +export const WorkspaceListApp = (props: WorkspaceListProps) => { const { services: { chrome }, } = useOpenSearchDashboards(); @@ -29,7 +29,7 @@ export const WorkspaceListApp = () => { return ( - + ); }; diff --git a/src/plugins/workspace/public/utils.test.ts b/src/plugins/workspace/public/utils.test.ts index d2b9909eb682..41b1829927c4 100644 --- a/src/plugins/workspace/public/utils.test.ts +++ b/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); }); }); diff --git a/src/plugins/workspace/public/utils.ts b/src/plugins/workspace/public/utils.ts index a5e8a3f3c8be..c75a6b131e28 100644 --- a/src/plugins/workspace/public/utils.ts +++ b/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, }; };