From 5d71403bd43f44ce7ae64a703af7c6f7736119a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Ars=C3=A8ne?= <david.arsene.ext@ovhcloud.com>
Date: Fri, 29 Nov 2024 12:51:22 +0100
Subject: [PATCH] feat(key-management-service): add polling after KMS order
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref: MANAGER-14904

Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>
---
 .../Create/OrderConfirmation.tsx              |  2 +-
 .../src/data/hooks/useAutoRefetch.ts          | 40 +++++++++++++++++++
 .../src/pages/listing/index.tsx               | 22 ++++++++--
 3 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 packages/manager/apps/key-management-service/src/data/hooks/useAutoRefetch.ts

diff --git a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx b/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
index 2eea615456e0..9f7af6fed0d2 100644
--- a/packages/manager/apps/key-management-service/src/components/layout-helpers/Create/OrderConfirmation.tsx
+++ b/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')}
diff --git a/packages/manager/apps/key-management-service/src/data/hooks/useAutoRefetch.ts b/packages/manager/apps/key-management-service/src/data/hooks/useAutoRefetch.ts
new file mode 100644
index 000000000000..82dfa43a4033
--- /dev/null
+++ b/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]);
+};
diff --git a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx b/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
index 1962ace06416..74d44a53bdc8 100644
--- a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
+++ b/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,6 +31,8 @@ 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');
@@ -38,6 +40,10 @@ export default function Listing() {
   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={