[Index patterns] Field editor example app

examples/index_pattern_field_editor_example/README.md

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

examples/index_pattern_field_editor_example/kibana.json

@@ -0,0 +1,10 @@
+{
+ "id": "indexPatternFieldEditorExample",
+ "version": "0.0.1",
+ "kibanaVersion": "kibana",
+ "server": false,
+ "ui": true,
+ "requiredPlugins": ["data", "indexPatternFieldEditor", "developerExamples"],
+ "optionalPlugins": [],
+ "requiredBundles": []
+}

examples/index_pattern_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/index_pattern_field_editor/public';
+
+interface Props {
+ indexPattern?: IndexPattern;
+ indexPatternFieldEditor: IndexPatternFieldEditorStart;
+}
+
+const IndexPatternFieldEditorExample = ({ indexPattern, indexPatternFieldEditor }: 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) =>
+ indexPatternFieldEditor.openEditor({
+ ctx: { indexPattern: 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) =>
+ indexPatternFieldEditor.openDeleteModal({
+ fieldName: fld.name,
+ ctx: {
+ indexPattern: indexPattern!,
+ },
+ onDelete: refreshFields,
+ }),
+ },
+ ] as Array<DefaultItemAction<IndexPatternField>>,
+ },
+ ];
+
+ const content = indexPattern ? (
+ <>
+ <EuiText data-test-subj="indexPatternTitle">Index pattern: {indexPattern?.title}</EuiText>
+ <div>
+ <EuiButton
+ onClick={() =>
+ indexPatternFieldEditor.openEditor({
+ ctx: { indexPattern: 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;
+ indexPatternFieldEditor: IndexPatternFieldEditorStart;
+}
+
+export const renderApp = async (
+ { data, indexPatternFieldEditor }: RenderAppDependencies,
+ { element }: AppMountParameters
+) => {
+ const indexPattern = (await data.indexPatterns.getDefault()) || undefined;
+ ReactDOM.render(
+ <IndexPatternFieldEditorExample
+ indexPattern={indexPattern}
+ indexPatternFieldEditor={indexPatternFieldEditor}
+ />,
+ element
+ );
+
+ return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/index_pattern_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/index_pattern_field_editor_example/public/plugin.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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/index_pattern_field_editor/public';
+
+interface StartDeps {
+ data: DataPublicPluginStart;
+ indexPatternFieldEditor: 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/master/src/plugins/index_pattern_field_editor/README.md',
+ iconType: 'logoGithub',
+ size: 's',
+ target: '_blank',
+ },
+ ],
+ });
+ }
+
+ public start() {}
+
+ public stop() {}
+}

examples/index_pattern_field_editor_example/tsconfig.json

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

test/examples/config.js

@@ -28,6 +28,7 @@ export default async function ({ readConfigFile }) {
  require.resolve('./state_sync'),
  require.resolve('./routing'),
  require.resolve('./expressions_explorer'),
+ require.resolve('./index_pattern_field_editor_example'),
  ],
  services: {
  ...functionalConfig.get('services'),
@@ -48,7 +49,7 @@ export default async function ({ readConfigFile }) {
  },
  apps: functionalConfig.get('apps'),
  esArchiver: {
- directory: path.resolve(__dirname, '../es_archives'),
+ directory: path.resolve(__dirname, '../functional/fixtures/es_archiver'),
  },
  screenshots: functionalConfig.get('screenshots'),
  junit: {

test/examples/embeddables/dashboard.ts

@@ -101,8 +101,8 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
  describe('dashboard container', () => {
  before(async () => {
- await esArchiver.loadIfNeeded('../functional/fixtures/es_archiver/dashboard/current/data');
- await esArchiver.loadIfNeeded('../functional/fixtures/es_archiver/dashboard/current/kibana');
+ await esArchiver.loadIfNeeded('dashboard/current/data');
+ await esArchiver.loadIfNeeded('dashboard/current/kibana');
  await PageObjects.common.navigateToApp('dashboardEmbeddableExamples');
  await testSubjects.click('dashboardEmbeddableByValue');
  await updateInput(JSON.stringify(testDashboardInput, null, 4));

test/examples/index_pattern_field_editor_example/index.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({
+ getService,
+ getPageObjects,
+ loadTestFile,
+}: PluginFunctionalProviderContext) {
+ const browser = getService('browser');
+ const es = getService('es');
+ const PageObjects = getPageObjects(['common', 'header', 'settings']);
+
+ describe('index pattern field editor example', function () {
+ this.tags('ciGroup2');
+ before(async () => {
+ await browser.setWindowSize(1300, 900);
+ await es.transport.request({
+ path: '/blogs/_doc',
+ method: 'POST',
+ body: { user: 'matt', message: 20 },
+ });
+
+ await PageObjects.settings.navigateTo();
+ await PageObjects.settings.createIndexPattern('blogs', null);
+ await PageObjects.common.navigateToApp('indexPatternFieldEditorExample');
+ });
+
+ loadTestFile(require.resolve('./index_pattern_field_editor_example'));
+ });
+}

test/examples/index_pattern_field_editor_example/index_pattern_field_editor_example.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService }: PluginFunctionalProviderContext) {
+ const testSubjects = getService('testSubjects');
+
+ describe('', () => {
+ it('finds an index pattern', async () => {
+ await testSubjects.existOrFail('indexPatternTitle');
+ });
+ it('opens the field editor', async () => {
+ await testSubjects.click('addField');
+ await testSubjects.existOrFail('flyoutTitle');
+ });
+ });
+}