feat(pci.private-registry): fix

ref: TAPC-584 Signed-off-by: Pierre-Philippe <[email protected]>
ovh · Dec 17, 2024 · d93abbd · d93abbd
1 parent 2648ec7
commit d93abbd
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 21 deletions.
diff --git a/packages/manager/apps/pci-private-registry/package.json b/packages/manager/apps/pci-private-registry/package.json
@@ -21,7 +21,7 @@
     "@ovh-ux/manager-core-api": "^0.9.0",
     "@ovh-ux/manager-core-utils": "*",
     "@ovh-ux/manager-pci-common": "^0.14.0",
-    "@ovh-ux/manager-react-components": "^1.41.1",
+    "@ovh-ux/manager-react-components": "^1.41.2",
     "@ovh-ux/manager-react-core-application": "^0.11.4",
     "@ovh-ux/manager-react-shell-client": "^0.8.3",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",

diff --git a/packages/manager/apps/pci-private-registry/src/components/CIDR/ButtonsCIDR.component.tsx b/packages/manager/apps/pci-private-registry/src/components/CIDR/ButtonsCIDR.component.tsx
@@ -50,12 +50,12 @@ const Buttons = () => {
 
   const removeDraftRow = () => {
     reset();
-    queryClient.setQueryData(
-      getRegistryQueyPrefixWithId(projectId, registryId, [
-        'management',
-        'registry',
-      ]),
-      (oldData: TIPRestrictionsData[]) => oldData.filter((item) => !item.draft),
+    const key = getRegistryQueyPrefixWithId(projectId, registryId, [
+      'management',
+      'registry',
+    ]);
+    queryClient.setQueryData<TIPRestrictionsData[]>(key, (oldData) =>
+      oldData.filter((item) => !item.draft),
     );
   };
 

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
@@ -32,12 +32,15 @@ import {
   getRegistryQueyPrefixWithId,
   useIpRestrictionsWithFilter,
 } from '@/api/hooks/useIpRestrictions';
-import { TIPRestrictionsData } from '@/types';
 import useFilters from '@/pages/CIDR/useFilters';
 
 const createNewRow = (queryClient: QueryClient, key: QueryKey) =>
-  queryClient.setQueryData(key, (oldData: TIPRestrictionsData[]) => [
+  queryClient.setQueryData<TIPRestrictionsData[]>(key, (oldData) => [
     {
+      authorization: null,
+      description: null,
+      ipBlock: null,
+      createdAt: new Date(),
       id: oldData.length + 1,
       draft: true,
       checked: null,
@@ -129,13 +132,16 @@ export default function BlocCIDR() {
       <div className="mt-8">
         <>
           <Filters createNewRow={createNewBlocsCIDR} />
-          <Datagrid
-            columns={columns}
-            items={dataCIDR.rows}
-            totalItems={dataCIDR.totalRows || 0}
-            pagination={pagination}
-            onPaginationChange={setPagination}
-          />
+          <div className="mt-8">
+            <Datagrid
+              columns={columns}
+              items={dataCIDR.rows}
+              totalItems={dataCIDR.totalRows || 0}
+              pagination={pagination}
+              onPaginationChange={setPagination}
+              className="overflow-x-visible"
+            />
+          </div>
         </>
       </div>
     </>

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
@@ -70,12 +70,13 @@ const Filters = ({ createNewRow }: { createNewRow: () => void }) => {
     inputValue: string | string[],
     key = 'ipBlock',
     label = '',
+    comparator = FilterComparator.Includes,
   ) => {
     setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
     addFilter({
       key,
       value: inputValue,
-      comparator: FilterComparator.Includes,
+      comparator,
       label,
     } as Filter & { label: string });
   };
@@ -162,7 +163,12 @@ const Filters = ({ createNewRow }: { createNewRow: () => void }) => {
                   },
                 ]}
                 onAddFilter={(addedFilter, column) => {
-                  handleAddFilter(addedFilter.value, column.id, column.label);
+                  handleAddFilter(
+                    addedFilter.value,
+                    column.id,
+                    column.label,
+                    FilterComparator.IsEqual,
+                  );
                   filterPopoverRef.current?.closeSurface();
                 }}
               />

diff --git a/packages/manager/apps/pci-private-registry/src/helpers/index.spec.ts b/packages/manager/apps/pci-private-registry/src/helpers/index.spec.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { categorizeByKey, isCidr, isIp } from '.';
+import { categorizeByKey } from '.';
+
 import { aggregateBySpecificKey } from './index';
 
 type TestData = {

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
@@ -10,7 +10,7 @@ import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useTranslation } from 'react-i18next';
 import BreadcrumbCIDR from '@/components/CIDR/Breadcrumb.component';
 import { FilterRestrictionsEnum } from '@/types';
-import { isCidr, isIp } from '@/helpers';
+import { isCidr, isIp } from '@/helpers/ip-restrictions';
 import BlocCIDR from '@/components/CIDR/CIDR.component';
 import { useIpRestrictions } from '@/api/hooks/useIpRestrictions';
 import { useSuspenseRegistry } from '@/api/hooks/useRegistry';

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
@@ -63,7 +63,7 @@ export const useDatagridColumn = () => {
         'registry',
       ]);
 
-      queryClient.setQueryData(key, (oldData: TIPRestrictionsData[]) =>
+      queryClient.setQueryData<TIPRestrictionsData[]>(key, (oldData) =>
         oldData.map((item) => {
           if (allIsSelected && item.checked !== null) {
             if (data.rows.find((row) => row.ipBlock === item.ipBlock)) {