fix: Improve delete module dialog phrasing (#4497)

* fix: Improve delete module dialog phrasing & adjust tests

* fix tests

* improve code changes

* fix code style issue

Author: chriskari

public/i18n/en.yaml

@@ -892,7 +892,8 @@ kyma-modules:
   change-release-channel-warning: The module's version in the fast channel is usually higher than the version in the regular channel. As downgrades are not supported, switching the channel back to regular will not affect the module's version <0>until the channel version is the same or higher.</0> To use the lower version, you must delete the module and re-add it from the <0>regular</0> channel.
   channel: Channel
   channel-overridden: Overridden
-  delete-module: Before you delete the {{name}} module, make sure the module resources are no longer needed. This action also permanently removes the namespaces, service instances, and service bindings created by the module. Are you sure you want to continue?
+  delete-module: Deleting this module will also permanently delete all namespaces, service instances, and service bindings created by the module.
+  delete-module-title: Delete module {{name}} from your cluster?
   description: With <0>Kyma’s modular approach</0>, you can install just the modules you need, instead of a predefined set of components.
   documentation: Documentation
   installation-state: Installation State

src/components/Modules/components/ModulesDeleteBox.tsx

@@ -5,7 +5,6 @@ import {
   List,
   ListItemStandard,
   MessageStrip,
-  Text,
 } from '@ui5/webcomponents-react';
 import {
   checkIfAllResourcesAreDeleted,
@@ -284,6 +283,9 @@ export const ModulesDeleteBox = ({
     }
   };
 
+  const moduleName =
+    chosenModuleIndex != null ? selectedModules[chosenModuleIndex]?.name : '';
+
   return (
     <DeleteMessageBox
       disableDeleteButton={
@@ -295,20 +297,14 @@ export const ModulesDeleteBox = ({
           ? 'common.buttons.cascade-delete'
           : null
       }
+      customTitle={t('kyma-modules.delete-module-title', { name: moduleName })}
+      customMessage={t('kyma-modules.delete-module')}
       cancelFn={() => {
         setAllowForceDelete(false);
         setChosenModuleIndex(null);
       }}
       additionalDeleteInfo={
         <>
-          <Text>
-            {t('kyma-modules.delete-module', {
-              name:
-                chosenModuleIndex != null
-                  ? selectedModules[chosenModuleIndex]?.name
-                  : '',
-            })}
-          </Text>
           {associatedResources.length > 0 && (
             <>
               <MessageStrip

src/shared/hooks/useDeleteResource.jsx

@@ -169,20 +169,23 @@ export function useDeleteResource({
     cancelFn,
     additionalDeleteInfo,
     customDeleteText,
+    customTitle,
+    customMessage,
     disableDeleteButton = false,
   }) => {
+    const defaultTitle = t(
+      resourceIsCluster
+        ? 'common.delete-dialog.disconnect-title'
+        : 'common.delete-dialog.delete-title',
+      {
+        type: prettifiedResourceName,
+      },
+    );
     return (
       <MessageBox
         style={{ maxWidth: '700px' }}
         type="Warning"
-        titleText={t(
-          resourceIsCluster
-            ? 'common.delete-dialog.disconnect-title'
-            : 'common.delete-dialog.delete-title',
-          {
-            type: prettifiedResourceName,
-          },
-        )}
+        titleText={customTitle || defaultTitle}
         open={showDeleteDialog}
         className="ui5-content-density-compact"
         id="delete-message-box"
@@ -223,15 +226,16 @@ export function useDeleteResource({
           }}
         >
           <Text style={{ paddingLeft: '7.5px' }}>
-            {t(
-              resourceIsCluster
-                ? 'common.delete-dialog.disconnect-message'
-                : 'common.delete-dialog.delete-message',
-              {
-                type: prettifiedResourceName,
-                name: resourceTitle || resource?.metadata?.name,
-              },
-            )}
+            {customMessage ??
+              t(
+                resourceIsCluster
+                  ? 'common.delete-dialog.disconnect-message'
+                  : 'common.delete-dialog.delete-message',
+                {
+                  type: prettifiedResourceName,
+                  name: resourceTitle || resource?.metadata?.name,
+                },
+              )}
           </Text>
           {additionalDeleteInfo && (
             <Text style={{ paddingLeft: '7.5px' }}>{additionalDeleteInfo}</Text>

tests/integration/support/commands.js

@@ -181,6 +181,7 @@ Cypress.Commands.add(
       searchInPlainTableText = false,
       parentSelector = null,
       waitForDelete = 0,
+      customHeaderText = null,
     } = options;
 
     cy.wait(1000);
@@ -218,15 +219,16 @@ Cypress.Commands.add(
     cy.get('ui5-button[data-testid="delete"]').click();
 
     if (confirmationEnabled) {
-      cy.contains(`Delete ${resourceType} ${resourceName}`);
+      const headerText = customHeaderText || `Delete ${resourceType}`;
+      cy.contains(customHeaderText || `Delete ${resourceType} ${resourceName}`);
 
       // TODO: This wait allows 'community modules add/edit/delete' to download needed resources to apply from backend.
       // The download is initiated when user mark module to install and then when user click delete, it deleted what is was able to download
       if (waitForDelete !== 0) {
         cy.wait(waitForDelete);
       }
 
-      cy.get(`[header-text="Delete ${resourceType}"]:visible`)
+      cy.get(`[header-text="${headerText}"]:visible`)
         .find('[data-testid="delete-confirmation"]')
         .click();
 

tests/integration/tests/kyma-cluster/test-community-modules.spec.js

@@ -176,10 +176,11 @@ context('Test Community Modules views', () => {
 
   it('Test deleting Community Modules from List and Details', () => {
     cy.deleteFromGenericList('Module', 'busola', {
+      parentSelector: '.community-modules-list',
       searchInPlainTableText: true,
       deletedVisible: false,
-      parentSelector: '.community-modules-list',
       waitForDelete: 2000,
+      customHeaderText: 'Delete module busola from your cluster?',
     });
   });
 });

tests/integration/tests/kyma-cluster/test-kyma-modules.spec.js

@@ -207,6 +207,7 @@ context('Test Kyma Modules views', () => {
     cy.deleteFromGenericList('Module', 'eventing', {
       searchInPlainTableText: true,
       parentSelector: '.modules-list',
+      customHeaderText: 'Delete module eventing from your cluster?',
     });
 
     // Uncomment after adding local KLM