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

src/plugins/controls/public/control_group/editor/control_editor.tsx

@@ -222,7 +222,7 @@ export const ControlEditor = ({
               }}
               trigger={{
                 label:
-                  state.selectedDataView?.title ??
+                  state.selectedDataView?.getName() ??
                   ControlGroupStrings.manageControl.getSelectDataViewMessage(),
               }}
             />

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/advanced_params_content/advanced_params_content.tsx

@@ -28,9 +28,13 @@ const customIndexPatternIdLabel = i18n.translate(
 
 interface AdvancedParamsContentProps {
   disableAllowHidden: boolean;
+  disableId: boolean;
 }
 
-export const AdvancedParamsContent = ({ disableAllowHidden }: AdvancedParamsContentProps) => (
+export const AdvancedParamsContent = ({
+  disableAllowHidden,
+  disableId,
+}: AdvancedParamsContentProps) => (
   <AdvancedParamsSection>
     <EuiFlexGroup>
       <EuiFlexItem>
@@ -57,6 +61,7 @@ export const AdvancedParamsContent = ({ disableAllowHidden }: AdvancedParamsCont
           componentProps={{
             euiFieldProps: {
               'aria-label': customIndexPatternIdLabel,
+              disabled: disableId,
             },
           }}
         />

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

@@ -0,0 +1,45 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import type { OverlayStart } from '@kbn/core/public';
+
+interface EditDataViewDeps {
+  dataViewName: string;
+  overlays: OverlayStart | undefined;
+  onEdit: () => void;
+}
+
+export const editDataViewModal = ({ dataViewName, overlays, onEdit }: EditDataViewDeps) =>
+  overlays &&
+  overlays
+    .openConfirm(
+      i18n.translate('indexPatternEditor.editDataView.editConfirmationModal.modalDescription', {
+        defaultMessage: 'Changing this data view can break other objects that depend on it.',
+      }),
+      {
+        confirmButtonText: i18n.translate(
+          'indexPatternEditor.editDataView.editConfirmationModal.confirmButton',
+          {
+            defaultMessage: 'Confirm',
+          }
+        ),
+        title: i18n.translate('indexPatternEditor.editDataView.editConfirmationModal.editHeader', {
+          defaultMessage: `Edit '{name}'`,
+          values: {
+            name: dataViewName,
+          },
+        }),
+        buttonColor: 'danger',
+      }
+    )
+    .then(async (isConfirmed) => {
+      if (isConfirmed) {
+        onEdit();
+      }
+    });

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

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

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,
@@ -39,13 +40,15 @@ import {
   TimestampField,
   TypeField,
   TitleField,
+  NameField,
   schema,
   Footer,
   AdvancedParamsContent,
   EmptyPrompts,
   PreviewPanel,
   RollupBetaWarning,
 } from '.';
+import { editDataViewModal } from './confirm_modals/edit_data_view_changed_modal';
 
 export interface Props {
   /**
@@ -58,27 +61,46 @@ export interface Props {
   onCancel: () => void;
   defaultTypeIsRollup?: boolean;
   requireTimestampField?: boolean;
+  editData?: DataView;
   showEmptyPrompt?: boolean;
 }
 
 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,
   showEmptyPrompt = true,
 }: Props) => {
   const {
-    services: { http, dataViews, uiSettings, searchClient },
+    services: { http, dataViews, uiSettings, searchClient, overlays },
   } = 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) => {
@@ -90,6 +112,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
         title: formData.title,
         timeFieldName: formData.timestampField?.value,
         id: formData.id,
+        name: formData.name,
       };
 
       if (type === INDEX_PATTERN_TYPE.ROLLUP && rollupIndex) {
@@ -102,7 +125,17 @@ const IndexPatternEditorFlyoutContentComponent = ({
         };
       }
 
-      await onSave(indexPatternStub);
+      if (editData && editData.title !== formData.title) {
+        editDataViewModal({
+          dataViewName: formData.name || formData.title,
+          overlays,
+          onEdit: async () => {
+            await onSave(indexPatternStub);
+          },
+        });
+      } else {
+        await onSave(indexPatternStub);
+      }
     },
   });
 
@@ -157,13 +190,15 @@ const IndexPatternEditorFlyoutContentComponent = ({
   useEffect(() => {
     loadSources();
     const getTitles = async () => {
-      const indexPatternTitles = await dataViews.getTitles();
+      const indexPatternTitles = await dataViews.getTitles(editData ? true : false);
 
-      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(() => {
@@ -221,11 +256,6 @@ const IndexPatternEditorFlyoutContentComponent = ({
     ]
   );
 
-  useEffect(() => {
-    loadTimestampFieldOptions(title);
-    getFields().timestampField?.setValue('');
-  }, [loadTimestampFieldOptions, title, getFields]);
-
   const reloadMatchedIndices = useCallback(
     async (newTitle: string) => {
       const isRollupIndex = (indexName: string) =>
@@ -275,9 +305,27 @@ 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();
+      reloadMatchedIndices(editData.title);
+    }
+    // We use the below eslint-disable as adding 'loadSources' and 'reloadMatchedIndices' as a dependency creates an infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editData]);
+
+  useEffect(() => {
+    loadTimestampFieldOptions(editData ? editData.title : title);
+    if (!editData) getFields().timestampField?.setValue('');
+    // We use the below eslint-disable as adding editData as a dependency create an infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadTimestampFieldOptions, title, getFields]);
+
   const onTypeChange = useCallback(
     (newType) => {
       form.setFieldValue('title', '');
+      form.setFieldValue('name', '');
       form.setFieldValue('timestampField', '');
       if (newType === INDEX_PATTERN_TYPE.ROLLUP) {
         form.setFieldValue('allowHidden', false);
@@ -297,7 +345,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
 
   const indexPatternTypeSelect = showIndexPatternTypeSelect() ? (
     <>
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiFlexGroup>
         <EuiFlexItem>
           <TypeField onChange={onTypeChange} />
@@ -327,11 +375,17 @@ const IndexPatternEditorFlyoutContentComponent = ({
       <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
@@ -343,7 +397,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-            <EuiSpacer size="m" />
+            <EuiSpacer size="l" />
             <EuiFlexGroup>
               <EuiFlexItem>
                 <TimestampField
@@ -355,12 +409,16 @@ const IndexPatternEditorFlyoutContentComponent = ({
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-            <AdvancedParamsContent disableAllowHidden={type === INDEX_PATTERN_TYPE.ROLLUP} />
+            <AdvancedParamsContent
+              disableAllowHidden={type === INDEX_PATTERN_TYPE.ROLLUP}
+              disableId={!!editData}
+            />
           </Form>
           <Footer
             onCancel={onCancel}
             onSubmit={() => form.submit()}
             submitDisabled={form.isSubmitted && !form.isValid}
+            isEdit={!!editData}
           />
         </FlyoutPanels.Item>
         <FlyoutPanels.Item>

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

@@ -18,6 +18,7 @@ const IndexPatternFlyoutContentContainer = ({
   onCancel = () => {},
   defaultTypeIsRollup,
   requireTimestampField = false,
+  editData,
   showEmptyPrompt = true,
 }: DataViewEditorProps) => {
   const {
@@ -26,14 +27,25 @@ const IndexPatternFlyoutContentContainer = ({
 
   const onSaveClick = async (dataViewSpec: DataViewSpec) => {
     try {
-      const indexPattern = await dataViews.createAndSave(dataViewSpec);
+      let saveResponse;
+      if (editData) {
+        const { name = '', timeFieldName, title = '' } = dataViewSpec;
+        editData.title = title;
+        editData.name = name;
+        editData.timeFieldName = timeFieldName;
+        saveResponse = await dataViews.updateSavedObject(editData);
+      } else {
+        saveResponse = await dataViews.createAndSave(dataViewSpec);
+      }
 
-      const message = i18n.translate('indexPatternEditor.saved', {
-        defaultMessage: "Saved '{indexPatternTitle}'",
-        values: { indexPatternTitle: indexPattern.title },
-      });
-      notifications.toasts.addSuccess(message);
-      await onSave(indexPattern);
+      if (saveResponse && !(saveResponse instanceof Error)) {
+        const message = i18n.translate('indexPatternEditor.saved', {
+          defaultMessage: "Saved '{indexPatternName}'",
+          values: { indexPatternName: saveResponse.getName() },
+        });
+        notifications.toasts.addSuccess(message);
+        await onSave(saveResponse);
+      }
     } catch (e) {
       const title = i18n.translate('indexPatternEditor.dataView.unableSaveLabel', {
         defaultMessage: 'Failed to save data view.',
@@ -49,6 +61,7 @@ const IndexPatternFlyoutContentContainer = ({
       onCancel={onCancel}
       defaultTypeIsRollup={defaultTypeIsRollup}
       requireTimestampField={requireTimestampField}
+      editData={editData}
       showEmptyPrompt={showEmptyPrompt}
     />
   );