Skip to content

Commit 4ac6332

Browse files
Devansu-YadavDevansu-Yadav
authored
Migrate all checkbox inputs to the CheckBoxInput component (#16813)
* [dashboard] migrate to CheckBoxInput (#16768) * [dashboard] remove CheckBox comp usage * [dashboard] remove `CheckBox` on team settings * [dashboard] remove border on checkbox click state * [dashboard] refactor code for `CheckboxInput`
1 parent 66f22e4 commit 4ac6332

File tree

11 files changed

+219
-181
lines changed

11 files changed

+219
-181
lines changed

‎components/dashboard/src/admin/BlockedRepositories.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { AdminPageHeader } from "./AdminPageHeader";
1111
import { BlockedRepository } from "@gitpod/gitpod-protocol/lib/blocked-repositories-protocol";
1212
import ConfirmationModal from "../components/ConfirmationModal";
1313
import Modal from "../components/Modal";
14-
import CheckBox from "../components/CheckBox";
14+
import { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
1515
import { ItemFieldContextMenu } from "../components/ItemsList";
1616
import { ContextMenuEntry } from "../components/ContextMenu";
1717
import Alert from "../components/Alert";
@@ -299,17 +299,20 @@ function Details(props: {
299299
}}
300300
/>
301301
</div>
302-
<CheckBox
303-
title={"Block Users"}
304-
desc={"Block any user that tries to open a workspace for a repository URL that matches this RegEx."}
305-
checked={props.br.blockUser}
306-
disabled={!props.update}
307-
onChange={(v) => {
308-
if (!!props.update) {
309-
props.update({ blockUser: v.target.checked });
310-
}
311-
}}
312-
/>
302+
303+
<CheckboxInputContainer>
304+
<CheckboxInput
305+
label="Block Users"
306+
hint="Block any user that tries to open a workspace for a repository URL that matches this RegEx."
307+
checked={props.br.blockUser}
308+
disabled={!props.update}
309+
onChange={(checked) => {
310+
if (!!props.update) {
311+
props.update({ blockUser: checked });
312+
}
313+
}}
314+
/>
315+
</CheckboxInputContainer>
313316
</div>
314317
);
315318
}

‎components/dashboard/src/admin/Settings.tsx

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import React, { useContext } from "react";
88
import { TelemetryData, InstallationAdminSettings } from "@gitpod/gitpod-protocol";
99
import { AdminContext } from "../admin-context";
10-
import CheckBox from "../components/CheckBox";
10+
import { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
1111
import { getGitpodService } from "../service/service";
1212
import { useEffect, useState } from "react";
1313
import InfoBox from "../components/InfoBox";
@@ -65,37 +65,34 @@ export default function Settings() {
6565
Read our Privacy Policy
6666
</a>
6767
</p>
68-
<CheckBox
69-
title="Enable usage telemetry"
70-
desc={
71-
<span>
72-
Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
73-
below.
74-
</span>
75-
}
76-
checked={adminSettings?.sendTelemetry ?? false}
77-
onChange={(evt) =>
78-
actuallySetTelemetryPrefs({
79-
...adminSettings,
80-
sendTelemetry: evt.target.checked,
81-
} as InstallationAdminSettings)
82-
}
83-
/>
84-
<CheckBox
85-
title="Include customer ID in telemetry"
86-
desc={
87-
<span>
88-
Include an optional customer ID in usage telemetry to provide individualized support.
89-
</span>
90-
}
91-
checked={adminSettings?.sendCustomerID ?? false}
92-
onChange={(evt) =>
93-
actuallySetTelemetryPrefs({
94-
...adminSettings,
95-
sendCustomerID: evt.target.checked,
96-
} as InstallationAdminSettings)
97-
}
98-
/>
68+
<CheckboxInputContainer>
69+
<CheckboxInput
70+
value="Enable usage telemetry"
71+
label="Enable usage telemetry"
72+
hint="Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
73+
below."
74+
checked={adminSettings?.sendTelemetry ?? false}
75+
onChange={(checked) =>
76+
actuallySetTelemetryPrefs({
77+
...adminSettings,
78+
sendTelemetry: checked,
79+
} as InstallationAdminSettings)
80+
}
81+
/>
82+
83+
<CheckboxInput
84+
value="Include customer ID"
85+
label="Include customer ID in telemetry"
86+
hint="Include an optional customer ID in usage telemetry to provide individualized support."
87+
checked={adminSettings?.sendCustomerID ?? false}
88+
onChange={(checked) =>
89+
actuallySetTelemetryPrefs({
90+
...adminSettings,
91+
sendCustomerID: checked,
92+
} as InstallationAdminSettings)
93+
}
94+
/>
95+
</CheckboxInputContainer>
9996
<Heading2 className="mt-4">Telemetry preview</Heading2>
10097
<InfoBox>
10198
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>

‎components/dashboard/src/admin/UserDetail.tsx

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { AccountStatement, Subscription } from "@gitpod/gitpod-protocol/lib/acco
1616
import { Plans } from "@gitpod/gitpod-protocol/lib/plans";
1717
import dayjs from "dayjs";
1818
import { useEffect, useRef, useState } from "react";
19-
import CheckBox from "../components/CheckBox";
2019
import Modal from "../components/Modal";
2120
import { getGitpodService } from "../service/service";
2221
import { WorkspaceSearch } from "./WorkspacesSearch";
@@ -26,6 +25,7 @@ import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
2625
import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
2726
import CaretDown from "../icons/CaretDown.svg";
2827
import ContextMenu from "../components/ContextMenu";
28+
import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInputField";
2929
import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
3030
import { Heading2, Subheading } from "../components/typography/headings";
3131

@@ -424,12 +424,20 @@ export default function UserDetail(p: { user: User }) {
424424
</button>,
425425
]}
426426
>
427-
<p>Edit feature access by adding or removing feature flags for this user.</p>
428-
<div className="flex flex-col">
427+
<CheckboxInputField
428+
label="Edit feature access by adding or removing feature flags for this user."
429+
className="mt-0"
430+
>
429431
{flags.map((e) => (
430-
<CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
432+
<CheckboxInput
433+
value="edit feature flags"
434+
key={e.title}
435+
label={e.title}
436+
checked={!!e.checked}
437+
onChange={e.onClick}
438+
/>
431439
))}
432-
</div>
440+
</CheckboxInputField>
433441
</Modal>
434442
<Modal
435443
visible={editRoles}
@@ -441,12 +449,20 @@ export default function UserDetail(p: { user: User }) {
441449
</button>,
442450
]}
443451
>
444-
<p>Edit user permissions by adding or removing roles for this user.</p>
445-
<div className="flex flex-col">
452+
<CheckboxInputField
453+
label="Edit user permissions by adding or removing roles for this user."
454+
className="mt-0"
455+
>
446456
{rop.map((e) => (
447-
<CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
457+
<CheckboxInput
458+
value="edit user permissions"
459+
key={e.title}
460+
label={e.title}
461+
checked={!!e.checked}
462+
onChange={e.onClick}
463+
/>
448464
))}
449-
</div>
465+
</CheckboxInputField>
450466
</Modal>
451467
</>
452468
);

‎components/dashboard/src/components/forms/CheckboxInputField.tsx

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66

77
import classNames from "classnames";
8-
import { FC, ReactNode, useCallback } from "react";
8+
import React, { FC, ReactNode, useCallback } from "react";
99
import { useId } from "../../hooks/useId";
1010
import { InputField } from "./InputField";
1111
import { InputFieldHint } from "./InputFieldHint";
@@ -25,11 +25,11 @@ export const CheckboxInputField: FC<CheckboxInputFieldProps> = ({ label, error,
2525

2626
type CheckboxInputProps = {
2727
id?: string;
28-
value: string;
28+
value?: string;
2929
checked: boolean;
3030
disabled?: boolean;
31-
label: string;
32-
hint?: string;
31+
label: React.ReactNode;
32+
hint?: React.ReactNode;
3333
onChange: (checked: boolean) => void;
3434
};
3535
export const CheckboxInput: FC<CheckboxInputProps> = ({
@@ -51,21 +51,28 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
5151
[onChange],
5252
);
5353

54+
const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
55+
id: elementId,
56+
checked: checked,
57+
disabled,
58+
onChange: handleChange,
59+
};
60+
61+
if (value) {
62+
inputProps.value = value;
63+
}
64+
5465
return (
5566
<label className="flex space-x-2 justify-start items-start" htmlFor={elementId}>
5667
<input
5768
type="checkbox"
5869
className={classNames(
5970
"h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
60-
"focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
71+
"focus:ring-2 ring-blue-400",
6172
"border-gray-600 dark:border-gray-900 bg-transparent",
6273
{ "bg-gray-600 dark:bg-gray-900": checked },
6374
)}
64-
value={value}
65-
id={elementId}
66-
checked={checked}
67-
disabled={disabled}
68-
onChange={handleChange}
75+
{...inputProps}
6976
/>
7077
<div className="flex flex-col">
7178
<span
@@ -82,3 +89,11 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
8289
</label>
8390
);
8491
};
92+
93+
type CheckboxInputContainerProps = {
94+
className?: string;
95+
};
96+
97+
export const CheckboxInputContainer: FC<CheckboxInputContainerProps> = ({ className, children }) => {
98+
return <div className={classNames("mt-4 max-w-2xl flex flex-col space-y-4", className)}>{children}</div>;
99+
};

‎components/dashboard/src/projects/ProjectSettings.tsx

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useCallback, useContext, useEffect, useState } from "react";
1010
import { useHistory } from "react-router";
1111
import { Link } from "react-router-dom";
1212
import Alert from "../components/Alert";
13-
import CheckBox from "../components/CheckBox";
13+
import { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
1414
import { PageWithSubMenu } from "../components/PageWithSubMenu";
1515
import PillLabel from "../components/PillLabel";
1616
import { useCurrentOrg } from "../data/organizations/orgs-query";
@@ -124,51 +124,52 @@ export default function ProjectSettingsView() {
124124
</div>
125125
</Alert>
126126
)}
127-
<CheckBox
128-
title={<span>Enable Incremental Prebuilds </span>}
129-
desc={
130-
<span>
131-
When possible, use an earlier successful prebuild as a base to create new prebuilds. This can
132-
make your prebuilds significantly faster, especially if they normally take longer than 10
133-
minutes.{" "}
134-
<a className="gp-link" href="https://www.gitpod.io/changelog/faster-incremental-prebuilds">
135-
Learn more
136-
</a>
137-
</span>
138-
}
139-
checked={project.settings?.useIncrementalPrebuilds ?? false}
140-
onChange={({ target }) => updateProjectSettings({ useIncrementalPrebuilds: target.checked })}
141-
/>
142-
<CheckBox
143-
title={<span>Cancel Prebuilds on Outdated Commits </span>}
144-
desc={<span>Cancel pending or running prebuilds on the same branch when new commits are pushed.</span>}
145-
checked={!project.settings?.keepOutdatedPrebuildsRunning}
146-
onChange={({ target }) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !target.checked })}
147-
/>
148-
<CheckBox
149-
title={
150-
<span>
151-
Use Last Successful Prebuild{" "}
152-
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
153-
Alpha
154-
</PillLabel>
155-
</span>
156-
}
157-
desc={
158-
<span>
159-
Skip waiting for prebuilds in progress and use the last successful prebuild from previous
160-
commits on the same branch.
161-
</span>
162-
}
163-
checked={!!project.settings?.allowUsingPreviousPrebuilds}
164-
onChange={({ target }) =>
165-
updateProjectSettings({
166-
allowUsingPreviousPrebuilds: target.checked,
167-
// we are disabling prebuild cancellation when incremental workspaces are enabled
168-
keepOutdatedPrebuildsRunning: target.checked || project?.settings?.keepOutdatedPrebuildsRunning,
169-
})
170-
}
171-
/>
127+
<CheckboxInputContainer>
128+
<CheckboxInput
129+
value="Enable Incremental Prebuilds"
130+
label="Enable Incremental Prebuilds"
131+
hint={
132+
<span>
133+
When possible, use an earlier successful prebuild as a base to create new prebuilds. This
134+
can make your prebuilds significantly faster, especially if they normally take longer than
135+
10 minutes.{" "}
136+
<a className="gp-link" href="https://www.gitpod.io/changelog/faster-incremental-prebuilds">
137+
Learn more
138+
</a>
139+
</span>
140+
}
141+
checked={project.settings?.useIncrementalPrebuilds ?? false}
142+
onChange={(checked) => updateProjectSettings({ useIncrementalPrebuilds: checked })}
143+
/>
144+
<CheckboxInput
145+
value="Cancel Prebuilds"
146+
label="Cancel Prebuilds on Outdated Commits"
147+
hint="Cancel pending or running prebuilds on the same branch when new commits are pushed."
148+
checked={!project.settings?.keepOutdatedPrebuildsRunning}
149+
onChange={(checked) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !checked })}
150+
/>
151+
<CheckboxInput
152+
value="Use last successful Prebuild"
153+
label={
154+
<span>
155+
Use Last Successful Prebuild{" "}
156+
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
157+
Alpha
158+
</PillLabel>
159+
</span>
160+
}
161+
hint="Skip waiting for prebuilds in progress and use the last successful prebuild from previous
162+
commits on the same branch."
163+
checked={!!project.settings?.allowUsingPreviousPrebuilds}
164+
onChange={(checked) =>
165+
updateProjectSettings({
166+
allowUsingPreviousPrebuilds: checked,
167+
// we are disabling prebuild cancellation when incremental workspaces are enabled
168+
keepOutdatedPrebuildsRunning: checked || project?.settings?.keepOutdatedPrebuildsRunning,
169+
})
170+
}
171+
/>
172+
</CheckboxInputContainer>
172173
<div className="flex mt-4 max-w-2xl">
173174
<div className="flex flex-col ml-6">
174175
<label

‎components/dashboard/src/projects/ProjectVariables.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Project, ProjectEnvVar } from "@gitpod/gitpod-protocol";
88
import { useEffect, useState } from "react";
99
import { Redirect } from "react-router";
1010
import Alert from "../components/Alert";
11-
import CheckBox from "../components/CheckBox";
11+
import { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
1212
import InfoBox from "../components/InfoBox";
1313
import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
1414
import Modal, { ModalBody, ModalFooter, ModalHeader } from "../components/Modal";
@@ -171,14 +171,15 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
171171
onChange={(e) => setValue(e.target.value)}
172172
/>
173173
</div>
174-
<div className="mt-4">
175-
<CheckBox
176-
title="Hide Variable in Workspaces"
177-
desc="Unset this environment variable so that it's not accessible from the terminal in workspaces."
174+
<CheckboxInputContainer>
175+
<CheckboxInput
176+
value="Hide Variable"
177+
label="Hide Variable in Workspaces"
178+
hint="Unset this environment variable so that it's not accessible from the terminal in workspaces."
178179
checked={censored}
179180
onChange={() => setCensored(!censored)}
180181
/>
181-
</div>
182+
</CheckboxInputContainer>
182183
{!censored && (
183184
<div className="mt-4">
184185
<InfoBox>

0 commit comments

Comments
 (0)