feat: Add selection of runner to DevPod Pro workspace creation flow

Author: PRTTMPRPHT

desktop/src/views/Pro/CreateWorkspace/CreateWorkspace.tsx

@@ -146,6 +146,11 @@ async function buildWorkspaceInstance(
     name: template,
     version: templateVersion,
   }
+
+  instance.spec.runnerRef = {
+    runner: values.runner,
+  }
+
   try {
     instance.spec.parameters = jsyaml.dump(parameters)
   } catch (err) {

desktop/src/views/Pro/CreateWorkspace/CreateWorkspaceForm.tsx

@@ -1,5 +1,5 @@
 import { BottomActionBar, BottomActionBarError, Form } from "@/components"
-import { ProWorkspaceInstance } from "@/contexts"
+import { ProWorkspaceInstance, useProjectClusters } from "@/contexts"
 import { Code, Laptop, Parameters } from "@/icons"
 import {
   Annotations,
@@ -33,6 +33,7 @@ import { OptionsInput } from "./OptionsInput"
 import { SourceInput } from "./SourceInput"
 import { FieldName, TFormValues } from "./types"
 import { useTemplates } from "@/contexts"
+import { RunnerInput } from "@/views/Pro/CreateWorkspace/RunnerInput"
 
 type TCreateWorkspaceFormProps = Readonly<{
   instance?: ProWorkspaceInstance
@@ -52,9 +53,18 @@ export function CreateWorkspaceForm({
   const containerRef = useRef<HTMLDivElement>(null)
   const { ides, defaultIDE } = useIDEs()
   const { data: templates, isLoading: isTemplatesLoading } = useTemplates()
+
+  const { data: projectClusterData, isLoading: projectClusterDataLoading } = useProjectClusters()
+
   const form = useForm<TFormValues>({ mode: "onChange", defaultValues })
-  const { sourceError, defaultIDEError, nameError, devcontainerJSONError, optionsError } =
-    useFormErrors(Object.values(FieldName), form.formState)
+  const {
+    sourceError,
+    defaultIDEError,
+    nameError,
+    devcontainerJSONError,
+    optionsError,
+    runnerError,
+  } = useFormErrors(Object.values(FieldName), form.formState)
 
   useEffect(() => {
     if (!form.getFieldState(FieldName.DEFAULT_IDE).isDirty && defaultIDE && defaultIDE.name) {
@@ -108,6 +118,26 @@ export function CreateWorkspaceForm({
             </CreateWorkspaceRow>
           </FormControl>
 
+          <FormControl isDisabled={!!instance} isRequired isInvalid={exists(runnerError)}>
+            <CreateWorkspaceRow
+              label={
+                <FormLabel>
+                  <Code boxSize={5} mr="1" />
+                  Runner
+                </FormLabel>
+              }>
+              {projectClusterDataLoading ? (
+                <Spinner />
+              ) : (
+                <RunnerInput runners={projectClusterData?.runners} />
+              )}
+
+              {exists(runnerError) && (
+                <FormErrorMessage>{runnerError.message ?? "Error"}</FormErrorMessage>
+              )}
+            </CreateWorkspaceRow>
+          </FormControl>
+
           <FormControl isInvalid={exists(defaultIDEError)}>
             <CreateWorkspaceRow
               label={
@@ -226,6 +256,7 @@ function getDefaultValues(
   }
   const defaultValues: DefaultValues<TFormValues> = {
     defaultIDE: instance.status?.ide?.name ?? "none",
+    runner: instance.spec?.runnerRef?.runner,
   }
 
   // source

desktop/src/views/Pro/CreateWorkspace/RunnerInput.tsx

@@ -0,0 +1,18 @@
+import { useFormContext } from "react-hook-form"
+import { FieldName, TFormValues } from "@/views/Pro/CreateWorkspace/types"
+import { Select } from "@chakra-ui/react"
+import { ManagementV1Runner } from "@loft-enterprise/client/gen/models/managementV1Runner"
+
+export function RunnerInput({ runners }: { runners: readonly ManagementV1Runner[] | undefined }) {
+  const { register } = useFormContext<TFormValues>()
+
+  return (
+    <Select {...register(FieldName.RUNNER)}>
+      {runners?.map((r, index) => (
+        <option key={index} value={r.metadata?.name}>
+          {r.spec?.displayName ?? r.metadata?.name}
+        </option>
+      ))}
+    </Select>
+  )
+}

desktop/src/views/Pro/CreateWorkspace/types.ts

@@ -5,6 +5,7 @@ export const FieldName = {
   SOURCE_TYPE: "sourceType",
   NAME: "name",
   DEFAULT_IDE: "defaultIDE",
+  RUNNER: "runner",
   DEVCONTAINER_JSON: "devcontainerJSON",
   DEVCONTAINER_TYPE: "devcontainerType",
   OPTIONS: "options",
@@ -16,6 +17,7 @@ export type TFormValues = {
   [FieldName.DEFAULT_IDE]: string
   [FieldName.NAME]: string
   [FieldName.DEVCONTAINER_JSON]: string
+  [FieldName.RUNNER]: string
   [FieldName.DEVCONTAINER_TYPE]: TDevContainerType
   [FieldName.OPTIONS]: TOptions
 }