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 an index pattern.
 
 #### `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/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 '../../../data_views/public';
 
 import {
+  DataView,
   DataViewSpec,
   Form,
   useForm,
@@ -39,6 +40,7 @@ import {
   TimestampField,
   TypeField,
   TitleField,
+  ReadableTitleField,
   schema,
   Footer,
   AdvancedParamsContent,
@@ -58,25 +60,45 @@ 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,
+            readableTitle: editData.readableTitle,
+            readableDescription: editData.readableDescription,
+            ...(editData.timeFieldName
+              ? {
+                  timestampField: { label: editData.timeFieldName, value: editData.timeFieldName },
+                }
+              : {}),
+          }
+        : {}),
     },
     schema,
     onSubmit: async (formData, isValid) => {
@@ -88,6 +110,8 @@ const IndexPatternEditorFlyoutContentComponent = ({
         title: formData.title,
         timeFieldName: formData.timestampField?.value,
         id: formData.id,
+        readableTitle: formData.readableTitle,
+        readableDescription: formData.readableDescription,
       };
 
       if (type === INDEX_PATTERN_TYPE.ROLLUP && rollupIndex) {
@@ -152,17 +176,19 @@ const IndexPatternEditorFlyoutContentComponent = ({
     });
   }, [http, allowHidden, searchClient]);
 
-  // loading list of index patterns
+  // loading list of data views
   useEffect(() => {
     loadSources();
     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(() => {
@@ -220,11 +246,6 @@ const IndexPatternEditorFlyoutContentComponent = ({
     ]
   );
 
-  useEffect(() => {
-    loadTimestampFieldOptions(title);
-    getFields().timestampField?.setValue('');
-  }, [loadTimestampFieldOptions, title, getFields]);
-
   const reloadMatchedIndices = useCallback(
     async (newTitle: string) => {
       const isRollupIndex = (indexName: string) =>
@@ -274,9 +295,25 @@ 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('readableTitle', '');
+      form.setFieldValue('readableDescription', '');
       form.setFieldValue('timestampField', '');
       if (newType === INDEX_PATTERN_TYPE.ROLLUP) {
         form.setFieldValue('allowHidden', false);
@@ -296,7 +333,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
 
   const indexPatternTypeSelect = showIndexPatternTypeSelect() ? (
     <>
-      <EuiSpacer size="m" />
+      <EuiSpacer size="l" />
       <EuiFlexGroup>
         <EuiFlexItem>
           <TypeField onChange={onTypeChange} />
@@ -321,11 +358,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>
+                <ReadableTitleField editData={editData} />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
             <EuiFlexGroup>
               <EuiFlexItem>
                 <TitleField
@@ -337,7 +380,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-            <EuiSpacer size="m" />
+            <EuiSpacer size="l" />
             <EuiFlexGroup>
               <EuiFlexItem>
                 <TimestampField
@@ -355,6 +398,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
             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,21 +18,39 @@ const IndexPatternFlyoutContentContainer = ({
   onCancel = () => {},
   defaultTypeIsRollup,
   requireTimestampField = false,
+  editData,
 }: DataViewEditorProps) => {
   const {
     services: { dataViews, notifications },
   } = useKibana<DataViewEditorContext>();
 
   const onSaveClick = async (dataViewSpec: DataViewSpec) => {
     try {
-      const indexPattern = await dataViews.createAndSave(dataViewSpec);
+      let indexPattern;
+      if (editData) {
+        const {
+          readableTitle = '',
+          readableDescription = '',
+          timeFieldName,
+          title = '',
+        } = dataViewSpec;
+        editData.title = title;
+        editData.readableTitle = readableTitle;
+        editData.readableDescription = readableDescription;
+        editData.timeFieldName = timeFieldName;
+        indexPattern = await dataViews.updateSavedObject(editData);
+      } else {
+        indexPattern = 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 (indexPattern && !(indexPattern instanceof Error)) {
+        const message = i18n.translate('indexPatternEditor.saved', {
+          defaultMessage: "Saved '{indexPatternTitle}'",
+          values: { indexPatternTitle: indexPattern.title },
+        });
+        notifications.toasts.addSuccess(message);
+        await onSave(indexPattern);
+      }
     } catch (e) {
       const title = i18n.translate('indexPatternEditor.dataView.unableSaveLabel', {
         defaultMessage: 'Failed to save data view.',
@@ -48,6 +66,7 @@ const IndexPatternFlyoutContentContainer = ({
       onCancel={onCancel}
       defaultTypeIsRollup={defaultTypeIsRollup}
       requireTimestampField={requireTimestampField}
+      editData={editData}
     />
   );
 };

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

@@ -21,6 +21,7 @@ interface FooterProps {
   onCancel: () => void;
   onSubmit: () => void;
   submitDisabled: boolean;
+  isEdit: boolean;
 }
 
 const closeButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutCloseButtonLabel', {
@@ -31,7 +32,11 @@ const saveButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutSaveButt
   defaultMessage: 'Create data view',
 });
 
-export const Footer = ({ onCancel, onSubmit, submitDisabled }: FooterProps) => {
+const editButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutEditButtonLabel', {
+  defaultMessage: 'Edit data view',
+});
+
+export const Footer = ({ onCancel, onSubmit, submitDisabled, isEdit }: FooterProps) => {
   return (
     <EuiFlyoutFooter className="indexPatternEditor__footer">
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
@@ -54,7 +59,7 @@ export const Footer = ({ onCancel, onSubmit, submitDisabled }: FooterProps) => {
             fill
             disabled={submitDisabled}
           >
-            {saveButtonLabel}
+            {isEdit ? editButtonLabel : saveButtonLabel}
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>

src/plugins/data_view_editor/public/components/form_fields/index.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+export { ReadableTitleField } from './readable_title_field';
 export { TimestampField } from './timestamp_field';
 export { TypeField } from './type_field';
 export { TitleField } from './title_field';