From 62abbd206f3e037cbaaca26fc67e61385bc475d6 Mon Sep 17 00:00:00 2001
From: Daryl Lim <5508348+daryllimyt@users.noreply.github.com>
Date: Thu, 9 Jan 2025 12:56:59 +0000
Subject: [PATCH] feat(ui): Add error states for settings (#721)

---
 .../organization/org-settings-auth.tsx        | 10 ++++++++
 .../organization/org-settings-git.tsx         | 23 +++++++++++++++++--
 .../organization/org-settings-oauth.tsx       | 10 ++++++++
 .../organization/org-settings-sso.tsx         | 11 +++++++++
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/organization/org-settings-auth.tsx b/frontend/src/components/organization/org-settings-auth.tsx
index 81434b4b6..6220d9e71 100644
--- 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
index c5dd2d843..4f3d9450b 100644
--- 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
index e1379cb95..905a73a7c 100644
--- 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
index 5c4d62a46..d9ed322c3 100644
--- 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}>