Skip to content

Migrate all checkbox inputs to the CheckBoxInput component #16813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 11, 2023
Merged

Migrate all checkbox inputs to the CheckBoxInput component #16813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac4356c
[dashboard] migrate to CheckBoxInput (#16768)
Devansu-Yadav Mar 12, 2023
6770e20
[dashboard] remove CheckBox comp usage
Devansu-Yadav Mar 18, 2023
8710198
[dashboard] remove `CheckBox` on team settings
Devansu-Yadav Mar 31, 2023
bc10b61
[dashboard] remove border on checkbox click state
Devansu-Yadav Mar 31, 2023
d1c62ab
[dashboard] refactor code for `CheckboxInput`
Devansu-Yadav Apr 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions components/dashboard/src/admin/BlockedRepositories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { AdminPageHeader } from "./AdminPageHeader";
import { BlockedRepository } from "@gitpod/gitpod-protocol/lib/blocked-repositories-protocol";
import ConfirmationModal from "../components/ConfirmationModal";
import Modal from "../components/Modal";
import CheckBox from "../components/CheckBox";
import { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
import { ItemFieldContextMenu } from "../components/ItemsList";
import { ContextMenuEntry } from "../components/ContextMenu";
import Alert from "../components/Alert";
Expand Down Expand Up @@ -299,17 +299,20 @@ function Details(props: {
}}
/>
</div>
<CheckBox
title={"Block Users"}
desc={"Block any user that tries to open a workspace for a repository URL that matches this RegEx."}
checked={props.br.blockUser}
disabled={!props.update}
onChange={(v) => {
if (!!props.update) {
props.update({ blockUser: v.target.checked });
}
}}
/>

<CheckboxInputContainer>
<CheckboxInput
label="Block Users"
hint="Block any user that tries to open a workspace for a repository URL that matches this RegEx."
checked={props.br.blockUser}
disabled={!props.update}
onChange={(checked) => {
if (!!props.update) {
props.update({ blockUser: checked });
}
}}
/>
</CheckboxInputContainer>
</div>
);
}
61 changes: 29 additions & 32 deletions components/dashboard/src/admin/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import React, { useContext } from "react";
import { TelemetryData, InstallationAdminSettings } from "@gitpod/gitpod-protocol";
import { AdminContext } from "../admin-context";
import CheckBox from "../components/CheckBox";
import { CheckboxInput, CheckboxInputContainer } from "../components/forms/CheckboxInputField";
import { getGitpodService } from "../service/service";
import { useEffect, useState } from "react";
import InfoBox from "../components/InfoBox";
Expand Down Expand Up @@ -64,37 +64,34 @@ export default function Settings() {
Read our Privacy Policy
</a>
</p>
<CheckBox
title="Enable usage telemetry"
desc={
<span>
Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
below.
</span>
}
checked={adminSettings?.sendTelemetry ?? false}
onChange={(evt) =>
actuallySetTelemetryPrefs({
...adminSettings,
sendTelemetry: evt.target.checked,
} as InstallationAdminSettings)
}
/>
<CheckBox
title="Include customer ID in telemetry"
desc={
<span>
Include an optional customer ID in usage telemetry to provide individualized support.
</span>
}
checked={adminSettings?.sendCustomerID ?? false}
onChange={(evt) =>
actuallySetTelemetryPrefs({
...adminSettings,
sendCustomerID: evt.target.checked,
} as InstallationAdminSettings)
}
/>
<CheckboxInputContainer>
<CheckboxInput
value="Enable usage telemetry"
label="Enable usage telemetry"
hint="Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
below."
checked={adminSettings?.sendTelemetry ?? false}
onChange={(checked) =>
actuallySetTelemetryPrefs({
...adminSettings,
sendTelemetry: checked,
} as InstallationAdminSettings)
}
/>

<CheckboxInput
value="Include customer ID"
label="Include customer ID in telemetry"
hint="Include an optional customer ID in usage telemetry to provide individualized support."
checked={adminSettings?.sendCustomerID ?? false}
onChange={(checked) =>
actuallySetTelemetryPrefs({
...adminSettings,
sendCustomerID: checked,
} as InstallationAdminSettings)
}
/>
</CheckboxInputContainer>
<Heading2 className="mt-4">Telemetry preview</Heading2>
<InfoBox>
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>
Expand Down
34 changes: 25 additions & 9 deletions components/dashboard/src/admin/UserDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { AccountStatement, Subscription } from "@gitpod/gitpod-protocol/lib/acco
import { Plans } from "@gitpod/gitpod-protocol/lib/plans";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import CheckBox from "../components/CheckBox";
import Modal from "../components/Modal";
import { getGitpodService } from "../service/service";
import { WorkspaceSearch } from "./WorkspacesSearch";
Expand All @@ -26,6 +25,7 @@ import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
import CaretDown from "../icons/CaretDown.svg";
import ContextMenu from "../components/ContextMenu";
import { CheckboxInput, CheckboxInputField } from "../components/forms/CheckboxInputField";
import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-protocol/lib/usage";
import { Heading2, Subheading } from "../components/typography/headings";

Expand Down Expand Up @@ -424,12 +424,20 @@ export default function UserDetail(p: { user: User }) {
</button>,
]}
>
<p>Edit feature access by adding or removing feature flags for this user.</p>
<div className="flex flex-col">
<CheckboxInputField
label="Edit feature access by adding or removing feature flags for this user."
className="mt-0"
>
{flags.map((e) => (
<CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
<CheckboxInput
value="edit feature flags"
key={e.title}
label={e.title}
checked={!!e.checked}
onChange={e.onClick}
/>
))}
</div>
</CheckboxInputField>
</Modal>
<Modal
visible={editRoles}
Expand All @@ -441,12 +449,20 @@ export default function UserDetail(p: { user: User }) {
</button>,
]}
>
<p>Edit user permissions by adding or removing roles for this user.</p>
<div className="flex flex-col">
<CheckboxInputField
label="Edit user permissions by adding or removing roles for this user."
className="mt-0"
>
{rop.map((e) => (
<CheckBox key={e.title} title={e.title} desc="" checked={!!e.checked} onChange={e.onClick} />
<CheckboxInput
value="edit user permissions"
key={e.title}
label={e.title}
checked={!!e.checked}
onChange={e.onClick}
/>
))}
</div>
</CheckboxInputField>
</Modal>
</>
);
Expand Down
35 changes: 25 additions & 10 deletions components/dashboard/src/components/forms/CheckboxInputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

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

type CheckboxInputProps = {
id?: string;
value: string;
value?: string;
checked: boolean;
disabled?: boolean;
label: string;
hint?: string;
label: React.ReactNode;
hint?: React.ReactNode;
onChange: (checked: boolean) => void;
};
export const CheckboxInput: FC<CheckboxInputProps> = ({
Expand All @@ -51,21 +51,28 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
[onChange],
);

const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
id: elementId,
checked: checked,
disabled,
onChange: handleChange,
};

if (value) {
inputProps.value = value;
}

return (
<label className="flex space-x-2 justify-start items-start" htmlFor={elementId}>
<input
type="checkbox"
className={classNames(
"h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
"focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
"focus:ring-2 ring-blue-400",
"border-gray-600 dark:border-gray-900 bg-transparent",
{ "bg-gray-600 dark:bg-gray-900": checked },
)}
value={value}
id={elementId}
checked={checked}
disabled={disabled}
onChange={handleChange}
{...inputProps}
/>
<div className="flex flex-col">
<span
Expand All @@ -82,3 +89,11 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
</label>
);
};

type CheckboxInputContainerProps = {
className?: string;
};

export const CheckboxInputContainer: FC<CheckboxInputContainerProps> = ({ className, children }) => {
return <div className={classNames("mt-4 max-w-2xl flex flex-col space-y-4", className)}>{children}</div>;
};
93 changes: 47 additions & 46 deletions components/dashboard/src/projects/ProjectSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useCallback, useContext, useEffect, useState } from "react";
import { useHistory } from "react-router";
import { Link } from "react-router-dom";
import Alert from "../components/Alert";
import CheckBox from "../components/CheckBox";
import { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
import { PageWithSubMenu } from "../components/PageWithSubMenu";
import PillLabel from "../components/PillLabel";
import { useCurrentOrg } from "../data/organizations/orgs-query";
Expand Down Expand Up @@ -124,51 +124,52 @@ export default function ProjectSettingsView() {
</div>
</Alert>
)}
<CheckBox
title={<span>Enable Incremental Prebuilds </span>}
desc={
<span>
When possible, use an earlier successful prebuild as a base to create new prebuilds. This can
make your prebuilds significantly faster, especially if they normally take longer than 10
minutes.{" "}
<a className="gp-link" href="https://www.gitpod.io/changelog/faster-incremental-prebuilds">
Learn more
</a>
</span>
}
checked={project.settings?.useIncrementalPrebuilds ?? false}
onChange={({ target }) => updateProjectSettings({ useIncrementalPrebuilds: target.checked })}
/>
<CheckBox
title={<span>Cancel Prebuilds on Outdated Commits </span>}
desc={<span>Cancel pending or running prebuilds on the same branch when new commits are pushed.</span>}
checked={!project.settings?.keepOutdatedPrebuildsRunning}
onChange={({ target }) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !target.checked })}
/>
<CheckBox
title={
<span>
Use Last Successful Prebuild{" "}
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
Alpha
</PillLabel>
</span>
}
desc={
<span>
Skip waiting for prebuilds in progress and use the last successful prebuild from previous
commits on the same branch.
</span>
}
checked={!!project.settings?.allowUsingPreviousPrebuilds}
onChange={({ target }) =>
updateProjectSettings({
allowUsingPreviousPrebuilds: target.checked,
// we are disabling prebuild cancellation when incremental workspaces are enabled
keepOutdatedPrebuildsRunning: target.checked || project?.settings?.keepOutdatedPrebuildsRunning,
})
}
/>
<CheckboxInputContainer>
<CheckboxInput
value="Enable Incremental Prebuilds"
label="Enable Incremental Prebuilds"
hint={
<span>
When possible, use an earlier successful prebuild as a base to create new prebuilds. This
can make your prebuilds significantly faster, especially if they normally take longer than
10 minutes.{" "}
<a className="gp-link" href="https://www.gitpod.io/changelog/faster-incremental-prebuilds">
Learn more
</a>
</span>
}
checked={project.settings?.useIncrementalPrebuilds ?? false}
onChange={(checked) => updateProjectSettings({ useIncrementalPrebuilds: checked })}
/>
<CheckboxInput
value="Cancel Prebuilds"
label="Cancel Prebuilds on Outdated Commits"
hint="Cancel pending or running prebuilds on the same branch when new commits are pushed."
checked={!project.settings?.keepOutdatedPrebuildsRunning}
onChange={(checked) => updateProjectSettings({ keepOutdatedPrebuildsRunning: !checked })}
/>
<CheckboxInput
value="Use last successful Prebuild"
label={
<span>
Use Last Successful Prebuild{" "}
<PillLabel type="warn" className="font-semibold mt-2 ml-2 py-0.5 px-2 self-center">
Alpha
</PillLabel>
</span>
}
hint="Skip waiting for prebuilds in progress and use the last successful prebuild from previous
commits on the same branch."
checked={!!project.settings?.allowUsingPreviousPrebuilds}
onChange={(checked) =>
updateProjectSettings({
allowUsingPreviousPrebuilds: checked,
// we are disabling prebuild cancellation when incremental workspaces are enabled
keepOutdatedPrebuildsRunning: checked || project?.settings?.keepOutdatedPrebuildsRunning,
})
}
/>
</CheckboxInputContainer>
<div className="flex mt-4 max-w-2xl">
<div className="flex flex-col ml-6">
<label
Expand Down
13 changes: 7 additions & 6 deletions components/dashboard/src/projects/ProjectVariables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Project, ProjectEnvVar } from "@gitpod/gitpod-protocol";
import { useEffect, useState } from "react";
import { Redirect } from "react-router";
import Alert from "../components/Alert";
import CheckBox from "../components/CheckBox";
import { CheckboxInputContainer, CheckboxInput } from "../components/forms/CheckboxInputField";
import InfoBox from "../components/InfoBox";
import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
import Modal, { ModalBody, ModalFooter, ModalHeader } from "../components/Modal";
Expand Down Expand Up @@ -171,14 +171,15 @@ function AddVariableModal(props: { project?: Project; onClose: () => void }) {
onChange={(e) => setValue(e.target.value)}
/>
</div>
<div className="mt-4">
<CheckBox
title="Hide Variable in Workspaces"
desc="Unset this environment variable so that it's not accessible from the terminal in workspaces."
<CheckboxInputContainer>
<CheckboxInput
value="Hide Variable"
label="Hide Variable in Workspaces"
hint="Unset this environment variable so that it's not accessible from the terminal in workspaces."
checked={censored}
onChange={() => setCensored(!censored)}
/>
</div>
</CheckboxInputContainer>
{!censored && (
<div className="mt-4">
<InfoBox>
Expand Down
Loading