[ML] Transforms/DFA: Refactor list action buttons so modals won't unmount after button click.

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

@@ -30,7 +30,7 @@ import {
   DataFrameAnalyticsConfig,
 } from '../../../../common';
 import { isKeywordAndTextType } from '../../../../common/fields';
-import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/columns';
+import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/use_columns';
 import { DATA_FRAME_TASK_STATE } from '../../../analytics_management/components/analytics_list/common';
 import {
   isResultsSearchBoolQuery,

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx

@@ -29,7 +29,7 @@ import {
   SEARCH_SIZE,
   defaultSearchQuery,
 } from '../../../../common';
-import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/columns';
+import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/use_columns';
 import { DATA_FRAME_TASK_STATE } from '../../../analytics_management/components/analytics_list/common';
 import { ExplorationTitle } from '../exploration_title';
 import { ExplorationQueryBar } from '../exploration_query_bar';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

@@ -29,7 +29,7 @@ import { getToastNotifications } from '../../../../../util/dependency_cache';
 
 import { defaultSearchQuery, useResultsViewConfig, INDEX_STATUS } from '../../../../common';
 
-import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/columns';
+import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/use_columns';
 
 import { ExplorationQueryBar } from '../exploration_query_bar';
 import { ExplorationTitle } from '../exploration_title';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx

@@ -27,7 +27,7 @@ import {
   Eval,
   DataFrameAnalyticsConfig,
 } from '../../../../common';
-import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/columns';
+import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/use_columns';
 import { DATA_FRAME_TASK_STATE } from '../../../analytics_management/components/analytics_list/common';
 import { EvaluateStat } from './evaluate_stat';
 import {

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_clone.test.ts → x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_button.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { isAdvancedConfig } from './action_clone';
+import { isAdvancedConfig } from './clone_button';
 
 describe('Analytics job clone action', () => {
   describe('isAdvancedConfig', () => {

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_clone.tsx → x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/clone_button.tsx

@@ -19,7 +19,7 @@ import {
   DEFAULT_NUM_TOP_FEATURE_IMPORTANCE_VALUES,
 } from '../../hooks/use_create_analytics_form';
 import { State } from '../../hooks/use_create_analytics_form/state';
-import { DataFrameAnalyticsListRow } from './common';
+import { DataFrameAnalyticsListRow } from '../analytics_list/common';
 import { checkPermission } from '../../../../../capabilities/check_capabilities';
 import { extractErrorMessage } from '../../../../../../../common/util/errors';
 
@@ -343,7 +343,7 @@ export function getCloneAction(createAnalyticsForm: CreateAnalyticsFormProps) {
   };
 }
 
-interface CloneActionProps {
+interface CloneButtonProps {
   item: DataFrameAnalyticsListRow;
   createAnalyticsForm: CreateAnalyticsFormProps;
 }
@@ -353,7 +353,7 @@ interface CloneActionProps {
  * Replace with {@link getCloneAction} as soon as all the actions are refactored
  * to support EuiContext with a valid DOM structure without nested buttons.
  */
-export const CloneAction: FC<CloneActionProps> = ({ createAnalyticsForm, item }) => {
+export const CloneButton: FC<CloneButtonProps> = ({ createAnalyticsForm, item }) => {
   const canCreateDataFrameAnalytics: boolean = checkPermission('canCreateDataFrameAnalytics');
 
   const buttonText = i18n.translate('xpack.ml.dataframe.analyticsList.cloneJobButtonLabel', {

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_clone/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 {
+  extractCloningConfig,
+  isAdvancedConfig,
+  CloneButton,
+  CloneDataFrameAnalyticsConfig,
+} from './clone_button';

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/action_delete.test.tsx → x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_delete/action_delete.test.tsx

@@ -7,14 +7,17 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import * as CheckPrivilige from '../../../../../capabilities/check_capabilities';
-import mockAnalyticsListItem from './__mocks__/analytics_list_item.json';
-import { DeleteAction } from './action_delete';
+import mockAnalyticsListItem from '../analytics_list/__mocks__/analytics_list_item.json';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
   coreMock as mockCoreServices,
   i18nServiceMock,
 } from '../../../../../../../../../../src/core/public/mocks';
 
+import { DeleteButton } from './delete_button';
+import { DeleteButtonModal } from './delete_button_modal';
+import { useDeleteAction } from './use_delete_action';
+
 jest.mock('../../../../../capabilities/check_capabilities', () => ({
   checkPermission: jest.fn(() => false),
   createPermissionFailureMessage: jest.fn(),
@@ -41,14 +44,18 @@ describe('DeleteAction', () => {
   });
 
   test('When canDeleteDataFrameAnalytics permission is false, button should be disabled.', () => {
-    const { getByTestId } = render(<DeleteAction item={mockAnalyticsListItem} />);
+    const { getByTestId } = render(
+      <DeleteButton item={mockAnalyticsListItem} onClick={() => {}} />
+    );
     expect(getByTestId('mlAnalyticsJobDeleteButton')).toHaveAttribute('disabled');
   });
 
   test('When canDeleteDataFrameAnalytics permission is true, button should not be disabled.', () => {
     const mock = jest.spyOn(CheckPrivilige, 'checkPermission');
     mock.mockImplementation((p) => p === 'canDeleteDataFrameAnalytics');
-    const { getByTestId } = render(<DeleteAction item={mockAnalyticsListItem} />);
+    const { getByTestId } = render(
+      <DeleteButton item={mockAnalyticsListItem} onClick={() => {}} />
+    );
 
     expect(getByTestId('mlAnalyticsJobDeleteButton')).not.toHaveAttribute('disabled');
 
@@ -57,11 +64,12 @@ describe('DeleteAction', () => {
 
   test('When job is running, delete button should be disabled.', () => {
     const { getByTestId } = render(
-      <DeleteAction
+      <DeleteButton
         item={{
           ...mockAnalyticsListItem,
           stats: { state: 'started' },
         }}
+        onClick={() => {}}
       />
     );
 
@@ -72,9 +80,21 @@ describe('DeleteAction', () => {
     test('should allow to delete target index by default.', () => {
       const mock = jest.spyOn(CheckPrivilige, 'checkPermission');
       mock.mockImplementation((p) => p === 'canDeleteDataFrameAnalytics');
+
+      const TestComponent = () => {
+        const deleteAction = useDeleteAction();
+
+        return (
+          <>
+            {deleteAction.isModalVisible && <DeleteButtonModal {...deleteAction} />}
+            <DeleteButton item={mockAnalyticsListItem} onClick={deleteAction.openModal} />
+          </>
+        );
+      };
+
       const { getByTestId, queryByTestId } = render(
         <I18nProvider>
-          <DeleteAction item={mockAnalyticsListItem} />
+          <TestComponent />
         </I18nProvider>
       );
       const deleteButton = getByTestId('mlAnalyticsJobDeleteButton');

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_delete/delete_button.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
+import {
+  checkPermission,
+  createPermissionFailureMessage,
+} from '../../../../../capabilities/check_capabilities';
+import { isDataFrameAnalyticsRunning, DataFrameAnalyticsListRow } from '../analytics_list/common';
+
+interface DeleteButtonProps {
+  item: DataFrameAnalyticsListRow;
+  onClick: (item: DataFrameAnalyticsListRow) => void;
+}
+
+export const DeleteButton: FC<DeleteButtonProps> = ({ item, onClick }) => {
+  const disabled = isDataFrameAnalyticsRunning(item.stats.state);
+  const canDeleteDataFrameAnalytics: boolean = checkPermission('canDeleteDataFrameAnalytics');
+
+  const buttonDeleteText = i18n.translate('xpack.ml.dataframe.analyticsList.deleteActionName', {
+    defaultMessage: 'Delete',
+  });
+
+  const buttonDisabled = disabled || !canDeleteDataFrameAnalytics;
+  let deleteButton = (
+    <EuiLink
+      data-test-subj="mlAnalyticsJobDeleteButton"
+      color={buttonDisabled ? 'subdued' : 'text'}
+      disabled={buttonDisabled}
+      onClick={buttonDisabled ? undefined : () => onClick(item)}
+      aria-label={buttonDeleteText}
+      style={{ padding: 0 }}
+    >
+      <EuiIcon type="trash" /> {buttonDeleteText}
+    </EuiLink>
+  );
+
+  if (disabled || !canDeleteDataFrameAnalytics) {
+    deleteButton = (
+      <EuiToolTip
+        position="top"
+        content={
+          disabled
+            ? i18n.translate(
+                'xpack.ml.dataframe.analyticsList.deleteActionDisabledToolTipContent',
+                {
+                  defaultMessage: 'Stop the data frame analytics job in order to delete it.',
+                }
+              )
+            : createPermissionFailureMessage('canStartStopDataFrameAnalytics')
+        }
+      >
+        {deleteButton}
+      </EuiToolTip>
+    );
+  }
+
+  return deleteButton;
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_delete/delete_button_modal.tsx

@@ -0,0 +1,108 @@
+/*
+ * 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 } from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiConfirmModal,
+  EuiOverlayMask,
+  EuiSwitch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EUI_MODAL_CONFIRM_BUTTON,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { DeleteAction } from './use_delete_action';
+
+export const DeleteButtonModal: FC<DeleteAction> = ({
+  closeModal,
+  deleteAndCloseModal,
+  deleteTargetIndex,
+  deleteIndexPattern,
+  indexPatternExists,
+  item,
+  toggleDeleteIndex,
+  toggleDeleteIndexPattern,
+  userCanDeleteIndex,
+}) => {
+  if (item === undefined) {
+    return null;
+  }
+
+  const indexName = item.config.dest.index;
+
+  return (
+    <EuiOverlayMask data-test-subj="mlAnalyticsJobDeleteOverlay">
+      <EuiConfirmModal
+        data-test-subj="mlAnalyticsJobDeleteModal"
+        title={i18n.translate('xpack.ml.dataframe.analyticsList.deleteModalTitle', {
+          defaultMessage: 'Delete {analyticsId}',
+          values: { analyticsId: item.config.id },
+        })}
+        onCancel={closeModal}
+        onConfirm={deleteAndCloseModal}
+        cancelButtonText={i18n.translate(
+          'xpack.ml.dataframe.analyticsList.deleteModalCancelButton',
+          {
+            defaultMessage: 'Cancel',
+          }
+        )}
+        confirmButtonText={i18n.translate(
+          'xpack.ml.dataframe.analyticsList.deleteModalDeleteButton',
+          {
+            defaultMessage: 'Delete',
+          }
+        )}
+        defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+        buttonColor="danger"
+      >
+        <p>
+          <FormattedMessage
+            id="xpack.ml.dataframe.analyticsList.deleteModalBody"
+            defaultMessage="Are you sure you want to delete this analytics job?"
+          />
+        </p>
+
+        <EuiFlexGroup direction="column" gutterSize="none">
+          <EuiFlexItem>
+            {userCanDeleteIndex && (
+              <EuiSwitch
+                data-test-subj="mlAnalyticsJobDeleteIndexSwitch"
+                style={{ paddingBottom: 10 }}
+                label={i18n.translate(
+                  'xpack.ml.dataframe.analyticsList.deleteDestinationIndexTitle',
+                  {
+                    defaultMessage: 'Delete destination index {indexName}',
+                    values: { indexName },
+                  }
+                )}
+                checked={deleteTargetIndex}
+                onChange={toggleDeleteIndex}
+              />
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {userCanDeleteIndex && indexPatternExists && (
+              <EuiSwitch
+                data-test-subj="mlAnalyticsJobDeleteIndexPatternSwitch"
+                label={i18n.translate(
+                  'xpack.ml.dataframe.analyticsList.deleteTargetIndexPatternTitle',
+                  {
+                    defaultMessage: 'Delete index pattern {indexPattern}',
+                    values: { indexPattern: indexName },
+                  }
+                )}
+                checked={deleteIndexPattern}
+                onChange={toggleDeleteIndexPattern}
+              />
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_delete/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 { DeleteButton } from './delete_button';
+export { DeleteButtonModal } from './delete_button_modal';
+export { useDeleteAction } from './use_delete_action';