From 46c23eedf983113164e04dc325fe021b81315f8f Mon Sep 17 00:00:00 2001 From: Simeon Widdis Date: Tue, 19 Mar 2024 12:31:52 -0700 Subject: [PATCH] Integrations: Update delete modal to support custom verify prompt (#1567) * Update delete modal to support custom verify prompt Signed-off-by: Simeon Widdis * Update cypress for new delete flow Signed-off-by: Simeon Widdis --------- Signed-off-by: Simeon Widdis --- .../integrations_test/integrations.spec.js | 2 +- .../common/helpers/delete_modal.tsx | 9 ++++--- .../components/added_integration.tsx | 26 +++++++++++-------- .../components/added_integration_table.tsx | 9 ++++--- 4 files changed, 27 insertions(+), 19 deletions(-) diff --git a/.cypress/integration/integrations_test/integrations.spec.js b/.cypress/integration/integrations_test/integrations.spec.js index b386f62aa..28c816f5d 100644 --- a/.cypress/integration/integrations_test/integrations.spec.js +++ b/.cypress/integration/integrations_test/integrations.spec.js @@ -107,7 +107,7 @@ describe('Add nginx integration instance flow', () => { cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled'); - cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', { + cy.get(`input.euiFieldText[placeholder="${testInstance}"]`).focus().type(testInstance, { delay: 50, }); cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled'); diff --git a/public/components/common/helpers/delete_modal.tsx b/public/components/common/helpers/delete_modal.tsx index 9bf80ec1f..bf343fa6b 100644 --- a/public/components/common/helpers/delete_modal.tsx +++ b/public/components/common/helpers/delete_modal.tsx @@ -25,6 +25,7 @@ export const DeleteModal = ({ onConfirm, title, message, + prompt, }: { onCancel: ( event?: React.KeyboardEvent | React.MouseEvent @@ -32,11 +33,13 @@ export const DeleteModal = ({ onConfirm: (event?: React.MouseEvent) => void; title: string; message: string; + prompt?: string; }) => { const [value, setValue] = useState(''); const onChange = (e: React.ChangeEvent) => { setValue(e.target.value); }; + const deletePrompt = prompt ?? 'delete'; return ( @@ -49,10 +52,10 @@ export const DeleteModal = ({ The action cannot be undone. - + onChange(e)} data-test-subj="popoverModal__deleteTextInput" @@ -67,7 +70,7 @@ export const DeleteModal = ({ onClick={() => onConfirm()} color="danger" fill - disabled={value !== 'delete'} + disabled={value !== deletePrompt} data-test-subj="popoverModal__deleteButton" > Delete diff --git a/public/components/integrations/components/added_integration.tsx b/public/components/integrations/components/added_integration.tsx index 147588f92..7378426d5 100644 --- a/public/components/integrations/components/added_integration.tsx +++ b/public/components/integrations/components/added_integration.tsx @@ -50,7 +50,9 @@ export function AddedIntegration(props: AddedIntegrationProps) { const { setToast } = useToast(); - const [stateData, setData] = useState({ data: {} }); + const [stateData, setData] = useState<{ data: IntegrationInstanceResult | undefined }>({ + data: undefined, + }); useEffect(() => { chrome.setBreadcrumbs([ @@ -73,7 +75,7 @@ export function AddedIntegration(props: AddedIntegrationProps) { const [isModalVisible, setIsModalVisible] = useState(false); const [modalLayout, setModalLayout] = useState(); - const getModal = () => { + const activateDeleteModal = (integrationName?: string) => { setModalLayout( { @@ -83,8 +85,9 @@ export function AddedIntegration(props: AddedIntegrationProps) { onCancel={() => { setIsModalVisible(false); }} - title={`Delete Assets`} - message={`Are you sure you want to delete the selected asset(s)?`} + title={`Delete Integration`} + message={`Are you sure you want to delete the selected Integration?`} + prompt={integrationName} /> ); setIsModalVisible(true); @@ -97,6 +100,7 @@ export function AddedIntegration(props: AddedIntegrationProps) { setToast(`${stateData.data?.name} integration successfully deleted!`, 'success'); }) .catch((err) => { + console.error(err); setToast(`Error deleting ${stateData.data?.name} or its assets`, 'danger'); }) .finally(() => { @@ -110,7 +114,7 @@ export function AddedIntegration(props: AddedIntegrationProps) { .then((exists) => setData(exists)); } - function AddedOverview(overviewProps: any) { + function AddedOverview(overviewProps: { data: { data?: IntegrationInstanceResult } }) { const { data } = overviewProps.data; return ( @@ -136,7 +140,7 @@ export function AddedIntegration(props: AddedIntegrationProps) { aria-label="Delete" color="danger" onClick={() => { - getModal(); + activateDeleteModal(data?.name); }} data-test-subj="deleteInstanceButton" /> @@ -165,12 +169,12 @@ export function AddedIntegration(props: AddedIntegrationProps) { ); } - function AddedAssets(assetProps: any) { + function AddedAssets(assetProps: { data: { data?: { assets: AssetReference[] } } }) { const { data } = assetProps.data; const assets = data?.assets || []; - const renderAsset = (record: any) => { + const renderAsset = (record: AssetReference) => { switch (record.assetType) { case 'dashboard': return ( @@ -259,13 +263,13 @@ export function AddedIntegration(props: AddedIntegrationProps) { name: 'Type', sortable: true, truncateText: true, - render: (value, record) => ( - + render: (_value, record) => ( + {_.truncate(record.assetType, { length: 100 })} ), }, - ] as Array>; + ] as Array>; return ( diff --git a/public/components/integrations/components/added_integration_table.tsx b/public/components/integrations/components/added_integration_table.tsx index bec31d60f..1b16eef0e 100644 --- a/public/components/integrations/components/added_integration_table.tsx +++ b/public/components/integrations/components/added_integration_table.tsx @@ -79,7 +79,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) { { - getModal(record.id, record.templateName); + activateDeleteModal(record.id, record.name); }} /> ), @@ -103,7 +103,7 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) { }); } - const getModal = (integrationInstanceId: string, name: string) => { + const activateDeleteModal = (integrationInstanceId: string, name: string) => { setModalLayout( { @@ -113,8 +113,9 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) { onCancel={() => { setIsModalVisible(false); }} - title={`Delete Assets`} - message={`Are you sure you want to delete the selected asset(s)?`} + title={`Delete Integration`} + message={`Are you sure you want to delete the selected integration?`} + prompt={name} /> ); setIsModalVisible(true);