Skip to content

Commit 0c42242

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Create table tool bar component
1 parent ce38d74 commit 0c42242

File tree

6 files changed

+115
-103
lines changed

6 files changed

+115
-103
lines changed

‎site/src/components/PaginationStatus/PaginationStatus.tsx

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎site/src/components/TableToolbar/TableToolbar.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { styled } from "@mui/material/styles"
2+
import Box from "@mui/material/Box"
3+
import Skeleton from "@mui/material/Skeleton"
4+
5+
export const TableToolbar = styled(Box)(({ theme }) => ({
6+
fontSize: 13,
7+
marginBottom: theme.spacing(1),
8+
marginTop: theme.spacing(0),
9+
height: 36, // The size of a small button
10+
color: theme.palette.text.secondary,
11+
"& strong": { color: theme.palette.text.primary },
12+
display: "flex",
13+
alignItems: "center",
14+
}))
15+
16+
type BasePaginationStatusProps = {
17+
label: string
18+
isLoading: boolean
19+
showing?: number
20+
total?: number
21+
}
22+
23+
type LoadedPaginationStatusProps = BasePaginationStatusProps & {
24+
isLoading: false
25+
showing: number
26+
total: number
27+
}
28+
29+
export const PaginationStatus = ({
30+
isLoading,
31+
showing,
32+
total,
33+
label,
34+
}: BasePaginationStatusProps | LoadedPaginationStatusProps) => {
35+
if (isLoading) {
36+
return (
37+
<Box sx={{ height: 24, display: "flex", alignItems: "center" }}>
38+
<Skeleton variant="text" width={160} height={16} />
39+
</Box>
40+
)
41+
}
42+
return (
43+
<Box>
44+
Showing <strong>{showing}</strong> of{" "}
45+
<strong>{total?.toLocaleString()}</strong> {label}
46+
</Box>
47+
)
48+
}

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ import { ComponentProps, FC } from "react"
2121
import { useTranslation } from "react-i18next"
2222
import { AuditPaywall } from "./AuditPaywall"
2323
import { AuditFilter } from "./AuditFilter"
24-
import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
24+
import {
25+
PaginationStatus,
26+
TableToolbar,
27+
} from "components/TableToolbar/TableToolbar"
2528
import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase"
2629

2730
export const Language = {
@@ -73,12 +76,14 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
7376
<Cond condition={isAuditLogVisible}>
7477
<AuditFilter {...filterProps} />
7578

76-
<PaginationStatus
77-
isLoading={Boolean(isLoading)}
78-
showing={auditLogs?.length ?? 0}
79-
total={count ?? 0}
80-
label="audit logs"
81-
/>
79+
<TableToolbar>
80+
<PaginationStatus
81+
isLoading={Boolean(isLoading)}
82+
showing={auditLogs?.length ?? 0}
83+
total={count ?? 0}
84+
label="audit logs"
85+
/>
86+
</TableToolbar>
8287

8388
<TableContainer>
8489
<Table>

‎site/src/pages/GroupsPage/GroupPage.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ import { pageTitle } from "utils/page"
3333
import { groupMachine } from "xServices/groups/groupXService"
3434
import { Maybe } from "components/Conditionals/Maybe"
3535
import { makeStyles } from "@mui/styles"
36-
import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
36+
import {
37+
PaginationStatus,
38+
TableToolbar,
39+
} from "components/TableToolbar/TableToolbar"
3740
import { UserAvatar } from "components/UserAvatar/UserAvatar"
3841

3942
const AddGroupMember: React.FC<{
@@ -155,12 +158,14 @@ export const GroupPage: React.FC = () => {
155158
}}
156159
/>
157160
</Maybe>
158-
<PaginationStatus
159-
isLoading={Boolean(isLoading)}
160-
showing={group?.members.length ?? 0}
161-
total={group?.members.length ?? 0}
162-
label="members"
163-
/>
161+
<TableToolbar>
162+
<PaginationStatus
163+
isLoading={Boolean(isLoading)}
164+
showing={group?.members.length ?? 0}
165+
total={group?.members.length ?? 0}
166+
label="members"
167+
/>
168+
</TableToolbar>
164169

165170
<TableContainer>
166171
<Table>

‎site/src/pages/UsersPage/UsersPageView.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import { PaginationMachineRef } from "xServices/pagination/paginationXService"
44
import * as TypesGen from "../../api/typesGenerated"
55
import { UsersTable } from "../../components/UsersTable/UsersTable"
66
import { UsersFilter } from "./UsersFilter"
7-
import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
7+
import {
8+
PaginationStatus,
9+
TableToolbar,
10+
} from "components/TableToolbar/TableToolbar"
811

912
export const Language = {
1013
activeUsersFilterName: "Active users",
@@ -60,12 +63,14 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
6063
<>
6164
<UsersFilter {...filterProps} />
6265

63-
<PaginationStatus
64-
isLoading={Boolean(isLoading)}
65-
showing={users?.length ?? 0}
66-
total={count ?? 0}
67-
label="users"
68-
/>
66+
<TableToolbar>
67+
<PaginationStatus
68+
isLoading={Boolean(isLoading)}
69+
showing={users?.length ?? 0}
70+
total={count ?? 0}
71+
label="users"
72+
/>
73+
</TableToolbar>
6974

7075
<UsersTable
7176
users={users}

‎site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ import { LockedWorkspaceBanner, Count } from "components/WorkspaceDeletion"
1818
import { ErrorAlert } from "components/Alert/ErrorAlert"
1919
import { WorkspacesFilter } from "./filter/filter"
2020
import { hasError, isApiValidationError } from "api/errors"
21-
import { PaginationStatus } from "components/PaginationStatus/PaginationStatus"
21+
import {
22+
PaginationStatus,
23+
TableToolbar,
24+
} from "components/TableToolbar/TableToolbar"
2225
import Box from "@mui/material/Box"
2326
import Button from "@mui/material/Button"
2427
import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
@@ -111,43 +114,34 @@ export const WorkspacesPageView: FC<
111114
<WorkspacesFilter error={error} {...filterProps} />
112115
</Stack>
113116

114-
{checkedWorkspaces.length > 0 ? (
115-
<Box
116-
sx={{
117-
position: "relative",
118-
display: "flex",
119-
alignItems: "center",
120-
fontSize: 13,
121-
mb: 2,
122-
mt: 1,
123-
color: (theme) => theme.palette.text.secondary,
124-
"& strong": { color: (theme) => theme.palette.text.primary },
125-
}}
126-
>
127-
<Box>
128-
Selected <strong>{checkedWorkspaces.length}</strong> of{" "}
129-
<strong>{workspaces?.length}</strong>{" "}
130-
{workspaces?.length === 1 ? "workspace" : "workspaces"}
131-
</Box>
117+
<TableToolbar>
118+
{checkedWorkspaces.length > 0 ? (
119+
<>
120+
<Box>
121+
Selected <strong>{checkedWorkspaces.length}</strong> of{" "}
122+
<strong>{workspaces?.length}</strong>{" "}
123+
{workspaces?.length === 1 ? "workspace" : "workspaces"}
124+
</Box>
132125

133-
<Box sx={{ position: "absolute", right: 0 }}>
134-
<Button
135-
size="small"
136-
startIcon={<DeleteOutlined />}
137-
onClick={onDeleteAll}
138-
>
139-
Delete all
140-
</Button>
141-
</Box>
142-
</Box>
143-
) : (
144-
<PaginationStatus
145-
isLoading={!workspaces && !error}
146-
showing={workspaces?.length ?? 0}
147-
total={count ?? 0}
148-
label="workspaces"
149-
/>
150-
)}
126+
<Box sx={{ marginLeft: "auto" }}>
127+
<Button
128+
size="small"
129+
startIcon={<DeleteOutlined />}
130+
onClick={onDeleteAll}
131+
>
132+
Delete all
133+
</Button>
134+
</Box>
135+
</>
136+
) : (
137+
<PaginationStatus
138+
isLoading={!workspaces && !error}
139+
showing={workspaces?.length ?? 0}
140+
total={count ?? 0}
141+
label="workspaces"
142+
/>
143+
)}
144+
</TableToolbar>
151145

152146
<WorkspacesTable
153147
workspaces={workspaces}

0 commit comments

Comments
 (0)