misc: added error prompt for fetch secrets issue with kms

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>>(

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,