feat(key-management-service): add polling after KMS order

ref: MANAGER-14904

Signed-off-by: David Arsène <[email protected]>

packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx

@@ -122,7 +122,7 @@ const OrderConfirmation = ({ region }: OrderConfirmationProps) => {
             actionType: 'navigation',
             actions: ['finish'],
           });
-          navigate(ROUTES_URLS.root);
+          navigate(ROUTES_URLS.root, { state: { hasPendingOrder: true } });
         }}
       >
         {t('key_management_service_create_order_initiated_cta_done')}

packages/manager/apps/key-management-service/src/data/hooks/useAutoRefetch.ts

@@ -0,0 +1,40 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+type AutoRefetchProps = {
+  queryKey: string[];
+  enabled: boolean;
+  interval?: number;
+  timeout?: number;
+  onFinish?: () => void;
+};
+
+export const useAutoRefetch = ({
+  queryKey,
+  enabled = false,
+  interval = 30_000,
+  timeout = 60_000 * 5,
+  onFinish,
+}: AutoRefetchProps) => {
+  const [isEnabled, setIsEnabled] = useState<boolean>(enabled);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!isEnabled) {
+      return undefined;
+    }
+    const refetchTimeout = setTimeout(() => {
+      setIsEnabled(false);
+      onFinish?.();
+    }, timeout);
+    const refetchInterval = setInterval(
+      () => queryClient.invalidateQueries({ queryKey }),
+      interval,
+    );
+
+    return () => {
+      clearInterval(refetchInterval);
+      clearTimeout(refetchTimeout);
+    };
+  }, [isEnabled, interval, timeout, queryKey, queryClient]);
+};

packages/manager/apps/key-management-service/src/pages/listing/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   ODS_MESSAGE_TYPE,
@@ -31,13 +31,19 @@ import {
   DatagridCellStatus,
 } from '@/components/Listing/ListingCells';
 import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
+import { useAutoRefetch } from '@/data/hooks/useAutoRefetch';
+import { getOkmsServicesResourceListQueryKey } from '@/data/api/okms';
 
 export default function Listing() {
   const { t } = useTranslation('key-management-service/listing');
   const { t: tError } = useTranslation('error');
   const navigate = useNavigate();
   const { clearNotifications } = useNotifications();
   const { trackClick } = useOvhTracking();
+  const { state } = useLocation();
+  const [isRefetchEnabled, setIsRefetchEnabled] = useState<boolean>(
+    state?.hasPendingOrder,
+  );
 
   const columns = [
     {
@@ -80,6 +86,12 @@ export default function Listing() {
     pageSize: 10,
   });
 
+  useAutoRefetch({
+    queryKey: getOkmsServicesResourceListQueryKey,
+    enabled: isRefetchEnabled,
+    onFinish: () => setIsRefetchEnabled(false),
+  });
+
   const headerProps: HeadersProps = {
     title: t('key_management_service_listing_title'),
     headerButton: <KmsGuidesHeader />,
@@ -88,7 +100,11 @@ export default function Listing() {
   return (
     <RedirectionGuard
       isLoading={isLoading || !flattenData}
-      condition={status === 'success' && data?.pages[0].data.length === 0}
+      condition={
+        status === 'success' &&
+        !isRefetchEnabled &&
+        data?.pages[0].data.length === 0
+      }
       route={ROUTES_URLS.onboarding}
       isError={isError}
       errorComponent={