Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fcbb42a

Browse files
Devansu-Yadavgtsiolis
authored andcommitted
[dashboard] migrate to CheckBoxInput (#16768)
1 parent b39902f commit fcbb42a

File tree

4 files changed

+56
-47
lines changed

4 files changed

+56
-47
lines changed

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

Lines changed: 16 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 CheckBoxfrom "../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,21 @@ 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+
value="block"
306+
label="Block Users"
307+
hint="Block any user that tries to open a workspace for a repository URL that matches this RegEx."
308+
checked={props.br.blockUser}
309+
disabled={!props.update}
310+
onChange={(checked) => {
311+
if (!!props.update) {
312+
props.update({ blockUser: checked });
313+
}
314+
}}
315+
/>
316+
</CheckBoxInputContainer>
313317
</div>
314318
);
315319
}

‎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 CheckBoxfrom "../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";
@@ -64,37 +64,34 @@ export default function Settings() {
6464
Read our Privacy Policy
6565
</a>
6666
</p>
67-
<CheckBox
68-
title="Enable usage telemetry"
69-
desc={
70-
<span>
71-
Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
72-
below.
73-
</span>
74-
}
75-
checked={adminSettings?.sendTelemetry ?? false}
76-
onChange={(evt) =>
77-
actuallySetTelemetryPrefs({
78-
...adminSettings,
79-
sendTelemetry: evt.target.checked,
80-
} as InstallationAdminSettings)
81-
}
82-
/>
83-
<CheckBox
84-
title="Include customer ID in telemetry"
85-
desc={
86-
<span>
87-
Include an optional customer ID in usage telemetry to provide individualized support.
88-
</span>
89-
}
90-
checked={adminSettings?.sendCustomerID ?? false}
91-
onChange={(evt) =>
92-
actuallySetTelemetryPrefs({
93-
...adminSettings,
94-
sendCustomerID: evt.target.checked,
95-
} as InstallationAdminSettings)
96-
}
97-
/>
67+
<CheckBoxInputContainer>
68+
<CheckboxInput
69+
value="enable"
70+
label="Enable usage telemetry"
71+
hint="Enable usage telemetry on your Gitpod instance. A preview of your telemetry is available
72+
below."
73+
checked={adminSettings?.sendTelemetry ?? false}
74+
onChange={(checked) =>
75+
actuallySetTelemetryPrefs({
76+
...adminSettings,
77+
sendTelemetry: checked,
78+
} as InstallationAdminSettings)
79+
}
80+
/>
81+
82+
<CheckboxInput
83+
value="include"
84+
label="Include customer ID in telemetry"
85+
hint="Include an optional customer ID in usage telemetry to provide individualized support."
86+
checked={adminSettings?.sendCustomerID ?? false}
87+
onChange={(checked) =>
88+
actuallySetTelemetryPrefs({
89+
...adminSettings,
90+
sendCustomerID: checked,
91+
} as InstallationAdminSettings)
92+
}
93+
/>
94+
</CheckBoxInputContainer>
9895
<Heading2 className="mt-4">Telemetry preview</Heading2>
9996
<InfoBox>
10097
<pre>{JSON.stringify(telemetryData, null, 2)}</pre>

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
5656
<input
5757
type="checkbox"
5858
className={classNames(
59-
"h-4 w-4 mt-0.5 rounded cursor-pointer border-2 dark:filter-invert",
59+
"h-4 w-4 mt-1 rounded cursor-pointer border-2 dark:filter-invert",
6060
"focus:ring-2 focus:border-gray-900 ring-blue-400 dark:focus:border-gray-800",
6161
"border-gray-600 dark:border-gray-900 bg-transparent",
6262
{ "bg-gray-600 dark:bg-gray-900": checked },
@@ -70,7 +70,7 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
7070
<div className="flex flex-col">
7171
<span
7272
className={classNames(
73-
"text-sm font-semibold cursor-pointer",
73+
"text-md font-semibold cursor-pointer",
7474
disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-600 dark:text-gray-100",
7575
)}
7676
>
@@ -82,3 +82,11 @@ export const CheckboxInput: FC<CheckboxInputProps> = ({
8282
</label>
8383
);
8484
};
85+
86+
type CheckBoxInputContainerProps = {
87+
className?: string;
88+
};
89+
90+
export const CheckBoxInputContainer: FC<CheckBoxInputContainerProps> = ({ className, children }) => {
91+
return <div className={classNames("mt-4 max-w-2xl flex flex-col space-y-4", className)}>{children}</div>;
92+
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const InputFieldHint: FC<Props> = ({ disabled = false, children }) => {
1414
return (
1515
<span
1616
className={classNames(
17-
"text-sm",
17+
"text-md",
1818
disabled ? "text-gray-400 dark:text-gray-400" : "text-gray-500 dark:text-gray-400",
1919
)}
2020
>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /