Skip to content

Commit 8f7037a

Browse files
Devansu-YadavDevansu-Yadav
committed
[dashboard] remove CheckBox comp usage
1 parent 2bb075f commit 8f7037a

File tree

10 files changed

+153
-127
lines changed

10 files changed

+153
-127
lines changed

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

Lines changed: 4 additions & 4 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 { CheckboxInput, CheckBoxInputContainer } from "../components/forms/CheckboxInputField";
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";
@@ -300,9 +300,9 @@ function Details(props: {
300300
/>
301301
</div>
302302

303-
<CheckBoxInputContainer>
303+
<CheckboxInputContainer>
304304
<CheckboxInput
305-
value="block"
305+
value="Block Users"
306306
label="Block Users"
307307
hint="Block any user that tries to open a workspace for a repository URL that matches this RegEx."
308308
checked={props.br.blockUser}
@@ -313,7 +313,7 @@ function Details(props: {
313313
}
314314
}}
315315
/>
316-
</CheckBoxInputContainer>
316+
</CheckboxInputContainer>
317317
</div>
318318
);
319319
}

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

Lines changed: 5 additions & 5 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 { CheckboxInput, CheckBoxInputContainer } from "../components/forms/CheckboxInputField";
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";
@@ -64,9 +64,9 @@ export default function Settings() {
6464
Read our Privacy Policy
6565
</a>
6666
</p>
67-
<CheckBoxInputContainer>
67+
<CheckboxInputContainer>
6868
<CheckboxInput
69-
value="enable"
69+
value="Enable usage telemetry"
7070
label="Enable usage telemetry"
7171
hint="Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
7272
below."
@@ -80,7 +80,7 @@ export default function Settings() {
8080
/>
8181

8282
<CheckboxInput
83-
value="include"
83+
value="Include customer ID"
8484
label="Include customer ID in telemetry"
8585
hint="Include an optional customer ID in usage telemetry to provide individualized support."
8686
checked={adminSettings?.sendCustomerID ?? false}
@@ -91,7 +91,7 @@ export default function Settings() {
9191
} as InstallationAdminSettings)
9292
}
9393
/>
94-
</CheckBoxInputContainer>
94+
</CheckboxInputContainer>
9595
<Heading2 className="mt-4">Telemetry preview</Heading2>
9696
<InfoBox>
9797
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>

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

Lines changed: 26 additions & 10 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">
446-
{rop.map((e) => (
447-
<CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
452+
<CheckboxInputField
453+
label="Edit user permissions by adding or removing roles for this user."
454+
className="mt-0"
455+
>
456+
{flags.map((e) => (
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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ type CheckboxInputProps = {
2828
value: string;
2929
checked: boolean;
3030
disabled?: boolean;
31-
label: string;
32-
hint?: string;
31+
label: string | React.ReactNode;
32+
hint?: string | React.ReactNode;
3333
onChange: (checked: boolean) => void;
3434
};
3535
export const CheckboxInput: FC<CheckboxInputProps> = ({
@@ -83,10 +83,10 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
8383
);
8484
};
8585

86-
type CheckBoxInputContainerProps = {
86+
type CheckboxInputContainerProps = {
8787
className?: string;
8888
};
8989

90-
export const CheckBoxInputContainer: FC<CheckBoxInputContainerProps> = ({ className, children }) => {
90+
export const CheckboxInputContainer: FC<CheckboxInputContainerProps> = ({ className, children }) => {
9191
return <div className={classNames("mt-4 max-w-2xl flex flex-col space-y-4", className)}>{children}</div>;
9292
};

‎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>

‎components/dashboard/src/user-settings/Integrations.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { AuthProviderEntry, AuthProviderInfo } from "@gitpod/gitpod-protocol";
88
import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
99
import React, { useCallback, useContext, useEffect, useState } from "react";
1010
import Alert from "../components/Alert";
11-
import CheckBox from "../components/CheckBox";
11+
import { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
1212
import ConfirmationModal from "../components/ConfirmationModal";
1313
import { ContextMenuEntry } from "../components/ContextMenu";
1414
import InfoBox from "../components/InfoBox";
@@ -209,13 +209,13 @@ function GitProviders() {
209209
}
210210
setEditModal(undefined);
211211
};
212-
const onChangeScopeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
212+
const onChangeScopeHandler = (checked: boolean, scope: string) => {
213213
if (!editModal) {
214214
return;
215215
}
216-
const scope = e.target.name;
216+
217217
const nextScopes = new Set(editModal.nextScopes);
218-
if (e.target.checked) {
218+
if (checked) {
219219
nextScopes.add(scope);
220220
} else {
221221
nextScopes.delete(scope);
@@ -300,17 +300,17 @@ function GitProviders() {
300300
<ModalBody>
301301
<div className="text-gray-500">Configure provider permissions.</div>
302302
{(editModal.provider.scopes || []).map((scope) => (
303-
<div key={`scope-${scope}`}>
304-
<CheckBox
305-
name={scope}
306-
desc={getDescriptionForScope(scope)}
307-
title={scope}
303+
<CheckboxInputContainer key={`scope-${scope}`} className="mt-0">
304+
<CheckboxInput
305+
value={scope}
306+
label={scope}
307+
hint={getDescriptionForScope(scope)}
308308
key={`scope-checkbox-${scope}`}
309309
checked={editModal.nextScopes.has(scope)}
310310
disabled={editModal.provider.requirements?.default.includes(scope)}
311-
onChange={onChangeScopeHandler}
312-
></CheckBox>
313-
</div>
311+
onChange={(checked) => onChangeScopeHandler(checked, scope)}
312+
/>
313+
</CheckboxInputContainer>
314314
))}
315315
</ModalBody>
316316
<ModalFooter>

0 commit comments

Comments
 (0)