Skip to content

Commit f1ba4ac

Browse files
committed
Fix empty state
1 parent cfe9d7d commit f1ba4ac

File tree

4 files changed

+43
-25
lines changed

4 files changed

+43
-25
lines changed

site/src/components/AuditLogRow/AuditLogRow.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,10 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
9292
className={styles.auditLogRowInfo}
9393
>
9494
<Stack direction="row" alignItems="center">
95-
<UserAvatar username={auditLog.user?.username ?? ""} />
95+
<UserAvatar
96+
username={auditLog.user?.username ?? ""}
97+
avatarURL={auditLog.user?.avatar_url}
98+
/>
9699
<div>
97100
<span className={styles.auditLogResume}>
98101
<strong>{auditLog.user?.username}</strong> {readableActionMessage(auditLog)}{" "}

site/src/components/UserAvatar/UserAvatar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { FC } from "react"
33
import { firstLetter } from "../../util/firstLetter"
44

55
export interface UserAvatarProps {
6-
className?: string
76
username: string
8-
avatarURL: string
7+
className?: string
8+
avatarURL?: string
99
}
1010

1111
export const UserAvatar: FC<UserAvatarProps> = ({ username, className, avatarURL }) => {

site/src/pages/AuditPage/AuditPage.tsx

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useMachine } from "@xstate/react"
22
import { FC } from "react"
3+
import { Helmet } from "react-helmet-async"
4+
import { pageTitle } from "util/page"
35
import { auditMachine } from "xServices/audit/auditXService"
46
import { AuditPageView } from "./AuditPageView"
57

@@ -13,21 +15,26 @@ const AuditPage: FC = () => {
1315
const { auditLogs, count, page, limit } = auditState.context
1416

1517
return (
16-
<AuditPageView
17-
auditLogs={auditLogs}
18-
count={count}
19-
page={page}
20-
limit={limit}
21-
onNext={() => {
22-
auditSend("NEXT")
23-
}}
24-
onPrevious={() => {
25-
auditSend("PREVIOUS")
26-
}}
27-
onGoToPage={(page) => {
28-
auditSend("GO_TO_PAGE", { page })
29-
}}
30-
/>
18+
<>
19+
<Helmet>
20+
<title>{pageTitle("Audit")}</title>
21+
</Helmet>
22+
<AuditPageView
23+
auditLogs={auditLogs}
24+
count={count}
25+
page={page}
26+
limit={limit}
27+
onNext={() => {
28+
auditSend("NEXT")
29+
}}
30+
onPrevious={() => {
31+
auditSend("PREVIOUS")
32+
}}
33+
onGoToPage={(page) => {
34+
auditSend("GO_TO_PAGE", { page })
35+
}}
36+
/>
37+
</>
3138
)
3239
}
3340

site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow"
77
import { AuditLog } from "api/typesGenerated"
88
import { AuditLogRow } from "components/AuditLogRow/AuditLogRow"
99
import { CodeExample } from "components/CodeExample/CodeExample"
10+
import { EmptyState } from "components/EmptyState/EmptyState"
1011
import { Margins } from "components/Margins/Margins"
1112
import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/PageHeader/PageHeader"
1213
import { PaginationWidget } from "components/PaginationWidget/PaginationWidget"
@@ -40,7 +41,9 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
4041
onPrevious,
4142
onGoToPage,
4243
}) => {
43-
const isReady = auditLogs && count
44+
const isLoading = auditLogs === undefined || count === undefined
45+
const isEmpty = !isLoading && auditLogs.length === 0
46+
const hasResults = !isLoading && auditLogs.length > 0
4447

4548
return (
4649
<Margins>
@@ -66,16 +69,21 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
6669
</TableRow>
6770
</TableHead>
6871
<TableBody>
69-
{isReady ? (
70-
auditLogs.map((auditLog) => <AuditLogRow auditLog={auditLog} key={auditLog.id} />)
71-
) : (
72-
<TableLoader />
72+
{isLoading && <TableLoader />}
73+
{hasResults &&
74+
auditLogs.map((auditLog) => <AuditLogRow auditLog={auditLog} key={auditLog.id} />)}
75+
{isEmpty && (
76+
<TableRow>
77+
<TableCell colSpan={999}>
78+
<EmptyState message="No audit logs available" />
79+
</TableCell>
80+
</TableRow>
7381
)}
7482
</TableBody>
7583
</Table>
7684
</TableContainer>
7785

78-
{isReady && count > limit && (
86+
{!isLoading && count > limit ? (
7987
<PaginationWidget
8088
prevLabel=""
8189
nextLabel=""
@@ -86,7 +94,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
8694
activePage={page}
8795
numRecordsPerPage={limit}
8896
/>
89-
)}
97+
) : null}
9098
</Margins>
9199
)
92100
}

0 commit comments

Comments
 (0)