Skip to content

Commit 3155a30

Browse files
selfcontainedfiliptronicek
selfcontained
and
filiptronicek
authored
Adding Switch podkit component to prebuild settings page (#19171)
* adding Switch podkit component * flex it * Update components/dashboard/src/repositories/detail/ConfigurationDetailPrebuilds.tsx Co-authored-by: Filip Troníček <[email protected]> * removing redundant copy --------- Co-authored-by: Filip Troníček <[email protected]>
1 parent efbdade commit 3155a30

File tree

5 files changed

+140
-20
lines changed

5 files changed

+140
-20
lines changed

‎components/dashboard/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@radix-ui/react-label": "^2.0.2",
1515
"@radix-ui/react-popover": "^1.0.7",
1616
"@radix-ui/react-radio-group": "^1.1.3",
17+
"@radix-ui/react-switch": "^1.0.3",
1718
"@radix-ui/react-tooltip": "^1.0.7",
1819
"@stripe/react-stripe-js": "^1.7.2",
1920
"@stripe/stripe-js": "^1.29.0",

‎components/dashboard/src/components/podkit/switch/Switch.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright (c) 2023 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import React from "react";
8+
import * as SwitchPrimitives from "@radix-ui/react-switch";
9+
import { cn } from "@podkit/lib/cn";
10+
11+
export const Switch = React.forwardRef<
12+
React.ElementRef<typeof SwitchPrimitives.Root>,
13+
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
14+
>(({ className, ...props }, ref) => {
15+
return (
16+
<SwitchPrimitives.Root
17+
className={cn(
18+
// this gives the switch a line-height of 24px that matches the height of our base font size
19+
"my-0.5",
20+
"peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center",
21+
"rounded-2xl transition-colors",
22+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
23+
// TODO: do proper disabled state that match designs
24+
"disabled:cursor-default disabled:opacity-50",
25+
// TODO: try and make kumquat-gradient work here for the bg
26+
// checked state colors
27+
"data-[state=checked]:bg-kumquat-dark",
28+
// unchecked state colors
29+
"data-[state=unchecked]:bg-pk-surface-labels data-[state=unchecked]:dark:bg-pk-surface-labels-dark",
30+
className,
31+
)}
32+
{...props}
33+
ref={ref}
34+
>
35+
<SwitchPrimitives.Thumb
36+
className={cn(
37+
"pointer-events-none block h-[16px] w-[16px] rounded-full",
38+
"bg-pk-surface-primary dark:bg-pk-surface-primary-dark drop-shadow ring-0",
39+
// Positioning
40+
"transition-transform data-[state=checked]:translate-x-[17px] data-[state=unchecked]:translate-x-[3px]",
41+
)}
42+
/>
43+
</SwitchPrimitives.Root>
44+
);
45+
});
46+
Switch.displayName = SwitchPrimitives.Root.displayName;

‎components/dashboard/src/repositories/detail/ConfigurationDetailPrebuilds.tsx

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,47 @@
44
* See License.AGPL.txt in the project root for license information.
55
*/
66

7-
import { FC } from "react";
7+
import { FC, useState } from "react";
88
import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
99
import { ConfigurationSettingsField } from "./ConfigurationSettingsField";
1010
import { Heading3, Subheading } from "@podkit/typography/Headings";
11+
import { Switch } from "@podkit/switch/Switch";
12+
import { TextMuted } from "@podkit/typography/TextMuted";
1113

1214
type Props = {
1315
configuration: Configuration;
1416
};
1517
export const ConfigurationDetailPrebuilds: FC<Props> = ({ configuration }) => {
18+
// TODO: hook this up to just use configuration as state and wire up optimistic update for mutation
19+
const [enabled, setEnabled] = useState(!!configuration.prebuildSettings?.enabled);
20+
1621
return (
1722
<>
1823
<ConfigurationSettingsField>
1924
<Heading3>Prebuilds</Heading3>
20-
<Subheading className="max-w-lg">
21-
Prebuilds reduce wait time for new workspaces. Enabling requires permissions to configure repository
22-
webhooks.{" "}
23-
<a href="/docs/configure/projects/prebuilds" className="gp-link">
24-
Learn more
25-
</a>
26-
.
27-
</Subheading>
25+
<Subheading className="max-w-lg">Prebuilds reduce wait time for new workspaces.</Subheading>
26+
27+
<div className="flex gap-4 mt-6">
28+
{/* TODO: wrap this in a SwitchInputField that handles the switch, label and description and htmlFor/id automatically */}
29+
<Switch checked={enabled} onCheckedChange={setEnabled} id="prebuilds-enabled" />
30+
<div className="flex flex-col">
31+
<label className="font-semibold" htmlFor="prebuilds-enabled">
32+
Prebuilds are enabled
33+
</label>
34+
<TextMuted>
35+
Enabling requires permissions to configure repository webhooks.{" "}
36+
<a
37+
href="https://www.gitpod.io/docs/configure/projects/prebuilds"
38+
className="gp-link"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
>
42+
Learn more
43+
</a>
44+
.
45+
</TextMuted>
46+
</div>
47+
</div>
2848
</ConfigurationSettingsField>
2949
</>
3050
);

‎components/dashboard/tailwind.config.js

Lines changed: 50 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,26 @@
77
// tailwind.config.js
88
const colors = require("tailwindcss/colors");
99

10+
const podkitColors = {
11+
black: "#161616",
12+
white: "#FFFFFF",
13+
gray: {
14+
900: "#12100C",
15+
850: "#151310",
16+
800: "#23211E",
17+
750: "#2C2B28",
18+
700: "#514F4D",
19+
600: "#565451",
20+
500: "#666564",
21+
450: "#999795",
22+
400: "#747372",
23+
300: "#DADADA",
24+
200: "#ECE7E5",
25+
100: "#F5F4F4",
26+
50: "#F9F9F9",
27+
},
28+
};
29+
1030
module.exports = {
1131
jit: true,
1232
content: ["./public/**/*.html", "./src/**/*.{js,ts,tsx}"],
@@ -21,23 +41,42 @@ module.exports = {
2141
teal: colors.teal,
2242
sky: colors.sky,
2343
rose: colors.rose,
24-
"gitpod-black": "#161616",
44+
"gitpod-black": podkitColors.black,
2545
"gitpod-red": "#CE4A3E",
2646
"kumquat-dark": "#FF8A00",
2747
"kumquat-base": "#FFAE33",
2848
"kumquat-ripe": "#FFB45B",
2949
"kumquat-light": "#FFE4BC",
3050
"kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
31-
"gray-900": "#12100C",
32-
"gray-800": "#23211E",
33-
"gray-700": "#514F4D",
34-
"gray-600": "#565451",
35-
"gray-500": "#666564",
36-
"gray-400": "#999795",
37-
"gray-300": "#DADADA",
38-
"gray-200": "#ECE7E5",
39-
"gray-100": "#F5F4F4",
40-
"gray-50": "#F9F9F9",
51+
gray: podkitColors.gray,
52+
// Podkit colors - eventually we'll only use these colors
53+
// Once migrated, we can remove the colors above and shift this up under theme directly instead of extend
54+
"pk-content": {
55+
primary: podkitColors.gray["900"],
56+
"primary-dark": podkitColors.gray["200"],
57+
secondary: podkitColors.gray["600"],
58+
"secondary-dark": podkitColors.gray["450"],
59+
tertiary: podkitColors.gray["400"],
60+
"tertiary-dark": podkitColors.gray["500"],
61+
disabled: podkitColors.gray["450"],
62+
"disabled-dark": podkitColors.gray["600"],
63+
"invert-primary": podkitColors.gray["200"],
64+
"invert-primary-dark": podkitColors.gray["900"],
65+
"invert-secondary": podkitColors.gray["300"],
66+
"invert-secondary-dark": podkitColors.gray["600"],
67+
},
68+
"pk-surface": {
69+
primary: podkitColors.white,
70+
"primary-dark": podkitColors.gray["850"],
71+
secondary: podkitColors.gray["50"],
72+
"secondary-dark": podkitColors.gray["800"],
73+
tertiary: podkitColors.gray["100"],
74+
"tertiary-dark": podkitColors.gray["750"],
75+
labels: podkitColors.gray["200"],
76+
"labels-dark": podkitColors.gray["700"],
77+
invert: podkitColors.gray["850"],
78+
"invert-dark": podkitColors.gray["50"],
79+
},
4180
},
4281
container: {
4382
center: true,

‎yarn.lock

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2718,6 +2718,20 @@
27182718
"@babel/runtime" "^7.13.10"
27192719
"@radix-ui/react-compose-refs" "1.0.1"
27202720

2721+
"@radix-ui/react-switch@^1.0.3":
2722+
version "1.0.3"
2723+
resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
2724+
integrity sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==
2725+
dependencies:
2726+
"@babel/runtime" "^7.13.10"
2727+
"@radix-ui/primitive" "1.0.1"
2728+
"@radix-ui/react-compose-refs" "1.0.1"
2729+
"@radix-ui/react-context" "1.0.1"
2730+
"@radix-ui/react-primitive" "1.0.3"
2731+
"@radix-ui/react-use-controllable-state" "1.0.1"
2732+
"@radix-ui/react-use-previous" "1.0.1"
2733+
"@radix-ui/react-use-size" "1.0.1"
2734+
27212735
"@radix-ui/react-tooltip@^1.0.7":
27222736
version "1.0.7"
27232737
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"

0 commit comments

Comments
 (0)