From 3a86ae569a94149239d45e4c8b0423a1bf2ef813 Mon Sep 17 00:00:00 2001
From: Kayla Washburn-Love <mckayla@hey.com>
Date: Mon, 4 Mar 2024 09:45:40 -0700
Subject: [PATCH] refactor: use `TableEmpty` in user settings (#12389)

---
 .../ExternalAuthPage/ExternalAuthPageView.tsx       | 13 ++++---------
 .../UserSettingsPage/TokensPage/TokensPageView.tsx  |  2 +-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index a009d56c01..90d8e5a6f8 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -5,6 +5,8 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import LoadingButton from "@mui/lab/LoadingButton";
+import visuallyHidden from "@mui/utils/visuallyHidden";
 import { type FC, useState, useCallback, useEffect } from "react";
 import { useQuery } from "react-query";
 import { externalAuthProvider } from "api/queries/externalAuth";
@@ -25,8 +27,7 @@ import {
   ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
 import { ExternalAuthPollingState } from "pages/CreateWorkspacePage/CreateWorkspacePage";
-import LoadingButton from "@mui/lab/LoadingButton";
-import visuallyHidden from "@mui/utils/visuallyHidden";
+import { TableEmpty } from "components/TableEmpty/TableEmpty";
 
 export type ExternalAuthPageViewProps = {
   isLoading: boolean;
@@ -71,13 +72,7 @@ export const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
           </TableHead>
           <TableBody>
             {((auths.providers === null || auths.providers?.length === 0) && (
-              <TableRow>
-                <TableCell colSpan={999}>
-                  <div css={{ textAlign: "center" }}>
-                    No providers have been configured!
-                  </div>
-                </TableCell>
-              </TableRow>
+              <TableEmpty message="No providers have been configured" />
             )) ||
               auths.providers?.map((app: ExternalAuthLinkProvider) => {
                 return (
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
index 8b3b957935..2566ba826b 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx
@@ -66,7 +66,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
               <Cond condition={isLoading}>
                 <TableLoader />
               </Cond>
-              <Cond condition={hasLoaded && tokens?.length === 0}>
+              <Cond condition={hasLoaded && (!tokens || tokens.length === 0)}>
                 <TableEmpty message="No tokens found" />
               </Cond>
               <Cond>