Make common delete modal for components (opensearch-project#766)

Signed-off-by: Eugene Lee <eugenesk@amazon.com>
eugenesk24 · Jun 6, 2022 · acd6db2 · acd6db2
1 parent 2adfb69
commit acd6db2
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 80 deletions.
diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
@@ -54,13 +54,14 @@ describe('Adding sample data and visualization', () => {
 describe('Has working breadcrumbs', () => {
   it('Redirect to correct page on breadcrumb click', () => {
     landOnEventExplorer();
-    cy.get('.euiBreadcrumb').contains('Explorer').click();
+    cy.wait(delay * 3);
+    cy.get('.euiBreadcrumb[href="#/event_analytics/explorer"]').contains('Explorer').click();
     cy.wait(delay);
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('exist');
-    cy.get('.euiBreadcrumb').contains('Event analytics').click();
+    cy.get('.euiBreadcrumb[href="#/event_analytics"]').contains('Event analytics').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Event analytics').should('exist');
-    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').contains('Observability').click();
     cy.wait(delay);
     cy.get('.euiTitle').contains('Event analytics').should('exist');
   });

diff --git a/dashboards-observability/.cypress/integration/7_app_analytics.spec.js b/dashboards-observability/.cypress/integration/7_app_analytics.spec.js
@@ -251,7 +251,7 @@ describe('Viewing application', () => {
   it('Adds filter when Trace group name is clicked', () => {
     cy.get('[data-test-subj="app-analytics-overviewTab"]').click();
     cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').contains('client_create_order').click();
-    cy.get('.euiTableRow').should('have.length', 1);
+    cy.get('.euiTableRow').should('have.length', 1, { timeout: timeoutDelay });
     cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist');
     cy.get('[data-test-subj="filterBadge"]').click();
     cy.get('[data-test-subj="deleteFilterIcon"]').click();
@@ -587,7 +587,8 @@ describe('Application Analytics home page', () => {
     });
     cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
     cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').click();
-    cy.get('[data-test-subj="confirmModalConfirmButton"]').click();
+    cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
+    cy.get('[data-test-subj="popoverModal__deleteButton"').click();
     cy.wait(delay);
     cy.get('.euiToast').contains(`Applications successfully deleted!`);
     cy.get(`[data-test-subj="${newName}ApplicationLink"]`).should('not.exist');

diff --git a/dashboards-observability/public/components/application_analytics/components/app_table.tsx b/dashboards-observability/public/components/application_analytics/components/app_table.tsx
@@ -34,9 +34,9 @@ import {
 import _ from 'lodash';
 import React, { ReactElement, useEffect, useState } from 'react';
 import moment from 'moment';
+import { DeleteModal } from '../../common/helpers/delete_modal';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
-import { getClearModal } from '../helpers/modal_containers';
 import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
 import { ApplicationListType } from '../../../../common/types/app_analytics';
 import { AvailabilityType } from '../helpers/types';
@@ -129,12 +129,12 @@ export function AppTable(props: AppTableProps) {
   const deleteApp = () => {
     const applicationString = `application${selectedApplications.length > 1 ? 's' : ''}`;
     setModalLayout(
-      getClearModal(
-        closeModal,
-        onDelete,
-        `Delete ${selectedApplications.length} ${applicationString}`,
-        `Are you sure you want to delete the selected ${selectedApplications.length} ${applicationString}?`
-      )
+      <DeleteModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${selectedApplications.length} ${applicationString}`}
+        message={`Are you sure you want to delete the selected ${selectedApplications.length} ${applicationString}?`}
+      />
     );
     showModal();
   };

diff --git a/dashboards-observability/public/components/common/helpers/delete_modal.tsx b/dashboards-observability/public/components/common/helpers/delete_modal.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiModal,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+export const DeleteModal = ({
+  onCancel,
+  onConfirm,
+  title,
+  message,
+}: {
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  title: string;
+  message: string;
+}) => {
+  const [value, setValue] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={onCancel} initialFocus="[name=input]">
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiText>{message}</EuiText>
+          <EuiText>The action cannot be undone.</EuiText>
+          <EuiSpacer />
+          <EuiForm>
+            <EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
+              <EuiFieldText
+                name="input"
+                placeholder="delete"
+                value={value}
+                onChange={(e) => onChange(e)}
+                data-test-subj="popoverModal__deleteTextInput"
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
+          <EuiButton
+            onClick={() => onConfirm()}
+            color="danger"
+            fill
+            disabled={value !== 'delete'}
+            data-test-subj="popoverModal__deleteButton"
+          >
+            Delete
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx
@@ -38,10 +38,11 @@ import {
   CUSTOM_PANELS_DOCUMENTATION_URL,
 } from '../../../common/constants/custom_panels';
 import { UI_DATE_FORMAT } from '../../../common/constants/shared';
-import { getCustomModal, DeletePanelModal } from './helpers/modal_containers';
+import { getCustomModal } from './helpers/modal_containers';
 import { CustomPanelListType } from '../../../common/types/custom_panels';
 import { getSampleDataModal } from '../common/helpers/add_sample_modal';
 import { pageStyles } from '../../../common/constants/shared';
+import { DeleteModal } from '../common/helpers/delete_modal';
 
 /*
  * "CustomPanelTable" module, used to view all the saved panels
@@ -177,7 +178,7 @@ export const CustomPanelTable = ({
   const deletePanel = () => {
     const customPanelString = `operational panel${selectedCustomPanels.length > 1 ? 's' : ''}`;
     setModalLayout(
-      <DeletePanelModal
+      <DeleteModal
         onConfirm={onDelete}
         onCancel={closeModal}
         title={`Delete ${selectedCustomPanels.length} ${customPanelString}`}

diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
@@ -39,7 +39,7 @@ import {
 } from '../../../common/constants/custom_panels';
 import { SavedVisualizationType, VisualizationType } from '../../../common/types/custom_panels';
 import { PanelGrid } from './panel_modules/panel_grid';
-import { DeletePanelModal, getCustomModal } from './helpers/modal_containers';
+import { getCustomModal } from './helpers/modal_containers';
 import PPLService from '../../services/requests/ppl';
 import {
   isDateValid,
@@ -59,6 +59,7 @@ import {
   parseForIndices,
 } from '../common/search/autocomplete_logic';
 import { AddVisualizationPopover } from './helpers/add_visualization_popover';
+import { DeleteModal } from '../common/helpers/delete_modal';
 
 /*
  * "CustomPanelsView" module used to render an Operational Panel
@@ -224,7 +225,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
 
   const deletePanel = () => {
     setModalLayout(
-      <DeletePanelModal
+      <DeleteModal
         onConfirm={onDelete}
         onCancel={closeModal}
         title={`Delete ${openPanelName}`}

diff --git a/...ic/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap b/...ic/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Modal Container component renders DeletePanelModal component 1`] = `
+exports[`Modal Container component renders DeleteModal component 1`] = `
 <EuiOverlayMask>
   <EuiModal
     initialFocus="[name=input]"

diff --git a/...-observability/public/components/custom_panels/helpers/__tests__/modal_container.test.tsx b/...-observability/public/components/custom_panels/helpers/__tests__/modal_container.test.tsx
@@ -5,8 +5,9 @@
 
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import { DeleteModal } from '../../../common/helpers/delete_modal';
 import React from 'react';
-import { getCloneModal, getDeleteModal, DeletePanelModal } from '../modal_containers';
+import { getCloneModal, getDeleteModal } from '../modal_containers';
 
 describe('Modal Container component', () => {
   configure({ adapter: new Adapter() });
@@ -28,13 +29,13 @@ describe('Modal Container component', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('renders DeletePanelModal component', () => {
+  it('renders DeleteModal component', () => {
     const onCancel = jest.fn();
     const onConfirm = jest.fn();
     const title = 'Test Title';
     const message = 'Test Message';
     const wrapper = shallow(
-      <DeletePanelModal onCancel={onCancel} onConfirm={onConfirm} title={title} message={message} />
+      <DeleteModal onCancel={onCancel} onConfirm={onConfirm} title={title} message={message} />
     );
     expect(wrapper).toMatchSnapshot();
   });

diff --git a/dashboards-observability/public/components/custom_panels/helpers/modal_containers.tsx b/dashboards-observability/public/components/custom_panels/helpers/modal_containers.tsx
@@ -105,61 +105,3 @@ export const getDeleteModal = (
     </EuiOverlayMask>
   );
 };
-
-export const DeletePanelModal = ({
-  onCancel,
-  onConfirm,
-  title,
-  message,
-}: {
-  onCancel: (
-    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => void;
-  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  title: string;
-  message: string;
-}) => {
-  const [value, setValue] = useState('');
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
-  return (
-    <EuiOverlayMask>
-      <EuiModal onClose={onCancel} initialFocus="[name=input]">
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
-        </EuiModalHeader>
-
-        <EuiModalBody>
-          <EuiText>{message}</EuiText>
-          <EuiText>The action cannot be undone.</EuiText>
-          <EuiSpacer />
-          <EuiForm>
-            <EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
-              <EuiFieldText
-                name="input"
-                placeholder="delete"
-                value={value}
-                onChange={(e) => onChange(e)}
-                data-test-subj="popoverModal__deleteTextInput"
-              />
-            </EuiFormRow>
-          </EuiForm>
-        </EuiModalBody>
-
-        <EuiModalFooter>
-          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
-          <EuiButton
-            onClick={() => onConfirm()}
-            color="danger"
-            fill
-            disabled={value !== 'delete'}
-            data-test-subj="popoverModal__deleteButton"
-          >
-            Delete
-          </EuiButton>
-        </EuiModalFooter>
-      </EuiModal>
-    </EuiOverlayMask>
-  );
-};
diff --git a/dashboards-observability/public/components/explorer/home.tsx b/dashboards-observability/public/components/explorer/home.tsx
@@ -31,6 +31,7 @@ import {
   EuiHorizontalRule,
 } from '@elastic/eui';
 import { Search } from '../common/search/search';
+import { DeleteModal } from '../common/helpers/delete_modal';
 import {
   RAW_QUERY,
   TAB_ID_TXT_PFX,
@@ -55,7 +56,6 @@ import { init as initQueryResult, selectQueryResult } from './slices/query_resul
 import { SavedQueryTable } from './home_table/saved_query_table';
 import { selectQueries } from './slices/query_slice';
 import { setSelectedQueryTab } from './slices/query_tab_slice';
-import { DeletePanelModal } from '../custom_panels/helpers/modal_containers';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../common/constants/custom_panels';
 import { getSampleDataModal } from '../common/helpers/add_sample_modal';
 import { parseGetSuggestions, onItemSelect } from '../common/search/autocomplete_logic';
@@ -299,7 +299,7 @@ export const Home = (props: IHomeProps) => {
   const deleteHistory = () => {
     const customPanelString = `${selectedHistories.length > 1 ? 'histories' : 'history'}`;
     setModalLayout(
-      <DeletePanelModal
+      <DeleteModal
         onConfirm={deleteHistoryList}
         onCancel={closeModal}
         title={`Delete ${selectedHistories.length} ${customPanelString}`}