diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 94700fcf7..02e79b33f 100644 --- 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 index 4f76e94eb..aeb5dbf4e 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(); @@ -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 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/explorer/home.tsx b/dashboards-observability/public/components/explorer/home.tsx index 9c0442417..3e10ad682 100644 --- 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( -