opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: replace <ChooseOne> with alternatives when appropriate (#9907)

Browse Source
This commit is contained in:
Kayla Washburn
2023-10-02 10:51:35 -06:00
committed by GitHub
parent 148fa819ae
commit 885b2502ed
10 changed files with 294 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cli/errors.go
+2 -1
View File
@@ -6,9 +6,10 @@ import (
"net/http/httptest"
"os"
"golang.org/x/xerrors"
"github.com/coder/coder/v2/cli/clibase"
"github.com/coder/coder/v2/codersdk"
"golang.org/x/xerrors"
)
func (RootCmd) errorExample() *clibase.Cmd {
site/src/components/PaginationWidget/PaginationWidget.tsx
+26 -30
View File
@@ -4,7 +4,6 @@ import useMediaQuery from "@mui/material/useMediaQuery";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import { useActor } from "@xstate/react";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { CSSProperties } from "react";
import { PaginationMachineRef } from "xServices/pagination/paginationXService";
import { PageButton } from "./PageButton";
@@ -54,35 +53,32 @@ export const PaginationWidget = ({
<KeyboardArrowLeft />
<div>{prevLabel}</div>
</Button>
<ChooseOne>
<Cond condition={isMobile}>
<PageButton
activePage={currentPage}
page={currentPage}
numPages={numPages}
/>
</Cond>
<Cond>
{buildPagedList(numPages, currentPage).map((page) =>
typeof page !== "number" ? (
<PageButton
key={`Page${page}`}
activePage={currentPage}
placeholder="..."
disabled
/>
) : (
<PageButton
key={`Page${page}`}
activePage={currentPage}
page={page}
numPages={numPages}
onPageClick={() => send({ type: "GO_TO_PAGE", page })}
/>
),
)}
</Cond>
</ChooseOne>
{isMobile ? (
<PageButton
activePage={currentPage}
page={currentPage}
numPages={numPages}
/>
) : (
buildPagedList(numPages, currentPage).map((page) =>
typeof page !== "number" ? (
<PageButton
key={`Page${page}`}
activePage={currentPage}
placeholder="..."
disabled
/>
) : (
<PageButton
key={`Page${page}`}
activePage={currentPage}
page={page}
numPages={numPages}
onPageClick={() => send({ type: "GO_TO_PAGE", page })}
/>
),
)
)}
<Button
aria-label="Next page"
disabled={lastPageActive}
site/src/components/PaginationWidget/PaginationWidgetBase.tsx
+20 -24
View File
@@ -3,7 +3,6 @@ import { makeStyles, useTheme } from "@mui/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { PageButton } from "./PageButton";
import { buildPagedList } from "./utils";
@@ -45,35 +44,32 @@ export const PaginationWidgetBase = ({
>
<KeyboardArrowLeft />
</Button>
<ChooseOne>
<Cond condition={isMobile}>
<PageButton activePage={page} page={page} numPages={numPages} />
</Cond>
<Cond>
{buildPagedList(numPages, page).map((pageItem) => {
if (pageItem === "left" || pageItem === "right") {
return (
<PageButton
key={pageItem}
activePage={page}
placeholder="..."
disabled
/>
);
}
{isMobile ? (
<PageButton activePage={page} page={page} numPages={numPages} />
) : (
buildPagedList(numPages, page).map((pageItem) => {
if (pageItem === "left" || pageItem === "right") {
return (
<PageButton
key={pageItem}
page={pageItem}
activePage={page}
numPages={numPages}
onPageClick={() => onChange(pageItem)}
placeholder="..."
disabled
/>
);
})}
</Cond>
</ChooseOne>
}
return (
<PageButton
key={pageItem}
page={pageItem}
activePage={page}
numPages={numPages}
onPageClick={() => onChange(pageItem)}
/>
);
})
)}
<Button
aria-label="Next page"
disabled={isLastPage}
site/src/pages/GroupsPage/GroupPage.tsx
+114 -117
View File
@@ -10,7 +10,6 @@ import PersonAdd from "@mui/icons-material/PersonAdd";
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
import { Group, User } from "api/typesGenerated";
import { AvatarData } from "components/AvatarData/AvatarData";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Loader } from "components/Loader/Loader";
@@ -60,129 +59,127 @@ export const GroupPage: FC = () => {
const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
const styles = useStyles();
const helmet = (
<Helmet>
<title>
{pageTitle(
(groupData?.display_name || groupData?.name) ?? "Loading...",
)}
</title>
</Helmet>
);
if (isLoading) {
return (
<>
{helmet}
<Loader />
</>
);
}
return (
<>
<Helmet>
<title>
{pageTitle(
(groupData?.display_name || groupData?.name) ?? "Loading...",
)}
</title>
</Helmet>
<ChooseOne>
<Cond condition={isLoading}>
<Loader />
</Cond>
{helmet}
<Cond>
<Margins>
<PageHeader
actions={
canUpdateGroup && (
<>
<Button
startIcon={<SettingsOutlined />}
to="settings"
component={RouterLink}
>
Settings
</Button>
<Button
disabled={groupData?.id === groupData?.organization_id}
onClick={() => {
setIsDeletingGroup(true);
}}
startIcon={<DeleteOutline />}
className={styles.removeButton}
>
Delete&hellip;
</Button>
</>
)
}
>
<PageHeaderTitle>
{groupData?.display_name || groupData?.name}
</PageHeaderTitle>
<PageHeaderSubtitle>
{/* Show the name if it differs from the display name. */}
{groupData?.display_name &&
groupData?.display_name !== groupData?.name
? groupData?.name
: ""}{" "}
</PageHeaderSubtitle>
</PageHeader>
<Stack spacing={1}>
{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
<AddGroupMember
isLoading={addMemberMutation.isLoading}
onSubmit={async (user, reset) => {
try {
await addMemberMutation.mutateAsync({
groupId,
userId: user.id,
});
reset();
} catch (error) {
displayError(
getErrorMessage(error, "Failed to add member."),
);
}
<Margins>
<PageHeader
actions={
canUpdateGroup && (
<>
<Button
startIcon={<SettingsOutlined />}
to="settings"
component={RouterLink}
>
Settings
</Button>
<Button
disabled={groupData?.id === groupData?.organization_id}
onClick={() => {
setIsDeletingGroup(true);
}}
/>
)}
<TableToolbar>
<PaginationStatus
isLoading={Boolean(isLoading)}
showing={groupData?.members.length ?? 0}
total={groupData?.members.length ?? 0}
label="members"
/>
</TableToolbar>
startIcon={<DeleteOutline />}
className={styles.removeButton}
>
Delete&hellip;
</Button>
</>
)
}
>
<PageHeaderTitle>
{groupData?.display_name || groupData?.name}
</PageHeaderTitle>
<PageHeaderSubtitle>
{/* Show the name if it differs from the display name. */}
{groupData?.display_name &&
groupData?.display_name !== groupData?.name
? groupData?.name
: ""}{" "}
</PageHeaderSubtitle>
</PageHeader>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell width="99%">User</TableCell>
<TableCell width="1%"></TableCell>
</TableRow>
</TableHead>
<Stack spacing={1}>
{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
<AddGroupMember
isLoading={addMemberMutation.isLoading}
onSubmit={async (user, reset) => {
try {
await addMemberMutation.mutateAsync({
groupId,
userId: user.id,
});
reset();
} catch (error) {
displayError(getErrorMessage(error, "Failed to add member."));
}
}}
/>
)}
<TableToolbar>
<PaginationStatus
isLoading={Boolean(isLoading)}
showing={groupData?.members.length ?? 0}
total={groupData?.members.length ?? 0}
label="members"
/>
</TableToolbar>
<TableBody>
<ChooseOne>
<Cond
condition={Boolean(groupData?.members.length === 0)}
>
<TableRow>
<TableCell colSpan={999}>
<EmptyState
message="No members yet"
description="Add a member using the controls above"
/>
</TableCell>
</TableRow>
</Cond>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell width="99%">User</TableCell>
<TableCell width="1%"></TableCell>
</TableRow>
</TableHead>
<Cond>
{groupData?.members.map((member) => (
<GroupMemberRow
member={member}
group={groupData}
key={member.id}
canUpdate={canUpdateGroup}
/>
))}
</Cond>
</ChooseOne>
</TableBody>
</Table>
</TableContainer>
</Stack>
</Margins>
</Cond>
</ChooseOne>
<TableBody>
{groupData?.members.length === 0 ? (
<TableRow>
<TableCell colSpan={999}>
<EmptyState
message="No members yet"
description="Add a member using the controls above"
/>
</TableCell>
</TableRow>
) : (
groupData?.members.map((member) => (
<GroupMemberRow
member={member}
group={groupData}
key={member.id}
canUpdate={canUpdateGroup}
/>
))
)}
</TableBody>
</Table>
</TableContainer>
</Stack>
</Margins>
{groupQuery.data && (
<DeleteDialog
site/src/pages/GroupsPage/SettingsGroupPageView.tsx
+13 -18
View File
@@ -1,6 +1,5 @@
import TextField from "@mui/material/TextField";
import { Group } from "api/typesGenerated";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { FormFooter } from "components/FormFooter/FormFooter";
import { FullPageForm } from "components/FullPageForm/FullPageForm";
import { Loader } from "components/Loader/Loader";
@@ -123,24 +122,20 @@ export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
isLoading,
isUpdating,
}) => {
return (
<ChooseOne>
<Cond condition={isLoading}>
<Loader />
</Cond>
if (isLoading) {
return <Loader />;
}
<Cond>
<Margins>
<UpdateGroupForm
group={group as Group}
onCancel={onCancel}
errors={formErrors}
isLoading={isUpdating}
onSubmit={onSubmit}
/>
</Margins>
</Cond>
</ChooseOne>
return (
<Margins>
<UpdateGroupForm
group={group!}
onCancel={onCancel}
errors={formErrors}
isLoading={isUpdating}
onSubmit={onSubmit}
/>
</Margins>
);
};
site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx
+53 -61
View File
@@ -2,7 +2,6 @@ import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
import { useMachine } from "@xstate/react";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { Paywall } from "components/Paywall/Paywall";
import { Stack } from "components/Stack/Stack";
import { useFeatureVisibility } from "hooks/useFeatureVisibility";
@@ -31,67 +30,60 @@ export const TemplatePermissionsPage: FC<
<Helmet>
<title>{pageTitle([template.name, "Permissions"])}</title>
</Helmet>
<ChooseOne>
<Cond condition={!isTemplateRBACEnabled}>
<Paywall
message="Template permissions"
description="Manage your template permissions to allow users or groups to view or admin the template. To use this feature, you have to upgrade your account."
cta={
<Stack direction="row" alignItems="center">
<Link
href={docs("/admin/upgrade")}
target="_blank"
rel="noreferrer"
{!isTemplateRBACEnabled ? (
<Paywall
message="Template permissions"
description="Manage your template permissions to allow users or groups to view or admin the template. To use this feature, you have to upgrade your account."
cta={
<Stack direction="row" alignItems="center">
<Link
href={docs("/admin/upgrade")}
target="_blank"
rel="noreferrer"
>
<Button
startIcon={<ArrowRightAltOutlined />}
variant="contained"
>
<Button
startIcon={<ArrowRightAltOutlined />}
variant="contained"
>
See how to upgrade
</Button>
</Link>
<Link
href={docs("/admin/rbac")}
target="_blank"
rel="noreferrer"
>
Read the docs
</Link>
</Stack>
}
/>
</Cond>
<Cond>
<TemplatePermissionsPageView
organizationId={organizationId}
templateID={template.id}
templateACL={templateACL}
canUpdatePermissions={Boolean(permissions?.canUpdateTemplate)}
onAddUser={(user, role, reset) => {
send("ADD_USER", { user, role, onDone: reset });
}}
isAddingUser={state.matches("addingUser")}
onUpdateUser={(user, role) => {
send("UPDATE_USER_ROLE", { user, role });
}}
updatingUser={userToBeUpdated}
onRemoveUser={(user) => {
send("REMOVE_USER", { user });
}}
onAddGroup={(group, role, reset) => {
send("ADD_GROUP", { group, role, onDone: reset });
}}
isAddingGroup={state.matches("addingGroup")}
onUpdateGroup={(group, role) => {
send("UPDATE_GROUP_ROLE", { group, role });
}}
updatingGroup={groupToBeUpdated}
onRemoveGroup={(group) => {
send("REMOVE_GROUP", { group });
}}
/>
</Cond>
</ChooseOne>
See how to upgrade
</Button>
</Link>
<Link href={docs("/admin/rbac")} target="_blank" rel="noreferrer">
Read the docs
</Link>
</Stack>
}
/>
) : (
<TemplatePermissionsPageView
organizationId={organizationId}
templateID={template.id}
templateACL={templateACL}
canUpdatePermissions={Boolean(permissions?.canUpdateTemplate)}
onAddUser={(user, role, reset) => {
send("ADD_USER", { user, role, onDone: reset });
}}
isAddingUser={state.matches("addingUser")}
onUpdateUser={(user, role) => {
send("UPDATE_USER_ROLE", { user, role });
}}
updatingUser={userToBeUpdated}
onRemoveUser={(user) => {
send("REMOVE_USER", { user });
}}
onAddGroup={(group, role, reset) => {
send("ADD_GROUP", { group, role, onDone: reset });
}}
isAddingGroup={state.matches("addingGroup")}
onUpdateGroup={(group, role) => {
send("UPDATE_GROUP_ROLE", { group, role });
}}
updatingGroup={groupToBeUpdated}
onRemoveGroup={(group) => {
send("REMOVE_GROUP", { group });
}}
/>
)}
</>
);
};
site/src/pages/TemplatesPage/TemplatesPageView.tsx
+31 -40
View File
@@ -7,7 +7,6 @@ import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import AddIcon from "@mui/icons-material/AddOutlined";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { FC } from "react";
import { useNavigate, Link as RouterLink } from "react-router-dom";
import { createDayString } from "utils/createDayString";
@@ -151,7 +150,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
canCreateTemplates,
}) => {
const isLoading = !templates;
const isEmpty = Boolean(templates && templates.length === 0);
const isEmpty = templates && templates.length === 0;
return (
<Margins>
@@ -187,45 +186,37 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
)}
</PageHeader>
<ChooseOne>
<Cond condition={Boolean(error)}>
<ErrorAlert error={error} />
</Cond>
{error ? (
<ErrorAlert error={error} />
) : (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell width="35%">{Language.nameLabel}</TableCell>
<TableCell width="15%">{Language.usedByLabel}</TableCell>
<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
<TableCell width="1%"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{isLoading && <TableLoader />}
<Cond>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell width="35%">{Language.nameLabel}</TableCell>
<TableCell width="15%">{Language.usedByLabel}</TableCell>
<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
<TableCell width="1%"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{isLoading && <TableLoader />}
<ChooseOne>
<Cond condition={isEmpty}>
<EmptyTemplates
canCreateTemplates={canCreateTemplates}
examples={examples ?? []}
/>
</Cond>
<Cond>
{templates?.map((template) => (
<TemplateRow key={template.id} template={template} />
))}
</Cond>
</ChooseOne>
</TableBody>
</Table>
</TableContainer>
</Cond>
</ChooseOne>
{isEmpty ? (
<EmptyTemplates
canCreateTemplates={canCreateTemplates}
examples={examples ?? []}
/>
) : (
templates?.map((template) => (
<TemplateRow key={template.id} template={template} />
))
)}
</TableBody>
</Table>
</TableContainer>
)}
</Margins>
);
};
site/src/pages/WorkspacePage/Workspace.tsx
+13 -18
View File
@@ -27,7 +27,6 @@ import { TemplateVersionWarnings } from "components/TemplateVersionWarnings/Temp
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { DormantWorkspaceBanner } from "components/WorkspaceDeletion";
import { useLocalStorage } from "hooks";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import AlertTitle from "@mui/material/AlertTitle";
import dayjs from "dayjs";
@@ -257,23 +256,19 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
</Alert>
)}
<ChooseOne>
<Cond condition={workspace.latest_build.status === "deleted"}>
<WorkspaceDeletedBanner
handleClick={() => navigate(`/templates`)}
/>
</Cond>
<Cond>
{/* <DormantWorkspaceBanner/> determines its own visibility */}
<DormantWorkspaceBanner
workspaces={[workspace]}
shouldRedisplayBanner={
getLocal("dismissedWorkspace") !== workspace.id
}
onDismiss={() => saveLocal("dismissedWorkspace", workspace.id)}
/>
</Cond>
</ChooseOne>
{workspace.latest_build.status === "deleted" && (
<WorkspaceDeletedBanner
handleClick={() => navigate(`/templates`)}
/>
)}
{/* <DormantWorkspaceBanner/> determines its own visibility */}
<DormantWorkspaceBanner
workspaces={[workspace]}
shouldRedisplayBanner={
getLocal("dismissedWorkspace") !== workspace.id
}
onDismiss={() => saveLocal("dismissedWorkspace", workspace.id)}
/>
<TemplateVersionWarnings warnings={templateWarnings} />
site/src/pages/WorkspacePage/WorkspacePage.tsx
+17 -24
View File
@@ -1,5 +1,4 @@
import { useMachine } from "@xstate/react";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { Loader } from "components/Loader/Loader";
import { FC } from "react";
import { useParams } from "react-router-dom";
@@ -32,35 +31,29 @@ export const WorkspacePage: FC = () => {
const quotaQuery = useQuery(workspaceQuota(username));
const pageError = error ?? quotaQuery.error;
if (pageError) {
return (
<Margins>
<ErrorAlert error={pageError} sx={{ my: 2 }} />
</Margins>
);
}
if (!workspace || !workspaceState.matches("ready") || !quotaQuery.isSuccess) {
return <Loader />;
}
return (
<RequirePermission
isFeatureVisible={
!(isAxiosError(pageError) && pageError.response?.status === 404)
}
>
<ChooseOne>
<Cond condition={Boolean(pageError)}>
<Margins>
<ErrorAlert error={pageError} sx={{ my: 2 }} />
</Margins>
</Cond>
<Cond
condition={
Boolean(workspace) &&
workspaceState.matches("ready") &&
quotaQuery.isSuccess
}
>
<WorkspaceReadyPage
workspaceState={workspaceState}
quota={quotaQuery.data}
workspaceSend={workspaceSend}
/>
</Cond>
<Cond>
<Loader />
</Cond>
</ChooseOne>
<WorkspaceReadyPage
workspaceState={workspaceState}
quota={quotaQuery.data}
workspaceSend={workspaceSend}
/>
</RequirePermission>
);
};
site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+5 -8
View File
@@ -13,7 +13,6 @@ import {
} from "components/TableLoader/TableLoader";
import AddOutlined from "@mui/icons-material/AddOutlined";
import Button from "@mui/material/Button";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import { useClickableTableRow } from "hooks/useClickableTableRow";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
@@ -94,12 +93,10 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
<TableLoader canCheckWorkspaces={canCheckWorkspaces} />
)}
{workspaces && workspaces.length === 0 && (
<ChooseOne>
<Cond condition={isUsingFilter}>
<>
{isUsingFilter ? (
<TableEmpty message="No results matched your search" />
</Cond>
<Cond>
) : (
<TableEmpty
css={{
paddingBottom: 0,
@@ -135,8 +132,8 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
</div>
}
/>
</Cond>
</ChooseOne>
)}
</>
)}
{workspaces &&
workspaces.map((workspace) => {