feat(ui): Add error states for settings (#721)

TracecatHQ · Jan 9, 2025 · 62abbd2 · 62abbd2
1 parent cc716df
commit 62abbd2
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/frontend/src/components/organization/org-settings-auth.tsx b/frontend/src/components/organization/org-settings-auth.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/form"
 import { Switch } from "@/components/ui/switch"
 import { CenteredSpinner } from "@/components/loading/spinner"
+import { AlertNotification } from "@/components/notifications"
 import { CustomTagInput } from "@/components/tags-input"
 
 const authFormSchema = z.object({
@@ -40,6 +41,7 @@ export function OrgSettingsAuthForm() {
   const {
     authSettings,
     authSettingsIsLoading,
+    authSettingsError,
     updateAuthSettings,
     updateAuthSettingsIsPending,
   } = useOrgAuthSettings()
@@ -87,6 +89,14 @@ export function OrgSettingsAuthForm() {
   if (authSettingsIsLoading) {
     return <CenteredSpinner />
   }
+  if (authSettingsError || !authSettings) {
+    return (
+      <AlertNotification
+        level="error"
+        message={`Error loading Auth settings: ${authSettingsError?.message || "Unknown error"}`}
+      />
+    )
+  }
 
   return (
     <Form {...form}>

diff --git a/frontend/src/components/organization/org-settings-git.tsx b/frontend/src/components/organization/org-settings-git.tsx
@@ -16,6 +16,8 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
+import { CenteredSpinner } from "@/components/loading/spinner"
+import { AlertNotification } from "@/components/notifications"
 import { CustomTagInput } from "@/components/tags-input"
 
 const gitFormSchema = z.object({
@@ -38,8 +40,13 @@ const gitFormSchema = z.object({
 type GitFormValues = z.infer<typeof gitFormSchema>
 
 export function OrgSettingsGitForm() {
-  const { gitSettings, updateGitSettings, updateGitSettingsIsPending } =
-    useOrgGitSettings()
+  const {
+    gitSettings,
+    gitSettingsIsLoading,
+    gitSettingsError,
+    updateGitSettings,
+    updateGitSettingsIsPending,
+  } = useOrgGitSettings()
 
   const form = useForm<GitFormValues>({
     resolver: zodResolver(gitFormSchema),
@@ -70,6 +77,18 @@ export function OrgSettingsGitForm() {
     }
   }
 
+  if (gitSettingsIsLoading) {
+    return <CenteredSpinner />
+  }
+  if (gitSettingsError || !gitSettings) {
+    return (
+      <AlertNotification
+        level="error"
+        message={`Error loading Git settings: ${gitSettingsError?.message || "Unknown error"}`}
+      />
+    )
+  }
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">

diff --git a/frontend/src/components/organization/org-settings-oauth.tsx b/frontend/src/components/organization/org-settings-oauth.tsx
@@ -17,6 +17,7 @@ import {
 } from "@/components/ui/form"
 import { Switch } from "@/components/ui/switch"
 import { CenteredSpinner } from "@/components/loading/spinner"
+import { AlertNotification } from "@/components/notifications"
 
 const authFormSchema = z.object({
   oauth_google_enabled: z.boolean(),
@@ -29,6 +30,7 @@ export function OrgSettingsOAuthForm() {
   const {
     oauthSettings,
     oauthSettingsIsLoading,
+    oauthSettingsError,
     updateOAuthSettings,
     updateOAuthSettingsIsPending,
   } = useOrgOAuthSettings()
@@ -58,6 +60,14 @@ export function OrgSettingsOAuthForm() {
   if (oauthSettingsIsLoading) {
     return <CenteredSpinner />
   }
+  if (oauthSettingsError || !oauthSettings) {
+    return (
+      <AlertNotification
+        level="error"
+        message={`Error loading OAuth settings: ${oauthSettingsError?.message || "Unknown error"}`}
+      />
+    )
+  }
 
   return (
     <Form {...form}>

diff --git a/frontend/src/components/organization/org-settings-sso.tsx b/frontend/src/components/organization/org-settings-sso.tsx
@@ -20,6 +20,7 @@ import { Input } from "@/components/ui/input"
 import { Switch } from "@/components/ui/switch"
 import { CopyButton } from "@/components/copy-button"
 import { CenteredSpinner } from "@/components/loading/spinner"
+import { AlertNotification } from "@/components/notifications"
 
 const ssoFormSchema = z.object({
   saml_enabled: z.boolean(),
@@ -34,6 +35,7 @@ export function OrgSettingsSsoForm() {
   const {
     samlSettings,
     samlSettingsIsLoading,
+    samlSettingsError,
     updateSamlSettings,
     updateSamlSettingsIsPending,
   } = useOrgSamlSettings()
@@ -64,9 +66,18 @@ export function OrgSettingsSsoForm() {
       console.error("Failed to update SAML settings", error)
     }
   }
+
   if (samlSettingsIsLoading) {
     return <CenteredSpinner />
   }
+  if (samlSettingsError || !samlSettings) {
+    return (
+      <AlertNotification
+        level="error"
+        message={`Error loading SAML settings: ${samlSettingsError?.message || "Unknown error"}`}
+      />
+    )
+  }
 
   return (
     <Form {...methods}>