Sync develop & master

packages/manager-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovh-ux/manager-react-components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "license": "BSD-3-Clause",
   "author": "OVH SAS",
   "types": "dist/types/src/lib.d.ts",

packages/manager-react-components/src/components/container/step/Step.component.tsx

@@ -3,6 +3,7 @@ import { OdsButton, OdsIcon, OdsSpinner } from '@ovhcloud/ods-components/react';
 import { v4 as uuidV4 } from 'uuid';
 import {
   ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
@@ -26,10 +27,11 @@ export type TStepProps = {
     label: string | JSX.Element;
     isDisabled?: boolean;
   };
-  cancel?: {
+  skip?: {
     action: (id: string) => void;
     label: string | JSX.Element;
     isDisabled?: boolean;
+    hint?: string;
   };
   children?: JSX.Element | JSX.Element[];
 };
@@ -45,7 +47,7 @@ export const StepComponent = ({
   children,
   next,
   edit,
-  cancel,
+  skip,
 }: TStepProps): JSX.Element => {
   return (
     <section className="flex flex-row border-0 border-t-[1px] border-solid border-t-[--ods-color-neutral-100] pt-5 mb-5">
@@ -88,6 +90,7 @@ export const StepComponent = ({
             )}
           >
             {title}
+            {skip?.hint && <div className="ml-2">{skip.hint}</div>}
           </div>
           {edit?.action && isLocked && (
             <div className="text-2xl w-full md:w-1/6" data-testid="edit">
@@ -119,18 +122,36 @@ export const StepComponent = ({
                 {children}
               </Suspense>
             </div>
-            {next?.action && !isLocked && (
-              <div className="mt-6" data-testid="next">
-                <OdsButton
-                  data-testid="next-cta"
-                  label={next.label as string}
-                  size={ODS_BUTTON_SIZE.md}
-                  onClick={() => {
-                    next.action(id);
-                  }}
-                  className="w-fit"
-                  isDisabled={next.isDisabled || undefined}
-                />
+            {!isLocked && (
+              <div className="flex mt-6">
+                {next?.action && !isLocked && (
+                  <div className="mt-6" data-testid="next">
+                    <OdsButton
+                      data-testid="next-cta"
+                      label={next.label as string}
+                      size={ODS_BUTTON_SIZE.md}
+                      onClick={() => {
+                        next.action(id);
+                      }}
+                      className="w-fit"
+                      isDisabled={next.isDisabled || undefined}
+                    />
+                  </div>
+                )}
+                {skip?.action && (
+                  <div>
+                    <OdsButton
+                      label={skip.label as string}
+                      variant={ODS_BUTTON_VARIANT.ghost}
+                      size={ODS_BUTTON_SIZE.md}
+                      onClick={() => {
+                        skip.action(id);
+                      }}
+                      className="w-fit"
+                      isDisabled={skip.isDisabled || undefined}
+                    />
+                  </div>
+                )}
               </div>
             )}
           </>

packages/manager-react-components/src/components/datagrid/datagrid.component.tsx

@@ -216,12 +216,7 @@ export const Datagrid = <T,>({
                     'border-solid border-[1px] h-[3.25rem] border-[--ods-color-blue-200]'
                   }
                 >
-                  <td
-                    className={
-                      contentAlignLeft ? 'text-left pl-4' : 'text-center'
-                    }
-                    colSpan={columns.length}
-                  >
+                  <td className="text-center" colSpan={columns.length}>
                     <DataGridTextCell>
                       {noResultLabel ?? t('common_pagination_no_results')}
                     </DataGridTextCell>

packages/manager-react-components/src/components/notifications/notifications.spec.tsx

@@ -1,44 +1,58 @@
 import { vitest } from 'vitest';
-import React, { useEffect } from 'react';
-import { render } from '@testing-library/react';
-import { useNotifications, NotificationType } from './useNotifications';
+import React from 'react';
+import { act, render, renderHook } from '@testing-library/react';
+import {
+  useNotifications,
+  NotificationType,
+  NOTIFICATION_MINIMAL_DISPLAY_TIME,
+} from './useNotifications';
 import { Notifications } from './notifications.component';
 
+vitest.useFakeTimers();
+
 vitest.mock('react-router-dom', async () => ({
   ...(await vitest.importActual('react-router-dom')),
   useLocation: () => ({
     pathname: '/foo',
   }),
 }));
 
-function AddNotification() {
-  const { addNotification } = useNotifications();
-  useEffect(() => {
-    addNotification('Notification-1', NotificationType.Success);
-    addNotification('Notification-2', NotificationType.Warning);
-  }, []);
-  return <></>;
-}
-
-function ClearNotifications() {
-  const { clearNotifications } = useNotifications();
-  useEffect(() => {
-    clearNotifications();
-  }, []);
-  return <></>;
-}
-
 describe('notifications component', () => {
   it('should list notifications', async () => {
     let { container } = render(<Notifications />);
-    render(<AddNotification />);
-    container = await render(<Notifications />).container;
+    const { result } = renderHook(() => useNotifications());
+    act(() => {
+      result.current.addNotification(
+        'Notification-1',
+        NotificationType.Success,
+      );
+      result.current.addNotification(
+        'Notification-2',
+        NotificationType.Warning,
+      );
+    });
+    container = render(<Notifications />).container;
+    expect(container.children.length).toBe(2);
+  });
+
+  it('should not clear unseen notifications', async () => {
+    let { container } = render(<Notifications />);
+    const { result } = renderHook(() => useNotifications());
+    act(() => {
+      result.current.clearNotifications();
+    });
+    container = render(<Notifications />).container;
     expect(container.children.length).toBe(2);
   });
+
   it('should clear notifications', async () => {
     let { container } = render(<Notifications />);
     expect(container.children.length).not.toBe(0);
-    render(<ClearNotifications />);
+    const { result } = renderHook(() => useNotifications());
+    act(() => {
+      vitest.advanceTimersByTime(NOTIFICATION_MINIMAL_DISPLAY_TIME + 1);
+      result.current.clearNotifications();
+    });
     container = render(<Notifications />).container;
     expect(container.children.length).toBe(0);
   });

packages/manager-react-components/src/components/notifications/useNotifications.ts

@@ -14,6 +14,7 @@ export interface Notification {
   content: ReactNode;
   type: NotificationType;
   dismissable?: boolean;
+  creationTimestamp?: number;
 }
 
 export interface NotificationState {
@@ -32,6 +33,8 @@ export interface NotificationState {
   clearNotifications: () => void;
 }
 
+export const NOTIFICATION_MINIMAL_DISPLAY_TIME = 1000;
+
 export const useNotifications = create<NotificationState>((set, get) => ({
   uid: 0,
   notifications: [],
@@ -44,7 +47,13 @@ export const useNotifications = create<NotificationState>((set, get) => ({
       uid: state.uid + 1,
       notifications: [
         ...state.notifications,
-        { uid: state.uid, content, type, dismissable },
+        {
+          uid: state.uid,
+          content,
+          type,
+          dismissable,
+          creationTimestamp: Date.now(),
+        },
       ],
     })),
   addSuccess: (content: ReactNode, dismissable = false) =>
@@ -61,7 +70,14 @@ export const useNotifications = create<NotificationState>((set, get) => ({
         ({ uid }) => uid !== toRemoveUid,
       ),
     })),
-  clearNotifications: () => set(() => ({ notifications: [] })),
+  clearNotifications: () =>
+    set((state) => ({
+      notifications: state.notifications.filter(
+        (notification) =>
+          Date.now() - notification.creationTimestamp <
+          NOTIFICATION_MINIMAL_DISPLAY_TIME,
+      ),
+    })),
 }));
 
 export default useNotifications;

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_de_DE.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "Der folgende Fehler ist aufgetreten: {{error}}.",
   "deleteModalCancelButton": "Abbrechen",
-  "deleteModalDeleteButton": "Löschen"
+  "deleteModalDeleteButton": "Kündigen"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_en_GB.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "The following error has occurred: {{error}}.",
   "deleteModalCancelButton": "Cancel",
-  "deleteModalDeleteButton": "Delete"
+  "deleteModalDeleteButton": "Terminate"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_es_ES.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "Se ha producido el siguiente error: {{error}}.",
   "deleteModalCancelButton": "Cancelar",
-  "deleteModalDeleteButton": "Eliminar"
+  "deleteModalDeleteButton": "Dar de baja"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_fr_CA.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "L'erreur suivante est survenue : {{error}}.",
   "deleteModalCancelButton": "Annuler",
-  "deleteModalDeleteButton": "Supprimer"
+  "deleteModalDeleteButton": "Résilier"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_fr_FR.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "L'erreur suivante est survenue : {{error}}.",
   "deleteModalCancelButton": "Annuler",
-  "deleteModalDeleteButton": "Supprimer"
+  "deleteModalDeleteButton": "Résilier"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_it_IT.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "Si è verificato il seguente errore: {{error}}.",
   "deleteModalCancelButton": "Annullare",
-  "deleteModalDeleteButton": "Eliminare"
+  "deleteModalDeleteButton": "Disattivare"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_pl_PL.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "Wystąpił następujący błąd: {{error}}.",
   "deleteModalCancelButton": "Anuluj",
-  "deleteModalDeleteButton": "Usuń"
+  "deleteModalDeleteButton": "Rezygnacja"
 }

packages/manager-react-components/src/components/templates/delete-modal/translations/Messages_pt_PT.json

@@ -1,5 +1,5 @@
 {
   "deleteModalError": "Ocorreu o seguinte erro: {{error}}.",
   "deleteModalCancelButton": "Anular",
-  "deleteModalDeleteButton": "Eliminar"
+  "deleteModalDeleteButton": "Rescindir"
 }

packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx

@@ -40,12 +40,6 @@ const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
   }
   return (
     <div className="flex sm:pt-8 xs:pt-2.5 flex-row items-center space-x-4 justify-center">
-      <OdsButton
-        size={ODS_BUTTON_SIZE.md}
-        onClick={onOrderButtonClick}
-        label={orderButtonLabel}
-      />
-
       {moreInfoButtonLabel && moreInfoHref && (
         <OdsLink
           onClick={onmoreInfoButtonClick}
@@ -55,6 +49,11 @@ const OnboardingLayoutButton: React.FC<OnboardingLayoutButtonProps> = ({
           icon={ODS_ICON_NAME.externalLink}
         />
       )}
+      <OdsButton
+        size={ODS_BUTTON_SIZE.md}
+        onClick={onOrderButtonClick}
+        label={orderButtonLabel}
+      />
     </div>
   );
 };