[content-list] Move content editor wiring to features.contentEditor (elastic#270043)

Author: clintandrewhall

src/platform/packages/shared/content-management/content_editor/index.ts

@@ -9,6 +9,7 @@
 
 export { ContentEditorProvider, ContentEditorKibanaProvider, useOpenContentEditor } from './src';
 export type {
+  ContentEditorKibanaDependencies,
   OpenContentEditorParams,
   ContentEditorItem,
   ContentEditorCustomValidators,

src/platform/packages/shared/content-management/content_editor/src/index.ts

@@ -8,6 +8,7 @@
  */
 
 export { ContentEditorProvider, ContentEditorKibanaProvider } from './services';
+export type { ContentEditorKibanaDependencies } from './services';
 export { useOpenContentEditor } from './open_content_editor';
 export type { OpenContentEditorParams } from './open_content_editor';
 export type { Item as ContentEditorItem } from './types';

src/platform/packages/shared/content-management/content_editor/src/services.tsx

@@ -65,7 +65,7 @@ export interface Services {
   openSystemFlyout(node: ReactNode, options?: OverlaySystemFlyoutOpenOptions): OverlayRef;
   notifyError: NotifyFn;
   TagList?: FC<{ tagIds: string[] }>;
-  TagSelector?: React.FC<TagSelectorProps>;
+  TagSelector?: React.ComponentType<any>;
 }
 
 const ContentEditorContext = React.createContext<Services | null>(null);
@@ -133,7 +133,7 @@ export interface ContentEditorKibanaDependencies {
             managed: boolean;
           }) => void;
         }>;
-        SavedObjectSaveModalTagSelector: React.FC<TagSelectorProps>;
+        SavedObjectSaveModalTagSelector: React.ComponentType<any>;
       };
     };
   };

src/platform/packages/shared/content-management/content_list/kbn-content-list-docs/src/dashboard_listing.stories.tsx

@@ -32,7 +32,7 @@ import {
   createMockStoryFindItems,
   createMockTagFacetProvider,
   createMockUserProfileFacetProvider,
-  useInspectFlyout,
+  useContentEditorFlyout,
 } from './stories_helpers';
 
 const { Section } = KibanaContentListPage;
@@ -54,11 +54,9 @@ const labels = {
 } as const;
 
 const useDashboardProviderProps = ({
-  onInspect,
-  includeInspect = false,
+  openContentEditor,
 }: {
-  onInspect?: (item: ContentListItem) => void;
-  includeInspect?: boolean;
+  openContentEditor?: (item: ContentListItem) => void;
 }) => {
   const favoritesClient = useMemo(
     () => createMockFavoritesClient(['dashboard-001', 'dashboard-003', 'dashboard-007']),
@@ -89,8 +87,10 @@ const useDashboardProviderProps = ({
       tags: createMockTagFacetProvider(MOCK_DASHBOARDS),
       starred: true as const,
       userProfiles: createMockUserProfileFacetProvider(MOCK_DASHBOARDS),
+      // Original story leaves this undefined, which makes `<Action.ContentEditor />` self-skip.
+      ...(openContentEditor ? { contentEditor: { open: openContentEditor } } : {}),
     }),
-    []
+    [openContentEditor]
   );
 
   const item = useMemo(
@@ -107,10 +107,9 @@ const useDashboardProviderProps = ({
             await wait(250);
           },
         },
-        ...(includeInspect && onInspect ? { inspect: { onItemAction: onInspect } } : {}),
       },
     }),
-    [includeInspect, onInspect]
+    []
   );
 
   return { dataSource, favoritesClient, features, item };
@@ -166,10 +165,9 @@ const OriginalStory = () => {
 };
 
 const ProposalStory = () => {
-  const { onInspect, flyout } = useInspectFlyout();
+  const { open: openContentEditor, flyout } = useContentEditorFlyout();
   const { favoritesClient, ...providerProps } = useDashboardProviderProps({
-    onInspect,
-    includeInspect: true,
+    openContentEditor,
   });
 
   const pageElement = useMemo(
@@ -199,7 +197,7 @@ const ProposalStory = () => {
               <Column.CreatedBy />
               <Column.UpdatedAt />
               <Column.Actions>
-                <Action.Inspect />
+                <Action.ContentEditor />
                 <Action.Edit />
                 <Action.Delete />
               </Column.Actions>

src/platform/packages/shared/content-management/content_list/kbn-content-list-docs/src/files_management.stories.tsx

@@ -32,7 +32,7 @@ import {
   ListingPageHeaderMock,
   StateDiagnosticPanel,
   createMockStoryFindItems,
-  useInspectFlyout,
+  useContentEditorFlyout,
 } from './stories_helpers';
 
 const meta: Meta = {
@@ -74,7 +74,7 @@ const emptyState = (
   />
 );
 
-const useFilesProviderProps = (onInspect?: (item: ContentListItem) => void) => {
+const useFilesProviderProps = (openContentEditor?: (item: ContentListItem) => void) => {
   const dataSource = useMemo(
     () => ({
       debounceMs: 0,
@@ -101,8 +101,10 @@ const useFilesProviderProps = (onInspect?: (item: ContentListItem) => void) => {
         ],
       },
       pagination: { initialPageSize: 50 },
+      // `<Action.ContentEditor />` self-skips when this is undefined.
+      ...(openContentEditor ? { contentEditor: { open: openContentEditor } } : {}),
     }),
-    []
+    [openContentEditor]
   );
 
   const item = useMemo(
@@ -113,18 +115,17 @@ const useFilesProviderProps = (onInspect?: (item: ContentListItem) => void) => {
             await wait(250);
           },
         },
-        ...(onInspect ? { inspect: { onItemAction: onInspect } } : {}),
       },
     }),
-    [onInspect]
+    []
   );
 
   return { dataSource, features, item };
 };
 
 const OriginalStory = () => {
-  const { onInspect, flyout } = useInspectFlyout();
-  const providerProps = useFilesProviderProps(onInspect);
+  const { open: openContentEditor, flyout } = useContentEditorFlyout();
+  const providerProps = useFilesProviderProps(openContentEditor);
 
   const pageElement = useMemo(
     () => (
@@ -149,7 +150,7 @@ const OriginalStory = () => {
               sortable
               render={(item) => (
                 <>
-                  <EuiLink onClick={() => onInspect(item)}>{item.title}</EuiLink>
+                  <EuiLink onClick={() => openContentEditor(item)}>{item.title}</EuiLink>
                   {item.description ? (
                     <EuiText size="s" color="subdued">
                       <p>{item.description}</p>
@@ -178,7 +179,7 @@ const OriginalStory = () => {
         {flyout}
       </>
     ),
-    [flyout, onInspect]
+    [flyout, openContentEditor]
   );
 
   return (
@@ -193,8 +194,8 @@ const OriginalStory = () => {
 };
 
 const ProposalStory = () => {
-  const { onInspect, flyout } = useInspectFlyout();
-  const providerProps = useFilesProviderProps(onInspect);
+  const { open: openContentEditor, flyout } = useContentEditorFlyout();
+  const providerProps = useFilesProviderProps(openContentEditor);
 
   const pageElement = useMemo(
     () => (
@@ -242,7 +243,7 @@ const ProposalStory = () => {
               />
               <Column.UpdatedAt />
               <Column.Actions>
-                <Action.Inspect />
+                <Action.ContentEditor />
                 <Action.Delete />
               </Column.Actions>
             </ContentListTable>

src/platform/packages/shared/content-management/content_list/kbn-content-list-docs/src/maps.stories.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, type ReactNode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { EuiButton, EuiSpacer } from '@elastic/eui';
 import type { ContentListItem } from '@kbn/content-list-provider';
@@ -17,6 +17,7 @@ import {
   ContentListTable,
   ContentListFooter,
   ContentListToolbar,
+  useContentListConfig,
 } from '@kbn/content-list';
 import { KibanaContentListPage } from '@kbn/content-list-page';
 import {
@@ -29,7 +30,7 @@ import {
   createMockStoryFindItems,
   createMockTagFacetProvider,
   createMockUserProfileFacetProvider,
-  useInspectFlyout,
+  useContentEditorFlyout,
 } from './stories_helpers';
 
 const meta: Meta = {
@@ -49,10 +50,10 @@ const labels = {
 } as const;
 
 const useMapsProviderProps = ({
-  onInspect,
+  openContentEditor,
   includeCreatedBy = false,
 }: {
-  onInspect?: (item: ContentListItem) => void;
+  openContentEditor?: (item: ContentListItem) => void;
   includeCreatedBy?: boolean;
 }) => {
   const dataSource = useMemo(
@@ -75,8 +76,10 @@ const useMapsProviderProps = ({
       pagination: { initialPageSize: 20 },
       tags: createMockTagFacetProvider(MOCK_MAPS),
       ...(includeCreatedBy ? { userProfiles: createMockUserProfileFacetProvider(MOCK_MAPS) } : {}),
+      // Mirrors how `ContentListClientProvider` wires `useContentEditorOpen()`.
+      ...(openContentEditor ? { contentEditor: { open: openContentEditor } } : {}),
     }),
-    [includeCreatedBy]
+    [includeCreatedBy, openContentEditor]
   );
 
   const item = useMemo(
@@ -88,10 +91,9 @@ const useMapsProviderProps = ({
             await wait(250);
           },
         },
-        ...(onInspect ? { inspect: { onItemAction: onInspect } } : {}),
       },
     }),
-    [onInspect]
+    []
   );
 
   return { dataSource, features, item };
@@ -147,9 +149,43 @@ const OriginalStory = () => {
   );
 };
 
+/**
+ * Mirrors `x-pack/.../maps/public/components/map_list`:
+ * `<Action.ContentEditor />` is unconditional and self-skips when
+ * `features.contentEditor.open` isn't wired.
+ */
+const MapsProposalListBody = ({ flyout }: { flyout: ReactNode }) => {
+  const { isReadOnly } = useContentListConfig();
+
+  return (
+    <ContentList>
+      <ContentListToolbar>
+        <Filters>
+          <Filters.Tags />
+          <Filters.CreatedBy />
+          <Filters.Sort />
+        </Filters>
+      </ContentListToolbar>
+      <ContentListTable title="Maps">
+        <Column.Name showDescription showTags />
+        <Column.CreatedBy />
+        <Column.UpdatedAt />
+        {!isReadOnly && (
+          <Column.Actions>
+            <Action.ContentEditor />
+            <Action.Delete />
+          </Column.Actions>
+        )}
+      </ContentListTable>
+      <ContentListFooter />
+      {flyout}
+    </ContentList>
+  );
+};
+
 const ProposalStory = () => {
-  const { onInspect, flyout } = useInspectFlyout();
-  const providerProps = useMapsProviderProps({ onInspect, includeCreatedBy: true });
+  const { open: openContentEditor, flyout } = useContentEditorFlyout();
+  const providerProps = useMapsProviderProps({ openContentEditor, includeCreatedBy: true });
 
   const pageElement = useMemo(
     () => (
@@ -163,26 +199,7 @@ const ProposalStory = () => {
           }
         />
         <KibanaContentListPage.Section>
-          <ContentList>
-            <ContentListToolbar>
-              <Filters>
-                <Filters.Tags />
-                <Filters.CreatedBy />
-                <Filters.Sort />
-              </Filters>
-            </ContentListToolbar>
-            <ContentListTable title="Maps">
-              <Column.Name showDescription showTags />
-              <Column.CreatedBy />
-              <Column.UpdatedAt />
-              <Column.Actions>
-                <Action.Inspect />
-                <Action.Delete />
-              </Column.Actions>
-            </ContentListTable>
-            <ContentListFooter />
-            {flyout}
-          </ContentList>
+          <MapsProposalListBody flyout={flyout} />
         </KibanaContentListPage.Section>
       </KibanaContentListPage>
     ),

src/platform/packages/shared/content-management/content_list/kbn-content-list-docs/src/playground/builder_panel.tsx

@@ -259,13 +259,6 @@ export const BuilderPanel = ({ state, dispatch }: BuilderPanelProps) => {
               onChange={(v) => dispatch({ type: 'SET_ITEM_PROP', key: 'onDelete', value: v })}
             />
           </JsxPropDisplay>
-          <JsxPropDisplay name="actions.inspect">
-            <InlineCheckbox
-              id={`${idPrefix}-onInspect`}
-              checked={item.onInspect}
-              onChange={(v) => dispatch({ type: 'SET_ITEM_PROP', key: 'onInspect', value: v })}
-            />
-          </JsxPropDisplay>
         </JsxPropBlock>
 
         {/* features prop */}
@@ -312,6 +305,13 @@ export const BuilderPanel = ({ state, dispatch }: BuilderPanelProps) => {
               onChange={(v) => dispatch({ type: 'SET_FEATURE', key: 'userProfiles', value: v })}
             />
           </JsxPropDisplay>
+          <JsxPropDisplay name="contentEditor.open">
+            <InlineCheckbox
+              id={`${idPrefix}-contentEditor`}
+              checked={features.contentEditor}
+              onChange={(v) => dispatch({ type: 'SET_FEATURE', key: 'contentEditor', value: v })}
+            />
+          </JsxPropDisplay>
         </JsxPropBlock>
       </JsxTag>
 
@@ -400,9 +400,11 @@ export const BuilderPanel = ({ state, dispatch }: BuilderPanelProps) => {
                         col.type === 'actions' &&
                         !item.onEdit &&
                         !item.onDelete &&
-                        !item.onInspect &&
-                        !col.actions.some((a) => !['edit', 'delete', 'inspect'].includes(a.type))
-                          ? 'This column is hidden because no item actions (actions.edit, actions.delete, actions.inspect) are configured on the provider and no custom actions are present.'
+                        !features.contentEditor &&
+                        !col.actions.some(
+                          (a) => !['edit', 'delete', 'contentEditor'].includes(a.type)
+                        )
+                          ? 'This column is hidden because no row entry points are wired (actions.edit, actions.delete, features.contentEditor.open) and no custom actions are present.'
                           : undefined
                       }
                     />

src/platform/packages/shared/content-management/content_list/kbn-content-list-docs/src/playground/instructions.md

@@ -19,7 +19,7 @@ All three child components read their state from the provider via context, so th
 
 The JSX-shaped tree on the left mirrors the component hierarchy you are building. Each node has inline controls:
 
-- **Provider props** — toggle features like sorting, pagination, and search; set entity labels; enable item-level navigation (`getHref`) and action handlers (`actions.edit`, `actions.delete`, `actions.inspect`).
+- **Provider props** — toggle features like sorting, pagination, search, and the content editor flyout (`features.contentEditor.open`); set entity labels; enable item-level navigation (`getHref`) and action handlers (`actions.edit`, `actions.delete`).
 - **Columns** — drag to reorder, click the arrow to edit props (`width`, `columnTitle`, etc.), or press ✕ to remove.
 - **Actions** — nested inside `Column.Actions`; drag to reorder or remove.
 - **Filters** — toolbar filter components like `Filters.Sort`.
@@ -44,6 +44,7 @@ Actions are children of `Column.Actions`:
 | Component | Description |
 |---|---|
 | `Action.Edit` | Opens the item for editing (requires `actions.edit.onItemAction`). |
+| `Action.ContentEditor` | Opens the Kibana content editor flyout (requires `features.contentEditor.open`). The action self-skips when the open callback isn't wired. |
 | `Action.Delete` | Triggers a delete-confirmation modal (requires `actions.delete.onBulkAction`). |
 | `Action (Export)` | Custom action example — demonstrates the base `Action` API. Behavior is supplied via `actions.export.onItemAction` on the provider's item config. |