Cleanup spaces plugin

src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx

@@ -13,17 +13,20 @@ import { Query } from '@elastic/eui';
 import { parse } from 'query-string';
 import { i18n } from '@kbn/i18n';
 import { CoreStart, ChromeBreadcrumb } from 'src/core/public';
+import type {
+  SpacesAvailableStartContract,
+  SpacesContextProps,
+} from 'src/plugins/spaces_oss/public';
 import { DataPublicPluginStart } from '../../../data/public';
 import { SavedObjectsTaggingApi } from '../../../saved_objects_tagging_oss/public';
-import type { SpacesAvailableStartContract } from '../../../spaces_oss/public';
 import {
   ISavedObjectsManagementServiceRegistry,
   SavedObjectsManagementActionServiceStart,
   SavedObjectsManagementColumnServiceStart,
 } from '../services';
 import { SavedObjectsTable } from './objects_table';
 
-const EmptyFunctionComponent: React.FC = ({ children }) => <>{children}</>;
+const getEmptyFunctionComponent: React.FC<SpacesContextProps> = ({ children }) => <>{children}</>;
 
 const SavedObjectsTablePage = ({
   coreStart,
@@ -71,7 +74,8 @@ const SavedObjectsTablePage = ({
   }, [setBreadcrumbs]);
 
   const ContextWrapper = useMemo(
-    () => spacesApi?.ui.components.SpacesContext || EmptyFunctionComponent,
+    () =>
+      spacesApi ? spacesApi.ui.components.getSpacesContextProvider : getEmptyFunctionComponent,
     [spacesApi]
   );
 

src/plugins/spaces_oss/public/api.mock.ts

@@ -32,10 +32,11 @@ type SpacesApiUiComponentMock = jest.Mocked<SpacesApiUiComponent>;
 
 const createApiUiComponentsMock = () => {
   const mock: SpacesApiUiComponentMock = {
-    SpacesContext: jest.fn(),
-    ShareToSpaceFlyout: jest.fn(),
-    SpaceList: jest.fn(),
-    LegacyUrlConflict: jest.fn(),
+    getSpacesContextProvider: jest.fn(),
+    getShareToSpaceFlyout: jest.fn(),
+    getSpaceList: jest.fn(),
+    getLegacyUrlConflict: jest.fn(),
+    getSpaceAvatar: jest.fn(),
   };
 
   return mock;

src/plugins/spaces_oss/public/api.ts

@@ -7,7 +7,7 @@
  */
 
 import { Observable } from 'rxjs';
-import type { FunctionComponent } from 'react';
+import type { ReactElement } from 'react';
 import { Space } from '../common';
 
 /**
@@ -22,12 +22,19 @@ export interface SpacesApi {
   ui: SpacesApiUi;
 }
 
+/**
+ * Function that returns a promise for a lazy-loadable component.
+ *
+ * @public
+ */
+export type LazyComponentFn<T> = (props: T) => ReactElement;
+
 /**
  * @public
  */
 export interface SpacesApiUi {
   /**
-   * {@link SpacesApiUiComponent | React components} to support the spaces feature.
+   * Lazy-loadable {@link SpacesApiUiComponent | React components} to support the spaces feature.
    */
   components: SpacesApiUiComponent;
   /**
@@ -62,13 +69,13 @@ export interface SpacesApiUiComponent {
   /**
    * Provides a context that is required to render some Spaces components.
    */
-  SpacesContext: FunctionComponent<SpacesContextProps>;
+  getSpacesContextProvider: LazyComponentFn<SpacesContextProps>;
   /**
    * Displays a flyout to edit the spaces that an object is shared to.
    *
    * Note: must be rendered inside of a SpacesContext.
    */
-  ShareToSpaceFlyout: FunctionComponent<ShareToSpaceFlyoutProps>;
+  getShareToSpaceFlyout: LazyComponentFn<ShareToSpaceFlyoutProps>;
   /**
    * Displays a corresponding list of spaces for a given list of saved object namespaces. It shows up to five spaces (and an indicator for
    * any number of spaces that the user is not authorized to see) by default. If more than five named spaces would be displayed, the extras
@@ -77,7 +84,7 @@ export interface SpacesApiUiComponent {
    *
    * Note: must be rendered inside of a SpacesContext.
    */
-  SpaceList: FunctionComponent<SpaceListProps>;
+  getSpaceList: LazyComponentFn<SpaceListProps>;
   /**
    * Displays a callout that needs to be used if a call to `SavedObjectsClient.resolve()` results in an `"conflict"` outcome, which
    * indicates that the user has loaded the page which is associated directly with one object (A), *and* with a legacy URL that points to a
@@ -95,7 +102,11 @@ export interface SpacesApiUiComponent {
    *
    * New URL path: `#/workpad/workpad-e08b9bdb-ec14-4339-94c4-063bddfd610e/page/1`
    */
-  LegacyUrlConflict: FunctionComponent<LegacyUrlConflictProps>;
+  getLegacyUrlConflict: LazyComponentFn<LegacyUrlConflictProps>;
+  /**
+   * Displays an avatar for the given space.
+   */
+  getSpaceAvatar: LazyComponentFn<SpaceAvatarProps>;
 }
 
 /**
@@ -251,3 +262,18 @@ export interface LegacyUrlConflictProps {
    */
   otherObjectPath: string;
 }
+
+/**
+ * @public
+ */
+export interface SpaceAvatarProps {
+  space: Partial<Space>;
+  size?: 's' | 'm' | 'l' | 'xl';
+  className?: string;
+  /**
+   * When enabled, allows EUI to provide an aria-label for this component, which is announced on screen readers.
+   *
+   * Default value is true.
+   */
+  announceSpaceName?: boolean;
+}

src/plugins/spaces_oss/public/index.ts

@@ -16,6 +16,7 @@ export {
 } from './types';
 
 export {
+  LazyComponentFn,
   SpacesApi,
   SpacesApiUi,
   SpacesApiUiComponent,
@@ -24,6 +25,7 @@ export {
   ShareToSpaceSavedObjectTarget,
   SpaceListProps,
   LegacyUrlConflictProps,
+  SpaceAvatarProps,
 } from './api';
 
 export const plugin = () => new SpacesOssPlugin();

x-pack/plugins/ml/public/application/components/job_spaces_list/job_spaces_list.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 
 import { EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -66,7 +66,11 @@ export const JobSpacesList: FC<Props> = ({ spacesApi, spaceIds, jobId, jobType,
     });
   }
 
-  const { SpaceList, ShareToSpaceFlyout } = spacesApi.ui.components;
+  const LazySpaceList = useMemo(() => spacesApi.ui.components.getSpaceList, [spacesApi]);
+  const LazyShareToSpaceFlyout = useMemo(() => spacesApi.ui.components.getShareToSpaceFlyout, [
+    spacesApi,
+  ]);
+
   const shareToSpaceFlyoutProps: ShareToSpaceFlyoutProps = {
     savedObjectTarget: {
       type: ML_SAVED_OBJECT_TYPE,
@@ -83,9 +87,9 @@ export const JobSpacesList: FC<Props> = ({ spacesApi, spaceIds, jobId, jobType,
   return (
     <>
       <EuiButtonEmpty onClick={() => setShowFlyout(true)} style={{ height: 'auto' }}>
-        <SpaceList namespaces={spaceIds} displayLimit={0} behaviorContext="outside-space" />
+        <LazySpaceList namespaces={spaceIds} displayLimit={0} behaviorContext="outside-space" />
       </EuiButtonEmpty>
-      {showFlyout && <ShareToSpaceFlyout {...shareToSpaceFlyoutProps} />}
+      {showFlyout && <LazyShareToSpaceFlyout {...shareToSpaceFlyoutProps} />}
     </>
   );
 };

x-pack/plugins/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx

@@ -23,6 +23,7 @@ import {
   EuiTabbedContentTab,
 } from '@elastic/eui';
 
+import type { SpacesContextProps } from 'src/plugins/spaces_oss/public';
 import { PLUGIN_ID } from '../../../../../../common/constants/app';
 import { ManagementAppMountParams } from '../../../../../../../../../src/plugins/management/public/';
 
@@ -67,7 +68,7 @@ function usePageState<T extends ListingPageUrlState>(
   return [pageState, updateState];
 }
 
-const EmptyFunctionComponent: React.FC = ({ children }) => <>{children}</>;
+const getEmptyFunctionComponent: React.FC<SpacesContextProps> = ({ children }) => <>{children}</>;
 
 function useTabs(isMlEnabledInSpace: boolean, spacesApi: SpacesPluginStart | undefined): Tab[] {
   const [adPageState, updateAdPageState] = usePageState(getDefaultAnomalyDetectionJobsListState());
@@ -147,6 +148,12 @@ export const JobsListPage: FC<{
     check();
   }, []);
 
+  const ContextWrapper = useMemo(
+    () =>
+      spacesApi ? spacesApi.ui.components.getSpacesContextProvider : getEmptyFunctionComponent,
+    [spacesApi]
+  );
+
   if (initialized === false) {
     return null;
   }
@@ -185,8 +192,6 @@ export const JobsListPage: FC<{
     return <AccessDeniedPage />;
   }
 
-  const ContextWrapper = spacesApi?.ui.components.SpacesContext || EmptyFunctionComponent;
-
   return (
     <RedirectAppLinks application={coreStart.application}>
       <I18nContext>

x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx

@@ -40,6 +40,7 @@ import {
   NotificationsStart,
 } from 'src/core/public';
 import type { DocLinksStart, ScopedHistory } from 'kibana/public';
+import type { SpacesApiUi } from 'src/plugins/spaces_oss/public';
 import { FeaturesPluginStart } from '../../../../../features/public';
 import { KibanaFeature } from '../../../../../features/common';
 import { IndexPatternsContract } from '../../../../../../../src/plugins/data/public';
@@ -84,6 +85,7 @@ interface Props {
   notifications: NotificationsStart;
   fatalErrors: FatalErrorsSetup;
   history: ScopedHistory;
+  spacesApiUi?: SpacesApiUi;
 }
 
 function useRunAsUsers(
@@ -289,6 +291,7 @@ export const EditRolePage: FunctionComponent<Props> = ({
   uiCapabilities,
   notifications,
   history,
+  spacesApiUi,
 }) => {
   const backToRoleList = useCallback(() => history.push('/'), [history]);
 
@@ -447,6 +450,7 @@ export const EditRolePage: FunctionComponent<Props> = ({
           role={role}
           onChange={onRoleChange}
           validator={validator}
+          spacesApiUi={spacesApiUi}
         />
       </div>
     );

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/kibana_privileges_region.tsx

@@ -7,6 +7,7 @@
 
 import React, { Component } from 'react';
 import { Capabilities } from 'src/core/public';
+import type { SpacesApiUi } from 'src/plugins/spaces_oss/public';
 import { Space } from '../../../../../../../spaces/public';
 import { Role } from '../../../../../../common/model';
 import { RoleValidator } from '../../validate_role';
@@ -26,6 +27,7 @@ interface Props {
   kibanaPrivileges: KibanaPrivileges;
   onChange: (role: Role) => void;
   validator: RoleValidator;
+  spacesApiUi?: SpacesApiUi;
 }
 
 export class KibanaPrivilegesRegion extends Component<Props, {}> {
@@ -48,6 +50,7 @@ export class KibanaPrivilegesRegion extends Component<Props, {}> {
       onChange,
       editable,
       validator,
+      spacesApiUi,
     } = this.props;
 
     if (role._transform_error && role._transform_error.includes('kibana')) {
@@ -65,6 +68,7 @@ export class KibanaPrivilegesRegion extends Component<Props, {}> {
           editable={editable}
           canCustomizeSubFeaturePrivileges={canCustomizeSubFeaturePrivileges}
           validator={validator}
+          spacesApiUi={spacesApiUi!}
         />
       );
     } else {

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/privilege_summary/privilege_summary.test.tsx

@@ -7,12 +7,15 @@
 
 import React from 'react';
 import { mountWithIntl } from '@kbn/test/jest';
+import { spacesManagerMock } from '../../../../../../../../spaces/public/spaces_manager/mocks';
+import { getUiApi } from '../../../../../../../../spaces/public/ui_api';
 import { createKibanaPrivileges } from '../../../../__fixtures__/kibana_privileges';
 import { kibanaFeatures } from '../../../../__fixtures__/kibana_features';
 import { RoleKibanaPrivilege } from '../../../../../../../common/model';
 import { PrivilegeSummary } from '.';
 import { findTestSubject } from '@kbn/test/jest';
 import { PrivilegeSummaryTable } from './privilege_summary_table';
+import { coreMock } from 'src/core/public/mocks';
 
 const createRole = (roleKibanaPrivileges: RoleKibanaPrivilege[]) => ({
   name: 'some-role',
@@ -31,6 +34,9 @@ const spaces = [
     disabledFeatures: [],
   },
 ];
+const spacesManager = spacesManagerMock.create();
+const { getStartServices } = coreMock.createSetup();
+const spacesApiUi = getUiApi({ spacesManager, getStartServices });
 
 describe('PrivilegeSummary', () => {
   it('initially renders a button', () => {
@@ -50,6 +56,7 @@ describe('PrivilegeSummary', () => {
         kibanaPrivileges={kibanaPrivileges}
         role={role}
         canCustomizeSubFeaturePrivileges={true}
+        spacesApiUi={spacesApiUi}
       />
     );
 
@@ -74,6 +81,7 @@ describe('PrivilegeSummary', () => {
         kibanaPrivileges={kibanaPrivileges}
         role={role}
         canCustomizeSubFeaturePrivileges={true}
+        spacesApiUi={spacesApiUi}
       />
     );
 

x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/privilege_summary/privilege_summary.tsx

@@ -10,6 +10,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButtonEmpty, EuiOverlayMask, EuiButton } from '@elastic/eui';
 import { EuiFlyout } from '@elastic/eui';
 import { EuiFlyoutHeader, EuiTitle, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
+import type { SpacesApiUi } from 'src/plugins/spaces_oss/public';
 import { Space } from '../../../../../../../../spaces/public';
 import { Role } from '../../../../../../../common/model';
 import { PrivilegeSummaryTable } from './privilege_summary_table';
@@ -20,6 +21,7 @@ interface Props {
   spaces: Space[];
   kibanaPrivileges: KibanaPrivileges;
   canCustomizeSubFeaturePrivileges: boolean;
+  spacesApiUi: SpacesApiUi;
 }
 export const PrivilegeSummary = (props: Props) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -54,6 +56,7 @@ export const PrivilegeSummary = (props: Props) => {
                 spaces={props.spaces}
                 kibanaPrivileges={props.kibanaPrivileges}
                 canCustomizeSubFeaturePrivileges={props.canCustomizeSubFeaturePrivileges}
+                spacesApiUi={props.spacesApiUi}
               />
             </EuiFlyoutBody>
             <EuiFlyoutFooter>