feat(desktop): show avaiable options in workspace source input field …

…by structuring them and add advances git options

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

@@ -10,7 +10,6 @@ import {
   FormLabel,
   Grid,
   HStack,
-  Icon,
   IconButton,
   Input,
   Link,
@@ -31,11 +30,9 @@ import {
 } from "@chakra-ui/react"
 import { useCallback, useEffect, useMemo } from "react"
 import { Controller, ControllerRenderProps } from "react-hook-form"
-import { FiFolder } from "react-icons/fi"
 import { useNavigate } from "react-router"
 import { Link as RouterLink, useSearchParams } from "react-router-dom"
 import { useBorderColor } from "../../../Theme"
-import { client } from "../../../client"
 import { RECOMMENDED_PROVIDER_SOURCES, SIDEBAR_WIDTH } from "../../../constants"
 import { useProvider, useProviders, useWorkspace, useWorkspaces } from "../../../contexts"
 import { Plus } from "../../../icons"
@@ -55,6 +52,7 @@ import {
   TSelectProviderOptions,
 } from "./types"
 import { useCreateWorkspaceForm } from "./useCreateWorkspaceForm"
+import { WorkspaceSourceInput } from "./WorkspaceSourceInput"
 
 export function CreateWorkspace() {
   const { ides } = useIDEs()
@@ -133,16 +131,6 @@ export function CreateWorkspace() {
     }
   }, [providers])
 
-  const handleSelectFolderClicked = useCallback(async () => {
-    const selected = await client.selectFromDir()
-    if (typeof selected === "string") {
-      setValue(FieldName.SOURCE, selected, {
-        shouldDirty: true,
-        shouldValidate: true,
-      })
-    }
-  }, [setValue])
-
   const handleExampleCardClicked = useCallback(
     (newSource: string) => {
       setValue(FieldName.SOURCE, newSource, {
@@ -174,7 +162,6 @@ export function CreateWorkspace() {
 
   const backgroundColor = useColorModeValue("gray.50", "gray.800")
   const borderColor = useBorderColor()
-  const inputBackgroundColor = useColorModeValue("white", "black")
   const bottomBarBackgroundColor = useColorModeValue("white", "background.darkest")
   const { colorMode } = useColorMode()
 
@@ -192,7 +179,7 @@ export function CreateWorkspace() {
             <FormControl
               backgroundColor={backgroundColor}
               paddingX="20"
-              paddingY="32"
+              paddingY="20"
               height="full"
               isRequired
               isInvalid={exists(sourceError)}
@@ -201,43 +188,23 @@ export function CreateWorkspace() {
               borderRightWidth="thin"
               borderRightColor={borderColor}>
               <VStack width="full">
-                <Text marginBottom="2" fontWeight="bold">
+                <Text width="90%" marginBottom="6" fontWeight="bold">
                   Enter Workspace Source
                 </Text>
                 <HStack spacing={0} justifyContent={"center"} width="full">
-                  <Input
-                    spellCheck={false}
-                    backgroundColor={inputBackgroundColor}
-                    borderTopRightRadius={0}
-                    borderBottomRightRadius={0}
-                    placeholder="github.com/my-org/my-repo"
-                    fontSize={"16px"}
-                    padding={"10px"}
-                    height={"42px"}
-                    width={"60%"}
-                    type="text"
-                    {...register(FieldName.SOURCE, { required: true })}
+                  <Controller
+                    name={FieldName.SOURCE}
+                    control={control}
+                    rules={{ required: true }}
+                    render={({ field }) => <WorkspaceSourceInput field={field} />}
                   />
-                  <Button
-                    leftIcon={<Icon as={FiFolder} />}
-                    borderTopLeftRadius={0}
-                    borderBottomLeftRadius={0}
-                    borderTopWidth={"thin"}
-                    borderRightWidth={"thin"}
-                    borderBottomWidth={"thin"}
-                    borderColor={borderColor}
-                    height={"42px"}
-                    flex={"0 0 140px"}
-                    onClick={handleSelectFolderClicked}>
-                    Select Folder
-                  </Button>
                 </HStack>
                 {exists(sourceError) && (
                   <FormErrorMessage>{sourceError.message ?? "Error"}</FormErrorMessage>
                 )}
                 <FormHelperText textAlign={"center"}>
-                  Any git repository or local path to a folder you would like to create a workspace
-                  from can be a source as long as it adheres to the{" "}
+                  Any git repository, local path to a folder or container image you would like to
+                  create a workspace from can be a source as long as it adheres to the{" "}
                   <Link
                     fontWeight="bold"
                     target="_blank"