From 9b80980d326d2515e263ccf50381f3649d9747b0 Mon Sep 17 00:00:00 2001 From: Eugene Lee Date: Wed, 25 May 2022 14:21:21 -0700 Subject: [PATCH] Make common delete modal for components Signed-off-by: Eugene Lee --- .../integration/1_event_analytics.spec.js | 6 +- .../integration/7_app_analytics.spec.js | 5 +- .../components/app_table.tsx | 14 ++-- .../common/helpers/delete_modal.tsx | 79 +++++++++++++++++++ .../custom_panels/custom_panel_table.tsx | 5 +- .../custom_panels/custom_panel_view.tsx | 5 +- .../modal_container.test.tsx.snap | 2 +- .../__tests__/modal_container.test.tsx | 7 +- .../helpers/modal_containers.tsx | 58 -------------- .../components/event_analytics/home/home.tsx | 4 +- 10 files changed, 105 insertions(+), 80 deletions(-) create mode 100644 dashboards-observability/public/components/common/helpers/delete_modal.tsx diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 981b10b53..7a3a45352 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -35,13 +35,13 @@ describe('Has working breadcrumbs', () => { it('Redirect to correct page on breadcrumb click', () => { landOnEventExplorer(); cy.wait(delay * 3); - cy.get('.euiBreadcrumb').contains('Explorer').click(); + 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 index 62db0adbe..3797dc588 100644 --- 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(); @@ -586,7 +586,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 index 27611aa76..a703ae619 100644 --- 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}?` - ) + ); showModal(); }; diff --git a/dashboards-observability/public/components/common/helpers/delete_modal.tsx b/dashboards-observability/public/components/common/helpers/delete_modal.tsx new file mode 100644 index 000000000..9bf80ec1f --- /dev/null +++ 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 | React.MouseEvent + ) => void; + onConfirm: (event?: React.MouseEvent) => void; + title: string; + message: string; +}) => { + const [value, setValue] = useState(''); + const onChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + return ( + + + + {title} + + + + {message} + The action cannot be undone. + + + + onChange(e)} + data-test-subj="popoverModal__deleteTextInput" + /> + + + + + + Cancel + onConfirm()} + color="danger" + fill + disabled={value !== 'delete'} + data-test-subj="popoverModal__deleteButton" + > + Delete + + + + + ); +}; diff --git a/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx b/dashboards-observability/public/components/custom_panels/custom_panel_table.tsx index 305445285..a2c7ce8d6 100644 --- 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( - { const deletePanel = () => { setModalLayout( - { 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( - + ); 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 index e403d88bb..0fb80a597 100644 --- 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 = ( ); }; - -export const DeletePanelModal = ({ - onCancel, - onConfirm, - title, - message, -}: { - onCancel: ( - event?: React.KeyboardEvent | React.MouseEvent - ) => void; - onConfirm: (event?: React.MouseEvent) => void; - title: string; - message: string; -}) => { - const [value, setValue] = useState(''); - const onChange = (e: React.ChangeEvent) => { - setValue(e.target.value); - }; - return ( - - - - {title} - - - - {message} - The action cannot be undone. - - - - onChange(e)} - data-test-subj="popoverModal__deleteTextInput" - /> - - - - - - Cancel - onConfirm()} - color="danger" - fill - disabled={value !== 'delete'} - data-test-subj="popoverModal__deleteButton" - > - Delete - - - - - ); -}; diff --git a/dashboards-observability/public/components/event_analytics/home/home.tsx b/dashboards-observability/public/components/event_analytics/home/home.tsx index f25aa4c32..ecd6f79c3 100644 --- a/dashboards-observability/public/components/event_analytics/home/home.tsx +++ b/dashboards-observability/public/components/event_analytics/home/home.tsx @@ -30,6 +30,7 @@ import { EuiText, EuiHorizontalRule, } from '@elastic/eui'; +import { DeleteModal } from '../../common/helpers/delete_modal'; import { Search } from '../../common/search/search'; import { RAW_QUERY, @@ -55,7 +56,6 @@ import { init as initQueryResult, selectQueryResult } from '../redux/slices/quer import { SavedQueryTable } from './saved_objects_table'; import { selectQueries } from '../redux/slices/query_slice'; import { setSelectedQueryTab } from '../redux/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( -