[Content List] Add content editor integration (PR 12) (elastic#262630)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: 3 people

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

@@ -8,5 +8,9 @@
  */
 
 export { ContentEditorProvider, ContentEditorKibanaProvider, useOpenContentEditor } from './src';
-export type { OpenContentEditorParams } from './src';
+export type {
+  OpenContentEditorParams,
+  ContentEditorItem,
+  ContentEditorCustomValidators,
+} from './src';
 export type { SavedObjectsReference } from './src/services';

src/platform/packages/shared/content-management/content_editor/src/components/editor_flyout_content.tsx

@@ -72,20 +72,15 @@ export const ContentEditorFlyoutContent: FC<Props> = ({
   const form = useMetadataForm({ item, customValidators });
 
   const hasNoChanges = () => {
-    const itemTags = item.tags.map((obj) => obj.id).sort();
+    const itemTags = item.tags.slice().sort();
     const formTags = form.tags.value.slice().sort();
-
-    const compareTags = (arr1: string[], arr2: string[]) => {
-      if (arr1.length !== arr2.length) return false;
-      return arr1.every((tag: string, index) => tag === arr2[index]);
-    };
-
     const description = item.description || '';
 
     return (
       item.title === form.title.value &&
       description === form.description.value &&
-      compareTags(itemTags, formTags)
+      itemTags.length === formTags.length &&
+      itemTags.every((tag, i) => tag === formTags[i])
     );
   };
 
@@ -137,7 +132,6 @@ export const ContentEditorFlyoutContent: FC<Props> = ({
               defaultMessage: 'To edit these details, contact your administrator for access.',
             })
           }
-          tagsReferences={item.tags}
           TagList={TagList}
           TagSelector={TagSelector}
         >

src/platform/packages/shared/content-management/content_editor/src/components/inspector_flyout_content.test.tsx

@@ -32,10 +32,7 @@ describe('<ContentEditorFlyoutContent />', () => {
       id: '123',
       title: 'Foo',
       description: 'Some description',
-      tags: [
-        { id: 'id-1', name: 'tag1', type: 'tag' },
-        { id: 'id-2', name: 'tag2', type: 'tag' },
-      ],
+      tags: ['id-1', 'id-2'],
     };
 
     const mockedServices = getMockServices();
@@ -230,6 +227,20 @@ describe('<ContentEditorFlyoutContent />', () => {
       );
     });
 
+    test('should render tags in read-only mode', async () => {
+      await act(async () => {
+        testBed = await setup();
+      });
+
+      const { exists, component } = testBed!;
+
+      expect(exists('tagList')).toBe(true);
+
+      const tagListHtml = component.find('[data-test-subj="tagList"]').text();
+      expect(tagListHtml).toContain('id-1');
+      expect(tagListHtml).toContain('id-2');
+    });
+
     test('should update the tag selection', async () => {
       const onSave = jest.fn();
 

src/platform/packages/shared/content-management/content_editor/src/components/metadata_form.tsx

@@ -21,15 +21,14 @@ import {
 
 import { ContentEditorFlyoutWarningsCallOut } from './editor_flyout_warnings';
 import type { Field, MetadataFormState } from './use_metadata_form';
-import type { SavedObjectsReference, Services } from '../services';
+import type { Services } from '../services';
 
 interface Props {
   form: MetadataFormState & {
     isSubmitted: boolean;
   };
   isReadonly: boolean;
   readonlyReason: string;
-  tagsReferences: SavedObjectsReference[];
   TagList?: Services['TagList'];
   TagSelector?: Services['TagSelector'];
 }
@@ -38,7 +37,6 @@ const isFormFieldValid = (field: Field) => !Boolean(field.errors?.length);
 
 export const MetadataForm: FC<React.PropsWithChildren<Props>> = ({
   form,
-  tagsReferences,
   TagList,
   TagSelector,
   isReadonly,
@@ -114,7 +112,7 @@ export const MetadataForm: FC<React.PropsWithChildren<Props>> = ({
         />
       </EuiFormRow>
 
-      {TagList && isReadonly && tagsReferences.length > 0 && (
+      {TagList && isReadonly && tags.value.length > 0 && (
         <>
           <EuiSpacer />
           <EuiFormRow
@@ -124,7 +122,7 @@ export const MetadataForm: FC<React.PropsWithChildren<Props>> = ({
             fullWidth
             isDisabled={isReadonly}
           >
-            <TagList references={tagsReferences} />
+            <TagList tagIds={tags.value} />
           </EuiFormRow>
         </>
       )}

src/platform/packages/shared/content-management/content_editor/src/components/use_metadata_form.ts

@@ -96,6 +96,9 @@ const executeValidation = async <TField extends keyof Fields>(
   return results;
 };
 
+/** Normalize tags, treating `undefined` as an empty array. */
+const normalizeTagIds = (tags: string[] | undefined): string[] => tags ?? [];
+
 export const useMetadataForm = ({
   item,
   customValidators,
@@ -111,7 +114,7 @@ export const useMetadataForm = ({
       isChangingValue: false,
     },
     tags: {
-      value: item.tags ? item.tags.map(({ id }) => id) : [],
+      value: normalizeTagIds(item.tags),
       isChangingValue: false,
     },
   });

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

@@ -10,3 +10,5 @@
 export { ContentEditorProvider, ContentEditorKibanaProvider } from './services';
 export { useOpenContentEditor } from './open_content_editor';
 export type { OpenContentEditorParams } from './open_content_editor';
+export type { Item as ContentEditorItem } from './types';
+export type { CustomValidators as ContentEditorCustomValidators } from './components/use_metadata_form';

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

@@ -8,7 +8,7 @@
  */
 
 import React, { useEffect, useState, useCallback } from 'react';
-import type { TagSelectorProps, SavedObjectsReference } from './services';
+import type { TagSelectorProps } from './services';
 
 const tagsList = ['id-1', 'id-2', 'id-3', 'id-4', 'id-5'];
 
@@ -46,19 +46,13 @@ export const TagSelector = ({ initialSelection, onTagsSelected }: TagSelectorPro
 };
 
 export interface TagListProps {
-  references?: SavedObjectsReference[];
+  tagIds: string[];
 }
 
-export const TagList = ({ references }: TagListProps) => {
-  if (!references) {
-    return null;
-  }
-
-  return (
-    <ul data-test-subj="tagList">
-      {references.map((tag) => (
-        <li key={tag.name}>{tag.name}</li>
-      ))}
-    </ul>
-  );
-};
+export const TagList = ({ tagIds }: TagListProps) => (
+  <ul data-test-subj="tagList">
+    {tagIds.map((id) => (
+      <li key={id}>{id}</li>
+    ))}
+  </ul>
+);

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

@@ -0,0 +1,106 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@kbn/react-query';
+import { UserProfilesProvider } from '@kbn/content-management-user-profiles';
+import type { ContentEditorKibanaDependencies, TagSelectorProps } from './services';
+import { ContentEditorKibanaProvider, useServices } from './services';
+
+type SavedObjectsTagging = NonNullable<ContentEditorKibanaDependencies['savedObjectsTagging']>;
+type PluginTagListProps = React.ComponentProps<SavedObjectsTagging['ui']['components']['TagList']>;
+
+const createCoreMock = (): ContentEditorKibanaDependencies['core'] =>
+  ({
+    analytics: {
+      reportEvent: jest.fn(),
+    },
+    i18n: {},
+    theme: {
+      theme$: {},
+    },
+    userProfile: {},
+    overlays: {
+      openSystemFlyout: jest.fn(() => ({
+        onClose: Promise.resolve(),
+        close: () => Promise.resolve(),
+      })),
+    },
+    notifications: {
+      toasts: {
+        addDanger: jest.fn(),
+      },
+    },
+    rendering: {
+      addContext: (element: React.ReactNode) => <>{element}</>,
+    },
+  } as unknown as ContentEditorKibanaDependencies['core']);
+
+const createWrapper = (
+  savedObjectsTagging: ContentEditorKibanaDependencies['savedObjectsTagging']
+) => {
+  const queryClient = new QueryClient();
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <UserProfilesProvider
+        bulkGetUserProfiles={jest.fn()}
+        getUserProfile={jest.fn()}
+        suggestUserProfiles={jest.fn()}
+      >
+        <ContentEditorKibanaProvider
+          core={createCoreMock()}
+          savedObjectsTagging={savedObjectsTagging}
+        >
+          {children}
+        </ContentEditorKibanaProvider>
+      </UserProfilesProvider>
+    </QueryClientProvider>
+  );
+};
+
+const TagListConsumer = ({ tagIds }: { tagIds: string[] }) => {
+  const { TagList } = useServices();
+
+  if (!TagList) {
+    return null;
+  }
+
+  return <TagList tagIds={tagIds} />;
+};
+
+describe('ContentEditorKibanaProvider', () => {
+  test('adapts tag IDs to saved object references for the plugin TagList', () => {
+    const PluginTagList = jest.fn<React.ReactElement | null, [PluginTagListProps]>(() => null);
+    const SavedObjectSaveModalTagSelector = jest.fn<React.ReactElement | null, [TagSelectorProps]>(
+      () => null
+    );
+
+    render(<TagListConsumer tagIds={['tag-1', 'tag-2']} />, {
+      wrapper: createWrapper({
+        ui: {
+          components: {
+            TagList: PluginTagList,
+            SavedObjectSaveModalTagSelector,
+          },
+        },
+      }),
+    });
+
+    expect(PluginTagList.mock.calls[0][0]).toEqual({
+      object: {
+        references: [
+          { id: 'tag-1', name: 'tag-tag-1', type: 'tag' },
+          { id: 'tag-2', name: 'tag-tag-2', type: 'tag' },
+        ],
+      },
+    });
+  });
+});

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

@@ -47,7 +47,7 @@ export interface Theme {
 export interface Services {
   openSystemFlyout(node: ReactNode, options?: OverlaySystemFlyoutOpenOptions): OverlayRef;
   notifyError: NotifyFn;
-  TagList?: FC<{ references: SavedObjectsReference[] }>;
+  TagList?: FC<{ tagIds: string[] }>;
   TagSelector?: React.FC<TagSelectorProps>;
 }
 
@@ -133,11 +133,12 @@ export const ContentEditorKibanaProvider: FC<
   const { openSystemFlyout: coreOpenFlyout } = overlays;
 
   const TagList = useMemo(() => {
-    const Comp: Services['TagList'] = ({ references }) => {
+    const Comp: Services['TagList'] = ({ tagIds }) => {
       if (!savedObjectsTagging?.ui.components.TagList) {
         return null;
       }
       const PluginTagList = savedObjectsTagging.ui.components.TagList;
+      const references = tagIds.map((id) => ({ type: 'tag', id, name: `tag-${id}` }));
       return <PluginTagList object={{ references }} />;
     };
 

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

@@ -7,13 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { SavedObjectsReference } from './services';
-
 export interface Item {
   id: string;
   title: string;
   description?: string;
-  tags: SavedObjectsReference[];
+  tags: string[];
 
   createdAt?: string;
   createdBy?: string;