IndexPatternFieldEditor => DataViewFieldEditor (#119261)

* rename indexPatternFieldEditor

examples/data_view_field_editor_example/README.md

@@ -0,0 +1,7 @@
+## Data view field editor example
+
+This example data view field editor app shows how to:
+ - Edit data view fields via flyout
+ - Delete data view runtime fields with modal confirm prompt
+
+To run this example, use the command `yarn start --run-examples`.

examples/data_view_field_editor_example/kibana.json

@@ -0,0 +1,15 @@
+{
+  "id": "dataViewFieldEditorExample",
+  "kibanaVersion": "kibana",
+  "version": "0.0.1",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["data", "dataViewFieldEditor", "developerExamples"],
+  "optionalPlugins": [],
+  "requiredBundles": [],
+  "owner": {
+    "name": "App Services",
+    "githubTeam": "kibana-app-services"
+  },
+  "description": "Data view field editor example app"
+}

examples/data_view_field_editor_example/public/app.tsx

@@ -0,0 +1,145 @@
+/*
+ * 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, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import {
+  EuiPage,
+  EuiPageHeader,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiText,
+  DefaultItemAction,
+} from '@elastic/eui';
+import { AppMountParameters } from '../../../src/core/public';
+import {
+  DataPublicPluginStart,
+  IndexPattern,
+  IndexPatternField,
+} from '../../../src/plugins/data/public';
+import { IndexPatternFieldEditorStart } from '../../../src/plugins/data_view_field_editor/public';
+
+interface Props {
+  indexPattern?: IndexPattern;
+  dataViewFieldEditor: IndexPatternFieldEditorStart;
+}
+
+const IndexPatternFieldEditorExample = ({ indexPattern, dataViewFieldEditor }: Props) => {
+  const [fields, setFields] = useState<IndexPatternField[]>(
+    indexPattern?.getNonScriptedFields() || []
+  );
+  const refreshFields = () => setFields(indexPattern?.getNonScriptedFields() || []);
+  const columns = [
+    {
+      field: 'name',
+      name: 'Field name',
+    },
+    {
+      name: 'Actions',
+      actions: [
+        {
+          name: 'Edit',
+          description: 'Edit this field',
+          icon: 'pencil',
+          type: 'icon',
+          'data-test-subj': 'editField',
+          onClick: (fld: IndexPatternField) =>
+            dataViewFieldEditor.openEditor({
+              ctx: { dataView: indexPattern! },
+              fieldName: fld.name,
+              onSave: refreshFields,
+            }),
+        },
+        {
+          name: 'Delete',
+          description: 'Delete this field',
+          icon: 'trash',
+          type: 'icon',
+          'data-test-subj': 'deleteField',
+          available: (fld) => !!fld.runtimeField,
+          onClick: (fld: IndexPatternField) =>
+            dataViewFieldEditor.openDeleteModal({
+              fieldName: fld.name,
+              ctx: {
+                dataView: indexPattern!,
+              },
+              onDelete: refreshFields,
+            }),
+        },
+      ] as Array<DefaultItemAction<IndexPatternField>>,
+    },
+  ];
+
+  const content = indexPattern ? (
+    <>
+      <EuiText data-test-subj="indexPatternTitle">Index pattern: {indexPattern?.title}</EuiText>
+      <div>
+        <EuiButton
+          onClick={() =>
+            dataViewFieldEditor.openEditor({
+              ctx: { dataView: indexPattern! },
+              onSave: refreshFields,
+            })
+          }
+          data-test-subj="addField"
+        >
+          Add field
+        </EuiButton>
+      </div>
+      <EuiInMemoryTable<IndexPatternField>
+        items={fields}
+        columns={columns}
+        pagination={true}
+        hasActions={true}
+        sorting={{
+          sort: {
+            field: 'name',
+            direction: 'asc',
+          },
+        }}
+      />
+    </>
+  ) : (
+    <p>Please create an index pattern</p>
+  );
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageHeader>Index pattern field editor demo</EuiPageHeader>
+        <EuiPageContent>
+          <EuiPageContentBody>{content}</EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+};
+
+interface RenderAppDependencies {
+  data: DataPublicPluginStart;
+  dataViewFieldEditor: IndexPatternFieldEditorStart;
+}
+
+export const renderApp = async (
+  { data, dataViewFieldEditor }: RenderAppDependencies,
+  { element }: AppMountParameters
+) => {
+  const indexPattern = (await data.indexPatterns.getDefault()) || undefined;
+  ReactDOM.render(
+    <IndexPatternFieldEditorExample
+      indexPattern={indexPattern}
+      dataViewFieldEditor={dataViewFieldEditor}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/data_view_field_editor_example/public/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { IndexPatternFieldEditorPlugin } from './plugin';
+
+export const plugin = () => new IndexPatternFieldEditorPlugin();

examples/data_view_field_editor_example/public/plugin.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { Plugin, CoreSetup, AppMountParameters, AppNavLinkStatus } from '../../../src/core/public';
+import { DeveloperExamplesSetup } from '../../developer_examples/public';
+import { DataPublicPluginStart } from '../../../src/plugins/data/public';
+import { IndexPatternFieldEditorStart } from '../../../src/plugins/data_view_field_editor/public';
+
+interface StartDeps {
+  data: DataPublicPluginStart;
+  dataViewFieldEditor: IndexPatternFieldEditorStart;
+}
+
+interface SetupDeps {
+  developerExamples: DeveloperExamplesSetup;
+}
+
+export class IndexPatternFieldEditorPlugin implements Plugin<void, void, SetupDeps, StartDeps> {
+  public setup(core: CoreSetup<StartDeps>, deps: SetupDeps) {
+    core.application.register({
+      id: 'indexPatternFieldEditorExample',
+      title: 'Index pattern field editor example',
+      navLinkStatus: AppNavLinkStatus.hidden,
+      async mount(params: AppMountParameters) {
+        const [, depsStart] = await core.getStartServices();
+        const { renderApp } = await import('./app');
+        return renderApp(depsStart, params);
+      },
+    });
+
+    deps.developerExamples.register({
+      appId: 'indexPatternFieldEditorExample',
+      title: 'Index pattern field editor',
+      description: `IndexPatternFieldEditor provides a UI for editing index pattern fields directly from Kibana apps.  This example plugin demonstrates integration.`,
+      links: [
+        {
+          label: 'README',
+          href: 'https://github.com/elastic/kibana/blob/main/src/plugins/index_pattern_field_editor/README.md',
+          iconType: 'logoGithub',
+          size: 's',
+          target: '_blank',
+        },
+      ],
+    });
+  }
+
+  public start() {}
+
+  public stop() {}
+}

examples/data_view_field_editor_example/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target/types"
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "../../typings/**/*",
+  ],
+  "exclude": [],
+  "references": [
+    { "path": "../../src/core/tsconfig.json" },
+    { "path": "../../src/plugins/kibana_react/tsconfig.json" },
+    { "path": "../../src/plugins/data/tsconfig.json" },
+    { "path": "../../src/plugins/data_view_field_editor/tsconfig.json" },
+    { "path": "../developer_examples/tsconfig.json" },
+  ]
+}