Skip to content

Commit 885b250

Browse files
aslilacaslilac
authored
chore: replace <ChooseOne> with alternatives when appropriate (#9907)
1 parent 148fa81 commit 885b250

File tree

10 files changed

+294
-341
lines changed

10 files changed

+294
-341
lines changed

‎cli/errors.go

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import (
66
"net/http/httptest"
77
"os"
88

9+
"golang.org/x/xerrors"
10+
911
"github.com/coder/coder/v2/cli/clibase"
1012
"github.com/coder/coder/v2/codersdk"
11-
"golang.org/x/xerrors"
1213
)
1314

1415
func (RootCmd) errorExample() *clibase.Cmd {

‎site/src/components/PaginationWidget/PaginationWidget.tsx

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import useMediaQuery from "@mui/material/useMediaQuery";
44
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
55
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
66
import { useActor } from "@xstate/react";
7-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
87
import { CSSProperties } from "react";
98
import { PaginationMachineRef } from "xServices/pagination/paginationXService";
109
import { PageButton } from "./PageButton";
@@ -54,35 +53,32 @@ export const PaginationWidget = ({
5453
<KeyboardArrowLeft />
5554
<div>{prevLabel}</div>
5655
</Button>
57-
<ChooseOne>
58-
<Cond condition={isMobile}>
59-
<PageButton
60-
activePage={currentPage}
61-
page={currentPage}
62-
numPages={numPages}
63-
/>
64-
</Cond>
65-
<Cond>
66-
{buildPagedList(numPages, currentPage).map((page) =>
67-
typeof page !== "number" ? (
68-
<PageButton
69-
key={`Page${page}`}
70-
activePage={currentPage}
71-
placeholder="..."
72-
disabled
73-
/>
74-
) : (
75-
<PageButton
76-
key={`Page${page}`}
77-
activePage={currentPage}
78-
page={page}
79-
numPages={numPages}
80-
onPageClick={() => send({ type: "GO_TO_PAGE", page })}
81-
/>
82-
),
83-
)}
84-
</Cond>
85-
</ChooseOne>
56+
{isMobile ? (
57+
<PageButton
58+
activePage={currentPage}
59+
page={currentPage}
60+
numPages={numPages}
61+
/>
62+
) : (
63+
buildPagedList(numPages, currentPage).map((page) =>
64+
typeof page !== "number" ? (
65+
<PageButton
66+
key={`Page${page}`}
67+
activePage={currentPage}
68+
placeholder="..."
69+
disabled
70+
/>
71+
) : (
72+
<PageButton
73+
key={`Page${page}`}
74+
activePage={currentPage}
75+
page={page}
76+
numPages={numPages}
77+
onPageClick={() => send({ type: "GO_TO_PAGE", page })}
78+
/>
79+
),
80+
)
81+
)}
8682
<Button
8783
aria-label="Next page"
8884
disabled={lastPageActive}

‎site/src/components/PaginationWidget/PaginationWidgetBase.tsx

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { makeStyles, useTheme } from "@mui/styles";
33
import useMediaQuery from "@mui/material/useMediaQuery";
44
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
55
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
6-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
76
import { PageButton } from "./PageButton";
87
import { buildPagedList } from "./utils";
98

@@ -45,35 +44,32 @@ export const PaginationWidgetBase = ({
4544
>
4645
<KeyboardArrowLeft />
4746
</Button>
48-
<ChooseOne>
49-
<Cond condition={isMobile}>
50-
<PageButton activePage={page} page={page} numPages={numPages} />
51-
</Cond>
52-
<Cond>
53-
{buildPagedList(numPages, page).map((pageItem) => {
54-
if (pageItem === "left" || pageItem === "right") {
55-
return (
56-
<PageButton
57-
key={pageItem}
58-
activePage={page}
59-
placeholder="..."
60-
disabled
61-
/>
62-
);
63-
}
64-
47+
{isMobile ? (
48+
<PageButton activePage={page} page={page} numPages={numPages} />
49+
) : (
50+
buildPagedList(numPages, page).map((pageItem) => {
51+
if (pageItem === "left" || pageItem === "right") {
6552
return (
6653
<PageButton
6754
key={pageItem}
68-
page={pageItem}
6955
activePage={page}
70-
numPages={numPages}
71-
onPageClick={() => onChange(pageItem)}
56+
placeholder="..."
57+
disabled
7258
/>
7359
);
74-
})}
75-
</Cond>
76-
</ChooseOne>
60+
}
61+
62+
return (
63+
<PageButton
64+
key={pageItem}
65+
page={pageItem}
66+
activePage={page}
67+
numPages={numPages}
68+
onPageClick={() => onChange(pageItem)}
69+
/>
70+
);
71+
})
72+
)}
7773
<Button
7874
aria-label="Next page"
7975
disabled={isLastPage}

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

Lines changed: 114 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import PersonAdd from "@mui/icons-material/PersonAdd";
1010
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
1111
import { Group, User } from "api/typesGenerated";
1212
import { AvatarData } from "components/AvatarData/AvatarData";
13-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
1413
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
1514
import { EmptyState } from "components/EmptyState/EmptyState";
1615
import { Loader } from "components/Loader/Loader";
@@ -60,129 +59,127 @@ export const GroupPage: FC = () => {
6059
const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
6160
const styles = useStyles();
6261

62+
const helmet = (
63+
<Helmet>
64+
<title>
65+
{pageTitle(
66+
(groupData?.display_name || groupData?.name) ?? "Loading...",
67+
)}
68+
</title>
69+
</Helmet>
70+
);
71+
72+
if (isLoading) {
73+
return (
74+
<>
75+
{helmet}
76+
<Loader />
77+
</>
78+
);
79+
}
80+
6381
return (
6482
<>
65-
<Helmet>
66-
<title>
67-
{pageTitle(
68-
(groupData?.display_name || groupData?.name) ?? "Loading...",
69-
)}
70-
</title>
71-
</Helmet>
72-
<ChooseOne>
73-
<Cond condition={isLoading}>
74-
<Loader />
75-
</Cond>
76-
77-
<Cond>
78-
<Margins>
79-
<PageHeader
80-
actions={
81-
canUpdateGroup && (
82-
<>
83-
<Button
84-
startIcon={<SettingsOutlined />}
85-
to="settings"
86-
component={RouterLink}
87-
>
88-
Settings
89-
</Button>
90-
<Button
91-
disabled={groupData?.id === groupData?.organization_id}
92-
onClick={() => {
93-
setIsDeletingGroup(true);
94-
}}
95-
startIcon={<DeleteOutline />}
96-
className={styles.removeButton}
97-
>
98-
Delete&hellip;
99-
</Button>
100-
</>
101-
)
102-
}
103-
>
104-
<PageHeaderTitle>
105-
{groupData?.display_name || groupData?.name}
106-
</PageHeaderTitle>
107-
<PageHeaderSubtitle>
108-
{/* Show the name if it differs from the display name. */}
109-
{groupData?.display_name &&
110-
groupData?.display_name !== groupData?.name
111-
? groupData?.name
112-
: ""}{" "}
113-
</PageHeaderSubtitle>
114-
</PageHeader>
83+
{helmet}
11584

116-
<Stack spacing={1}>
117-
{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
118-
<AddGroupMember
119-
isLoading={addMemberMutation.isLoading}
120-
onSubmit={async (user, reset) => {
121-
try {
122-
await addMemberMutation.mutateAsync({
123-
groupId,
124-
userId: user.id,
125-
});
126-
reset();
127-
} catch (error) {
128-
displayError(
129-
getErrorMessage(error, "Failed to add member."),
130-
);
131-
}
85+
<Margins>
86+
<PageHeader
87+
actions={
88+
canUpdateGroup && (
89+
<>
90+
<Button
91+
startIcon={<SettingsOutlined />}
92+
to="settings"
93+
component={RouterLink}
94+
>
95+
Settings
96+
</Button>
97+
<Button
98+
disabled={groupData?.id === groupData?.organization_id}
99+
onClick={() => {
100+
setIsDeletingGroup(true);
132101
}}
133-
/>
134-
)}
135-
<TableToolbar>
136-
<PaginationStatus
137-
isLoading={Boolean(isLoading)}
138-
showing={groupData?.members.length ?? 0}
139-
total={groupData?.members.length ?? 0}
140-
label="members"
141-
/>
142-
</TableToolbar>
102+
startIcon={<DeleteOutline />}
103+
className={styles.removeButton}
104+
>
105+
Delete&hellip;
106+
</Button>
107+
</>
108+
)
109+
}
110+
>
111+
<PageHeaderTitle>
112+
{groupData?.display_name || groupData?.name}
113+
</PageHeaderTitle>
114+
<PageHeaderSubtitle>
115+
{/* Show the name if it differs from the display name. */}
116+
{groupData?.display_name &&
117+
groupData?.display_name !== groupData?.name
118+
? groupData?.name
119+
: ""}{" "}
120+
</PageHeaderSubtitle>
121+
</PageHeader>
143122

144-
<TableContainer>
145-
<Table>
146-
<TableHead>
147-
<TableRow>
148-
<TableCell width="99%">User</TableCell>
149-
<TableCell width="1%"></TableCell>
150-
</TableRow>
151-
</TableHead>
123+
<Stack spacing={1}>
124+
{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
125+
<AddGroupMember
126+
isLoading={addMemberMutation.isLoading}
127+
onSubmit={async (user, reset) => {
128+
try {
129+
await addMemberMutation.mutateAsync({
130+
groupId,
131+
userId: user.id,
132+
});
133+
reset();
134+
} catch (error) {
135+
displayError(getErrorMessage(error, "Failed to add member."));
136+
}
137+
}}
138+
/>
139+
)}
140+
<TableToolbar>
141+
<PaginationStatus
142+
isLoading={Boolean(isLoading)}
143+
showing={groupData?.members.length ?? 0}
144+
total={groupData?.members.length ?? 0}
145+
label="members"
146+
/>
147+
</TableToolbar>
152148

153-
<TableBody>
154-
<ChooseOne>
155-
<Cond
156-
condition={Boolean(groupData?.members.length === 0)}
157-
>
158-
<TableRow>
159-
<TableCell colSpan={999}>
160-
<EmptyState
161-
message="No members yet"
162-
description="Add a member using the controls above"
163-
/>
164-
</TableCell>
165-
</TableRow>
166-
</Cond>
149+
<TableContainer>
150+
<Table>
151+
<TableHead>
152+
<TableRow>
153+
<TableCell width="99%">User</TableCell>
154+
<TableCell width="1%"></TableCell>
155+
</TableRow>
156+
</TableHead>
167157

168-
<Cond>
169-
{groupData?.members.map((member) => (
170-
<GroupMemberRow
171-
member={member}
172-
group={groupData}
173-
key={member.id}
174-
canUpdate={canUpdateGroup}
175-
/>
176-
))}
177-
</Cond>
178-
</ChooseOne>
179-
</TableBody>
180-
</Table>
181-
</TableContainer>
182-
</Stack>
183-
</Margins>
184-
</Cond>
185-
</ChooseOne>
158+
<TableBody>
159+
{groupData?.members.length === 0 ? (
160+
<TableRow>
161+
<TableCell colSpan={999}>
162+
<EmptyState
163+
message="No members yet"
164+
description="Add a member using the controls above"
165+
/>
166+
</TableCell>
167+
</TableRow>
168+
) : (
169+
groupData?.members.map((member) => (
170+
<GroupMemberRow
171+
member={member}
172+
group={groupData}
173+
key={member.id}
174+
canUpdate={canUpdateGroup}
175+
/>
176+
))
177+
)}
178+
</TableBody>
179+
</Table>
180+
</TableContainer>
181+
</Stack>
182+
</Margins>
186183

187184
{groupQuery.data && (
188185
<DeleteDialog

0 commit comments

Comments
 (0)