[ContentEditor] Replace "Inspector" with "ContentEditor" (#147606)

elastic · Dec 16, 2022 · b052917 · b052917
1 parent d14bf59
commit b052917
Show file tree

Hide file tree

Showing 38 changed files with 155 additions and 163 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -695,7 +695,7 @@ packages/analytics/shippers/elastic_v3/common @elastic/kibana-core
 packages/analytics/shippers/elastic_v3/server @elastic/kibana-core
 packages/analytics/shippers/fullstory @elastic/kibana-core
 packages/analytics/shippers/gainsight @elastic/kibana-core
-packages/content-management/inspector @elastic/kibana-global-experience
+packages/content-management/content_editor @elastic/kibana-global-experience
 packages/content-management/table_list @elastic/kibana-global-experience
 packages/core/analytics/core-analytics-browser @elastic/kibana-core
 packages/core/analytics/core-analytics-browser-internal @elastic/kibana-core

diff --git a/package.json b/package.json
@@ -147,7 +147,7 @@
     "@kbn/config": "link:bazel-bin/packages/kbn-config",
     "@kbn/config-mocks": "link:bazel-bin/packages/kbn-config-mocks",
     "@kbn/config-schema": "link:bazel-bin/packages/kbn-config-schema",
-    "@kbn/content-management-inspector": "link:bazel-bin/packages/content-management/inspector",
+    "@kbn/content-management-content-editor": "link:bazel-bin/packages/content-management/content_editor",
     "@kbn/content-management-table-list": "link:bazel-bin/packages/content-management/table_list",
     "@kbn/core-analytics-browser": "link:bazel-bin/packages/core/analytics/core-analytics-browser",
     "@kbn/core-analytics-browser-internal": "link:bazel-bin/packages/core/analytics/core-analytics-browser-internal",

diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
@@ -15,7 +15,7 @@ filegroup(
     "//packages/analytics/shippers/elastic_v3/server:build",
     "//packages/analytics/shippers/fullstory:build",
     "//packages/analytics/shippers/gainsight:build",
-    "//packages/content-management/inspector:build",
+    "//packages/content-management/content_editor:build",
     "//packages/content-management/table_list:build",
     "//packages/core/analytics/core-analytics-browser:build",
     "//packages/core/analytics/core-analytics-browser-internal:build",
@@ -392,7 +392,7 @@ filegroup(
     "//packages/analytics/shippers/elastic_v3/server:build_types",
     "//packages/analytics/shippers/fullstory:build_types",
     "//packages/analytics/shippers/gainsight:build_types",
-    "//packages/content-management/inspector:build_types",
+    "//packages/content-management/content_editor:build_types",
     "//packages/content-management/table_list:build_types",
     "//packages/core/analytics/core-analytics-browser:build_types",
     "//packages/core/analytics/core-analytics-browser-internal:build_types",

diff --git a/.../content-management/inspector/BUILD.bazel → ...ent-management/content_editor/BUILD.bazel b/.../content-management/inspector/BUILD.bazel → ...ent-management/content_editor/BUILD.bazel
@@ -2,8 +2,8 @@ load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
 load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
 
-PKG_DIRNAME = "inspector"
-PKG_REQUIRE_NAME = "@kbn/content-management-inspector"
+PKG_DIRNAME = "content_editor"
+PKG_REQUIRE_NAME = "@kbn/content-management-content-editor"
 
 SOURCE_FILES = glob(
   [

diff --git a/packages/content-management/content_editor/README.md b/packages/content-management/content_editor/README.md
@@ -0,0 +1,7 @@
+# @kbn/content-management-content-editor
+
+# Content editor component
+
+## API
+
+TODO: https://github.com/elastic/kibana/issues/144402
diff --git a/...ges/content-management/inspector/index.ts → ...ontent-management/content_editor/index.ts b/...ges/content-management/inspector/index.ts → ...ontent-management/content_editor/index.ts
@@ -6,5 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { InspectorProvider, InspectorKibanaProvider, useOpenInspector } from './src';
-export type { OpenInspectorParams } from './src';
+export { ContentEditorProvider, ContentEditorKibanaProvider, useOpenContentEditor } from './src';
+export type { OpenContentEditorParams } from './src';
diff --git a/...ntent-management/inspector/jest.config.js → ...-management/content_editor/jest.config.js b/...ntent-management/inspector/jest.config.js → ...-management/content_editor/jest.config.js
@@ -9,5 +9,5 @@
 module.exports = {
   preset: '@kbn/test',
   rootDir: '../../..',
-  roots: ['<rootDir>/packages/content-management/inspector'],
+  roots: ['<rootDir>/packages/content-management/content_editor'],
 };
diff --git a/...content-management/inspector/kibana.jsonc → ...nt-management/content_editor/kibana.jsonc b/...content-management/inspector/kibana.jsonc → ...nt-management/content_editor/kibana.jsonc
@@ -1,6 +1,6 @@
 {
   "type": "shared-common",
-  "id": "@kbn/content-management-inspector",
+  "id": "@kbn/content-management-content-editor",
   "owner": "@elastic/kibana-global-experience",
   "runtimeDeps": [],
   "typeDeps": [],

diff --git a/...content-management/inspector/package.json → ...nt-management/content_editor/package.json b/...content-management/inspector/package.json → ...nt-management/content_editor/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@kbn/content-management-inspector",
+  "name": "@kbn/content-management-content-editor",
   "private": true,
   "version": "1.0.0",
   "main": "./target_node/index.js",

diff --git a/...anagement/inspector/src/__jest__/index.ts → ...ment/content_editor/src/__jest__/index.ts b/...anagement/inspector/src/__jest__/index.ts → ...ment/content_editor/src/__jest__/index.ts
diff --git a/.../inspector/src/__jest__/tests.helpers.tsx → ...ent_editor/src/__jest__/tests.helpers.tsx b/.../inspector/src/__jest__/tests.helpers.tsx → ...ent_editor/src/__jest__/tests.helpers.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import type { ComponentType } from 'react';
 
 import { TagSelector, TagList } from '../mocks';
-import { InspectorProvider } from '../services';
+import { ContentEditorProvider } from '../services';
 import type { Services } from '../services';
 
 export const getMockServices = (overrides?: Partial<Services>) => {
@@ -31,9 +31,9 @@ export function WithServices<P>(Comp: ComponentType<P>, overrides: Partial<Servi
   return (props: P) => {
     const services = getMockServices(overrides);
     return (
-      <InspectorProvider {...services}>
+      <ContentEditorProvider {...services}>
         <Comp {...props} />
-      </InspectorProvider>
+      </ContentEditorProvider>
     );
   };
 }
diff --git a/...c/components/inspector_flyout_content.tsx → .../src/components/editor_flyout_content.tsx b/...c/components/inspector_flyout_content.tsx → .../src/components/editor_flyout_content.tsx
@@ -30,16 +30,13 @@ import { useMetadataForm } from './use_metadata_form';
 import type { CustomValidators } from './use_metadata_form';
 
 const getI18nTexts = ({ entityName }: { entityName: string }) => ({
-  title: i18n.translate('contentManagement.inspector.flyoutTitle', {
-    defaultMessage: 'Inspector',
-  }),
-  saveButtonLabel: i18n.translate('contentManagement.inspector.saveButtonLabel', {
+  saveButtonLabel: i18n.translate('contentManagement.contentEditor.saveButtonLabel', {
     defaultMessage: 'Update {entityName}',
     values: {
       entityName,
     },
   }),
-  cancelButtonLabel: i18n.translate('contentManagement.inspector.cancelButtonLabel', {
+  cancelButtonLabel: i18n.translate('contentManagement.contentEditor.cancelButtonLabel', {
     defaultMessage: 'Cancel',
   }),
 });
@@ -59,7 +56,9 @@ export interface Props {
   onCancel: () => void;
 }
 
-export const InspectorFlyoutContent: FC<Props> = ({
+const capitalize = (str: string) => `${str.charAt(0).toLocaleUpperCase()}${str.substring(1)}`;
+
+export const ContentEditorFlyoutContent: FC<Props> = ({
   item,
   entityName,
   isReadonly = true,
@@ -113,13 +112,22 @@ export const InspectorFlyoutContent: FC<Props> = ({
     margin-right: ${euiTheme.size.m};
   `;
 
+  const title = capitalize(
+    i18n.translate('contentManagement.contentEditor.flyoutTitle', {
+      defaultMessage: '{entityName} details',
+      values: {
+        entityName,
+      },
+    })
+  );
+
   return (
     <>
       <EuiFlyoutHeader>
         <EuiTitle data-test-subj="flyoutTitle">
           <h2>
             <EuiIcon type="inspect" css={iconCSS} size="l" />
-            <span>{i18nTexts.title}</span>
+            <span>{title}</span>
           </h2>
         </EuiTitle>
       </EuiFlyoutHeader>

diff --git a/...ts/inspector_flyout_content_container.tsx → ...nents/editor_flyout_content_container.tsx b/...ts/inspector_flyout_content_container.tsx → ...nents/editor_flyout_content_container.tsx
@@ -8,16 +8,16 @@
 import React from 'react';
 import type { FC } from 'react';
 
-import { InspectorFlyoutContent } from './inspector_flyout_content';
-import type { Props as InspectorFlyoutContentProps } from './inspector_flyout_content';
+import { ContentEditorFlyoutContent } from './editor_flyout_content';
+import type { Props as ContentEditorFlyoutContentProps } from './editor_flyout_content';
 
 type CommonProps = Pick<
-  InspectorFlyoutContentProps,
+  ContentEditorFlyoutContentProps,
   'item' | 'isReadonly' | 'services' | 'onSave' | 'onCancel' | 'entityName' | 'customValidators'
 >;
 
 export type Props = CommonProps;
 
-export const InspectorFlyoutContentContainer: FC<Props> = (props) => {
-  return <InspectorFlyoutContent {...props} />;
+export const ContentEditorFlyoutContentContainer: FC<Props> = (props) => {
+  return <ContentEditorFlyoutContent {...props} />;
 };
diff --git a/.../components/inspector_flyout_warnings.tsx → ...src/components/editor_flyout_warnings.tsx b/.../components/inspector_flyout_warnings.tsx → ...src/components/editor_flyout_warnings.tsx
@@ -11,12 +11,12 @@ import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 const getI18nTexts = () => ({
-  title: i18n.translate('contentManagement.inspector.flyoutWarningsTitle', {
+  title: i18n.translate('contentManagement.contentEditor.flyoutWarningsTitle', {
     defaultMessage: 'Proceed with caution!',
   }),
 });
 
-export const InspectorFlyoutWarningsCallOut = ({
+export const ContentEditorFlyoutWarningsCallOut = ({
   warningMessages,
 }: {
   warningMessages?: string[];

diff --git a/...ector/src/components/inspector_loader.tsx → ...t_editor/src/components/editor_loader.tsx b/...ector/src/components/inspector_loader.tsx → ...t_editor/src/components/editor_loader.tsx
@@ -9,16 +9,16 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { EuiFlyoutHeader, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
 
-import type { Props } from './inspector_flyout_content_container';
+import type { Props } from './editor_flyout_content_container';
 
-export const InspectorLoader: React.FC<Props> = (props) => {
+export const ContentEditorLoader: React.FC<Props> = (props) => {
   const [Editor, setEditor] = useState<React.ComponentType<Props> | null>(null);
 
   const loadEditor = useCallback(async () => {
-    const { InspectorFlyoutContentContainer } = await import(
-      './inspector_flyout_content_container'
+    const { ContentEditorFlyoutContentContainer } = await import(
+      './editor_flyout_content_container'
     );
-    setEditor(() => InspectorFlyoutContentContainer);
+    setEditor(() => ContentEditorFlyoutContentContainer);
   }, []);
 
   useEffect(() => {

diff --git a/...agement/inspector/src/components/index.ts → ...nt/content_editor/src/components/index.ts b/...agement/inspector/src/components/index.ts → ...nt/content_editor/src/components/index.ts
@@ -6,5 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { InspectorLoader } from './inspector_loader';
-export type { Props as InspectorFlyoutContentContainerProps } from './inspector_flyout_content_container';
+export { ContentEditorLoader } from './editor_loader';
+export type { Props as ContentEditorFlyoutContentContainerProps } from './editor_flyout_content_container';
diff --git a/...ponents/inspector_flyout_content.test.tsx → ...ponents/inspector_flyout_content.test.tsx b/...ponents/inspector_flyout_content.test.tsx → ...ponents/inspector_flyout_content.test.tsx
@@ -11,10 +11,10 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { registerTestBed } from '@kbn/test-jest-helpers';
 import type { TestBed } from '@kbn/test-jest-helpers';
 import { getMockServices } from '../__jest__';
-import { InspectorFlyoutContent } from './inspector_flyout_content';
-import type { Props as InspectorFlyoutContentProps } from './inspector_flyout_content';
+import { ContentEditorFlyoutContent } from './editor_flyout_content';
+import type { Props as ContentEditorFlyoutContentProps } from './editor_flyout_content';
 
-describe('<InspectorFlyoutContent />', () => {
+describe('<ContentEditorFlyoutContent />', () => {
   beforeAll(() => {
     jest.useFakeTimers();
   });
@@ -26,7 +26,7 @@ describe('<InspectorFlyoutContent />', () => {
   describe('metadata', () => {
     let testBed: TestBed;
 
-    const savedObjectItem: InspectorFlyoutContentProps['item'] = {
+    const savedObjectItem: ContentEditorFlyoutContentProps['item'] = {
       id: '123',
       title: 'Foo',
       description: 'Some description',
@@ -38,29 +38,33 @@ describe('<InspectorFlyoutContent />', () => {
 
     const mockedServices = getMockServices();
 
-    const defaultProps: InspectorFlyoutContentProps = {
+    const defaultProps: ContentEditorFlyoutContentProps = {
       item: savedObjectItem,
       entityName: 'foo',
       services: mockedServices,
       onCancel: jest.fn(),
     };
 
-    const setup = registerTestBed<string, InspectorFlyoutContentProps>(InspectorFlyoutContent, {
-      memoryRouter: { wrapComponent: false },
-      defaultProps,
-    });
+    const setup = registerTestBed<string, ContentEditorFlyoutContentProps>(
+      ContentEditorFlyoutContent,
+      {
+        memoryRouter: { wrapComponent: false },
+        defaultProps,
+      }
+    );
 
-    const waitForValidationResults = async () =>
-      await act(() => {
+    const waitForValidationResults = async () => {
+      await act(async () => {
         jest.advanceTimersByTime(550); // There is a 500ms delay to display input errors + async validation
       });
+    };
 
     test('should set the correct flyout title', async () => {
       await act(async () => {
         testBed = await setup();
       });
       const { find } = testBed!;
-      expect(find('flyoutTitle').text()).toBe('Inspector');
+      expect(find('flyoutTitle').text()).toBe('Foo details');
     });
 
     test('should render the form with the provided item', async () => {

diff --git a/...nspector/src/components/metadata_form.tsx → ...t_editor/src/components/metadata_form.tsx b/...nspector/src/components/metadata_form.tsx → ...t_editor/src/components/metadata_form.tsx
@@ -11,7 +11,7 @@ import type { FC } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiForm, EuiFormRow, EuiFieldText, EuiTextArea, EuiSpacer } from '@elastic/eui';
 
-import { InspectorFlyoutWarningsCallOut } from './inspector_flyout_warnings';
+import { ContentEditorFlyoutWarningsCallOut } from './editor_flyout_warnings';
 import type { MetadataFormState, Field } from './use_metadata_form';
 import type { SavedObjectsReference, Services } from '../services';
 
@@ -49,10 +49,10 @@ export const MetadataForm: FC<Props> = ({
 
   return (
     <EuiForm isInvalid={isSubmitted && !isValid} error={getErrors()} data-test-subj="metadataForm">
-      <InspectorFlyoutWarningsCallOut warningMessages={getWarnings()} />
+      <ContentEditorFlyoutWarningsCallOut warningMessages={getWarnings()} />
 
       <EuiFormRow
-        label={i18n.translate('contentManagement.inspector.metadataForm.nameInputLabel', {
+        label={i18n.translate('contentManagement.contentEditor.metadataForm.nameInputLabel', {
           defaultMessage: 'Name',
         })}
         error={title.errors}
@@ -74,9 +74,12 @@ export const MetadataForm: FC<Props> = ({
       <EuiSpacer />
 
       <EuiFormRow
-        label={i18n.translate('contentManagement.inspector.metadataForm.descriptionInputLabel', {
-          defaultMessage: 'Description',
-        })}
+        label={i18n.translate(
+          'contentManagement.contentEditor.metadataForm.descriptionInputLabel',
+          {
+            defaultMessage: 'Description',
+          }
+        )}
         error={description.errors}
         isInvalid={!isFormFieldValid(description)}
         fullWidth
@@ -97,7 +100,7 @@ export const MetadataForm: FC<Props> = ({
         <>
           <EuiSpacer />
           <EuiFormRow
-            label={i18n.translate('contentManagement.inspector.metadataForm.tagsLabel', {
+            label={i18n.translate('contentManagement.contentEditor.metadataForm.tagsLabel', {
               defaultMessage: 'Tags',
             })}
             fullWidth

diff --git a/...ector/src/components/use_metadata_form.ts → ...ditor/src/components/use_metadata_form.ts b/...ector/src/components/use_metadata_form.ts → ...ditor/src/components/use_metadata_form.ts
@@ -47,7 +47,7 @@ const basicValidators: BasicValidators = {
       type: 'error',
       fn: (value) => {
         if (!value || !value.trim()) {
-          return i18n.translate('contentManagement.inspector.metadataForm.nameIsEmptyError', {
+          return i18n.translate('contentManagement.contentEditor.metadataForm.nameIsEmptyError', {
             defaultMessage: 'A name is required.',
           });
         }

diff --git a/...content-management/inspector/src/index.ts → ...nt-management/content_editor/src/index.ts b/...content-management/inspector/src/index.ts → ...nt-management/content_editor/src/index.ts
@@ -6,6 +6,6 @@
  * Side Public License, v 1.
  */
 
-export { InspectorProvider, InspectorKibanaProvider } from './services';
-export { useOpenInspector } from './open_inspector';
-export type { OpenInspectorParams } from './open_inspector';
+export { ContentEditorProvider, ContentEditorKibanaProvider } from './services';
+export { useOpenContentEditor } from './open_content_editor';
+export type { OpenContentEditorParams } from './open_content_editor';
diff --git a/...ontent-management/inspector/src/mocks.tsx → ...t-management/content_editor/src/mocks.tsx b/...ontent-management/inspector/src/mocks.tsx → ...t-management/content_editor/src/mocks.tsx
diff --git a/...ent/inspector/src/open_inspector.test.tsx → ...t_editor/src/open_content_editor.test.tsx b/...ent/inspector/src/open_inspector.test.tsx → ...t_editor/src/open_content_editor.test.tsx
@@ -11,20 +11,20 @@ import { registerTestBed } from '@kbn/test-jest-helpers';
 import { WithServices, getMockServices } from './__jest__';
 import type { Services } from './services';
 import type { Item } from './types';
-import { InspectorLoader } from './components';
-import { useOpenInspector } from './open_inspector';
+import { ContentEditorLoader } from './components';
+import { useOpenContentEditor } from './open_content_editor';
 
-describe('useOpenInspector() hook', () => {
+describe('useOpenContentEditor() hook', () => {
   const savedObjectItem: Item = { id: 'id', title: 'Foo', tags: [] };
 
   const TestComp = () => {
-    const openInspector = useOpenInspector();
+    const openContentEditor = useOpenContentEditor();
     return (
       <button
         onClick={() => {
-          openInspector({ item: savedObjectItem, entityName: 'Foo' });
+          openContentEditor({ item: savedObjectItem, entityName: 'Foo' });
         }}
-        data-test-subj="openInspectorButton"
+        data-test-subj="openContentEditorButton"
       >
         Open inspector
       </button>
@@ -41,11 +41,11 @@ describe('useOpenInspector() hook', () => {
   test('should call the "openFlyout" provided', () => {
     const { find } = setup();
 
-    find('openInspectorButton').simulate('click');
+    find('openContentEditorButton').simulate('click');
 
     expect(openFlyout).toHaveBeenCalled();
     const args = openFlyout.mock.calls[0][0] as any;
-    expect(args?.type).toBe(InspectorLoader);
+    expect(args?.type).toBe(ContentEditorLoader);
     expect(args?.props.item).toBe(savedObjectItem);
     expect(args?.props.services).toEqual(mockedServices);
   });