fix(hub-react): display error in support tile when api send an error (#…

…14677) ref: MANAGER-16529 Signed-off-by: Jacques Larique <[email protected]>
ovh · Jan 3, 2025 · 5ed4eca · 5ed4eca
1 parent c2a14b2
commit 5ed4eca
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/packages/manager/apps/hub-react/src/data/api/apiHubSupport.ts b/packages/manager/apps/hub-react/src/data/api/apiHubSupport.ts
@@ -1,16 +1,20 @@
 import { aapi } from '@ovh-ux/manager-core-api';
-import { AxiosResponse } from 'axios';
 import { SupportResponse } from '@/types/support.type';
 import { ApiEnvelope } from '@/types/apiEnvelope.type';
 
 export const getHubSupport: (
   cached: boolean,
-) => Promise<AxiosResponse<ApiEnvelope<SupportResponse>>> = (cached: boolean) =>
-  aapi.get(
+) => Promise<ApiEnvelope<SupportResponse>> = async (cached: boolean) => {
+  const { data } = await aapi.get<ApiEnvelope<SupportResponse>>(
     '/hub/support',
     !cached && {
       headers: {
         Pragma: 'no-cache',
       },
     },
   );
+  if (data?.data?.support?.status === 'ERROR') {
+    throw new Error();
+  }
+  return data;
+};
diff --git a/packages/manager/apps/hub-react/src/data/hooks/apiHubSupport/useHubSupport.spec.tsx b/packages/manager/apps/hub-react/src/data/hooks/apiHubSupport/useHubSupport.spec.tsx
@@ -1,7 +1,6 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { PropsWithChildren } from 'react';
-import { AxiosResponse } from 'axios';
 import { describe, it, vi } from 'vitest';
 import { useFetchHubSupport } from '@/data/hooks/apiHubSupport/useHubSupport';
 import { SupportResponse } from '@/types/support.type';
@@ -29,8 +28,9 @@ describe('useFetchHubSupport', () => {
       .spyOn(hubSupportApi, 'getHubSupport')
       .mockReturnValue(
         Promise.resolve({
-          data: { data: supportDataResponse, status: 'OK' },
-        } as AxiosResponse),
+          data: supportDataResponse,
+          status: 'OK',
+        }),
       );
 
     const { result } = renderHook(() => useFetchHubSupport(), {
@@ -52,8 +52,9 @@ describe('useFetchHubSupport', () => {
       .spyOn(hubSupportApi, 'getHubSupport')
       .mockReturnValue(
         Promise.resolve({
-          data: { data: supportDataResponse, status: 'OK' },
-        } as AxiosResponse),
+          data: supportDataResponse,
+          status: 'OK',
+        }),
       );
 
     const { result } = renderHook(() => useFetchHubSupport(), {

diff --git a/packages/manager/apps/hub-react/src/data/hooks/apiHubSupport/useHubSupport.tsx b/packages/manager/apps/hub-react/src/data/hooks/apiHubSupport/useHubSupport.tsx
@@ -1,22 +1,23 @@
 import { DefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
-import { AxiosResponse } from 'axios';
 import { SupportDataResponse, SupportResponse } from '@/types/support.type';
 import { getHubSupport } from '@/data/api/apiHubSupport';
 import queryClient from '@/queryClient';
 import { ApiEnvelope } from '@/types/apiEnvelope.type';
 
 const queryKey = ['get-hub-support'];
 
-type ApiResponse = AxiosResponse<ApiEnvelope<SupportResponse>>;
-
 const DEFAULT_RESULT: SupportDataResponse = {
   data: [],
   count: 0,
 };
 
 export const useFetchHubSupport = (
   options?: Partial<
-    DefinedInitialDataOptions<ApiResponse, any, SupportDataResponse>
+    DefinedInitialDataOptions<
+      ApiEnvelope<SupportResponse>,
+      any,
+      SupportDataResponse
+    >
   >,
 ) =>
   useQuery({
@@ -25,7 +26,7 @@ export const useFetchHubSupport = (
       const hasBeenFetched = Boolean(queryClient.getQueryData(queryKey));
       return getHubSupport(!hasBeenFetched);
     },
-    select: ({ data }: ApiResponse) =>
-      data?.data?.support?.data ?? DEFAULT_RESULT,
+    select: ({ data }: ApiEnvelope<SupportResponse>) =>
+      data?.support?.data ?? DEFAULT_RESULT,
     ...(options ?? {}),
   });