Reducing identical delete boxes

Author: KonradPietocha

src/components/KymaModules/KymaModulesList.js

@@ -17,20 +17,14 @@ import { useModuleTemplatesQuery } from './kymaModulesQueries';
 import { ModulesList } from './components/ModulesList';
 
 export default function KymaModulesList({
-  DeleteMessageBox,
-  handleResourceDelete,
-  handleModuleUninstall,
-  setKymaResourceState,
-  setInitialUnchangedResource,
   resourceName,
   resourceUrl,
   kymaResource,
   kymaResourceLoading,
-  kymaResourceState,
   selectedModules,
-  setOpenedModuleIndex,
-  detailsOpen,
   namespaced,
+  setOpenedModuleIndex,
+  handleResourceDelete,
 }) {
   const { t } = useTranslation();
   const [
@@ -73,21 +67,15 @@ export default function KymaModulesList({
       customComponents={[
         resource => (
           <ModulesList
-            DeleteMessageBox={DeleteMessageBox}
-            handleResourceDelete={handleResourceDelete}
             resource={resource}
             moduleTemplates={moduleTemplates}
             resourceName={resourceName}
             selectedModules={selectedModules}
             kymaResource={kymaResource}
             namespaced={namespaced}
-            detailsOpen={detailsOpen}
             resourceUrl={resourceUrl}
-            kymaResourceState={kymaResourceState}
             setOpenedModuleIndex={setOpenedModuleIndex}
-            setKymaResourceState={setKymaResourceState}
-            handleModuleUninstall={handleModuleUninstall}
-            setInitialUnchangedResource={setInitialUnchangedResource}
+            handleResourceDelete={handleResourceDelete}
           />
         ),
       ]}

…ules/components/ModulesListDeleteBox.tsx …aModules/components/ModulesDeleteBox.tsxsrc/components/KymaModules/components/ModulesListDeleteBox.tsx renamed to src/components/KymaModules/components/ModulesDeleteBox.tsx src/components/KymaModules/components/ModulesListDeleteBox.tsx renamed to src/components/KymaModules/components/ModulesDeleteBox.tsx

@@ -24,6 +24,8 @@ import pluralize from 'pluralize';
 import { useDelete } from 'shared/hooks/BackendAPI/useMutation';
 import { cloneDeep } from 'lodash';
 import { KymaResourceType, ModuleTemplateListType } from '../support';
+import { SetterOrUpdater } from 'recoil';
+import { ColumnLayoutState } from 'state/columnLayoutAtom';
 
 type ModulesListDeleteBoxProps = {
   DeleteMessageBox: React.FC<any>;
@@ -32,19 +34,23 @@ type ModulesListDeleteBoxProps = {
   chosenModuleIndex: number | null;
   kymaResource: KymaResourceType;
   kymaResourceState: KymaResourceType;
+  detailsOpen: boolean;
+  setLayoutColumn: SetterOrUpdater<ColumnLayoutState>;
   handleModuleUninstall: () => void;
   setChosenModuleIndex: React.Dispatch<React.SetStateAction<number | null>>;
   setInitialUnchangedResource: React.Dispatch<React.SetStateAction<any>>;
   setKymaResourceState: React.Dispatch<React.SetStateAction<any>>;
 };
 
-export const ModulesListDeleteBox = ({
+export const ModulesDeleteBox = ({
   DeleteMessageBox,
   moduleTemplates,
   selectedModules,
   chosenModuleIndex,
   kymaResource,
   kymaResourceState,
+  detailsOpen,
+  setLayoutColumn,
   handleModuleUninstall,
   setChosenModuleIndex,
   setKymaResourceState,
@@ -106,7 +112,7 @@ export const ModulesListDeleteBox = ({
 
       setResourceCounts(counts);
       setForceDeleteUrls(urls);
-      setCrUrls(crUrl);
+      setCrUrls(Array.isArray(crUrl) ? crUrl : [crUrl]);
     };
 
     fetchCounts();
@@ -239,6 +245,14 @@ export const ModulesListDeleteBox = ({
         });
         handleModuleUninstall();
         setInitialUnchangedResource(cloneDeep(kymaResourceState));
+        if (detailsOpen) {
+          setLayoutColumn({
+            layout: 'OneColumn',
+            startColumn: null,
+            midColumn: null,
+            endColumn: null,
+          });
+        }
         if (allowForceDelete && forceDeleteUrls.length > 0) {
           deleteCrResources(deleteResourceMutation, crUrls);
         }

src/components/KymaModules/components/ModulesList.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import { createPortal } from 'react-dom';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSetRecoilState } from 'recoil';
 import jsyaml from 'js-yaml';
@@ -16,7 +15,6 @@ import {
 } from '../support';
 import { UnmanagedModuleInfo } from './UnmanagedModuleInfo';
 import { ModuleStatus, resolveType } from './ModuleStatus';
-import { ModulesListDeleteBox } from './ModulesListDeleteBox';
 import { useModulesReleaseQuery } from '../kymaModulesQueries';
 import { useUrl } from 'hooks/useUrl';
 import { extractApiGroupVersion } from 'resources/Roles/helpers';
@@ -44,40 +42,28 @@ type CustomResourceDefinitionsType = {
 };
 
 type ModulesListProps = {
-  DeleteMessageBox: React.FC<any>;
   resource: KymaResourceType;
   moduleTemplates: ModuleTemplateListType;
   resourceName: string;
   selectedModules: { name: string }[];
   kymaResource: KymaResourceType;
   namespaced: boolean;
-  detailsOpen: boolean;
   resourceUrl: string;
-  kymaResourceState: KymaResourceType;
   setOpenedModuleIndex: React.Dispatch<
     React.SetStateAction<number | undefined>
   >;
-  setKymaResourceState: React.Dispatch<React.SetStateAction<any>>;
-  handleModuleUninstall: () => void;
-  setInitialUnchangedResource: React.Dispatch<React.SetStateAction<any>>;
   handleResourceDelete: (resourceData: any) => void;
 };
 
 export const ModulesList = ({
-  DeleteMessageBox,
   resource,
   moduleTemplates,
   resourceName,
   selectedModules,
   kymaResource,
   namespaced,
-  detailsOpen,
   resourceUrl,
-  kymaResourceState,
   setOpenedModuleIndex,
-  setKymaResourceState,
-  handleModuleUninstall,
-  setInitialUnchangedResource,
   handleResourceDelete,
 }: ModulesListProps) => {
   const { t } = useTranslation();
@@ -100,9 +86,6 @@ export const ModulesList = ({
   const { clusterUrl, namespaceUrl } = useUrl();
   const setLayoutColumn = useSetRecoilState(columnLayoutState);
   const setIsFormOpen = useSetRecoilState(isFormOpenState);
-  const [chosenModuleIndex, setChosenModuleIndex] = useState<number | null>(
-    null,
-  );
 
   const handleShowAddModule = () => {
     setLayoutColumn({
@@ -313,7 +296,7 @@ export const ModulesList = ({
         const index = selectedModules?.findIndex(kymaResourceModule => {
           return kymaResourceModule.name === resource.name;
         });
-        setChosenModuleIndex(index);
+        setOpenedModuleIndex(index);
         handleResourceDelete({});
       },
     },
@@ -429,22 +412,6 @@ export const ModulesList = ({
 
   return (
     <React.Fragment key="modules-list">
-      {!detailsOpen &&
-        createPortal(
-          <ModulesListDeleteBox
-            DeleteMessageBox={DeleteMessageBox}
-            handleModuleUninstall={handleModuleUninstall}
-            selectedModules={selectedModules}
-            chosenModuleIndex={chosenModuleIndex}
-            kymaResource={kymaResource}
-            kymaResourceState={kymaResourceState}
-            setKymaResourceState={setKymaResourceState}
-            setInitialUnchangedResource={setInitialUnchangedResource}
-            setChosenModuleIndex={setChosenModuleIndex}
-            moduleTemplates={moduleTemplates}
-          />,
-          document.body,
-        )}
       <div className="sap-margin-small">
         <UnmanagedModuleInfo kymaResource={kymaResource} />
       </div>