feat(pci-db-analytics): rework modals (#14216)

ref: DATATR-1690 ref: DATATR-1695 ref: DATATR-1757 Signed-off-by: Jonathan Perchoc <[email protected]> Co-authored-by: CDS Translator Agent <[email protected]>
ovh · Dec 12, 2024 · 6b29873 · 6b29873
1 parent a549c73
commit 6b29873
Show file tree

Hide file tree

Showing 143 changed files with 5,346 additions and 3,669 deletions.
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_de_DE.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_de_DE.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Eine ähnliche Integration ist bereits vorhanden.",
   "addIntegrationErrorStringParamRequired": "Erforderlich",
   "addIntegrationErrorIntegerParamRequired": "Geben Sie eine positive Zahl ein.",
-  "addIntegrationButtonAdd": "Hinzufügen"
+  "addIntegrationButtonAdd": "Hinzufügen",
+  "addIntegrationButtonCancel": "Abbrechen"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_en_GB.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_en_GB.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "A similar integration already exists",
   "addIntegrationErrorStringParamRequired": "Required",
   "addIntegrationErrorIntegerParamRequired": "Please enter a positive number",
-  "addIntegrationButtonAdd": "Add"
+  "addIntegrationButtonAdd": "Add",
+  "addIntegrationButtonCancel": "Cancel"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_es_ES.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_es_ES.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Ya existe una integración similar.",
   "addIntegrationErrorStringParamRequired": "Requerido",
   "addIntegrationErrorIntegerParamRequired": "Introduzca un número positivo",
-  "addIntegrationButtonAdd": "Añadir"
+  "addIntegrationButtonAdd": "Añadir",
+  "addIntegrationButtonCancel": "Cancelar"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_fr_CA.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_fr_CA.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Une intégration similaire existe déjà",
   "addIntegrationErrorStringParamRequired": "Requis",
   "addIntegrationErrorIntegerParamRequired": "Veuillez entrer un nombre positif",
-  "addIntegrationButtonAdd": "Ajouter"
+  "addIntegrationButtonAdd": "Ajouter",
+  "addIntegrationButtonCancel": "Annuler"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_fr_FR.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_fr_FR.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Une intégration similaire existe déjà",
   "addIntegrationErrorStringParamRequired": "Requis",
   "addIntegrationErrorIntegerParamRequired": "Veuillez entrer un nombre positif",
-  "addIntegrationButtonAdd": "Ajouter"
+  "addIntegrationButtonAdd": "Ajouter",
+  "addIntegrationButtonCancel": "Annuler"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_it_IT.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_it_IT.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Esiste già un'integrazione analoga.",
   "addIntegrationErrorStringParamRequired": "Obbligatorio",
   "addIntegrationErrorIntegerParamRequired": "Inserisci un numero positivo",
-  "addIntegrationButtonAdd": "Aggiungi"
+  "addIntegrationButtonAdd": "Aggiungi",
+  "addIntegrationButtonCancel": "Annulla"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_pl_PL.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_pl_PL.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Podobna integracja już istnieje.",
   "addIntegrationErrorStringParamRequired": "Wymagane",
   "addIntegrationErrorIntegerParamRequired": "Wprowadź liczbę dodatnią",
-  "addIntegrationButtonAdd": "Dodaj"
+  "addIntegrationButtonAdd": "Dodaj",
+  "addIntegrationButtonCancel": "Anuluj"
 }
diff --git a/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_pt_PT.json b/...ic/translations/pci-databases-analytics/services/service/integrations/Messages_pt_PT.json
@@ -43,5 +43,6 @@
   "addIntegrationErrorNoDuplicate": "Já existe uma integração semelhante",
   "addIntegrationErrorStringParamRequired": "Obrigatório",
   "addIntegrationErrorIntegerParamRequired": "Introduza um número positivo",
-  "addIntegrationButtonAdd": "Adicionar"
+  "addIntegrationButtonAdd": "Adicionar",
+  "addIntegrationButtonCancel": "Anular"
 }
diff --git a/...nager/apps/pci-databases-analytics/src/components/order/flavor/FlavorSelect.component.tsx b/...nager/apps/pci-databases-analytics/src/components/order/flavor/FlavorSelect.component.tsx
@@ -63,7 +63,7 @@ const FlavorsSelect = React.forwardRef<HTMLTableElement, FlavorsSelectProps>(
       <Table
         data-testid="flavor-select-table"
         ref={ref}
-        className={cn('min-w-max w-full', className)}
+        className={cn('table-auto max-w-full overflow-x-auto', className)}
       >
         <TableHeader data-testid="flavor-select-table-header">
           <TableRow className="bg-primary-100 hover:bg-primary-10">

diff --git a/packages/manager/apps/pci-databases-analytics/src/components/order/price/OrderPrice.spec.tsx b/packages/manager/apps/pci-databases-analytics/src/components/order/price/OrderPrice.spec.tsx
@@ -3,7 +3,25 @@ import { describe, it, vi } from 'vitest';
 import OrderPrice from '@/components/order/price/OrderPrice.component';
 
 describe('OrderPrice component', () => {
+  const mockedPrices = {
+    hourly: {
+      price: 1000500,
+      tax: 1005000,
+    },
+    monthly: {
+      price: 1000050000,
+      tax: 1000500000,
+    },
+  };
   beforeEach(() => {
+    vi.mock('react-i18next', () => ({
+      useTranslation: () => ({
+        t: (key: string, options: Record<string, string | number>): string => {
+          return `${key} ${options?.price}`;
+        },
+      }),
+      Trans: ({ children }: { children: React.ReactNode }) => children,
+    }));
     vi.mock('@/hooks/api/catalog/useGetCatalog.hook', () => {
       return {
         useGetCatalog: vi.fn(() => ({
@@ -27,22 +45,20 @@ describe('OrderPrice component', () => {
   });
 
   it('should display Price component', async () => {
-    const mockedPrices = {
-      hourly: {
-        price: 10,
-        tax: 1,
-      },
-      monthly: {
-        price: 10,
-        tax: 1,
-      },
-    };
-
     render(<OrderPrice showMonthly={false} prices={mockedPrices} />);
     await waitFor(() => {
       expect(screen.getByTestId('order-price-container')).toBeInTheDocument();
       expect(screen.getByTestId('pricing-ht')).toBeInTheDocument();
       expect(screen.getByTestId('pricing-ttc')).toBeInTheDocument();
     });
   });
+  it('should display Price component with montly values', async () => {
+    render(<OrderPrice showMonthly={true} prices={mockedPrices} />);
+    await waitFor(() => {
+      expect(screen.getByTestId('order-price-container')).toBeInTheDocument();
+      expect(screen.getByTestId('pricing-ht')).toBeInTheDocument();
+      expect(screen.getByText('pricing_ht 10,00 €')).toBeInTheDocument();
+      expect(screen.getByText('(pricing_ttc 20,01 €)')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/manager/apps/pci-databases-analytics/src/components/price/Price.spec.tsx b/packages/manager/apps/pci-databases-analytics/src/components/price/Price.spec.tsx
@@ -1,6 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
+import { UseQueryResult } from '@tanstack/react-query';
 import Price from '@/components/price/Price.component';
+import { useGetCatalog } from '@/hooks/api/catalog/useGetCatalog.hook';
+import { order } from '@/types/catalog';
 
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
@@ -82,4 +85,22 @@ describe('Price component value', () => {
       '(pricing_ttc 0,00 €)',
     );
   });
+
+  it('should display skeleton if catalog is fetching', () => {
+    vi.mocked(useGetCatalog).mockImplementation(() => {
+      return ({
+        isSuccess: false,
+        isLoading: true, // Simulate loading state
+        isError: false,
+        data: undefined,
+        error: null,
+        refetch: vi.fn(),
+        status: 'loading', // Provide status explicitly
+      } as unknown) as UseQueryResult<order.publicOrder.Catalog, Error>;
+    });
+    render(
+      <Price priceInUcents={1000000000} taxInUcents={200000000} decimals={2} />,
+    );
+    expect(screen.getByTestId('pricing-skeleton')).toBeInTheDocument();
+  });
 });
diff --git a/packages/manager/apps/pci-databases-analytics/src/components/route-modal/RouteModal.tsx b/packages/manager/apps/pci-databases-analytics/src/components/route-modal/RouteModal.tsx
@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+} from '../ui/dialog';
+import { Skeleton } from '../ui/skeleton';
+
+interface RouteModalProps {
+  backUrl?: string;
+  isLoading?: boolean;
+  children: React.ReactNode | React.ReactNode[];
+}
+const RouteModal = ({
+  backUrl = '../',
+  isLoading = false,
+  children,
+}: RouteModalProps) => {
+  const navigate = useNavigate();
+  const onOpenChange = (open: boolean) => {
+    if (!open) navigate(backUrl);
+  };
+
+  return (
+    <Dialog defaultOpen onOpenChange={onOpenChange}>
+      {isLoading ? (
+        <DialogContent>
+          <DialogHeader>
+            <Skeleton className="w-3/5 h-5" />
+          </DialogHeader>
+          <DialogDescription className="flex flex-col gap-2">
+            <Skeleton className="w-4/5 h-4" />
+            <Skeleton className="w-100 h-4" />
+            <Skeleton className="w-2/3 h-4" />
+            <Skeleton className="w-4/5 h-4" />
+            <Skeleton className="w-1/3 h-4" />
+            <Skeleton className="w-4/5 h-4" />
+          </DialogDescription>
+          <DialogFooter className="flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 flex justify-end mt-2">
+            <Skeleton className="w-20 h-10" />
+            <Skeleton className="w-20 h-10" />
+          </DialogFooter>
+        </DialogContent>
+      ) : (
+        children
+      )}
+    </Dialog>
+  );
+};
+
+export default RouteModal;
diff --git a/packages/manager/apps/pci-databases-analytics/src/components/ui/skeleton.tsx b/packages/manager/apps/pci-databases-analytics/src/components/ui/skeleton.tsx
@@ -5,7 +5,7 @@ function Skeleton({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
+    <span
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />

diff --git a/...i-databases-analytics/src/hooks/api/database/connectionPool/useAddConnectionPool.hook.tsx b/...i-databases-analytics/src/hooks/api/database/connectionPool/useAddConnectionPool.hook.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import {
   AddConnectionPool,
@@ -13,14 +13,26 @@ export interface UseAddConnectionPool {
 }
 export function useAddConnectionPool({
   onError,
-  onSuccess,
+  onSuccess: customOnSuccess,
 }: UseAddConnectionPool) {
+  const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: (cpInfo: AddConnectionPool) => {
       return addConnectionPool(cpInfo);
     },
     onError,
-    onSuccess,
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          variables.projectId,
+          'database',
+          variables.engine,
+          variables.serviceId,
+          'connectionPool',
+        ],
+      });
+      customOnSuccess(data);
+    },
   });
 
   return {

diff --git a/...i-databases-analytics/src/hooks/api/database/connectionPool/useAddConnectionPool.spec.tsx b/...i-databases-analytics/src/hooks/api/database/connectionPool/useAddConnectionPool.spec.tsx
@@ -42,11 +42,7 @@ describe('useAddConnectionPool', () => {
       expect(databaseAPI.addConnectionPool).toHaveBeenCalledWith(
         addConnectionPoolProps,
       );
-      expect(onSuccess).toHaveBeenCalledWith(
-        mockedConnectionPool,
-        addConnectionPoolProps,
-        undefined,
-      );
+      expect(onSuccess).toHaveBeenCalledWith(mockedConnectionPool);
     });
   });
 });
diff --git a/...atabases-analytics/src/hooks/api/database/connectionPool/useDeleteConnectionPool.hook.tsx b/...atabases-analytics/src/hooks/api/database/connectionPool/useDeleteConnectionPool.hook.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   DeleteConnectionPool,
   deleteConnectionPool,
@@ -12,14 +12,26 @@ interface UseDeleteConnectionPool {
 
 export function useDeleteConnectionPool({
   onError,
-  onSuccess,
+  onSuccess: customOnSuccess,
 }: UseDeleteConnectionPool) {
+  const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: (connectionPoolInfo: DeleteConnectionPool) => {
       return deleteConnectionPool(connectionPoolInfo);
     },
     onError,
-    onSuccess,
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          variables.projectId,
+          'database',
+          variables.engine,
+          variables.serviceId,
+          'connectionPool',
+        ],
+      });
+      customOnSuccess();
+    },
   });
 
   return {

diff --git a/...atabases-analytics/src/hooks/api/database/connectionPool/useDeleteConnectionPool.spec.tsx b/...atabases-analytics/src/hooks/api/database/connectionPool/useDeleteConnectionPool.spec.tsx
@@ -37,11 +37,7 @@ describe('useDeleteConnectionPool', () => {
       expect(databaseAPI.deleteConnectionPool).toHaveBeenCalledWith(
         deleteConnectionPoolProps,
       );
-      expect(onSuccess).toHaveBeenCalledWith(
-        undefined,
-        deleteConnectionPoolProps,
-        undefined,
-      );
+      expect(onSuccess).toHaveBeenCalledWith();
     });
   });
 });
diff --git a/...-databases-analytics/src/hooks/api/database/connectionPool/useEditConnectionPool.hook.tsx b/...-databases-analytics/src/hooks/api/database/connectionPool/useEditConnectionPool.hook.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import {
   EditConnectionPool,
@@ -13,14 +13,26 @@ export interface UseEditConnectionPool {
 }
 export function useEditConnectionPool({
   onError,
-  onSuccess,
+  onSuccess: customOnSuccess,
 }: UseEditConnectionPool) {
+  const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: (cpInfo: EditConnectionPool) => {
       return editConnectionPool(cpInfo);
     },
     onError,
-    onSuccess,
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          variables.projectId,
+          'database',
+          variables.engine,
+          variables.serviceId,
+          'connectionPool',
+        ],
+      });
+      customOnSuccess(data);
+    },
   });
 
   return {

diff --git a/...-databases-analytics/src/hooks/api/database/connectionPool/useEditConnectionPool.spec.tsx b/...-databases-analytics/src/hooks/api/database/connectionPool/useEditConnectionPool.spec.tsx
@@ -42,11 +42,7 @@ describe('useEditConnectionPool', () => {
       expect(databaseAPI.editConnectionPool).toHaveBeenCalledWith(
         editConnectionPoolProps,
       );
-      expect(onSuccess).toHaveBeenCalledWith(
-        mockedConnectionPool,
-        editConnectionPoolProps,
-        undefined,
-      );
+      expect(onSuccess).toHaveBeenCalledWith(mockedConnectionPool);
     });
   });
 });