Configuration Details: Workspace Defaults (#19072)

* Configuration Details: Workspace Defaults

🤷‍♂️

sort imports

* Foof

* Add descriptions

* Change layout

* Fix heading child

* Change heading container

* Fix styling

* A proper config field

* Delete hover states

* Implement the update logic

* Fix size updates

* Simplify mutation

* Remove cancel button and add a save one for ws options

* Margins

* Update title

* Prettier Paddings

* Remove one-childed fragment

* Fix heading shenanigans

* LoadingState component

* Wrap with label

* Spacing

* 🙄

Author: filiptronicek

components/dashboard/package.json

@@ -10,7 +10,9 @@
     "@gitpod/gitpod-protocol": "0.1.5",
     "@gitpod/public-api": "0.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",

components/dashboard/src/app/AppLoading.tsx

@@ -7,7 +7,7 @@
 import { FunctionComponent, useEffect, useState } from "react";
 import { Heading3, Subheading } from "../components/typography/headings";
 import gitpodIcon from "../icons/gitpod.svg";
-import { Delayed } from "../components/Delayed";
+import { Delayed } from "@podkit/loading/Delayed";
 
 function useDelay(wait: number) {
     const [done, setDone] = useState(false);

components/dashboard/src/app/AppRoutes.tsx

@@ -83,6 +83,10 @@ const ConfigurationGeneral = React.lazy(
     () => import(/* webpackPrefetch: true */ "../repositories/detail/ConfigurationDetailGeneral"),
 );
 
+const ConfigurationWorkspaces = React.lazy(
+    () => import(/* webpackPrefetch: true */ "../repositories/detail/ConfigurationDetailWorkspaces"),
+);
+
 export const AppRoutes = () => {
     const hash = getURLHash();
     const user = useCurrentUser();
@@ -220,6 +224,7 @@ export const AppRoutes = () => {
                         <>
                             <Route exact path="/repositories" component={ConfigurationListPage} />
                             <Route exact path="/repositories/:id" component={ConfigurationGeneral} />
+                            <Route exact path="/repositories/:id/workspaces" component={ConfigurationWorkspaces} />
                         </>
                     )}
                     {/* basic redirect for old team slugs */}

components/dashboard/src/components/podkit/forms/Label.tsx

@@ -0,0 +1,20 @@
+/**
+ * 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 * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "@podkit/lib/cn";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+export const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;

components/dashboard/src/components/podkit/forms/RadioListField.tsx

@@ -0,0 +1,45 @@
+/**
+ * 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 { cn } from "@podkit/lib/cn";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import React from "react";
+
+export const RadioGroupItem = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+    return (
+        <RadioGroupPrimitive.Item
+            ref={ref}
+            className={cn(
+                "aspect-square h-4 w-4 my-0 rounded-full border-2 ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 p-0 text-black dark:text-gray-200 border-black dark:border-gray-200 bg-inherit",
+                className,
+            )}
+            {...props}
+        >
+            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+                <Circle className="h-1.5 w-1.5 fill-current text-current" />
+            </RadioGroupPrimitive.Indicator>
+        </RadioGroupPrimitive.Item>
+    );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export type RadioListItem = {
+    radio: React.ReactElement;
+    label: React.ReactNode;
+    hint?: React.ReactNode;
+};
+
+export const RadioGroup = React.forwardRef<
+    React.ElementRef<typeof RadioGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+    return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

components/dashboard/src/components/Delayed.tsx renamed to components/dashboard/src/components/podkit/loading/Delayed.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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 { Loader2 } from "lucide-react";
+import { Delayed } from "./Delayed";
+
+export const LoadingState = () => {
+    return (
+        <Delayed>
+            <Loader2 className="animate-spin" />
+        </Delayed>
+    );
+};

components/dashboard/src/components/podkit/loading/LoadingState.tsx

@@ -8,7 +8,7 @@ import { Project } from "@gitpod/gitpod-protocol/lib/teams-projects-protocol";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCurrentOrg } from "../organizations/orgs-query";
 import { listAllProjects, projectsService } from "../../service/public-api";
-import { PartialProject } from "@gitpod/gitpod-protocol";
+import type { PartialProject } from "@gitpod/gitpod-protocol";
 import { getGitpodService } from "../../service/service";
 
 const BASE_KEY = "projects";
@@ -79,15 +79,15 @@ export const useUpdateProject = () => {
     const { data: org } = useCurrentOrg();
     const client = useQueryClient();
 
-    return useMutation<void, Error, PartialProject>(async ({ id, name }) => {
+    return useMutation<void, Error, PartialProject>(async (settings) => {
         if (!org) {
             throw new Error("No org currently selected");
         }
 
-        await getGitpodService().server.updateProjectPartial({ id, name });
+        await getGitpodService().server.updateProjectPartial(settings);
 
         // Invalidate project
-        client.invalidateQueries(getProjectQueryKey(org.id, id));
+        client.invalidateQueries(getProjectQueryKey(org.id, settings.id));
         // Invalidate project list queries
         client.invalidateQueries(getListProjectsQueryKey(org.id));
     });

components/dashboard/src/data/projects/project-queries.ts

@@ -12,7 +12,6 @@ import { useConfetti } from "../contexts/ConfettiContext";
 import { SetupCompleteStep } from "./SetupCompleteStep";
 import { useOIDCClientsQuery } from "../data/oidc-clients/oidc-clients-query";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
-import { Delayed } from "../components/Delayed";
 import { SpinnerLoader } from "../components/Loader";
 import { getGitpodService } from "../service/service";
 import { UserContext } from "../user-context";
@@ -21,6 +20,7 @@ import { useQueryParams } from "../hooks/use-query-params";
 import { useDocumentTitle } from "../hooks/use-document-title";
 import { forceDedicatedSetupParam } from "./use-show-dedicated-setup";
 import { Organization } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { Delayed } from "@podkit/loading/Delayed";
 
 type Props = {
     onComplete: () => void;

components/dashboard/src/dedicated-setup/DedicatedSetup.tsx

@@ -30,7 +30,7 @@ export function ConfigurationDetailPage({ children, configurationQuery, id }: Pa
     return (
         <div className="w-full">
             <BreadcrumbNav
-                pageTitle="Repository Configuration"
+                pageTitle="Imported repositories"
                 pageDescription={data?.name ?? ""}
                 backLink="/repositories"
             />

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

@@ -0,0 +1,28 @@
+/**
+ * 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 { useParams } from "react-router";
+import { ConfigurationDetailPage } from "./ConfigurationDetailPage";
+import { useConfiguration } from "../../data/configurations/configuration-queries";
+import { ConfigurationWorkspaceSizeOptions } from "./workspaces/WorkpaceSizeOptions";
+
+type PageRouteParams = {
+    id: string;
+};
+const ConfigurationDetailWorkspaces: FC = () => {
+    const { id } = useParams<PageRouteParams>();
+    const configurationQuery = useConfiguration(id);
+    const { data } = configurationQuery;
+
+    return (
+        <ConfigurationDetailPage configurationQuery={configurationQuery} id={id}>
+            {data && <ConfigurationWorkspaceSizeOptions configuration={data} />}
+        </ConfigurationDetailPage>
+    );
+};
+
+export default ConfigurationDetailWorkspaces;

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

@@ -5,7 +5,6 @@
  */
 
 import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
-import { Button } from "@podkit/buttons/Button";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
 import { FC, useCallback, useState } from "react";
 import { TextInputField } from "../../../components/forms/TextInputField";
@@ -67,16 +66,6 @@ export const ConfigurationNameForm: FC<Props> = ({ configuration }) => {
                     <LoadingButton type="submit" disabled={!nameChanged} loading={updateProject.isLoading}>
                         Save
                     </LoadingButton>
-                    <Button
-                        type="button"
-                        variant="secondary"
-                        disabled={!nameChanged}
-                        onClick={() => {
-                            setProjectName(configuration.name);
-                        }}
-                    >
-                        Cancel
-                    </Button>
                 </div>
             </form>
         </ConfigurationSettingsField>

components/dashboard/src/repositories/detail/general/ConfigurationName.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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 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 { TextMuted } from "@podkit/typography/TextMuted";
+import { Heading2 } from "@podkit/typography/Headings";
+import { ConfigurationSettingsField } from "../ConfigurationSettingsField";
+import { useUpdateProject } from "../../../data/projects/project-queries";
+import { useToast } from "../../../components/toasts/Toasts";
+import { LoadingButton } from "@podkit/buttons/LoadingButton";
+import { LoadingState } from "@podkit/loading/LoadingState";
+
+interface Props {
+    configuration: Configuration;
+}
+
+export const ConfigurationWorkspaceSizeOptions = ({ configuration }: Props) => {
+    const [selectedValue, setSelectedValue] = useState(
+        configuration.workspaceSettings?.workspaceClass || "g1-standard",
+    );
+    const classChanged = selectedValue !== configuration.workspaceSettings?.workspaceClass;
+
+    const updateProject = useUpdateProject();
+    const { data: classes, isError, isLoading } = useWorkspaceClasses();
+
+    const { toast } = useToast();
+
+    const setWorkspaceClass = useCallback(
+        async (e: React.FormEvent) => {
+            e.preventDefault();
+
+            updateProject.mutate(
+                {
+                    id: configuration.id,
+                    settings: {
+                        workspaceClasses: {
+                            regular: selectedValue,
+                        },
+                    },
+                },
+                {
+                    onSuccess: () => {
+                        // todo: use optimistic updates when we introduce configuration update hooks
+                        toast({ message: "Workspace size updated" });
+                    },
+                    onError: (e) => {
+                        toast({ message: `Failed updating workspace size: ${e.message}` });
+                    },
+                },
+            );
+        },
+        [configuration.id, selectedValue, toast, updateProject],
+    );
+
+    if (isError || !classes) {
+        return <div>Something went wrong</div>;
+    }
+
+    if (isLoading) {
+        return <LoadingState />;
+    }
+
+    return (
+        <ConfigurationSettingsField className="px-8 py-6">
+            <form onSubmit={setWorkspaceClass}>
+                <div className="mb-4">
+                    <Heading2 className="text-base">Workspace Size Options</Heading2>
+                    <TextMuted>Choose the size of your workspace based on the resources you need.</TextMuted>
+                </div>
+                <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+                    {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>
+                <LoadingButton
+                    className="mt-8"
+                    type="submit"
+                    disabled={!classChanged}
+                    loading={updateProject.isLoading}
+                >
+                    Save
+                </LoadingButton>
+            </form>
+        </ConfigurationSettingsField>
+    );
+};

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

@@ -17,12 +17,12 @@ import searchIcon from "../icons/search.svg";
 import { organizationClient } from "../service/public-api";
 import { useCurrentUser } from "../user-context";
 import { SpinnerLoader } from "../components/Loader";
-import { Delayed } from "../components/Delayed";
 import { InputField } from "../components/forms/InputField";
 import { InputWithCopy } from "../components/InputWithCopy";
 import { OrganizationMember, OrganizationRole } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { useListOrganizationMembers, useOrganizationMembersInvalidator } from "../data/organizations/members-query";
 import { useInvitationId, useInviteInvalidator } from "../data/organizations/invite-query";
+import { Delayed } from "@podkit/loading/Delayed";
 
 export default function MembersPage() {
     const user = useCurrentUser();

components/dashboard/src/teams/Members.tsx

@@ -12,7 +12,6 @@ import Alert from "../components/Alert";
 import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { ContextMenuEntry } from "../components/ContextMenu";
-import { Delayed } from "../components/Delayed";
 import InfoBox from "../components/InfoBox";
 import { ItemsList } from "../components/ItemsList";
 import { SpinnerLoader } from "../components/Loader";
@@ -30,6 +29,7 @@ import { SelectAccountModal } from "./SelectAccountModal";
 import { useAuthProviders } from "../data/auth-providers/auth-provider-query";
 import { useFeatureFlag } from "../data/featureflag-query";
 import { EmptyMessage } from "../components/EmptyMessage";
+import { Delayed } from "@podkit/loading/Delayed";
 
 export default function Integrations() {
     return (