From 4ac6332541a61b41d0f932e0904ef852b7ce3545 Mon Sep 17 00:00:00 2001 From: Devansu Yadav Date: Wed, 12 Apr 2023 04:00:49 +0530 Subject: [PATCH 1/4] 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` --- .../src/admin/BlockedRepositories.tsx | 27 +++--- components/dashboard/src/admin/Settings.tsx | 61 ++++++------ components/dashboard/src/admin/UserDetail.tsx | 34 +++++-- .../components/forms/CheckboxInputField.tsx | 35 +++++-- .../src/projects/ProjectSettings.tsx | 93 ++++++++++--------- .../src/projects/ProjectVariables.tsx | 13 +-- .../dashboard/src/teams/TeamSettings.tsx | 25 +++-- .../src/user-settings/Integrations.tsx | 24 ++--- .../src/user-settings/Notifications.tsx | 57 +++++++----- .../PersonalAccessTokensCreateView.tsx | 18 ++-- .../dashboard/src/user-settings/SelectIDE.tsx | 13 +-- 11 files changed, 219 insertions(+), 181 deletions(-) diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx index 6ac8f0824350de..cb922296f24cec 100644 --- a/components/dashboard/src/admin/BlockedRepositories.tsx +++ b/components/dashboard/src/admin/BlockedRepositories.tsx @@ -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"; @@ -299,17 +299,20 @@ function Details(props: { }} /> - { - if (!!props.update) { - props.update({ blockUser: v.target.checked }); - } - }} - /> + + + { + if (!!props.update) { + props.update({ blockUser: checked }); + } + }} + /> + ); } diff --git a/components/dashboard/src/admin/Settings.tsx b/components/dashboard/src/admin/Settings.tsx index b1d83514682706..a8bfdb2058e59e 100644 --- a/components/dashboard/src/admin/Settings.tsx +++ b/components/dashboard/src/admin/Settings.tsx @@ -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"; @@ -65,37 +65,34 @@ export default function Settings() { Read our Privacy Policy

- - Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available - below. - - } - checked={adminSettings?.sendTelemetry ?? false} - onChange={(evt) => - actuallySetTelemetryPrefs({ - ...adminSettings, - sendTelemetry: evt.target.checked, - } as InstallationAdminSettings) - } - /> - - Include an optional customer ID in usage telemetry to provide individualized support. - - } - checked={adminSettings?.sendCustomerID ?? false} - onChange={(evt) => - actuallySetTelemetryPrefs({ - ...adminSettings, - sendCustomerID: evt.target.checked, - } as InstallationAdminSettings) - } - /> + + + actuallySetTelemetryPrefs({ + ...adminSettings, + sendTelemetry: checked, + } as InstallationAdminSettings) + } + /> + + + actuallySetTelemetryPrefs({ + ...adminSettings, + sendCustomerID: checked, + } as InstallationAdminSettings) + } + /> + Telemetry preview 
{JSON.stringify(telemetryData, null, 2)}
diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx index 351a17305f2081..95bd7c213e1116 100644 --- a/components/dashboard/src/admin/UserDetail.tsx +++ b/components/dashboard/src/admin/UserDetail.tsx @@ -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"; @@ -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"; @@ -424,12 +424,20 @@ export default function UserDetail(p: { user: User }) { , ]} > -

Edit feature access by adding or removing feature flags for this user.

-
+ {flags.map((e) => ( - + ))} -
+ , ]} > -

Edit user permissions by adding or removing roles for this user.

-
+ {rop.map((e) => ( - + ))} -
+ ); diff --git a/components/dashboard/src/components/forms/CheckboxInputField.tsx b/components/dashboard/src/components/forms/CheckboxInputField.tsx index 5e42de90fb4240..952c1b53aaf21a 100644 --- a/components/dashboard/src/components/forms/CheckboxInputField.tsx +++ b/components/dashboard/src/components/forms/CheckboxInputField.tsx @@ -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"; @@ -25,11 +25,11 @@ export const CheckboxInputField: FC = ({ 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 = ({ @@ -51,21 +51,28 @@ export const CheckboxInput: FC = ({ [onChange], ); + const inputProps: React.InputHTMLAttributes = { + id: elementId, + checked: checked, + disabled, + onChange: handleChange, + }; + + if (value) { + inputProps.value = value; + } + return (