feat: Add additional info on Module delete modal

Author: mrCherry97

public/i18n/en.yaml

@@ -766,6 +766,7 @@ kyma-companion:
     chat: Chat
     page-insights: Page Insights
 kyma-modules:
+  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?
   associated-resources: Associated Resources
   unmanaged-modules-info: One of the modules is not managed and may not work properly. We cannot guarantee any service level agreement (SLA) or provide updates and maintenance for the module.
   unmanaged-modules-save-warning: Before proceeding, be aware that disabling module management may impact the stability and data integrity of your cluster. Once the management is disabled, reverting back may not be possible. Are you sure you want to continue?

src/components/KymaModules/KymaModulesList.js

@@ -469,46 +469,53 @@ export default function KymaModulesList({
             <DeleteMessageBox
               disableDeleteButton={checkIfAssociatedResourceLeft()}
               additionalDeleteInfo={
-                getAssociatedResources().length > 0 && (
-                  <>
-                    <MessageStrip design="Critical" hideCloseButton>
-                      {t('kyma-modules.associated-resources-warning')}
-                    </MessageStrip>
-                    <List
-                      headerText={t('kyma-modules.associated-resources')}
-                      mode="None"
-                      separators="All"
-                    >
-                      {getAssociatedResources().map(assResource => {
-                        const resourceCount =
-                          resourceCounts[
-                            `${assResource.kind}-${assResource.group}-${assResource.version}`
-                          ];
-
-                        return (
-                          <ListItemStandard
-                            onClick={e => {
-                              e.preventDefault();
-                              handleItemClick(
-                                assResource.kind,
-                                assResource.group,
-                                assResource.version,
-                              );
-                            }}
-                            type="Active"
-                            key={`${assResource.kind}-${assResource.group}-${assResource.version}`}
-                            additionalText={
-                              (resourceCount === 0 ? '0' : resourceCount) ||
-                              t('common.headers.loading')
-                            }
-                          >
-                            {pluralize(assResource?.kind)}
-                          </ListItemStandard>
-                        );
-                      })}
-                    </List>
-                  </>
-                )
+                <>
+                  <Text>
+                    {t('kyma-modules.delete-module', {
+                      name: selectedModules[chosenModuleIndex]?.name,
+                    })}
+                  </Text>
+                  {getAssociatedResources().length > 0 && (
+                    <>
+                      <MessageStrip design="Critical" hideCloseButton>
+                        {t('kyma-modules.associated-resources-warning')}
+                      </MessageStrip>
+                      <List
+                        headerText={t('kyma-modules.associated-resources')}
+                        mode="None"
+                        separators="All"
+                      >
+                        {getAssociatedResources().map(assResource => {
+                          const resourceCount =
+                            resourceCounts[
+                              `${assResource.kind}-${assResource.group}-${assResource.version}`
+                            ];
+
+                          return (
+                            <ListItemStandard
+                              onClick={e => {
+                                e.preventDefault();
+                                handleItemClick(
+                                  assResource.kind,
+                                  assResource.group,
+                                  assResource.version,
+                                );
+                              }}
+                              type="Active"
+                              key={`${assResource.kind}-${assResource.group}-${assResource.version}`}
+                              additionalText={
+                                (resourceCount === 0 ? '0' : resourceCount) ||
+                                t('common.headers.loading')
+                              }
+                            >
+                              {pluralize(assResource?.kind)}
+                            </ListItemStandard>
+                          );
+                        })}
+                      </List>
+                    </>
+                  )}
+                </>
               }
               resourceTitle={selectedModules[chosenModuleIndex]?.name}
               deleteFn={() => {

src/shared/hooks/useDeleteResource.js

@@ -178,6 +178,7 @@ export function useDeleteResource({
   }) => {
     return (
       <MessageBox
+        style={{ maxWidth: '700px' }}
         type="Warning"
         titleText={t(
           resourceIsCluster