[Shareable Saved Objects] Add Spaces column to TableListView

examples/content_management_examples/kibana.jsonc

@@ -13,6 +13,9 @@
       "kibanaReact",
       "savedObjectsTaggingOss"
     ],
+    "optionalPlugins": [
+      "spaces"
+    ],
     "requiredBundles": ["savedObjectsFinder"]
   }
 }

examples/content_management_examples/public/examples/index.tsx

@@ -20,7 +20,7 @@ import { FinderApp } from './finder';
 
 export const renderApp = (
   core: CoreStart,
-  { contentManagement, savedObjectsTaggingOss }: StartDeps,
+  { contentManagement, savedObjectsTaggingOss, spaces }: StartDeps,
   { element, history }: AppMountParameters
 ) => {
   ReactDOM.render(
@@ -69,6 +69,7 @@ export const renderApp = (
                   contentClient={contentManagement.client}
                   core={core}
                   savedObjectsTagging={savedObjectsTaggingOss}
+                  spaces={spaces}
                 />
               </Route>
               <Route path="/finder">

examples/content_management_examples/public/examples/msearch/msearch_app.tsx

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { FC, useMemo } from 'react';
+import { SpacesContextProps, SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import { ContentClientProvider, type ContentClient } from '@kbn/content-management-plugin/public';
 import { TableListViewKibanaProvider } from '@kbn/content-management-table-list-view-table';
 import type { CoreStart } from '@kbn/core/public';
@@ -15,23 +16,37 @@ import { FormattedRelative, I18nProvider } from '@kbn/i18n-react';
 import { SavedObjectTaggingOssPluginStart } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import { MSearchTable } from './msearch_table';
 
+const getEmptyFunctionComponent: FC<SpacesContextProps> = ({ children }) => <>{children}</>;
+
 export const MSearchApp = (props: {
   contentClient: ContentClient;
   core: CoreStart;
   savedObjectsTagging: SavedObjectTaggingOssPluginStart;
+  spaces?: SpacesPluginStart;
 }) => {
+  const SpacesContextWrapper = useMemo(
+    () =>
+      props.spaces
+        ? props.spaces.ui.components.getSpacesContextProvider
+        : getEmptyFunctionComponent,
+    [props.spaces]
+  );
+
   return (
-    <ContentClientProvider contentClient={props.contentClient}>
-      <I18nProvider>
-        <TableListViewKibanaProvider
-          core={props.core}
-          toMountPoint={toMountPoint}
-          FormattedRelative={FormattedRelative}
-          savedObjectsTagging={props.savedObjectsTagging.getTaggingApi()}
-        >
-          <MSearchTable />
-        </TableListViewKibanaProvider>
-      </I18nProvider>
-    </ContentClientProvider>
+    <SpacesContextWrapper>
+      <ContentClientProvider contentClient={props.contentClient}>
+        <I18nProvider>
+          <TableListViewKibanaProvider
+            core={props.core}
+            toMountPoint={toMountPoint}
+            FormattedRelative={FormattedRelative}
+            savedObjectsTagging={props.savedObjectsTagging.getTaggingApi()}
+            spacesApi={props.spaces}
+          >
+            <MSearchTable />
+          </TableListViewKibanaProvider>
+        </I18nProvider>
+      </ContentClientProvider>
+    </SpacesContextWrapper>
   );
 };

examples/content_management_examples/public/examples/msearch/msearch_table.tsx

@@ -13,6 +13,11 @@ import { SavedObjectsFindOptionsReference } from '@kbn/core-saved-objects-api-br
 
 const LISTING_LIMIT = 1000;
 
+// TODO Currently each consumer of TableListView needs to pass an itemIsShareable handler to the TableListView.
+// Ideally, the contentClient would use the ISavedObjectTypeRegistry.isShareable method to tell us if the saved
+// object type is shareable. For this demo we are hard-coding the shareable object types.
+const shareableSavedObjects = ['index-pattern'];
+
 export const MSearchTable = () => {
   const contentClient = useContentClient();
 
@@ -59,6 +64,7 @@ export const MSearchTable = () => {
       entityNamePlural={`ContentItems`}
       title={`MSearch Demo`}
       urlStateEnabled={false}
+      itemIsShareable={({ type }) => shareableSavedObjects.includes(type)}
       emptyPrompt={<>No data found. Try to install some sample data first.</>}
       onClickTitle={(item) => {
         alert(`Clicked item ${item.attributes.title} (${item.id})`);

examples/content_management_examples/public/types.ts

@@ -10,6 +10,7 @@ import {
   ContentManagementPublicSetup,
   ContentManagementPublicStart,
 } from '@kbn/content-management-plugin/public';
+import { SpacesPluginStart } from '@kbn/spaces-plugin/public';
 import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
 import { SavedObjectTaggingOssPluginStart } from '@kbn/saved-objects-tagging-oss-plugin/public';
 
@@ -21,4 +22,5 @@ export interface SetupDeps {
 export interface StartDeps {
   contentManagement: ContentManagementPublicStart;
   savedObjectsTaggingOss: SavedObjectTaggingOssPluginStart;
+  spaces?: SpacesPluginStart;
 }

examples/content_management_examples/tsconfig.json

@@ -30,5 +30,6 @@
     "@kbn/content-management-table-list-view",
     "@kbn/shared-ux-router",
     "@kbn/saved-objects-finder-plugin",
+    "@kbn/spaces-plugin",
   ]
 }

packages/content-management/table_list_view/src/table_list_view.tsx

@@ -37,6 +37,7 @@ export type TableListViewProps<T extends UserContentCommonSchema = UserContentCo
   | 'titleColumnName'
   | 'withoutPageTemplateWrapper'
   | 'itemIsEditable'
+  | 'itemIsShareable'
 > & {
   title: string;
   description?: string;
@@ -74,6 +75,7 @@ export const TableListView = <T extends UserContentCommonSchema>({
   additionalRightSideActions,
   withoutPageTemplateWrapper,
   itemIsEditable,
+  itemIsShareable,
 }: TableListViewProps<T>) => {
   const PageTemplate = withoutPageTemplateWrapper
     ? (React.Fragment as unknown as typeof KibanaPageTemplate)
@@ -120,6 +122,7 @@ export const TableListView = <T extends UserContentCommonSchema>({
           contentEditor={contentEditor}
           titleColumnName={titleColumnName}
           itemIsEditable={itemIsEditable}
+          itemIsShareable={itemIsShareable}
           withoutPageTemplateWrapper={withoutPageTemplateWrapper}
           onFetchSuccess={onFetchSuccess}
           setPageDataTestSubject={setPageDataTestSubject}

packages/content-management/table_list_view_table/src/components/spaces_list.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FC, useState } from 'react';
+import type { SpacesPluginStart, ShareToSpaceFlyoutProps } from '@kbn/spaces-plugin/public';
+
+interface Props {
+  spacesApi: SpacesPluginStart;
+  canShareToSpaces?: boolean;
+  spaceIds: string[];
+  type: string;
+  noun: string;
+  id: string;
+  title: string;
+  refresh(): void;
+}
+
+export const SpacesList: FC<Props> = ({
+  spacesApi,
+  canShareToSpaces,
+  type,
+  noun,
+  spaceIds,
+  id,
+  title,
+  refresh,
+}) => {
+  const [showFlyout, setShowFlyout] = useState(false);
+
+  function onClose() {
+    setShowFlyout(false);
+  }
+
+  const LazySpaceList = spacesApi.ui.components.getSpaceList;
+  const LazyShareToSpaceFlyout = spacesApi.ui.components.getShareToSpaceFlyout;
+
+  const shareToSpaceFlyoutProps: ShareToSpaceFlyoutProps = {
+    savedObjectTarget: {
+      type,
+      namespaces: spaceIds,
+      id,
+      title,
+      noun,
+    },
+    onUpdate: refresh,
+    onClose,
+  };
+
+  const clickProperties = canShareToSpaces
+    ? { cursorStyle: 'pointer', listOnClick: () => setShowFlyout(true) }
+    : { cursorStyle: 'not-allowed' };
+  return (
+    <>
+      <LazySpaceList
+        namespaces={spaceIds}
+        displayLimit={8}
+        behaviorContext="outside-space"
+        {...clickProperties}
+      />
+      {showFlyout && <LazyShareToSpaceFlyout {...shareToSpaceFlyoutProps} />}
+    </>
+  );
+};

packages/content-management/table_list_view_table/src/services.tsx

@@ -9,6 +9,7 @@
 import React, { FC, useContext, useMemo, useCallback } from 'react';
 import type { Observable } from 'rxjs';
 import type { FormattedRelative } from '@kbn/i18n-react';
+import type { SpacesApi } from '@kbn/spaces-plugin/public';
 import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
 import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
 import { RedirectAppLinksKibanaProvider } from '@kbn/shared-ux-link-redirect-app';
@@ -43,6 +44,7 @@ export interface TagListProps {
  */
 export interface Services {
   canEditAdvancedSettings: boolean;
+  canShareToSpaces?: boolean;
   getListingLimitSettingsUrl: () => string;
   notifyError: NotifyFn;
   currentAppId$: Observable<string | undefined>;
@@ -56,6 +58,7 @@ export interface Services {
   /** Handler to retrieve the list of available tags */
   getTagList: () => Tag[];
   TagList: FC<TagListProps>;
+  spacesApi?: SpacesApi;
   /** Predicate function to indicate if some of the saved object references are tags */
   itemHasTags: (references: SavedObjectsReference[]) => boolean;
   /** Handler to return the url to navigate to the kibana tags management */
@@ -155,6 +158,11 @@ export interface TableListViewKibanaDependencies {
       getTagIdsFromReferences: (references: SavedObjectsReference[]) => string[];
     };
   };
+  /**
+   * The public API from the Spaces plugin. Provide the `spacesApi` to show the Spaces
+   * column in the table.
+   */
+  spacesApi?: SpacesApi;
   /** The <FormattedRelative /> component from the @kbn/i18n-react package */
   FormattedRelative: typeof FormattedRelative;
 }
@@ -166,7 +174,7 @@ export const TableListViewKibanaProvider: FC<TableListViewKibanaDependencies> =
   children,
   ...services
 }) => {
-  const { core, toMountPoint, savedObjectsTagging, FormattedRelative } = services;
+  const { core, toMountPoint, savedObjectsTagging, spacesApi, FormattedRelative } = services;
 
   const searchQueryParser = useMemo(() => {
     if (savedObjectsTagging) {
@@ -228,6 +236,9 @@ export const TableListViewKibanaProvider: FC<TableListViewKibanaDependencies> =
       >
         <TableListViewProvider
           canEditAdvancedSettings={Boolean(core.application.capabilities.advancedSettings?.save)}
+          canShareToSpaces={Boolean(
+            core.application.capabilities.savedObjectsManagement.shareIntoSpace
+          )}
           getListingLimitSettingsUrl={() =>
             core.application.getUrlForApp('management', {
               path: `/kibana/settings?query=savedObjects:listingLimit`,
@@ -245,6 +256,7 @@ export const TableListViewKibanaProvider: FC<TableListViewKibanaDependencies> =
           itemHasTags={itemHasTags}
           getTagIdsFromReferences={getTagIdsFromReferences}
           getTagManagementUrl={() => core.http.basePath.prepend(TAG_MANAGEMENT_APP_URL)}
+          spacesApi={spacesApi}
         >
           {children}
         </TableListViewProvider>