[Backport 2.x] Integrations: Update delete modal to support custom verify prompt

.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');

public/components/common/helpers/delete_modal.tsx

@@ -25,18 +25,21 @@ export const DeleteModal = ({
   onConfirm,
   title,
   message,
+  prompt,
 }: {
   onCancel: (
     event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => void;
   onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   title: string;
   message: string;
+  prompt?: string;
 }) => {
   const [value, setValue] = useState('');
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
+  const deletePrompt = prompt ?? 'delete';
   return (
     <EuiOverlayMask>
       <EuiModal onClose={onCancel} initialFocus="[name=input]">
@@ -49,10 +52,10 @@ export const DeleteModal = ({
           <EuiText>The action cannot be undone.</EuiText>
           <EuiSpacer />
           <EuiForm>
-            <EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
+            <EuiFormRow label={`To confirm deletion, enter "${deletePrompt}" in the text field`}>
               <EuiFieldText
                 name="input"
-                placeholder="delete"
+                placeholder={deletePrompt}
                 value={value}
                 onChange={(e) => 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

public/components/integrations/components/added_integration.tsx

@@ -50,7 +50,9 @@
 
   const { setToast } = useToast();
 
-  const [stateData, setData] = useState<any>({ data: {} });
+  const [stateData, setData] = useState<{ data: IntegrationInstanceResult | undefined }>({
+    data: undefined,
+  });
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -73,7 +75,7 @@
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
-  const getModal = () => {
+  const activateDeleteModal = (integrationName?: string) => {
     setModalLayout(
       <DeleteModal
         onConfirm={() => {
@@ -83,8 +85,9 @@
         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 @@
         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 @@
       .then((exists) => setData(exists));
   }
 
-  function AddedOverview(overviewProps: any) {
+  function AddedOverview(overviewProps: { data: { data?: IntegrationInstanceResult } }) {
     const { data } = overviewProps.data;
 
     return (
@@ -136,7 +140,7 @@
                   aria-label="Delete"
                   color="danger"
                   onClick={() => {
-                    getModal();
+                    activateDeleteModal(data?.name);
                   }}
                   data-test-subj="deleteInstanceButton"
                 />
@@ -165,12 +169,12 @@
     );
   }
 
-  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 @@
         name: 'Type',
         sortable: true,
         truncateText: true,
-        render: (value, record) => (
-          <EuiText data-test-subj={`${record.type}IntegrationDescription`}>
+        render: (_value, record) => (
+          <EuiText data-test-subj={`${record.assetType}AssetTypeDescription`}>
             {_.truncate(record.assetType, { length: 100 })}
           </EuiText>
         ),
       },
-    ] as Array<EuiTableFieldDataColumnType<any>>;
+    ] as Array<EuiTableFieldDataColumnType<AssetReference>>;
 
     return (
       <EuiPanel>

public/components/integrations/components/added_integration_table.tsx

@@ -79,7 +79,7 @@
         <EuiIcon
           type={'trash'}
           onClick={() => {
-            getModal(record.id, record.templateName);
+            activateDeleteModal(record.id, record.name);
           }}
         />
       ),
@@ -103,7 +103,7 @@
       });
   }
 
-  const getModal = (integrationInstanceId: string, name: string) => {
+  const activateDeleteModal = (integrationInstanceId: string, name: string) => {
     setModalLayout(
       <DeleteModal
         onConfirm={() => {
@@ -113,8 +113,9 @@
         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);