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

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"
         }

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,

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" }}>