fix: display error when fetching OAuth2 provider apps (#11713)

code-asher · web-flow · commit 7589df325bbd · 2024-01-22T09:56:36.000-09:00
diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage.tsx
@@ -18,6 +18,7 @@ const OAuth2AppsSettingsPage: FC = () => {
       <OAuth2AppsSettingsPageView
         apps={appsQuery.data}
         isLoading={appsQuery.isLoading}
+        error={appsQuery.error}
         isEntitled={
           entitlements.features.oauth2_provider.entitlement !== "not_entitled"
         }
diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.stories.tsx
@@ -16,6 +16,13 @@ export const Loading: Story = {
   },
 };
 
+export const Error: Story = {
+  args: {
+    isLoading: false,
+    error: "some error",
+  },
+};
+
 export const Unentitled: Story = {
   args: {
     isLoading: false,
diff --git a/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -19,6 +19,7 @@ import {
   EnterpriseBadge,
   EntitledBadge,
 } from "components/Badges/Badges";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { Stack } from "components/Stack/Stack";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
@@ -28,12 +29,14 @@ type OAuth2AppsSettingsProps = {
   apps?: TypesGen.OAuth2ProviderApp[];
   isEntitled: boolean;
   isLoading: boolean;
+  error: unknown;
 };
 
 const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
   apps,
   isEntitled,
   isLoading,
+  error,
 }) => {
   return (
     <>
@@ -62,6 +65,8 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
         </Button>
       </Stack>
 
+      {error && <ErrorAlert error={error} />}
+
       <TableContainer css={{ marginTop: 32 }}>
         <Table>
           <TableHead>
@@ -72,9 +77,8 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
           </TableHead>
           <TableBody>
             {isLoading && <TableLoader />}
-            {!isLoading &&
-              apps?.map((app) => <OAuth2AppRow key={app.id} app={app} />)}
-            {!isLoading && (!apps || apps?.length === 0) && (
+            {apps?.map((app) => <OAuth2AppRow key={app.id} app={app} />)}
+            {apps?.length === 0 && (
               <TableRow>
                 <TableCell colSpan={999}>
                   <div css={{ textAlign: "center" }}>

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ const OAuth2AppsSettingsPage: FC = () => {`
`18`	`18`	`<OAuth2AppsSettingsPageView`
`19`	`19`	`apps={appsQuery.data}`
`20`	`20`	`isLoading={appsQuery.isLoading}`
	`21`	`+ error={appsQuery.error}`
`21`	`22`	`isEntitled={`
`22`	`23`	`entitlements.features.oauth2_provider.entitlement !== "not_entitled"`
`23`	`24`	`}`