Cleanup spaces plugin

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

@@ -9,21 +9,26 @@
 import React, { useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { get } from 'lodash';
-import { Query } from '@elastic/eui';
+import { EuiLoadingSpinner, 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 = async () => ({
+  default: (({ children }) => <>{children}</>) as React.FC,
+});
 
 const SavedObjectsTablePage = ({
   coreStart,
@@ -71,41 +76,46 @@ const SavedObjectsTablePage = ({
   }, [setBreadcrumbs]);
 
   const ContextWrapper = useMemo(
-    () => spacesApi?.ui.components.SpacesContext || EmptyFunctionComponent,
+    () =>
+      React.lazy<React.FC<SpacesContextProps>>(
+        spacesApi ? spacesApi.ui.components.getSpacesContext : getEmptyFunctionComponent
+      ),
     [spacesApi]
   );
 
   return (
-    <ContextWrapper>
-      <SavedObjectsTable
-        initialQuery={initialQuery}
-        allowedTypes={allowedTypes}
-        serviceRegistry={serviceRegistry}
-        actionRegistry={actionRegistry}
-        columnRegistry={columnRegistry}
-        taggingApi={taggingApi}
-        savedObjectsClient={coreStart.savedObjects.client}
-        indexPatterns={dataStart.indexPatterns}
-        search={dataStart.search}
-        http={coreStart.http}
-        overlays={coreStart.overlays}
-        notifications={coreStart.notifications}
-        applications={coreStart.application}
-        perPageConfig={itemsPerPage}
-        goInspectObject={(savedObject) => {
-          const { editUrl } = savedObject.meta;
-          if (editUrl) {
-            return coreStart.application.navigateToUrl(
-              coreStart.http.basePath.prepend(`/app${editUrl}`)
-            );
-          }
-        }}
-        canGoInApp={(savedObject) => {
-          const { inAppUrl } = savedObject.meta;
-          return inAppUrl ? Boolean(get(capabilities, inAppUrl.uiCapabilitiesPath)) : false;
-        }}
-      />
-    </ContextWrapper>
+    <React.Suspense fallback={<EuiLoadingSpinner />}>
+      <ContextWrapper>
+        <SavedObjectsTable
+          initialQuery={initialQuery}
+          allowedTypes={allowedTypes}
+          serviceRegistry={serviceRegistry}
+          actionRegistry={actionRegistry}
+          columnRegistry={columnRegistry}
+          taggingApi={taggingApi}
+          savedObjectsClient={coreStart.savedObjects.client}
+          indexPatterns={dataStart.indexPatterns}
+          search={dataStart.search}
+          http={coreStart.http}
+          overlays={coreStart.overlays}
+          notifications={coreStart.notifications}
+          applications={coreStart.application}
+          perPageConfig={itemsPerPage}
+          goInspectObject={(savedObject) => {
+            const { editUrl } = savedObject.meta;
+            if (editUrl) {
+              return coreStart.application.navigateToUrl(
+                coreStart.http.basePath.prepend(`/app${editUrl}`)
+              );
+            }
+          }}
+          canGoInApp={(savedObject) => {
+            const { inAppUrl } = savedObject.meta;
+            return inAppUrl ? Boolean(get(capabilities, inAppUrl.uiCapabilitiesPath)) : false;
+          }}
+        />
+      </ContextWrapper>
+    </React.Suspense>
   );
 };
 // eslint-disable-next-line import/no-default-export

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(),
+    getSpacesContext: jest.fn(),
+    getShareToSpaceFlyout: jest.fn(),
+    getSpaceList: jest.fn(),
+    getLegacyUrlConflict: jest.fn(),
+    getSpaceAvatar: jest.fn(),
   };
 
   return mock;

src/plugins/spaces_oss/public/api.ts

@@ -22,12 +22,19 @@ export interface SpacesApi {
   ui: SpacesApiUi;
 }
 
+/**
+ * Function that returns a promise for a lazy-loadable component.
+ *
+ * @public
+ */
+export type LazyComponentFn<T> = () => Promise<{ default: FunctionComponent<T> }>;
+
 /**
  * @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>;
+  getSpacesContext: 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

@@ -7,7 +7,7 @@
 
 import React, { FC, useState } from 'react';
 
-import { EuiButtonEmpty } from '@elastic/eui';
+import { EuiButtonEmpty, EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { ShareToSpaceFlyoutProps } from 'src/plugins/spaces_oss/public';
 import {
@@ -66,7 +66,9 @@ export const JobSpacesList: FC<Props> = ({ spacesApi, spaceIds, jobId, jobType,
     });
   }
 
-  const { SpaceList, ShareToSpaceFlyout } = spacesApi.ui.components;
+  const LazySpaceList = React.lazy(spacesApi.ui.components.getSpaceList);
+  const LazyShareToSpaceFlyout = React.lazy(spacesApi.ui.components.getShareToSpaceFlyout);
+
   const shareToSpaceFlyoutProps: ShareToSpaceFlyoutProps = {
     savedObjectTarget: {
       type: ML_SAVED_OBJECT_TYPE,
@@ -81,11 +83,11 @@ export const JobSpacesList: FC<Props> = ({ spacesApi, spaceIds, jobId, jobType,
   };
 
   return (
-    <>
+    <React.Suspense fallback={<EuiLoadingSpinner />}>
       <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} />}
+    </React.Suspense>
   );
 };