[ML] Add datafeed query reset button (#73958)

* [ML] Add datafeed query reset button

* changing id

* adding translation

* fix typo

* default query refactor

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/reset_query/index.tsx

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ResetQueryButton } from './reset_query';

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/reset_query/reset_query.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC, useContext, useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiButtonEmpty,
+  EuiConfirmModal,
+  EuiOverlayMask,
+  EuiCodeBlock,
+  EuiSpacer,
+} from '@elastic/eui';
+import { JobCreatorContext } from '../../../job_creator_context';
+import { getDefaultDatafeedQuery } from '../../../../../utils/new_job_utils';
+
+export const ResetQueryButton: FC = () => {
+  const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext);
+  const [confirmModalVisible, setConfirmModalVisible] = useState(false);
+  const [defaultQueryString] = useState(JSON.stringify(getDefaultDatafeedQuery(), null, 2));
+
+  const closeModal = () => setConfirmModalVisible(false);
+  const showModal = () => setConfirmModalVisible(true);
+
+  function resetDatafeed() {
+    jobCreator.query = getDefaultDatafeedQuery();
+    jobCreatorUpdate();
+    closeModal();
+  }
+  return (
+    <>
+      {confirmModalVisible && (
+        <EuiOverlayMask>
+          <EuiConfirmModal
+            title={i18n.translate('xpack.ml.newJob.wizard.datafeedStep.resetQueryConfirm.title', {
+              defaultMessage: 'Reset datafeed query',
+            })}
+            onCancel={closeModal}
+            onConfirm={resetDatafeed}
+            cancelButtonText={i18n.translate(
+              'xpack.ml.newJob.wizard.datafeedStep.resetQueryConfirm.cancel',
+              { defaultMessage: 'Cancel' }
+            )}
+            confirmButtonText={i18n.translate(
+              'xpack.ml.newJob.wizard.datafeedStep.resetQueryConfirm.confirm',
+              { defaultMessage: 'Confirm' }
+            )}
+            defaultFocusedButton="confirm"
+          >
+            <FormattedMessage
+              id="xpack.ml.newJob.wizard.datafeedStep.resetQueryConfirm.description"
+              defaultMessage="Set the datafeed query to be the default."
+            />
+
+            <EuiSpacer size="s" />
+
+            <EuiCodeBlock language="js" fontSize="m" paddingSize="s">
+              {defaultQueryString}
+            </EuiCodeBlock>
+          </EuiConfirmModal>
+        </EuiOverlayMask>
+      )}
+
+      <EuiButtonEmpty size="s" onClick={showModal}>
+        <FormattedMessage
+          id="xpack.ml.newJob.wizard.datafeedStep.resetQueryButton"
+          defaultMessage="Reset datafeed query to default"
+        />
+      </EuiButtonEmpty>
+    </>
+  );
+};

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/datafeed.tsx

@@ -11,6 +11,7 @@ import { QueryInput } from './components/query';
 import { QueryDelayInput } from './components/query_delay';
 import { FrequencyInput } from './components/frequency';
 import { ScrollSizeInput } from './components/scroll_size';
+import { ResetQueryButton } from './components/reset_query';
 import { TimeField } from './components/time_field';
 import { WIZARD_STEPS, StepProps } from '../step_types';
 import { JobCreatorContext } from '../job_creator_context';
@@ -46,6 +47,7 @@ export const DatafeedStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =
               <TimeField />
             </EuiFlexItem>
           </EuiFlexGroup>
+          <ResetQueryButton />
           <WizardNav next={() => setCurrentStep(WIZARD_STEPS.PICK_FIELDS)} nextActive={nextActive}>
             <JsonEditorFlyout
               isDisabled={false}

x-pack/plugins/ml/public/application/jobs/new_job/utils/new_job_utils.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { cloneDeep } from 'lodash';
 import { IUiSettingsClient } from 'kibana/public';
 import { esQuery, Query, esKuery } from '../../../../../../../../src/plugins/data/public';
 import { IIndexPattern } from '../../../../../../../../src/plugins/data/common/index_patterns';
@@ -13,6 +14,20 @@ import { getQueryFromSavedSearch } from '../../../util/index_utils';
 
 // Provider for creating the items used for searching and job creation.
 
+const DEFAULT_QUERY = {
+  bool: {
+    must: [
+      {
+        match_all: {},
+      },
+    ],
+  },
+};
+
+export function getDefaultDatafeedQuery() {
+  return cloneDeep(DEFAULT_QUERY);
+}
+
 export function createSearchItems(
   kibanaConfig: IUiSettingsClient,
   indexPattern: IIndexPattern,
@@ -27,16 +42,7 @@ export function createSearchItems(
     language: 'lucene',
   };
 
-  let combinedQuery: any = {
-    bool: {
-      must: [
-        {
-          match_all: {},
-        },
-      ],
-    },
-  };
-
+  let combinedQuery: any = getDefaultDatafeedQuery();
   if (savedSearch !== null) {
     const data = getQueryFromSavedSearch(savedSearch);