ability to set human readable title of data view & ability to edit data view

src/plugins/data_view_editor/README.md

@@ -1,6 +1,6 @@
 # Data view editor
 
-Create data views from within Kibana apps. 
+Create data views from within Kibana apps.
 
 ## How to use
 
@@ -10,11 +10,11 @@ You will then receive in the start contract of the dataViewEditor plugin the fol
 
 ### `userPermissions.editDataView(): boolean`
 
-Convenience method that uses the `core.application.capabilities` api to determine whether the user can create or edit the data view. 
+Convenience method that uses the `core.application.capabilities` api to determine whether the user can create or edit the data view.
 
 ### `openEditor(options: DataViewEditorProps): CloseEditor`
 
-Use this method to display the data view editor to create an index pattern.  
+Use this method to display the data view editor to create a data view.
 
 #### `options`
 
@@ -34,6 +34,10 @@ The default index pattern type can be optionally specified as `rollup`.
 
 The editor can require a timestamp field on the index pattern.
 
+`editData: DataView` (optional)
+
+Data View object passed to edit an existing Data View.
+
 ### IndexPatternEditorComponent
 
 This the React component interface equivalent to `openEditor`. It takes the same arguments -
@@ -44,5 +48,6 @@ This the React component interface equivalent to `openEditor`. It takes the same
   onCancel={...}
   defaultTypeIsRollup={false}
   requireTimestampField={false}
+  editData={...}
 />
 ```

src/plugins/data_view_editor/public/components/confirm_modals/edit_data_view_changed_modal.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { EuiCallOut, EuiSpacer, EuiConfirmModal, EuiFieldText, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const geti18nTexts = (dataViewName?: string) => ({
+  cancelButtonText: i18n.translate(
+    'indexPatternEditor.editDataView.editConfirmationModal.cancelButtonLabel',
+    {
+      defaultMessage: 'Cancel',
+    }
+  ),
+  confirmButtonText: i18n.translate(
+    'indexPatternEditor.editDataView.editConfirmationModal.saveButtonLabel',
+    {
+      defaultMessage: 'Save',
+    }
+  ),
+  warningEditingDataView: i18n.translate(
+    'indexPatternEditor.editDataView.editConfirmationModal.warningEditingDataView',
+    {
+      defaultMessage:
+        'Are you sure you want to edit this data view? Anything that depends upon this might not work as expected.',
+    }
+  ),
+  typeConfirm: i18n.translate('indexPatternEditor.editDataView.editConfirmationModal.typeConfirm', {
+    defaultMessage: 'Enter CHANGE to continue',
+  }),
+  titleConfirmChanges: i18n.translate(
+    'indexPatternEditor.editDataView.editConfirmationModal.title',
+    {
+      defaultMessage: `Edit {name}`,
+      values: {
+        name: dataViewName ? `'${dataViewName}'` : 'data view',
+      },
+    }
+  ),
+});
+
+interface Props {
+  dataViewName?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const EditDataViewChangedModal: React.FC<Props> = ({
+  dataViewName,
+  onCancel,
+  onConfirm,
+}) => {
+  const i18nTexts = geti18nTexts(dataViewName);
+  const [confirmContent, setConfirmContent] = useState<string>('');
+
+  return (
+    <EuiConfirmModal
+      title={i18nTexts.titleConfirmChanges}
+      data-test-subj="runtimeFieldSaveConfirmModal"
+      cancelButtonText={i18nTexts.cancelButtonText}
+      confirmButtonText={i18nTexts.confirmButtonText}
+      confirmButtonDisabled={confirmContent?.toUpperCase() !== 'CHANGE'}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    >
+      <EuiCallOut
+        color="warning"
+        title={i18nTexts.warningEditingDataView}
+        iconType="alert"
+        size="s"
+        data-test-subj="editDataViewWarning"
+      />
+      <EuiSpacer />
+      <EuiFormRow label={i18nTexts.typeConfirm}>
+        <EuiFieldText
+          value={confirmContent}
+          onChange={(e) => setConfirmContent(e.target.value)}
+          data-test-subj="saveModalConfirmText"
+        />
+      </EuiFormRow>
+    </EuiConfirmModal>
+  );
+};

src/plugins/data_view_editor/public/components/data_view_editor.tsx

@@ -23,6 +23,7 @@ export const DataViewEditor = ({
   services,
   defaultTypeIsRollup = false,
   requireTimestampField = false,
+  editData,
 }: DataViewEditorPropsWithServices) => {
   const { Provider: KibanaReactContextProvider } =
     createKibanaReactContext<DataViewEditorContext>(services);
@@ -35,6 +36,7 @@ export const DataViewEditor = ({
           onCancel={onCancel}
           defaultTypeIsRollup={defaultTypeIsRollup}
           requireTimestampField={requireTimestampField}
+          editData={editData}
         />
       </EuiFlyout>
     </KibanaReactContextProvider>

src/plugins/data_view_editor/public/components/data_view_editor_flyout_content.tsx

@@ -13,6 +13,7 @@ import memoizeOne from 'memoize-one';
 import { DataViewField } from '@kbn/data-views-plugin/public';
 
 import {
+  DataView,
   DataViewSpec,
   Form,
   useForm,
@@ -23,6 +24,7 @@ import {
 
 import { ensureMinimumTime, getIndices, extractTimeFields, getMatchedIndices } from '../lib';
 import { FlyoutPanels } from './flyout_panels';
+import { EditDataViewChangedModal } from './confirm_modals/edit_data_view_changed_modal';
 
 import {
   MatchedItem,
@@ -39,6 +41,7 @@ import {
   TimestampField,
   TypeField,
   TitleField,
+  NameField,
   schema,
   Footer,
   AdvancedParamsContent,
@@ -58,25 +61,44 @@ export interface Props {
   onCancel: () => void;
   defaultTypeIsRollup?: boolean;
   requireTimestampField?: boolean;
+  editData?: DataView;
 }
 
 const editorTitle = i18n.translate('indexPatternEditor.title', {
   defaultMessage: 'Create data view',
 });
 
+const editorTitleEditMode = i18n.translate('indexPatternEditor.titleEditMode', {
+  defaultMessage: 'Edit data view',
+});
+
 const IndexPatternEditorFlyoutContentComponent = ({
   onSave,
   onCancel,
   defaultTypeIsRollup,
   requireTimestampField = false,
+  editData,
 }: Props) => {
   const {
     services: { http, dataViews, uiSettings, searchClient },
   } = useKibana<DataViewEditorContext>();
 
   const { form } = useForm<IndexPatternConfig, FormInternal>({
+    // Prefill with data if editData exists
     defaultValue: {
       type: defaultTypeIsRollup ? INDEX_PATTERN_TYPE.ROLLUP : INDEX_PATTERN_TYPE.DEFAULT,
+      ...(editData
+        ? {
+            title: editData.title,
+            id: editData.id,
+            name: editData.name,
+            ...(editData.timeFieldName
+              ? {
+                  timestampField: { label: editData.timeFieldName, value: editData.timeFieldName },
+                }
+              : {}),
+          }
+        : {}),
     },
     schema,
     onSubmit: async (formData, isValid) => {
@@ -88,6 +110,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
         title: formData.title,
         timeFieldName: formData.timestampField?.value,
         id: formData.id,
+        name: formData.name,
       };
 
       if (type === INDEX_PATTERN_TYPE.ROLLUP && rollupIndex) {
@@ -100,7 +123,15 @@ const IndexPatternEditorFlyoutContentComponent = ({
         };
       }
 
-      await onSave(indexPatternStub);
+      if (
+        editData &&
+        editData.title !== form.getFields().title.value &&
+        !editDataViewChangedModal
+      ) {
+        setEditDataViewChangedModal(true);
+      } else {
+        await onSave(indexPatternStub);
+      }
     },
   });
 
@@ -135,6 +166,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
     partialMatchedIndices: [],
     visibleIndices: [],
   });
+  const [editDataViewChangedModal, setEditDataViewChangedModal] = useState(false);
 
   // load all data sources and set initial matchedIndices
   const loadSources = useCallback(() => {
@@ -157,11 +189,13 @@ const IndexPatternEditorFlyoutContentComponent = ({
     const getTitles = async () => {
       const indexPatternTitles = await dataViews.getTitles();
 
-      setExistingIndexPatterns(indexPatternTitles);
+      setExistingIndexPatterns(
+        editData ? indexPatternTitles.filter((v) => v !== editData.title) : indexPatternTitles
+      );
       setIsLoadingIndexPatterns(false);
     };
     getTitles();
-  }, [http, dataViews, loadSources]);
+  }, [http, dataViews, editData, loadSources]);
 
   // loading rollup info
   useEffect(() => {
@@ -219,11 +253,6 @@ const IndexPatternEditorFlyoutContentComponent = ({
     ]
   );
 
-  useEffect(() => {
-    loadTimestampFieldOptions(title);
-    getFields().timestampField?.setValue('');
-  }, [loadTimestampFieldOptions, title, getFields]);
-
   const reloadMatchedIndices = useCallback(
     async (newTitle: string) => {
       const isRollupIndex = (indexName: string) =>
@@ -273,9 +302,24 @@ const IndexPatternEditorFlyoutContentComponent = ({
     [http, allowHidden, allSources, type, rollupIndicesCapabilities, searchClient, isLoadingSources]
   );
 
+  // If editData exists, loadSources so that MatchedIndices can be loaded for the Timestampfields
+  useEffect(() => {
+    if (editData) loadSources();
+  }, [editData, loadSources]);
+
+  useEffect(() => {
+    if (editData) reloadMatchedIndices(editData.title);
+  }, [editData, allSources, reloadMatchedIndices]);
+
+  useEffect(() => {
+    loadTimestampFieldOptions(editData ? editData.title : title);
+    if (!editData) getFields().timestampField?.setValue('');
+  }, [loadTimestampFieldOptions, title, getFields, editData]);
+
   const onTypeChange = useCallback(
     (newType) => {
       form.setFieldValue('title', '');
+      form.setFieldValue('name', '');
       form.setFieldValue('timestampField', '');
       if (newType === INDEX_PATTERN_TYPE.ROLLUP) {
         form.setFieldValue('allowHidden', false);
@@ -295,7 +339,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
 
   const indexPatternTypeSelect = showIndexPatternTypeSelect() ? (
     <>
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiFlexGroup>
         <EuiFlexItem>
           <TypeField onChange={onTypeChange} />
@@ -315,16 +359,40 @@ const IndexPatternEditorFlyoutContentComponent = ({
     <></>
   );
 
+  const renderModal = () => {
+    if (editDataViewChangedModal) {
+      return (
+        <EditDataViewChangedModal
+          dataViewName={form.getFields().name.value as string}
+          onConfirm={() => {
+            form.submit();
+          }}
+          onCancel={() => {
+            setEditDataViewChangedModal(false);
+          }}
+        />
+      );
+    }
+
+    return null;
+  };
+
   return (
     <EmptyPrompts onCancel={onCancel} allSources={allSources} loadSources={loadSources}>
       <FlyoutPanels.Group flyoutClassName={'indexPatternEditorFlyout'} maxWidth={1180}>
         <FlyoutPanels.Item className="fieldEditor__mainFlyoutPanel" border="right">
           <EuiTitle data-test-subj="flyoutTitle">
-            <h2>{editorTitle}</h2>
+            <h2>{editData ? editorTitleEditMode : editorTitle}</h2>
           </EuiTitle>
           <Form form={form} className="indexPatternEditor__form">
             {indexPatternTypeSelect}
-            <EuiSpacer size="m" />
+            <EuiSpacer size="l" />
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <NameField editData={editData} />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
             <EuiFlexGroup>
               <EuiFlexItem>
                 <TitleField
@@ -336,7 +404,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-            <EuiSpacer size="m" />
+            <EuiSpacer size="l" />
             <EuiFlexGroup>
               <EuiFlexItem>
                 <TimestampField
@@ -354,6 +422,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
             onCancel={onCancel}
             onSubmit={() => form.submit()}
             submitDisabled={form.isSubmitted && !form.isValid}
+            isEdit={!!editData}
           />
         </FlyoutPanels.Item>
         <FlyoutPanels.Item>
@@ -369,6 +438,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
           )}
         </FlyoutPanels.Item>
       </FlyoutPanels.Group>
+      {renderModal()}
     </EmptyPrompts>
   );
 };