WorkspaceClassOptions.tsx

/**
 * 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 { useOrgWorkspaceClassesQuery } from "../../../data/organizations/org-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 } = useOrgWorkspaceClassesQuery();

    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 text-sm">
                        <span className="font-semibold">{wsClass.displayName}</span>
                        <span className="text-pk-content-tertiary">{wsClass.description}</span>
                    </div>
                </Label>
            ))}
        </RadioGroup>
    );
};