[dashboard] migrate to CheckBoxInput (#16768)

Author: Devansu-Yadav

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,21 @@ 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
+                    value="block"
+                    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>
     );
 }

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";
@@ -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"
+                        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"
+                        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>

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

@@ -56,7 +56,7 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
             <input
                 type="checkbox"
                 className={classNames(
-                    "h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
+                    "h-4 w-4 mt-1 rounded cursor-pointer border-2 dark:filter-invert",
                     "focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
                     "border-gray-600 dark:border-gray-900 bg-transparent",
                     { "bg-gray-600 dark:bg-gray-900": checked },
@@ -70,7 +70,7 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
             <div className="flex flex-col">
                 <span
                     className={classNames(
-                        "text-sm font-semibold cursor-pointer",
+                        "text-md font-semibold cursor-pointer",
                         disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
                     )}
                 >
@@ -82,3 +82,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>;
+};

components/dashboard/src/components/forms/InputFieldHint.tsx

@@ -14,7 +14,7 @@ export const InputFieldHint: FC<Props> = ({ disabled = false, children }) => {
     return (
         <span
             className={classNames(
-                "text-sm",
+                "text-md",
                 disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-500 dark:text-gray-400",
             )}
         >