feat(okms): silent order on kms creation page

packages/manager/apps/okms/package.json

@@ -45,7 +45,8 @@
     "react-i18next": "^14.0.5",
     "react-router-dom": "^6.3.0",
     "tailwindcss": "^3.4.4",
-    "zod": "^4.0.5"
+    "zod": "^4.0.5",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@ovh-ux/manager-core-test-utils": "^0.10.0",

packages/manager/apps/okms/public/translations/common/Messages_fr_FR.json

@@ -6,5 +6,9 @@
   "region_continent_NORTH_AMERICA": "Amérique du Nord",
   "region_continent_EUROPE": "Europe",
   "region_continent_OTHERS": "Autres régions",
-  "region_local_zone_description": "Déploiement de vos applications au plus près de vos utilisatrices et utilisateurs pour une faible latence et la résidence des données."
+  "region_local_zone_description": "Déploiement de vos applications au plus près de vos utilisatrices et utilisateurs pour une faible latence et la résidence des données.",
+  "okms_order_expired": "L'activation de la région prend plus de temps qu'estimé. Merci de réessayer dans quelques minutes.",
+  "okms_order_pending": "Votre domaine OKMS est en cours de création. Vous serez notifié lorsqu'il sera prêt.",
+  "okms_order_success": "Votre domaine OKMS {{ okmsId }} est prêt. Vous pouvez maintenant l'utiliser.",
+  "okms_order_blocked": "Un domaine OKMS est déjà en cours de création. Vous pourrez activer un nouveau domaine OKMS lorsque votre première demande sera traitée."
 }

packages/manager/apps/okms/public/translations/secret-manager/Messages_fr_FR.json

@@ -54,7 +54,7 @@
   "maximum_number_of_versions": "Nombre maximum de versions",
   "never_expire": "Pas d'expiration",
   "not_provided": "Non renseigné",
-  "okms_activation_in_progress": "Veuillez patienter, création en cours.",
+  "okms_activation_in_progress": "Veuillez patienter pendant l'activation du domaine OKMS sur la région {{region}}.",
   "okms_dashboard_title": "Détail du domaine OKMS",
   "okms_list": "Liste de domaines OKMS",
   "okms_manage_label": "Gérer mon domaine OKMS",

packages/manager/apps/okms/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, Suspense } from 'react';
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import {
   RouterProvider,
@@ -11,14 +11,7 @@ import secretManagerRoutes from '@secret-manager/routes/routes';
 import Loading from '@/common/components/loading/Loading';
 import rootRoutes from '@/common/routes/routes';
 import { useShellContext } from '@/common/hooks/useShellContext';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 300_000,
-    },
-  },
-});
+import { queryClient } from '@/common/utils/react-query/queryClient';
 
 function App() {
   const { shell } = useShellContext();

packages/manager/apps/okms/src/common/components/okms-dashboard/billing-tile/BillingTile.component.tsx

@@ -9,7 +9,7 @@ import {
 import { SECRET_MANAGER_ROUTES_URLS } from '@secret-manager/routes/routes.constants';
 import { OKMS } from '@key-management-service/types/okms.type';
 import { KMS_ROUTES_URIS } from '@key-management-service/routes/routes.constants';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { ProductType, useProductType } from '@/common/hooks/useProductType';
 
 const useResiliateLink = (okms: OKMS) => {
   const productType = useProductType();

packages/manager/apps/okms/src/common/components/okms-dashboard/billing-tile/BillingTile.constants.ts

@@ -1,3 +1,3 @@
 export const BILLING_TILE_TEST_IDS = {
-  billingInformationsTile: 'okms-name-tile-item',
+  billingInformationsTile: 'okms-billing-tile-item',
 };

packages/manager/apps/okms/src/common/components/okms-dashboard/billing-tile/BillingTile.spec.tsx

@@ -7,7 +7,7 @@ import { okmsMock } from '@key-management-service/mocks/kms/okms.mock';
 import { KMS_ROUTES_URIS } from '@key-management-service/routes/routes.constants';
 import { BillingTile } from './BillingTile.component';
 import { BILLING_TILE_TEST_IDS } from './BillingTile.constants';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { useProductType, ProductType } from '@/common/hooks/useProductType';
 import { renderWithI18n } from '@/common/utils/tests/testUtils';
 
 const okmsMocked = okmsMock[0];

packages/manager/apps/okms/src/common/components/okms-dashboard/general-informations-tile/items/NameTileItem.component.tsx

@@ -7,7 +7,7 @@ import { SECRET_MANAGER_ROUTES_URLS } from '@secret-manager/routes/routes.consta
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { OKMS } from '@key-management-service/types/okms.type';
 import { KMS_ROUTES_URLS } from '@key-management-service/routes/routes.constants';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { useProductType, ProductType } from '@/common/hooks/useProductType';
 
 const useRenameLink = (okms: OKMS) => {
   const productType = useProductType();

packages/manager/apps/okms/src/common/components/okms-dashboard/general-informations-tile/items/NameTileItem.spec.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { okmsMock } from '@key-management-service/mocks/kms/okms.mock';
 import { KMS_ROUTES_URLS } from '@key-management-service/routes/routes.constants';
 import { NameTileItem } from './NameTileItem.component';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { useProductType, ProductType } from '@/common/hooks/useProductType';
 import { getOdsButtonByIcon } from '@/common/utils/tests/uiTestHelpers';
 import { labels } from '@/common/utils/tests/init.i18n';
 import { renderWithI18n } from '@/common/utils/tests/testUtils';

packages/manager/apps/okms/src/common/components/okms-dashboard/secret-config-tile/SecretConfigTile.component.tsx

@@ -10,7 +10,7 @@ import { DeactivateVersionAfterTileItem } from './items/DeactivateVersionAfterTi
 import { CasTileItem } from './items/CasTileItem.component';
 import { TileError } from '@/common/components/tile-error/TileError.component';
 import { EditSecretConfigLinkTileItem } from './items/EditSecretConfigLinkTileItem.component';
-import useProductType from '@/common/hooks/useProductType';
+import { useProductType } from '@/common/hooks/useProductType';
 
 type SecretConfigTileProps = {
   okms: OKMS;

packages/manager/apps/okms/src/common/components/okms-dashboard/secret-config-tile/SecretConfigTile.spec.tsx

@@ -9,7 +9,7 @@ import { initTestI18n, labels } from '@/common/utils/tests/init.i18n';
 import { SecretConfigTile } from './SecretConfigTile.component';
 import { SECRET_CONFIG_TILE_TEST_IDS } from './SecretConfigTile.constants';
 import { renderWithClient } from '@/common/utils/tests/testUtils';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { useProductType, ProductType } from '@/common/hooks/useProductType';
 
 let i18nValue: i18n;
 

packages/manager/apps/okms/src/common/components/okms-dashboard/secrets-tile/SecretsTile.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ManagerTile } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { OKMS } from '@key-management-service/types/okms.type';
-import useProductType from '@/common/hooks/useProductType';
+import { useProductType } from '@/common/hooks/useProductType';
 import { SecretCountTileItem } from './items/SecretCountTileItem.component';
 import { SecretVersionCountTileItem } from './items/SecretVersionCountTileItem.component';
 import { SecretListLinkTileItem } from './items/SecretListLinkTileItem.component';

packages/manager/apps/okms/src/common/components/okms-dashboard/secrets-tile/SecretsTile.spec.tsx

@@ -6,7 +6,7 @@ import { I18nextProvider } from 'react-i18next';
 import { okmsMock } from '@key-management-service/mocks/kms/okms.mock';
 import { initTestI18n, labels } from '@/common/utils/tests/init.i18n';
 import { renderWithClient } from '@/common/utils/tests/testUtils';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { useProductType, ProductType } from '@/common/hooks/useProductType';
 import { SECRETS_TILE_TEST_IDS } from './SecretsTile.constants';
 import { SecretsTile } from './SecretsTile.component';
 

packages/manager/apps/okms/src/common/components/okms-dashboard/service-keys-tile/ServiceKeysTile.component.tsx

@@ -3,7 +3,7 @@ import { ManagerTile } from '@ovh-ux/manager-react-components';
 import { OKMS } from '@key-management-service/types/okms.type';
 import { SERVICE_KEYS_LABEL } from '@/constants';
 import { ServiceKeyCountTileItem } from './items/ServiceKeyCountTileItem.component';
-import useProductType from '@/common/hooks/useProductType';
+import { useProductType } from '@/common/hooks/useProductType';
 import { ServiceKeyListLinkTileItem } from './items/ServiceKeyListLinkTileItem.component';
 
 type ServiceKeysTileProps = {

packages/manager/apps/okms/src/common/components/okms-dashboard/service-keys-tile/ServiceKeysTile.spec.tsx

@@ -6,7 +6,7 @@ import { I18nextProvider } from 'react-i18next';
 import { okmsMock } from '@key-management-service/mocks/kms/okms.mock';
 import { initTestI18n } from '@/common/utils/tests/init.i18n';
 import { renderWithClient } from '@/common/utils/tests/testUtils';
-import useProductType, { ProductType } from '@/common/hooks/useProductType';
+import { useProductType, ProductType } from '@/common/hooks/useProductType';
 import { SERVICE_KEYS_TILE_TEST_IDS } from './ServiceKeysTile.constants';
 import { SERVICE_KEYS_LABEL } from '@/constants';
 import { ServiceKeysTile } from './ServiceKeysTile.component';

packages/manager/apps/okms/src/common/components/okms-datagrid/ListingCells.component.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Clipboard,
   DataGridTextCell,
-  Region,
   useServiceDetails,
 } from '@ovh-ux/manager-react-components';
 import {

packages/manager/apps/okms/src/common/hooks/useInterval.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to trigger a function at a given interval
+ *
+ * - Interval can be stopped by setting the delayInMs to 0 or by calling the stopInterval function
+ * - The callback function can receive an AbortSignal to cancel the potential pending requests
+ * - Requests are automatically aborted when the component unmounts or when interval is stopped
+ * @param callback - The function to call on each interval
+ * @param delayInMs - The delay between each call. If 0, the interval will be stopped.
+ * @returns - A function to stop the interval
+ */
+
+export type IntervalCallback = (signal?: AbortSignal) => Promise<void>;
+
+export const useInterval = (callback: IntervalCallback, delayInMs: number) => {
+  const [enabled, setEnabled] = useState(true);
+
+  useEffect(() => {
+    if (!enabled || !delayInMs) {
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    const intervalId = setInterval(() => callback(signal), delayInMs);
+
+    // Cleanup on unmount or when any dependency changes
+    return () => {
+      clearInterval(intervalId);
+      controller.abort();
+    };
+  }, [callback, delayInMs, enabled]);
+
+  return {
+    stopInterval: () => setEnabled(false),
+  };
+};