From e6b6de5e8eac88405477f5720ccdd4767c913a9c Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 31 Jul 2024 16:31:37 +0800
Subject: [PATCH] misc: added error prompt for fetch secrets issue with kms

---
 frontend/src/hooks/api/secrets/queries.tsx    | 17 +++++++++++++++++
 .../views/SecretMainPage/SecretMainPage.tsx   | 19 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/api/secrets/queries.tsx b/frontend/src/hooks/api/secrets/queries.tsx
index 192a3befb..81277cdff 100644
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -1,8 +1,11 @@
 /* eslint-disable no-param-reassign */
 import { useCallback, useMemo } from "react";
 import { useQueries, useQuery, UseQueryOptions } from "@tanstack/react-query";
+import axios from "axios";
 
+import { createNotification } from "@app/components/notifications";
 import { apiRequest } from "@app/config/request";
+import { useToggle } from "@app/hooks/useToggle";
 
 import {
   GetSecretVersionsDTO,
@@ -113,10 +116,24 @@ export const useGetProjectSecretsAllEnv = ({
   envs,
   secretPath
 }: TGetProjectSecretsAllEnvDTO) => {
+  const [isErrorHandled, setIsErrorHandled] = useToggle(false);
+
   const secrets = useQueries({
     queries: envs.map((environment) => ({
       queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
       enabled: Boolean(workspaceId && environment),
+      onError: (error: unknown) => {
+        if (axios.isAxiosError(error) && !isErrorHandled) {
+          const serverResponse = error.response?.data as { message: string };
+          createNotification({
+            title: "Error fetching secrets",
+            type: "error",
+            text: serverResponse.message
+          });
+
+          setIsErrorHandled.on();
+        }
+      },
       queryFn: async () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
       select: (el: SecretV3RawResponse) =>
         mergePersonalSecrets(el.secrets).reduce<Record<string, SecretV3RawSanitized>>(
diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.tsx b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
index a86d5d0d6..069c81440 100644
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
 import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import axios from "axios";
 
 import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
@@ -93,7 +94,12 @@ export const SecretMainPage = () => {
   }, [isWorkspaceLoading, currentWorkspace, environment, router.isReady]);
 
   // fetch secrets
-  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
+  const {
+    data: secrets,
+    isLoading: isSecretsLoading,
+    isError: isErrorFetchingSecrets,
+    error: fetchSecretsError
+  } = useGetProjectSecrets({
     environment,
     workspaceId,
     secretPath,
@@ -102,6 +108,17 @@ export const SecretMainPage = () => {
     }
   });
 
+  if (isErrorFetchingSecrets) {
+    if (axios.isAxiosError(fetchSecretsError)) {
+      const serverResponse = fetchSecretsError.response?.data as { message: string };
+      createNotification({
+        title: "Error fetching secrets",
+        type: "error",
+        text: serverResponse.message
+      });
+    }
+  }
+
   // fetch folders
   const { data: folders, isLoading: isFoldersLoading } = useGetProjectFolders({
     projectId: workspaceId,