Fix empty state

BrunoQuaresma · BrunoQuaresma · commit f1ba4acda9d4 · 2022-09-07T17:10:00.000Z
diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -92,7 +92,10 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
             className={styles.auditLogRowInfo}
           >
             <Stack direction="row" alignItems="center">
-              <UserAvatar username={auditLog.user?.username ?? ""} />
+              <UserAvatar
+                username={auditLog.user?.username ?? ""}
+                avatarURL={auditLog.user?.avatar_url}
+              />
               <div>
                 <span className={styles.auditLogResume}>
                   <strong>{auditLog.user?.username}</strong> {readableActionMessage(auditLog)}{" "}
diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx
@@ -3,9 +3,9 @@ import { FC } from "react"
 import { firstLetter } from "../../util/firstLetter"
 
 export interface UserAvatarProps {
-  className?: string
   username: string
-  avatarURL: string
+  className?: string
+  avatarURL?: string
 }
 
 export const UserAvatar: FC<UserAvatarProps> = ({ username, className, avatarURL }) => {
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -1,5 +1,7 @@
 import { useMachine } from "@xstate/react"
 import { FC } from "react"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
 import { auditMachine } from "xServices/audit/auditXService"
 import { AuditPageView } from "./AuditPageView"
 
@@ -13,21 +15,26 @@ const AuditPage: FC = () => {
   const { auditLogs, count, page, limit } = auditState.context
 
   return (
-    <AuditPageView
-      auditLogs={auditLogs}
-      count={count}
-      page={page}
-      limit={limit}
-      onNext={() => {
-        auditSend("NEXT")
-      }}
-      onPrevious={() => {
-        auditSend("PREVIOUS")
-      }}
-      onGoToPage={(page) => {
-        auditSend("GO_TO_PAGE", { page })
-      }}
-    />
+    <>
+      <Helmet>
+        <title>{pageTitle("Audit")}</title>
+      </Helmet>
+      <AuditPageView
+        auditLogs={auditLogs}
+        count={count}
+        page={page}
+        limit={limit}
+        onNext={() => {
+          auditSend("NEXT")
+        }}
+        onPrevious={() => {
+          auditSend("PREVIOUS")
+        }}
+        onGoToPage={(page) => {
+          auditSend("GO_TO_PAGE", { page })
+        }}
+      />
+    </>
   )
 }
 
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -7,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow"
 import { AuditLog } from "api/typesGenerated"
 import { AuditLogRow } from "components/AuditLogRow/AuditLogRow"
 import { CodeExample } from "components/CodeExample/CodeExample"
+import { EmptyState } from "components/EmptyState/EmptyState"
 import { Margins } from "components/Margins/Margins"
 import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { PaginationWidget } from "components/PaginationWidget/PaginationWidget"
@@ -40,7 +41,9 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
   onPrevious,
   onGoToPage,
 }) => {
-  const isReady = auditLogs && count
+  const isLoading = auditLogs === undefined || count === undefined
+  const isEmpty = !isLoading && auditLogs.length === 0
+  const hasResults = !isLoading && auditLogs.length > 0
 
   return (
     <Margins>
@@ -66,16 +69,21 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            {isReady ? (
-              auditLogs.map((auditLog) => <AuditLogRow auditLog={auditLog} key={auditLog.id} />)
-            ) : (
-              <TableLoader />
+            {isLoading && <TableLoader />}
+            {hasResults &&
+              auditLogs.map((auditLog) => <AuditLogRow auditLog={auditLog} key={auditLog.id} />)}
+            {isEmpty && (
+              <TableRow>
+                <TableCell colSpan={999}>
+                  <EmptyState message="No audit logs available" />
+                </TableCell>
+              </TableRow>
             )}
           </TableBody>
         </Table>
       </TableContainer>
 
-      {isReady && count > limit && (
+      {!isLoading && count > limit ? (
         <PaginationWidget
           prevLabel=""
           nextLabel=""
@@ -86,7 +94,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
           activePage={page}
           numRecordsPerPage={limit}
         />
-      )}
+      ) : null}
     </Margins>
   )
 }
