Add Spaces to Dashboard Listing Table

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/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_table/src/components/spaces_list.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 { Capabilities } from '@kbn/core/public';
+import type { SpacesApi, ShareToSpaceFlyoutProps } from '@kbn/spaces-plugin/public';
+
+interface Props {
+  spacesApi: SpacesApi;
+  capabilities: Capabilities | undefined;
+  spaceIds: string[];
+  type: string;
+  noun: string;
+  id: string;
+  title: string;
+  refresh(): void;
+}
+
+export const SpacesList: FC<Props> = ({
+  spacesApi,
+  capabilities,
+  type,
+  noun,
+  spaceIds,
+  id,
+  title,
+  refresh,
+}) => {
+  const [showFlyout, setShowFlyout] = useState(false);
+
+  function onClose() {
+    setShowFlyout(false);
+  }
+
+  // TODO Check the namespaceType and disable column if not multiple
+  // See src/plugins/saved_objects_management/public/services/columns/share_saved_objects_to_space_column.tsx
+
+  // TODO Disable for Serverless
+
+  const LazySpaceList = spacesApi.ui.components.getSpaceList;
+  const LazyShareToSpaceFlyout = spacesApi.ui.components.getShareToSpaceFlyout;
+
+  const shareToSpaceFlyoutProps: ShareToSpaceFlyoutProps = {
+    savedObjectTarget: {
+      type,
+      namespaces: spaceIds,
+      id,
+      title,
+      noun,
+    },
+    behaviorContext: 'outside-space',
+    onUpdate: refresh,
+    onClose,
+  };
+
+  const canAssignSpaces = !capabilities || !!capabilities.savedObjectsManagement.shareIntoSpace;
+  const clickProperties = canAssignSpaces
+    ? { 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';
@@ -56,6 +57,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 +157,7 @@ export interface TableListViewKibanaDependencies {
       getTagIdsFromReferences: (references: SavedObjectsReference[]) => string[];
     };
   };
+  spacesApi?: SpacesApi;
   /** The <FormattedRelative /> component from the @kbn/i18n-react package */
   FormattedRelative: typeof FormattedRelative;
 }
@@ -166,7 +169,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) {
@@ -245,6 +248,7 @@ export const TableListViewKibanaProvider: FC<TableListViewKibanaDependencies> =
           itemHasTags={itemHasTags}
           getTagIdsFromReferences={getTagIdsFromReferences}
           getTagManagementUrl={() => core.http.basePath.prepend(TAG_MANAGEMENT_APP_URL)}
+          spacesApi={spacesApi}
         >
           {children}
         </TableListViewProvider>

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

@@ -141,6 +141,7 @@ describe('TableListView', () => {
       const hits: UserContentCommonSchema[] = [
         {
           id: 'item-1',
+          namespaces: ['default'],
           type: 'dashboard',
           updatedAt: '2020-01-01T00:00:00Z',
           attributes: {
@@ -188,6 +189,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: '123',
+        namespaces: ['default'],
         updatedAt: twoDaysAgo.toISOString(),
         type: 'dashboard',
         attributes: {
@@ -198,6 +200,7 @@ describe('TableListView', () => {
       },
       {
         id: '456',
+        namespaces: ['default'],
         // This is the latest updated and should come first in the table
         updatedAt: yesterday.toISOString(),
         type: 'dashboard',
@@ -330,6 +333,7 @@ describe('TableListView', () => {
 
     const hits: UserContentCommonSchema[] = [...Array(totalItems)].map((_, i) => ({
       id: `item${i}`,
+      namespaces: ['default'],
       type: 'dashboard',
       updatedAt,
       attributes: {
@@ -438,6 +442,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: '123',
+        namespaces: ['default'],
         updatedAt: twoDaysAgo.toISOString(), // first asc, last desc
         type: 'dashboard',
         attributes: {
@@ -447,6 +452,7 @@ describe('TableListView', () => {
       },
       {
         id: '456',
+        namespaces: ['default'],
         updatedAt: yesterday.toISOString(), // first desc, last asc
         type: 'dashboard',
         attributes: {
@@ -639,6 +645,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: '123',
+        namespaces: ['default'],
         updatedAt: new Date(new Date().setDate(new Date().getDate() - 1)).toISOString(),
         attributes: {
           title: 'Item 1',
@@ -649,6 +656,7 @@ describe('TableListView', () => {
       },
       {
         id: '456',
+        namespaces: ['default'],
         updatedAt: new Date(new Date().setDate(new Date().getDate() - 2)).toISOString(),
         attributes: {
           title: 'Item 2',
@@ -697,6 +705,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: '123',
+        namespaces: ['default'],
         updatedAt: new Date(new Date().setDate(new Date().getDate() - 1)).toISOString(),
         type: 'dashboard',
         attributes: {
@@ -710,6 +719,7 @@ describe('TableListView', () => {
       },
       {
         id: '456',
+        namespaces: ['default'],
         updatedAt: new Date(new Date().setDate(new Date().getDate() - 2)).toISOString(),
         type: 'dashboard',
         attributes: {
@@ -890,6 +900,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: 'item-1',
+        namespaces: ['default'],
         type: 'dashboard',
         updatedAt,
         attributes: {
@@ -899,6 +910,7 @@ describe('TableListView', () => {
       },
       {
         id: 'item-2',
+        namespaces: ['default'],
         type: 'dashboard',
         updatedAt,
         attributes: {
@@ -1075,6 +1087,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: '123',
+        namespaces: ['default'],
         updatedAt: yesterday.toISOString(),
         type: 'dashboard',
         attributes: {
@@ -1085,6 +1098,7 @@ describe('TableListView', () => {
       },
       {
         id: '456',
+        namespaces: ['default'],
         updatedAt: twoDaysAgo.toISOString(),
         type: 'dashboard',
         attributes: {
@@ -1344,6 +1358,7 @@ describe('TableListView', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: '123',
+        namespaces: ['default'],
         updatedAt: twoDaysAgo.toISOString(),
         type: 'dashboard',
         attributes: {
@@ -1354,6 +1369,7 @@ describe('TableListView', () => {
       },
       {
         id: '456',
+        namespaces: ['default'],
         updatedAt: yesterday.toISOString(),
         type: 'dashboard',
         attributes: {
@@ -1467,6 +1483,7 @@ describe('TableList', () => {
     const originalHits: UserContentCommonSchema[] = [
       {
         id: `item`,
+        namespaces: ['default'],
         type: 'dashboard',
         updatedAt: 'original timestamp',
         attributes: {
@@ -1491,6 +1508,7 @@ describe('TableList', () => {
     const hits: UserContentCommonSchema[] = [
       {
         id: `item`,
+        namespaces: ['default'],
         type: 'dashboard',
         updatedAt: 'updated timestamp',
         attributes: {