From 6f9d771714d31a9bff2ae382e69bddd7bb2ef98e Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@elastic.co>
Date: Wed, 13 Jul 2022 06:49:21 +0200
Subject: [PATCH] data view side panel explore button (#135224)

---
 .../public/components/data_view_editor.tsx    |  2 +
 .../data_view_editor_flyout_content.tsx       | 17 ++++--
 .../data_view_flyout_content_container.tsx    |  8 ++-
 .../public/components/footer/footer.tsx       | 56 +++++++++++++++----
 .../public/components/form_schema.ts          |  7 +++
 .../data_view_editor/public/open_editor.tsx   |  2 +
 src/plugins/data_view_editor/public/types.ts  |  5 ++
 7 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/src/plugins/data_view_editor/public/components/data_view_editor.tsx b/src/plugins/data_view_editor/public/components/data_view_editor.tsx
index f984b8451b061..ff236e804c2b7 100644
--- a/src/plugins/data_view_editor/public/components/data_view_editor.tsx
+++ b/src/plugins/data_view_editor/public/components/data_view_editor.tsx
@@ -24,6 +24,7 @@ export const DataViewEditor = ({
   defaultTypeIsRollup = false,
   requireTimestampField = false,
   editData,
+  allowAdHocDataView,
 }: DataViewEditorPropsWithServices) => {
   const { Provider: KibanaReactContextProvider } =
     createKibanaReactContext<DataViewEditorContext>(services);
@@ -37,6 +38,7 @@ export const DataViewEditor = ({
           defaultTypeIsRollup={defaultTypeIsRollup}
           requireTimestampField={requireTimestampField}
           editData={editData}
+          allowAdHocDataView={allowAdHocDataView}
         />
       </EuiFlyout>
     </KibanaReactContextProvider>
diff --git a/src/plugins/data_view_editor/public/components/data_view_editor_flyout_content.tsx b/src/plugins/data_view_editor/public/components/data_view_editor_flyout_content.tsx
index dc000de1e20fd..744e3824e3c68 100644
--- a/src/plugins/data_view_editor/public/components/data_view_editor_flyout_content.tsx
+++ b/src/plugins/data_view_editor/public/components/data_view_editor_flyout_content.tsx
@@ -20,6 +20,7 @@ import {
   useFormData,
   useKibana,
   GetFieldsOptions,
+  UseField,
 } from '../shared_imports';
 
 import { ensureMinimumTime, getIndices, extractTimeFields, getMatchedIndices } from '../lib';
@@ -55,7 +56,7 @@ export interface Props {
   /**
    * Handler for the "save" footer button
    */
-  onSave: (dataViewSpec: DataViewSpec) => void;
+  onSave: (dataViewSpec: DataViewSpec, persist: boolean) => void;
   /**
    * Handler for the "cancel" footer button
    */
@@ -63,6 +64,7 @@ export interface Props {
   defaultTypeIsRollup?: boolean;
   requireTimestampField?: boolean;
   editData?: DataView;
+  allowAdHoc: boolean;
 }
 
 const editorTitle = i18n.translate('indexPatternEditor.title', {
@@ -79,6 +81,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
   defaultTypeIsRollup,
   requireTimestampField = false,
   editData,
+  allowAdHoc,
 }: Props) => {
   const {
     services: { http, dataViews, uiSettings, overlays },
@@ -88,6 +91,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
     // Prefill with data if editData exists
     defaultValue: {
       type: defaultTypeIsRollup ? INDEX_PATTERN_TYPE.ROLLUP : INDEX_PATTERN_TYPE.DEFAULT,
+      isAdHoc: false,
       ...(editData
         ? {
             title: editData.title,
@@ -129,11 +133,11 @@ const IndexPatternEditorFlyoutContentComponent = ({
           dataViewName: formData.name || formData.title,
           overlays,
           onEdit: async () => {
-            await onSave(indexPatternStub);
+            await onSave(indexPatternStub, !formData.isAdHoc);
           },
         });
       } else {
-        await onSave(indexPatternStub);
+        await onSave(indexPatternStub, !formData.isAdHoc);
       }
     },
   });
@@ -371,6 +375,7 @@ const IndexPatternEditorFlyoutContentComponent = ({
           <h2>{editData ? editorTitleEditMode : editorTitle}</h2>
         </EuiTitle>
         <Form form={form} className="indexPatternEditor__form">
+          <UseField path="isAdHoc" />
           {indexPatternTypeSelect}
           <EuiSpacer size="l" />
           <EuiFlexGroup>
@@ -409,9 +414,13 @@ const IndexPatternEditorFlyoutContentComponent = ({
         </Form>
         <Footer
           onCancel={onCancel}
-          onSubmit={() => form.submit()}
+          onSubmit={(adhoc?: boolean) => {
+            form.setFieldValue('isAdHoc', adhoc || false);
+            form.submit();
+          }}
           submitDisabled={form.isSubmitted && !form.isValid}
           isEdit={!!editData}
+          allowAdHoc={allowAdHoc}
         />
       </FlyoutPanels.Item>
       <FlyoutPanels.Item>
diff --git a/src/plugins/data_view_editor/public/components/data_view_flyout_content_container.tsx b/src/plugins/data_view_editor/public/components/data_view_flyout_content_container.tsx
index 81e7cf65d173d..e616c65062b5f 100644
--- a/src/plugins/data_view_editor/public/components/data_view_flyout_content_container.tsx
+++ b/src/plugins/data_view_editor/public/components/data_view_flyout_content_container.tsx
@@ -19,12 +19,13 @@ const IndexPatternFlyoutContentContainer = ({
   defaultTypeIsRollup,
   requireTimestampField = false,
   editData,
+  allowAdHocDataView,
 }: DataViewEditorProps) => {
   const {
     services: { dataViews, notifications },
   } = useKibana<DataViewEditorContext>();
 
-  const onSaveClick = async (dataViewSpec: DataViewSpec) => {
+  const onSaveClick = async (dataViewSpec: DataViewSpec, persist: boolean = true) => {
     try {
       let saveResponse;
       if (editData) {
@@ -34,7 +35,9 @@ const IndexPatternFlyoutContentContainer = ({
         editData.timeFieldName = timeFieldName;
         saveResponse = await dataViews.updateSavedObject(editData);
       } else {
-        saveResponse = await dataViews.createAndSave(dataViewSpec);
+        saveResponse = persist
+          ? await dataViews.createAndSave(dataViewSpec)
+          : await dataViews.create(dataViewSpec);
       }
 
       if (saveResponse && !(saveResponse instanceof Error)) {
@@ -61,6 +64,7 @@ const IndexPatternFlyoutContentContainer = ({
       defaultTypeIsRollup={defaultTypeIsRollup}
       requireTimestampField={requireTimestampField}
       editData={editData}
+      allowAdHoc={allowAdHocDataView || false}
     />
   );
 };
diff --git a/src/plugins/data_view_editor/public/components/footer/footer.tsx b/src/plugins/data_view_editor/public/components/footer/footer.tsx
index c54ff4136b685..01d954fb29bdb 100644
--- a/src/plugins/data_view_editor/public/components/footer/footer.tsx
+++ b/src/plugins/data_view_editor/public/components/footer/footer.tsx
@@ -19,9 +19,10 @@ import {
 
 interface FooterProps {
   onCancel: () => void;
-  onSubmit: () => void;
+  onSubmit: (isAdHoc?: boolean) => void;
   submitDisabled: boolean;
   isEdit: boolean;
+  allowAdHoc: boolean;
 }
 
 const closeButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutCloseButtonLabel', {
@@ -29,14 +30,25 @@ const closeButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutCloseBu
 });
 
 const saveButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutSaveButtonLabel', {
-  defaultMessage: 'Create data view',
+  defaultMessage: 'Save data view to Kibana',
 });
 
 const editButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutEditButtonLabel', {
   defaultMessage: 'Save',
 });
 
-export const Footer = ({ onCancel, onSubmit, submitDisabled, isEdit }: FooterProps) => {
+const exploreButtonLabel = i18n.translate('indexPatternEditor.editor.flyoutExploreButtonLabel', {
+  defaultMessage: 'Use without saving',
+});
+
+export const Footer = ({ onCancel, onSubmit, submitDisabled, isEdit, allowAdHoc }: FooterProps) => {
+  const submitPersisted = () => {
+    onSubmit(false);
+  };
+  const submitAdHoc = () => {
+    onSubmit(true);
+  };
+
   return (
     <EuiFlyoutFooter className="indexPatternEditor__footer">
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
@@ -52,15 +64,35 @@ export const Footer = ({ onCancel, onSubmit, submitDisabled, isEdit }: FooterPro
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButton
-            color="primary"
-            onClick={onSubmit}
-            data-test-subj="saveIndexPatternButton"
-            fill
-            disabled={submitDisabled}
-          >
-            {isEdit ? editButtonLabel : saveButtonLabel}
-          </EuiButton>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            {allowAdHoc && (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  color="primary"
+                  onClick={submitAdHoc}
+                  data-test-subj="exploreIndexPatternButton"
+                  disabled={submitDisabled}
+                  title={i18n.translate('indexPatternEditor.editor.flyoutExploreButtonTitle', {
+                    defaultMessage: 'Use this data view without creating a saved object',
+                  })}
+                >
+                  {exploreButtonLabel}
+                </EuiButton>
+              </EuiFlexItem>
+            )}
+
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                color="primary"
+                onClick={submitPersisted}
+                data-test-subj="saveIndexPatternButton"
+                fill
+                disabled={submitDisabled}
+              >
+                {isEdit ? editButtonLabel : saveButtonLabel}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
diff --git a/src/plugins/data_view_editor/public/components/form_schema.ts b/src/plugins/data_view_editor/public/components/form_schema.ts
index d1e03a1dc578c..9af41592dcbfe 100644
--- a/src/plugins/data_view_editor/public/components/form_schema.ts
+++ b/src/plugins/data_view_editor/public/components/form_schema.ts
@@ -81,4 +81,11 @@ export const schema = {
     }),
     defaultValue: INDEX_PATTERN_TYPE.DEFAULT,
   },
+  isAdHoc: {
+    label: i18n.translate('indexPatternEditor.editor.form.IsAdHocLabel', {
+      defaultMessage: 'Creeate AdHoc DataView',
+    }),
+    defaultValue: false,
+    type: 'hidden',
+  },
 };
diff --git a/src/plugins/data_view_editor/public/open_editor.tsx b/src/plugins/data_view_editor/public/open_editor.tsx
index 66ca3b96a539a..b422de8e40ce2 100644
--- a/src/plugins/data_view_editor/public/open_editor.tsx
+++ b/src/plugins/data_view_editor/public/open_editor.tsx
@@ -45,6 +45,7 @@ export const getEditorOpener =
       onCancel = () => {},
       defaultTypeIsRollup = false,
       requireTimestampField = false,
+      allowAdHocDataView = false,
     }: DataViewEditorProps): CloseEditor => {
       const closeEditor = () => {
         if (overlayRef) {
@@ -73,6 +74,7 @@ export const getEditorOpener =
                 }}
                 defaultTypeIsRollup={defaultTypeIsRollup}
                 requireTimestampField={requireTimestampField}
+                allowAdHocDataView={allowAdHocDataView}
               />
             </I18nProvider>
           </KibanaReactContextProvider>,
diff --git a/src/plugins/data_view_editor/public/types.ts b/src/plugins/data_view_editor/public/types.ts
index c5155a22a3595..5b177f65b0602 100644
--- a/src/plugins/data_view_editor/public/types.ts
+++ b/src/plugins/data_view_editor/public/types.ts
@@ -53,6 +53,10 @@ export interface DataViewEditorProps {
    * Pass the data view to be edited.
    */
   editData?: DataView;
+  /**
+   * if set to true user is presented with an option to create ad-hoc dataview without a saved object.
+   */
+  allowAdHocDataView?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -157,6 +161,7 @@ export interface IndexPatternConfig {
   id?: string;
   type: INDEX_PATTERN_TYPE;
   name?: string;
+  isAdHoc: boolean;
 }
 
 export interface FormInternal extends Omit<IndexPatternConfig, 'timestampField'> {