New Prebuild Settings UI for repo configs (#19184)

* setting up settings

* preload ws classes

* adding heading/description to prebuild ws class

* add some constants

---------

Co-authored-by: Filip Troníček <[email protected]>

Author: selfcontained

components/dashboard/src/components/forms/SelectInputField.tsx

@@ -11,7 +11,7 @@ import { InputField } from "./InputField";
 
 type Props = {
     label?: ReactNode;
-    value: string;
+    value: React.SelectHTMLAttributes<HTMLSelectElement>["value"];
     id?: string;
     hint?: ReactNode;
     error?: ReactNode;
@@ -67,7 +67,7 @@ export const SelectInputField: FunctionComponent<Props> = memo(
 );
 
 type SelectInputProps = {
-    value: string;
+    value: React.SelectHTMLAttributes<HTMLSelectElement>["value"];
     className?: string;
     id?: string;
     disabled?: boolean;

components/dashboard/src/data/workspaces/workspace-classes-query.ts

@@ -8,6 +8,8 @@ import { SupportedWorkspaceClass } from "@gitpod/gitpod-protocol/lib/workspace-c
 import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
 
+export const DEFAULT_WS_CLASS = "g1-standard";
+
 export const useWorkspaceClasses = () => {
     return useQuery<SupportedWorkspaceClass[]>({
         queryKey: ["workspace-classes"],

components/dashboard/src/repositories/detail/ConfigurationDetailPage.tsx

@@ -17,12 +17,16 @@ import { ConfigurationDetailGeneral } from "./ConfigurationDetailGeneral";
 import { ConfigurationDetailWorkspaces } from "./ConfigurationDetailWorkspaces";
 import { ConfigurationDetailPrebuilds } from "./ConfigurationDetailPrebuilds";
 import { ConfigurationVariableList } from "./variables/ConfigurationVariableList";
+import { useWorkspaceClasses } from "../../data/workspaces/workspace-classes-query";
 
 type PageRouteParams = {
     id: string;
 };
 
 const ConfigurationDetailPage: FC = () => {
+    // preload some data we may show
+    useWorkspaceClasses();
+
     const { id } = useParams<PageRouteParams>();
     let { path, url } = useRouteMatch();
 

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

@@ -4,20 +4,56 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { FC, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 import { ConfigurationSettingsField } from "./ConfigurationSettingsField";
 import { Heading3, Subheading } from "@podkit/typography/Headings";
 import { Switch } from "@podkit/switch/Switch";
 import { TextMuted } from "@podkit/typography/TextMuted";
+import { PrebuildSettingsForm } from "./prebuilds/PrebuildSettingsForm";
+import { useConfigurationMutation } from "../../data/configurations/configuration-queries";
+import { useToast } from "../../components/toasts/Toasts";
 
 type Props = {
     configuration: Configuration;
 };
 export const ConfigurationDetailPrebuilds: FC<Props> = ({ configuration }) => {
-    // TODO: hook this up to just use configuration as state and wire up optimistic update for mutation
+    const { toast } = useToast();
+    const updateConfiguration = useConfigurationMutation();
+
     const [enabled, setEnabled] = useState(!!configuration.prebuildSettings?.enabled);
 
+    const updateEnabled = useCallback(
+        (newEnabled: boolean) => {
+            setEnabled(newEnabled);
+            updateConfiguration.mutate(
+                {
+                    configurationId: configuration.id,
+                    prebuildSettings: {
+                        ...configuration.prebuildSettings,
+                        enabled: newEnabled,
+                    },
+                },
+                {
+                    onError: (err) => {
+                        toast(
+                            <>
+                                <span>
+                                    {newEnabled
+                                        ? "There was a problem enabling prebuilds"
+                                        : "There was a problem disabling prebuilds"}
+                                </span>
+                                {err?.message && <p>{err.message}</p>}
+                            </>,
+                        );
+                        setEnabled(!newEnabled);
+                    },
+                },
+            );
+        },
+        [configuration.id, configuration.prebuildSettings, toast, updateConfiguration],
+    );
+
     return (
         <>
             <ConfigurationSettingsField>
@@ -26,10 +62,10 @@ export const ConfigurationDetailPrebuilds: FC<Props> = ({ configuration }) => {
 
                 <div className="flex gap-4 mt-6">
                     {/* TODO: wrap this in a SwitchInputField that handles the switch, label and description and htmlFor/id automatically */}
-                    <Switch checked={enabled} onCheckedChange={setEnabled} id="prebuilds-enabled" />
+                    <Switch checked={enabled} onCheckedChange={updateEnabled} id="prebuilds-enabled" />
                     <div className="flex flex-col">
                         <label className="font-semibold" htmlFor="prebuilds-enabled">
-                            Prebuilds are enabled
+                            {enabled ? "Prebuilds are enabled" : "Prebuilds are disabled"}
                         </label>
                         <TextMuted>
                             Enabling requires permissions to configure repository webhooks.{" "}
@@ -46,6 +82,8 @@ export const ConfigurationDetailPrebuilds: FC<Props> = ({ configuration }) => {
                     </div>
                 </div>
             </ConfigurationSettingsField>
+
+            {enabled && <PrebuildSettingsForm configuration={configuration} />}
         </>
     );
 };

components/dashboard/src/repositories/detail/prebuilds/PrebuildSettingsForm.tsx

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { BranchMatchingStrategy, Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
+import { FC, FormEvent, useCallback, useState } from "react";
+import { ConfigurationSettingsField } from "../ConfigurationSettingsField";
+import { Heading3, Subheading } from "@podkit/typography/Headings";
+import { InputField } from "../../../components/forms/InputField";
+import { PartialConfiguration, useConfigurationMutation } from "../../../data/configurations/configuration-queries";
+import { useToast } from "../../../components/toasts/Toasts";
+import { SelectInputField } from "../../../components/forms/SelectInputField";
+import { TextInputField } from "../../../components/forms/TextInputField";
+import { WorkspaceClassOptions } from "../shared/WorkspaceClassOptions";
+import { LoadingButton } from "@podkit/buttons/LoadingButton";
+import { InputFieldHint } from "../../../components/forms/InputFieldHint";
+import { DEFAULT_WS_CLASS } from "../../../data/workspaces/workspace-classes-query";
+
+const DEFAULT_PREBUILD_COMMIT_INTERVAL = 20;
+
+type Props = {
+    configuration: Configuration;
+};
+
+export const PrebuildSettingsForm: FC<Props> = ({ configuration }) => {
+    const { toast } = useToast();
+    const updateConfiguration = useConfigurationMutation();
+
+    const [interval, setInterval] = useState<string>(
+        `${configuration.prebuildSettings?.prebuildInterval ?? DEFAULT_PREBUILD_COMMIT_INTERVAL}`,
+    );
+    const [branchStrategy, setBranchStrategy] = useState<BranchMatchingStrategy>(
+        configuration.prebuildSettings?.branchStrategy ?? BranchMatchingStrategy.DEFAULT_BRANCH,
+    );
+    const [branchMatchingPattern, setBranchMatchingPattern] = useState<string>(
+        configuration.prebuildSettings?.branchMatchingPattern || "**",
+    );
+    const [workspaceClass, setWorkspaceClass] = useState<string>(
+        configuration.prebuildSettings?.workspaceClass || DEFAULT_WS_CLASS,
+    );
+
+    const handleSubmit = useCallback(
+        (e: FormEvent) => {
+            e.preventDefault();
+
+            const newInterval = Math.abs(Math.min(Number.parseInt(interval), 100)) || 0;
+
+            const updatedConfig: PartialConfiguration = {
+                configurationId: configuration.id,
+                prebuildSettings: {
+                    ...configuration.prebuildSettings,
+                    prebuildInterval: newInterval,
+                    branchStrategy,
+                    branchMatchingPattern,
+                    workspaceClass,
+                },
+            };
+
+            updateConfiguration.mutate(updatedConfig, {
+                onSuccess: () => {
+                    toast("Your prebuild settings were updated.");
+                },
+            });
+        },
+        [
+            branchMatchingPattern,
+            branchStrategy,
+            configuration.id,
+            configuration.prebuildSettings,
+            interval,
+            toast,
+            updateConfiguration,
+            workspaceClass,
+        ],
+    );
+
+    // TODO: Figure out if there's a better way to deal with grpc enums in the UI
+    const handleBranchStrategyChange = useCallback((val) => {
+        // This is pretty hacky, trying to coerce value into a number and then cast it to the enum type
+        // Would be better if we treated these as strings instead of special enums
+        setBranchStrategy(parseInt(val, 10) as BranchMatchingStrategy);
+    }, []);
+
+    return (
+        <ConfigurationSettingsField>
+            <form onSubmit={handleSubmit}>
+                <Heading3>Prebuild Settings</Heading3>
+                <Subheading className="max-w-lg">These settings will be applied on every Prebuild.</Subheading>
+
+                <InputField
+                    label="Commit interval"
+                    hint="The number of commits to be skipped between prebuild runs."
+                    id="prebuild-interval"
+                >
+                    <input
+                        type="number"
+                        id="prebuild-interval"
+                        min="0"
+                        max="100"
+                        step="5"
+                        value={interval}
+                        onChange={({ target }) => setInterval(target.value)}
+                    />
+                </InputField>
+
+                <SelectInputField
+                    label="Branch Filter"
+                    hint="Run prebuilds on the selected branches only."
+                    value={branchStrategy}
+                    onChange={handleBranchStrategyChange}
+                >
+                    <option value={BranchMatchingStrategy.ALL_BRANCHES}>All branches</option>
+                    <option value={BranchMatchingStrategy.DEFAULT_BRANCH}>Default branch</option>
+                    <option value={BranchMatchingStrategy.MATCHED_BRANCHES}>Match branches by pattern</option>
+                </SelectInputField>
+
+                {branchStrategy === BranchMatchingStrategy.MATCHED_BRANCHES && (
+                    <TextInputField
+                        label="Branch name pattern"
+                        hint="Glob patterns separated by commas are supported."
+                        value={branchMatchingPattern}
+                        onChange={setBranchMatchingPattern}
+                    />
+                )}
+
+                <Heading3 className="mt-8">Machine type</Heading3>
+                <Subheading>Choose the workspace machine type for your prebuilds.</Subheading>
+
+                <WorkspaceClassOptions value={workspaceClass} onChange={setWorkspaceClass} />
+                <InputFieldHint>Use a smaller machine type for cost optimization.</InputFieldHint>
+
+                <LoadingButton className="mt-8" type="submit" loading={updateConfiguration.isLoading}>
+                    Save
+                </LoadingButton>
+            </form>
+        </ConfigurationSettingsField>
+    );
+};

components/dashboard/src/repositories/detail/shared/WorkspaceClassOptions.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC } from "react";
+import { useWorkspaceClasses } from "../../../data/workspaces/workspace-classes-query";
+import { LoadingState } from "@podkit/loading/LoadingState";
+import { cn } from "@podkit/lib/cn";
+import Alert from "../../../components/Alert";
+import { Label } from "@podkit/forms/Label";
+import { RadioGroup, RadioGroupItem } from "@podkit/forms/RadioListField";
+
+type Props = {
+    value: string;
+    className?: string;
+    onChange: (newValue: string) => void;
+};
+export const WorkspaceClassOptions: FC<Props> = ({ value, className, onChange }) => {
+    const { data: classes, isLoading } = useWorkspaceClasses();
+
+    if (isLoading) {
+        return <LoadingState />;
+    }
+
+    if (!classes) {
+        return <Alert type="error">There was a problem loading workspace classes.</Alert>;
+    }
+
+    return (
+        <RadioGroup value={value} onValueChange={onChange} className={cn("my-4 gap-4", className)}>
+            {classes.map((wsClass) => (
+                <Label className="flex items-start space-x-2" key={wsClass.id}>
+                    <RadioGroupItem value={wsClass.id} />
+                    <div className="flex flex-col space-y-2">
+                        <span className="font-semibold">{wsClass.displayName}</span>
+                        <span>{wsClass.description}</span>
+                    </div>
+                </Label>
+            ))}
+        </RadioGroup>
+    );
+};

components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx

@@ -6,29 +6,25 @@
 
 import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 import React, { useCallback, useState } from "react";
-import { useWorkspaceClasses } from "../../../data/workspaces/workspace-classes-query";
-import { Label } from "@podkit/forms/Label";
-import { RadioGroup, RadioGroupItem } from "@podkit/forms/RadioListField";
 import { Heading3, Subheading } from "@podkit/typography/Headings";
 import { ConfigurationSettingsField } from "../ConfigurationSettingsField";
 import { useToast } from "../../../components/toasts/Toasts";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
-import { LoadingState } from "@podkit/loading/LoadingState";
 import { useConfigurationMutation } from "../../../data/configurations/configuration-queries";
+import { WorkspaceClassOptions } from "../shared/WorkspaceClassOptions";
+import { DEFAULT_WS_CLASS } from "../../../data/workspaces/workspace-classes-query";
 
 interface Props {
     configuration: Configuration;
 }
 
 export const ConfigurationWorkspaceSizeOptions = ({ configuration }: Props) => {
     const [selectedValue, setSelectedValue] = useState(
-        configuration.workspaceSettings?.workspaceClass || "g1-standard",
+        configuration.workspaceSettings?.workspaceClass || DEFAULT_WS_CLASS,
     );
     const classChanged = selectedValue !== configuration.workspaceSettings?.workspaceClass;
 
     const updateConfiguration = useConfigurationMutation();
-    const { data: classes, isError, isLoading } = useWorkspaceClasses();
-
     const { toast } = useToast();
 
     const setWorkspaceClass = useCallback(
@@ -56,31 +52,14 @@ export const ConfigurationWorkspaceSizeOptions = ({ configuration }: Props) => {
         [configuration.id, selectedValue, toast, updateConfiguration],
     );
 
-    if (isError || !classes) {
-        return <div>Something went wrong</div>;
-    }
-
-    if (isLoading) {
-        return <LoadingState />;
-    }
-
     return (
         <ConfigurationSettingsField>
             <form onSubmit={setWorkspaceClass}>
                 <Heading3>Workspace Size Options</Heading3>
                 <Subheading>Choose the size of your workspace based on the resources you need.</Subheading>
 
-                <RadioGroup value={selectedValue} onValueChange={setSelectedValue} className="mt-4">
-                    {classes.map((wsClass) => (
-                        <Label className="flex items-start space-x-2 my-2">
-                            <RadioGroupItem value={wsClass.id} />
-                            <div className="flex flex-col space-y-2">
-                                <span className="font-bold">{wsClass.displayName}</span>
-                                <span>{wsClass.description}</span>
-                            </div>
-                        </Label>
-                    ))}
-                </RadioGroup>
+                <WorkspaceClassOptions value={selectedValue} onChange={setSelectedValue} />
+
                 <LoadingButton
                     className="mt-8"
                     type="submit"