fix(desktop): only set defaultValues in createWorkspaceForm once

desktop/src/types.ts

@@ -173,7 +173,23 @@ export type TWorkspaceStartConfig = Readonly<{
     gitCommit: string | undefined
   }>
 }>
-export const SUPPORTED_IDES = ["vscode", "intellj"] as const
+export const SUPPORTED_IDES = [
+  "none",
+  "vscode",
+  "vscode-insiders",
+  "intellj",
+  "goland",
+  "rustrover",
+  "pycharm",
+  "phpstorm",
+  "clion",
+  "rubymine",
+  "rider",
+  "webstorm",
+  "openvscode",
+  "jupyternotebook",
+  "fleet",
+] as const
 export type TSupportedIDE = (typeof SUPPORTED_IDES)[number]
 export type TImportWorkspaceConfig = Readonly<{
   workspaceID: string

desktop/src/views/Workspaces/CreateWorkspace/CreateWorkspace.tsx

@@ -31,7 +31,7 @@ import {
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { Controller, ControllerRenderProps } from "react-hook-form"
 import { useNavigate } from "react-router"
-import { Link as RouterLink, useSearchParams } from "react-router-dom"
+import { Link as RouterLink } from "react-router-dom"
 import { useBorderColor } from "../../../Theme"
 import { RECOMMENDED_PROVIDER_SOURCES, SIDEBAR_WIDTH } from "../../../constants"
 import { useProvider, useProviders, useWorkspace, useWorkspaces } from "../../../contexts"
@@ -43,21 +43,14 @@ import { TIDE, TWorkspaceSourceType } from "../../../types"
 import { useIDEs } from "../../../useIDEs"
 import { useSetupProviderModal } from "../../Providers"
 import { ProviderOptionsPopover } from "./ProviderOptionsPopover"
+import { WorkspaceSourceInput } from "./WorkspaceSourceInput"
 import { COMMUNITY_WORKSPACE_EXAMPLES, WORKSPACE_EXAMPLES } from "./constants"
-import {
-  FieldName,
-  TCreateWorkspaceArgs,
-  TCreateWorkspaceSearchParams,
-  TFormValues,
-  TSelectProviderOptions,
-} from "./types"
+import { FieldName, TCreateWorkspaceArgs, TFormValues, TSelectProviderOptions } from "./types"
 import { useCreateWorkspaceForm } from "./useCreateWorkspaceForm"
-import { WorkspaceSourceInput } from "./WorkspaceSourceInput"
 
 export function CreateWorkspace() {
   const { ides } = useIDEs()
 
-  const searchParams = useCreateWorkspaceParams()
   const navigate = useNavigate()
   const workspace = useWorkspace(undefined)
   const [[providers]] = useProviders()
@@ -106,7 +99,7 @@ export function CreateWorkspace() {
     isSubmitting,
     currentSource,
     selectDevcontainerModal,
-  } = useCreateWorkspaceForm(searchParams, providers, ides, handleCreateWorkspace)
+  } = useCreateWorkspaceForm(handleCreateWorkspace)
 
   const {
     sourceError,
@@ -497,15 +490,6 @@ export function CreateWorkspace() {
   )
 }
 
-function useCreateWorkspaceParams(): TCreateWorkspaceSearchParams {
-  const [searchParams] = useSearchParams()
-
-  return useMemo(
-    () => Routes.getWorkspaceCreateParamsFromSearchParams(searchParams),
-    [searchParams]
-  )
-}
-
 type TProviderInputProps = Readonly<{
   options: TSelectProviderOptions
   field: ControllerRenderProps<TFormValues, (typeof FieldName)["PROVIDER"]>

desktop/src/views/Workspaces/CreateWorkspace/useCreateWorkspaceForm.tsx

@@ -1,3 +1,4 @@
+import { Routes } from "@/routes"
 import {
   Button,
   Code,
@@ -15,33 +16,68 @@ import {
 } from "@chakra-ui/react"
 import { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
+import { createSearchParams } from "react-router-dom"
 import { client } from "../../../client"
 import { useSettings, useWorkspaces } from "../../../contexts"
 import { exists } from "../../../lib"
 import { randomWords } from "../../../lib/randomWords"
 import { TIDEs, TProviders, TWorkspace } from "../../../types"
-import { FieldName, TCreateWorkspaceArgs, TCreateWorkspaceSearchParams, TFormValues } from "./types"
+import { FieldName, TCreateWorkspaceArgs, TFormValues } from "./types"
 
 const DEFAULT_PREBUILD_REPOSITORY_KEY = "devpod-create-prebuild-repository"
 const DEFAULT_CONTAINER_PATH = "__internal-default"
 
-export function useCreateWorkspaceForm(
-  params: TCreateWorkspaceSearchParams,
-  providers: TProviders | undefined,
-  ides: TIDEs | undefined,
-  onCreateWorkspace: (args: TCreateWorkspaceArgs) => void
-) {
+export function useCreateWorkspaceForm(onCreateWorkspace: (args: TCreateWorkspaceArgs) => void) {
   const formRef = useRef<HTMLFormElement>(null)
   const settings = useSettings()
   const workspaces = useWorkspaces()
   const [isSubmitLoading, setIsSubmitLoading] = useState(false)
   const { register, handleSubmit, formState, watch, setError, setValue, control, getFieldState } =
     useForm<TFormValues>({
-      defaultValues: {
-        [FieldName.PREBUILD_REPOSITORY]:
-          window.localStorage.getItem(DEFAULT_PREBUILD_REPOSITORY_KEY) ?? "",
-        [FieldName.PROVIDER]: Object.keys(providers ?? {})[0] ?? undefined,
-        [FieldName.DEVCONTAINER_PATH]: undefined,
+      async defaultValues() {
+        const params = Routes.getWorkspaceCreateParamsFromSearchParams(
+          createSearchParams(location.search)
+        )
+
+        const [providersRes, idesRes] = await Promise.all([
+          client.providers.listAll(),
+          client.ides.listAll(),
+        ])
+        let providers: TProviders = {}
+        if (providersRes.ok) {
+          providers = providersRes.val
+        }
+
+        let ides: TIDEs = []
+        if (idesRes.ok) {
+          ides = idesRes.val
+        }
+
+        const defaultProvider =
+          params.providerID ??
+          Object.keys(providers).find((providerID) => providers[providerID]?.default) ??
+          Object.keys(providers)[0] ??
+          ""
+
+        const defaultIDE =
+          params.ide ??
+          ides.find((ide) => ide.default)?.name ??
+          ides.find((ide) => ide.name === "openvscode")?.name ??
+          ""
+
+        const defaultWorkspaceID = params.workspaceID ?? ""
+        const defaultSource = params.rawSource ?? ""
+        const defaultPrebuildRepo =
+          window.localStorage.getItem(DEFAULT_PREBUILD_REPOSITORY_KEY) ?? ""
+
+        return {
+          [FieldName.ID]: defaultWorkspaceID,
+          [FieldName.SOURCE]: defaultSource,
+          [FieldName.PROVIDER]: defaultProvider,
+          [FieldName.DEFAULT_IDE]: defaultIDE,
+          [FieldName.DEVCONTAINER_PATH]: undefined,
+          [FieldName.PREBUILD_REPOSITORY]: defaultPrebuildRepo,
+        }
       },
     })
   const currentSource = watch(FieldName.SOURCE)
@@ -64,47 +100,6 @@ export function useCreateWorkspaceForm(
   const { modal: selectDevcontainerModal, show: showSelectDevcontainerModal } =
     useSelectDevcontainerModal({ onSelected: handleDevcontainerSelected })
 
-  useEffect(() => {
-    const opts = {
-      shouldDirty: true,
-      shouldValidate: true,
-    }
-    if (params.workspaceID !== undefined) {
-      setValue(FieldName.ID, params.workspaceID, opts)
-    }
-
-    if (params.rawSource !== undefined) {
-      setValue(FieldName.SOURCE, params.rawSource, opts)
-    }
-
-    // default ide
-    if (params.ide !== undefined) {
-      setValue(FieldName.DEFAULT_IDE, params.ide, opts)
-    } else if (ides?.length && !getFieldState(FieldName.DEFAULT_IDE).isDirty) {
-      const defaultIDE = ides.find((ide) => ide.default)
-      if (defaultIDE) {
-        setValue(FieldName.DEFAULT_IDE, defaultIDE.name!, opts)
-      } else {
-        const openvscode = ides.find((ide) => ide.name === "openvscode")
-        if (openvscode && openvscode.name) {
-          setValue(FieldName.DEFAULT_IDE, openvscode.name, opts)
-        }
-      }
-    }
-
-    // default provider
-    if (params.providerID !== undefined) {
-      setValue(FieldName.PROVIDER, params.providerID, opts)
-    } else if (providers && !getFieldState(FieldName.PROVIDER).isDirty) {
-      const defaultProviderID = Object.keys(providers).find(
-        (providerID) => providers[providerID]?.default
-      )
-      if (defaultProviderID) {
-        setValue(FieldName.PROVIDER, defaultProviderID, opts)
-      }
-    }
-  }, [ides, params, providers, setValue, getFieldState])
-
   // Handle workspace name
   useEffect(() => {
     if (exists(currentSource) && currentSource !== "") {
@@ -140,7 +135,7 @@ export function useCreateWorkspaceForm(
         }
       })
     }
-  }, [currentProvider, currentSource, setError, setValue, workspaces])
+  }, [currentProvider, currentSource, getFieldState, setError, setValue, workspaces])
 
   const onSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
     (event) =>