feat(pci.private-registry): add modal for all deletion

ref: TAPC-584
Signed-off-by: Pierre-Philippe <[email protected]>

packages/manager/apps/pci-private-registry/public/translations/ip-restrictions/Messages_fr_FR.json

@@ -15,5 +15,6 @@
   "private_registry_cidr_delete_all_success": "Tous les blocs CIDR sélectionnés ont été supprimés avec succès.",
   "private_registry_cidr_help_authorized_component": "<p>Il existe 2 composants logiciel pour gérer les blocs<br/> CIDR :</p><p style='display: block;'>Management: permet d'autoriser l'acces à UI et à <br/> l'API Harbor.</p><p style='display: block;'>Registry: permet aux différents client / CLI d'autoriser <br/>  l'acces au backend Registry (Docker, Helm, ... )</p>",
   "private_registry_cidr_already_exist": "L'IP/CIDR existe déjà dans la liste.",
-  "private_registry_cidr_delete_modal_subtitle": "Êtes vous sûr de vouloir supprimer le bloc CIDR ?"
+  "private_registry_cidr_delete_modal_subtitle": "Êtes vous sûr de vouloir supprimer le bloc CIDR ?",
+  "private_registry_cidr_delete_modal_all_subtitle": "Êtes vous sûr de vouloir supprimer tous les blocs CIDR sélectionnés ?"
 }

packages/manager/apps/pci-private-registry/src/components/CIDR/DeleteModal.component.tsx

@@ -1,14 +1,18 @@
 import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useFormContext } from 'react-hook-form';
+import { useCallback } from 'react';
 import { OsdsModal, OsdsButton } from '@ovhcloud/ods-components/react';
 import {
   Description,
   useNotifications,
 } from '@ovh-ux/manager-react-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { useUpdateIpRestriction } from '@/api/hooks/useIpRestrictions';
+import {
+  useIpRestrictions,
+  useUpdateIpRestriction,
+} from '@/api/hooks/useIpRestrictions';
 import {
   FilterRestrictionsServer,
   TIPRestrictionsData,
@@ -17,11 +21,18 @@ import {
 } from '@/types';
 import { categorizeByKey } from '@/helpers';
 
-export default function DeleteModal({ cidr }: { cidr: TIPRestrictionsData }) {
+export default function DeleteModal({
+  cidr,
+  all = false,
+}: {
+  cidr?: TIPRestrictionsData;
+  all: boolean;
+}) {
   const { t } = useTranslation(['ip-restrictions']);
   const navigate = useNavigate();
   const closeModal = () => navigate('..');
   const { projectId, registryId } = useParams();
+  const { data } = useIpRestrictions(projectId, registryId);
   const { reset } = useFormContext();
   const { addError, addSuccess } = useNotifications();
 
@@ -33,20 +44,39 @@ export default function DeleteModal({ cidr }: { cidr: TIPRestrictionsData }) {
     },
     onSuccess: () => {
       reset();
-      addSuccess(t('private_registry_cidr_delete_success'), true);
+      addSuccess(
+        t(
+          all
+            ? 'private_registry_cidr_delete_all_success'
+            : 'private_registry_cidr_delete_success',
+        ),
+        true,
+      );
     },
   });
-  const categorizeByKeyResult = categorizeByKey(
-    [
-      {
-        ipBlock: cidr.ipBlock,
-        authorization: cidr.authorization,
-        description: cidr.description,
-      },
-    ],
-    'authorization',
-    cidr.authorization,
-  );
+
+  const deleteAllSelectedRows = useCallback(() => {
+    const rowToDelete = data
+      .filter((item) => item.checked)
+      .map((item) => ({
+        ipBlock: item.ipBlock,
+        authorization: item.authorization,
+        description: item.description,
+      }));
+
+    const categorizeByKeyResultAll = categorizeByKey(
+      rowToDelete,
+      'authorization',
+      ['management', 'registry'],
+    );
+    updateIpRestrictions({
+      cidrToUpdate: categorizeByKeyResultAll as Record<
+        FilterRestrictionsServer,
+        TIPRestrictionsDefault[]
+      >,
+      action: TIPRestrictionsMethodEnum.DELETE,
+    });
+  }, [data, updateIpRestrictions]);
 
   return (
     <OsdsModal
@@ -56,7 +86,11 @@ export default function DeleteModal({ cidr }: { cidr: TIPRestrictionsData }) {
       headline={t('ip_restrictions_delete_block')}
     >
       <Description className="mt-6">
-        {t('private_registry_cidr_delete_modal_subtitle')}
+        {t(
+          all
+            ? 'private_registry_cidr_delete_modal_all_subtitle'
+            : 'private_registry_cidr_delete_modal_subtitle',
+        )}
       </Description>
       <OsdsButton
         slot="actions"
@@ -70,15 +104,29 @@ export default function DeleteModal({ cidr }: { cidr: TIPRestrictionsData }) {
         slot="actions"
         color={ODS_THEME_COLOR_INTENT.primary}
         variant={ODS_BUTTON_VARIANT.flat}
-        onClick={() =>
-          updateIpRestrictions({
+        onClick={() => {
+          if (all) {
+            return deleteAllSelectedRows();
+          }
+          const categorizeByKeyResult = categorizeByKey(
+            [
+              {
+                ipBlock: cidr.ipBlock,
+                authorization: cidr.authorization,
+                description: cidr.description,
+              },
+            ],
+            'authorization',
+            cidr.authorization,
+          );
+          return updateIpRestrictions({
             cidrToUpdate: categorizeByKeyResult as Record<
               FilterRestrictionsServer,
               TIPRestrictionsDefault[]
             >,
             action: TIPRestrictionsMethodEnum.DELETE,
-          })
-        }
+          });
+        }}
       >
         {t('common:private_registry_common_confirm')}
       </OsdsButton>

packages/manager/apps/pci-private-registry/src/components/CIDR/Filters.component.tsx

@@ -24,70 +24,26 @@ import {
 
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useTranslation } from 'react-i18next';
-import { useRef, useState, useMemo, memo, useCallback } from 'react';
+import { useRef, useState, useMemo, memo } from 'react';
 
-import {
-  useIpRestrictions,
-  useUpdateIpRestriction,
-} from '@/api/hooks/useIpRestrictions';
-import { categorizeByKey } from '@/helpers';
-import {
-  FilterRestrictionsServer,
-  TIPRestrictionsDefault,
-  TIPRestrictionsMethodEnum,
-} from '@/types';
+import { useIpRestrictions } from '@/api/hooks/useIpRestrictions';
+
+import DeleteModal from './DeleteModal.component';
 
 const Filters = ({ createNewRow }: { createNewRow: () => void }) => {
   const [searchField, setSearchField] = useState('');
   const { projectId, registryId } = useParams();
   const { filters, addFilter, removeFilter } = useColumnFilters();
-  const { reset } = useFormContext();
   const filterPopoverRef = useRef(undefined);
   const { pagination, setPagination } = useDataGrid();
   const { data } = useIpRestrictions(projectId, registryId);
-
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const { t } = useTranslation(['ip-restrictions']);
-  const { addSuccess, addError } = useNotifications();
   const showDeleteButton = useMemo(
     () => data.filter((item) => item.checked).length >= 2,
     [data],
   );
 
-  const { updateIpRestrictions } = useUpdateIpRestriction({
-    projectId,
-    registryId,
-    onError: () => {
-      addError(t('common:private_registry_crud_cidr_error'));
-    },
-    onSuccess: () => {
-      reset();
-      addSuccess(t('private_registry_cidr_delete_all_success'), true);
-    },
-  });
-
-  const deleteAllSelectedRows = useCallback(() => {
-    const rowToDelete = data
-      .filter((item) => item.checked)
-      .map((item) => ({
-        ipBlock: item.ipBlock,
-        authorization: item.authorization,
-        description: item.description,
-      }));
-
-    const categorizeByKeyResult = categorizeByKey(
-      rowToDelete,
-      'authorization',
-      ['management', 'registry'],
-    );
-    updateIpRestrictions({
-      cidrToUpdate: categorizeByKeyResult as Record<
-        FilterRestrictionsServer,
-        TIPRestrictionsDefault[]
-      >,
-      action: TIPRestrictionsMethodEnum.DELETE,
-    });
-  }, [data, updateIpRestrictions]);
-
   const DraftModeEnabled = useMemo(() => data.some((item) => item.draft), [
     data,
   ]);
@@ -121,7 +77,7 @@ const Filters = ({ createNewRow }: { createNewRow: () => void }) => {
               variant={ODS_BUTTON_VARIANT.stroked}
               color={ODS_THEME_COLOR_INTENT.primary}
               className="xs:mb-0.5 sm:mb-0"
-              onClick={deleteAllSelectedRows}
+              onClick={() => setOpenDeleteModal(true)}
             >
               <OsdsIcon
                 size={ODS_ICON_SIZE.xs}
@@ -133,6 +89,7 @@ const Filters = ({ createNewRow }: { createNewRow: () => void }) => {
             </OsdsButton>
           )}
         </div>
+        {openDeleteModal && <DeleteModal all />}
 
         <div className="justify-between flex">
           <OsdsSearchBar