Merge pull request #14916 from ovh/fix/pci-private-registry_fix-restr…

…iction_tapc-xxx Fix/pci private registry fix restriction tapc xxx
ovh · Jan 17, 2025 · c69b21d · c69b21d
2 parents 8985719 + 2adddd1
commit c69b21d
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 74 deletions.
diff --git a/packages/manager/apps/pci-private-registry/src/components/CIDR/Authorization.component.tsx b/packages/manager/apps/pci-private-registry/src/components/CIDR/Authorization.component.tsx
@@ -5,20 +5,23 @@ import { FilterRestrictionsEnum } from '@/types';
 import { capitalizeAndJoin } from '@/helpers';
 
 const Authorization = () => {
-  const { control, formState } = useFormContext();
+  const { control, formState, trigger } = useFormContext();
   const { t } = useTranslation(['ip-restrictions']);
   return (
     <Controller
       name="authorization"
       control={control}
-      render={({ field: { onChange, value } }) => (
+      render={({ field: { onChange, value }, fieldState: { isDirty } }) => (
         <OsdsSelect
           data-testid="authorization-select"
           error={Boolean(formState.errors?.authorization?.message)}
           onOdsValueChange={(e) => {
             if (typeof e.target.value === 'string') {
               onChange(JSON.parse(e.detail.value as string));
             }
+            if (!isDirty) {
+              trigger('authorization');
+            }
           }}
           value={JSON.stringify(value)}
         >

diff --git a/...es/manager/apps/pci-private-registry/src/components/CIDR/AuthorizationLabel.component.tsx b/...es/manager/apps/pci-private-registry/src/components/CIDR/AuthorizationLabel.component.tsx
@@ -19,50 +19,54 @@ import { useTranslation, Trans } from 'react-i18next';
 const AuthorizationLabel = () => {
   const { t } = useTranslation(['ip-restrictions']);
   return (
-    <OsdsPopover>
-      <span slot="popover-trigger">
-        <OsdsText
-          size={ODS_TEXT_SIZE._500}
-          hue={ODS_TEXT_COLOR_HUE._800}
-          level={ODS_TEXT_LEVEL.body}
-          color={ODS_TEXT_COLOR_INTENT.primary}
-        >
-          {t('private_registry_cidr_authorization')}
-        </OsdsText>
-
-        <OsdsIcon
-          name={ODS_ICON_NAME.HELP}
-          size={ODS_ICON_SIZE.xs}
-          className="ml-4 cursor-help"
-          color={ODS_THEME_COLOR_INTENT.primary}
-        />
-      </span>
-
-      <OsdsPopoverContent>
-        <Trans ns="ip-restrictions">
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_TEXT_LEVEL.body}
-          >
-            {t('private_registry_cidr_help_authorized_component')}
-          </OsdsText>
-          <br />
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
-            level={ODS_TEXT_LEVEL.body}
-          >
-            {t('private_registry_cidr_help_authorized_component_part2')}
-          </OsdsText>
-          <br />
+    <div className="whitespace-normal inline">
+      <OsdsPopover>
+        <span slot="popover-trigger">
           <OsdsText
-            color={ODS_THEME_COLOR_INTENT.text}
+            size={ODS_TEXT_SIZE._500}
+            hue={ODS_TEXT_COLOR_HUE._800}
             level={ODS_TEXT_LEVEL.body}
+            color={ODS_TEXT_COLOR_INTENT.primary}
           >
-            {t('private_registry_cidr_help_authorized_component_part3')}
+            {t('private_registry_cidr_authorization')}
           </OsdsText>
-        </Trans>
-      </OsdsPopoverContent>
-    </OsdsPopover>
+
+          <OsdsIcon
+            name={ODS_ICON_NAME.HELP}
+            size={ODS_ICON_SIZE.xs}
+            className="ml-4 cursor-help"
+            color={ODS_THEME_COLOR_INTENT.primary}
+          />
+        </span>
+
+        <OsdsPopoverContent>
+          <Trans ns="ip-restrictions">
+            <div className="flex flex-col gap-2">
+              <OsdsText
+                color={ODS_THEME_COLOR_INTENT.text}
+                level={ODS_TEXT_LEVEL.body}
+              >
+                {t('private_registry_cidr_help_authorized_component')}
+              </OsdsText>
+
+              <OsdsText
+                color={ODS_THEME_COLOR_INTENT.text}
+                level={ODS_TEXT_LEVEL.body}
+              >
+                {t('private_registry_cidr_help_authorized_component_part2')}
+              </OsdsText>
+
+              <OsdsText
+                color={ODS_THEME_COLOR_INTENT.text}
+                level={ODS_TEXT_LEVEL.body}
+              >
+                {t('private_registry_cidr_help_authorized_component_part3')}
+              </OsdsText>
+            </div>
+          </Trans>
+        </OsdsPopoverContent>
+      </OsdsPopover>
+    </div>
   );
 };
 

diff --git a/packages/manager/apps/pci-private-registry/src/components/CIDR/CIDR.component.tsx b/packages/manager/apps/pci-private-registry/src/components/CIDR/CIDR.component.tsx
@@ -31,7 +31,13 @@ export default function CIDR() {
   const { projectId = '', registryId = '' } = useParams();
   const { formState, reset } = useFormContext();
   const columns = useDatagridColumn();
-  const { pagination, setPagination, rows, totalRows } = useDataGridContext();
+  const {
+    pagination,
+    setPagination,
+    rows,
+    totalRows,
+    initialData,
+  } = useDataGridContext();
   const { clearNotifications } = useNotifications();
 
   const variablesPending = useMutationState({
@@ -73,7 +79,7 @@ export default function CIDR() {
 
   return (
     <>
-      {!rows.length && (
+      {!initialData.current.length && (
         <OsdsMessage
           color={ODS_THEME_COLOR_INTENT.info}
           type={ODS_MESSAGE_TYPE.info}

diff --git a/packages/manager/apps/pci-private-registry/src/components/CIDR/Description.component.tsx b/packages/manager/apps/pci-private-registry/src/components/CIDR/Description.component.tsx
@@ -11,10 +11,11 @@ const Description = () => {
     <Controller
       name="description"
       control={control}
-      render={({ field: { onChange, value } }) => (
+      render={({ field: { onChange, value, onBlur } }) => (
         <OsdsInput
           data-testid="input-description"
           value={value}
+          onOdsInputBlur={onBlur}
           color={ODS_TEXT_COLOR_INTENT.primary}
           onOdsValueChange={(e) => onChange(e.detail.value)}
           type={ODS_INPUT_TYPE.text}

diff --git a/packages/manager/apps/pci-private-registry/src/components/CIDR/Filters.component.tsx b/packages/manager/apps/pci-private-registry/src/components/CIDR/Filters.component.tsx
@@ -148,6 +148,10 @@ const Filters = () => {
             className="w-[70%]"
             value={searchField}
             onOdsSearchSubmit={({ detail }) => {
+              setPagination({
+                pageIndex: 0,
+                pageSize: pagination.pageSize,
+              });
               handleAddFilter(detail.inputValue);
               setSearchField('');
             }}
@@ -182,7 +186,12 @@ const Filters = () => {
                   },
                 ]}
                 onAddFilter={(addedFilter, column) => {
-                  handleAddFilter(addedFilter.value, column.id, column.label);
+                  handleAddFilter(
+                    addedFilter.value,
+                    column.id,
+                    column.label,
+                    addedFilter.comparator,
+                  );
                   filterPopoverRef.current?.closeSurface();
                 }}
               />

diff --git a/packages/manager/apps/pci-private-registry/src/components/CIDR/IpBlock.component.tsx b/packages/manager/apps/pci-private-registry/src/components/CIDR/IpBlock.component.tsx
@@ -13,8 +13,9 @@ const IpBlock = () => {
     <Controller
       name="ipBlock"
       control={control}
-      render={({ field: { onChange, value } }) => (
+      render={({ field: { onChange, value, onBlur } }) => (
         <OsdsInput
+          onOdsInputBlur={onBlur}
           placeholder="ex: 192.168.1.1/32"
           color={ODS_TEXT_COLOR_INTENT.primary}
           type={ODS_INPUT_TYPE.text}

diff --git a/packages/manager/apps/pci-private-registry/src/components/listing/Action.component.tsx b/packages/manager/apps/pci-private-registry/src/components/listing/Action.component.tsx
@@ -90,27 +90,27 @@ export default function ActionComponent({
     },
     {
       id: 5,
-      label: t('private_registry_common_delete'),
-      href: hrefDelete,
+      label: t('ip-restrictions:private_registry_cidr_manage_title'),
+      href: hrefManageCIDR,
       disabled:
         registry.status !== PRIVATE_REGISTRY_STATUS.READY &&
         registry.status !== PRIVATE_REGISTRY_STATUS.ERROR,
       onClick: () =>
         tracking?.trackClick({
-          name: 'PCI_PROJECTS_PRIVATEREGISTRY_DELETE',
+          name: 'PCI_PROJECTS_PRIVATEREGISTRY_MANAGE_CIDR',
           type: 'action',
         }),
     },
     {
       id: 6,
-      label: t('ip-restrictions:private_registry_cidr_manage_title'),
-      href: hrefManageCIDR,
+      label: t('private_registry_common_delete'),
+      href: hrefDelete,
       disabled:
         registry.status !== PRIVATE_REGISTRY_STATUS.READY &&
         registry.status !== PRIVATE_REGISTRY_STATUS.ERROR,
       onClick: () =>
         tracking?.trackClick({
-          name: 'PCI_PROJECTS_PRIVATEREGISTRY_MANAGE_CIDR',
+          name: 'PCI_PROJECTS_PRIVATEREGISTRY_DELETE',
           type: 'action',
         }),
     },

diff --git a/packages/manager/apps/pci-private-registry/src/pages/CIDR/DatagridContext.provider.spec.tsx b/packages/manager/apps/pci-private-registry/src/pages/CIDR/DatagridContext.provider.spec.tsx
@@ -47,6 +47,7 @@ describe('DatagridProvider', () => {
         data={mockData}
         dataGrid={dataGrid}
         columnFilters={columnFilters}
+        totalRows={mockData.length}
       >
         <ConsumerComponent />
       </DatagridProvider>,

diff --git a/packages/manager/apps/pci-private-registry/src/pages/CIDR/DatagridContext.provider.tsx b/packages/manager/apps/pci-private-registry/src/pages/CIDR/DatagridContext.provider.tsx
@@ -3,7 +3,14 @@ import {
   useDataGrid,
 } from '@ovh-ux/manager-react-components';
 import { useFormContext } from 'react-hook-form';
-import { createContext, useCallback, useMemo, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 export type ContextDatagridType<
   T extends DatagridAction[] = DatagridAction[]
@@ -12,6 +19,7 @@ export type ContextDatagridType<
   isAllDataSelected: boolean;
   rows: T;
   totalRows: number;
+  initialData: { current: T };
   updateCheckedStateRow: (ipBlock: string, allIsSelected: boolean) => void;
   removeDraftRow: () => void;
   addNewRow: (column?: Record<string, unknown>) => void;
@@ -63,16 +71,23 @@ type DatagridProviderProps<TData extends DatagridAction[]> = {
   columnFilters?: ReturnType<typeof useColumnFilters>;
   children: JSX.Element;
   data: TData;
+  totalRows: number;
 };
 
 const DatagridProvider = <TData extends DatagridAction[]>({
   children,
   data,
   dataGrid,
   columnFilters,
+  totalRows,
 }: DatagridProviderProps<TData>) => {
   const [draftedData, setDraftedData] = useState(data);
-  const totalRows = data.length + draftedData.length;
+  const initialData = useRef(data);
+
+  useEffect(() => {
+    setDraftedData(data);
+  }, [data]);
+
   const { reset } = useFormContext();
   const isAllDataSelected = useMemo(
     () =>
@@ -114,6 +129,7 @@ const DatagridProvider = <TData extends DatagridAction[]>({
         ...dataGrid,
         ...columnFilters,
         rows: draftedData,
+        initialData,
         totalRows,
         draftedData,
         addNewRow,

diff --git a/packages/manager/apps/pci-private-registry/src/pages/CIDR/DeleteCIDR.page.tsx b/packages/manager/apps/pci-private-registry/src/pages/CIDR/DeleteCIDR.page.tsx
@@ -13,10 +13,7 @@ import {
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
 import { Filter } from '@ovh-ux/manager-core-api';
-import {
-  useIpRestrictionsWithFilter,
-  useUpdateIpRestriction,
-} from '@/api/hooks/useIpRestrictions';
+import { useUpdateIpRestriction } from '@/api/hooks/useIpRestrictions';
 import {
   FilterRestrictionsServer,
   TIPRestrictionsDefault,
@@ -31,7 +28,7 @@ type DeleteModalState = {
 export default function DeleteModal() {
   const { t } = useTranslation(['ip-restrictions']);
   const {
-    state: { filters, pagination, cidr, totalRows },
+    state: { cidr, totalRows },
   } = useLocation() as {
     state: DeleteModalState & { filters?: Filter[] } & {
       pagination?: PaginationState;
@@ -41,13 +38,6 @@ export default function DeleteModal() {
   const onClose = () => navigate('./..');
   const { projectId, registryId } = useParams();
 
-  const { data } = useIpRestrictionsWithFilter(
-    projectId,
-    registryId,
-    ['management', 'registry'],
-    pagination,
-    filters,
-  );
   const { addError, addSuccess } = useNotifications();
 
   const { updateIpRestrictions } = useUpdateIpRestriction({
@@ -78,7 +68,7 @@ export default function DeleteModal() {
       >,
       action: TIPRestrictionsMethodEnum.DELETE,
     });
-  }, [cidr, data, updateIpRestrictions]);
+  }, [cidr, updateIpRestrictions]);
 
   return (
     <PciModal

diff --git a/packages/manager/apps/pci-private-registry/src/pages/CIDR/ManageCIDR.page.tsx b/packages/manager/apps/pci-private-registry/src/pages/CIDR/ManageCIDR.page.tsx
@@ -85,12 +85,12 @@ export default function BlocIPBlock() {
     dataGrid.pagination,
     columnFilters.filters,
   );
-  const { t } = useTranslation(['ip-restrictions']);
   const methods = useForm<ConfirmCIDRSchemaType>({
     resolver: zodResolver(schemaAddCidr(dataCIDR.rows.map((e) => e.ipBlock))),
-    mode: 'onBlur',
-    reValidateMode: 'onChange',
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
   });
+  const { t } = useTranslation(['ip-restrictions']);
 
   return (
     <>
@@ -119,8 +119,8 @@ export default function BlocIPBlock() {
         <DatagridProvider
           dataGrid={dataGrid}
           columnFilters={columnFilters}
-          key={dataCIDR.totalRows}
           data={dataCIDR.rows}
+          totalRows={dataCIDR.totalRows}
         >
           <BlockCIDR />
         </DatagridProvider>

diff --git a/packages/manager/apps/pci-private-registry/src/pages/CIDR/useDatagridColumn.spec.tsx b/packages/manager/apps/pci-private-registry/src/pages/CIDR/useDatagridColumn.spec.tsx
@@ -59,7 +59,7 @@ describe('useDatagridColumn', () => {
 
     const { result } = renderHook(() => useDatagridColumn(), {
       wrapper: ({ children }) => (
-        <DatagridProvider data={mockData.rows}>
+        <DatagridProvider data={mockData.rows} totalRows={mockData.rows.length}>
           <Wrap>{children}</Wrap>
         </DatagridProvider>
       ),

diff --git a/packages/manager/apps/pci-private-registry/src/pages/CIDR/useDatagridColumn.tsx b/packages/manager/apps/pci-private-registry/src/pages/CIDR/useDatagridColumn.tsx
@@ -15,6 +15,7 @@ import { capitalizeAndJoin } from '@/helpers';
 import Checkboxes from '@/components/CIDR/Checkboxes.component';
 import AllCheckboxComponent from '@/components/CIDR/AllCheckbox.component';
 import useDataGridContext from './useDatagridContext';
+import AuthorizationLabel from '@/components/CIDR/AuthorizationLabel.component';
 
 function showCheckboxes(draft: boolean, dataLength: number): boolean {
   const minDataLength = draft ? 3 : 2;
@@ -88,7 +89,8 @@ export const useDatagridColumn = () => {
         ) : (
           <div>{capitalizeAndJoin(props.authorization)}</div>
         ),
-      label: t('private_registry_cidr_authorization'),
+      // need to had a Popover next to the label
+      label: ((<AuthorizationLabel />) as unknown) as string,
     },
     {
       id: 'add',