Merge pull request #210 from pascalbreuninger/main

feat(ui): auto generate random provider name if default name is alrea…
loft-sh · May 11, 2023 · 315f59e · 315f59e
2 parents e5299f4 + d764a58
commit 315f59e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 26 deletions.
diff --git a/desktop/src/lib/helpers.ts b/desktop/src/lib/helpers.ts
@@ -104,4 +104,8 @@ export function getActionDisplayName(action: TActionObj): string {
 
 export function getIDEDisplayName(ide: TIDE) {
   return ide.displayName ?? ide.name ?? "Unknown"
-}
+}
+
+export function randomString(length: number): string {
+  return [...Array(length)].map(() => (~~(Math.random() * 36)).toString(36)).join("")
+}
diff --git a/desktop/src/views/Providers/AddProvider/SetupProviderSourceForm.tsx b/desktop/src/views/Providers/AddProvider/SetupProviderSourceForm.tsx
@@ -31,7 +31,7 @@ import {
   KubernetesSvg,
   SSHPng,
 } from "../../../images"
-import { exists, isError, useFormErrors } from "../../../lib"
+import { exists, isError, randomString, useFormErrors } from "../../../lib"
 import { QueryKeys } from "../../../queryKeys"
 import {
   TAddProviderConfig,
@@ -74,6 +74,7 @@ export function SetupProviderSourceForm({ state, reset, onFinish }: TSetupProvid
     })()
   }, [])
   const [showCustom, setShowCustom] = useState(false)
+  const [showCustomName, setShowCustomName] = useState(false)
   const { register, handleSubmit, formState, watch, setValue } = useForm<TFormValues>({
     mode: "onBlur",
   })
@@ -183,11 +184,26 @@ export function SetupProviderSourceForm({ state, reset, onFinish }: TSetupProvid
   const handleRecommendedProviderClicked = useCallback(
     (sourceName: string) => () => {
       setShowCustom(false)
-      setValue(FieldName.PROVIDER_SOURCE, providerSource === sourceName ? "" : sourceName, {
+      setShowCustomName(false)
+
+      const unsetProvider = providerSource === sourceName
+      setValue(FieldName.PROVIDER_SOURCE, unsetProvider ? "" : sourceName, {
         shouldDirty: true,
       })
+      if (unsetProvider) {
+        setValue(FieldName.PROVIDER_NAME, "", { shouldDirty: true })
+
+        return
+      }
+
+      if (providers?.[sourceName] !== undefined) {
+        setValue(FieldName.PROVIDER_NAME, `${sourceName}-${randomString(8)}`, { shouldDirty: true })
+        setShowCustomName(true)
+      } else {
+        setValue(FieldName.PROVIDER_NAME, "", { shouldDirty: true })
+      }
     },
-    [providerSource, setValue]
+    [providerSource, providers, setValue]
   )
   const handleSelectFileClicked = useCallback(async () => {
     const selected = await client.selectFromFileYaml()
@@ -203,9 +219,7 @@ export function SetupProviderSourceForm({ state, reset, onFinish }: TSetupProvid
       <Stack spacing={6} width="full">
         <FormControl isRequired isInvalid={exists(providerSourceError)}>
           <Wrap spacing={3} marginTop="2.5">
-            {RECOMMENDED_PROVIDER_SOURCES.filter(
-              (source) => !providers?.[source.name] || !providers[source.name]?.state?.initialized
-            ).map((source) => (
+            {RECOMMENDED_PROVIDER_SOURCES.map((source) => (
               <WrapItem key={source.name} padding={"1"}>
                 <ExampleCard
                   key={source.name}
@@ -268,7 +282,7 @@ export function SetupProviderSourceForm({ state, reset, onFinish }: TSetupProvid
             </Box>
           )}
         </FormControl>
-        <CollapsibleSection title={"Advanced Options"} showIcon={true}>
+        <CollapsibleSection title={"Advanced Options"} showIcon={true} isOpen={showCustomName}>
           <FormControl isInvalid={exists(providerNameError)}>
             <FormLabel>Custom Name</FormLabel>
             <Input

diff --git a/desktop/src/views/Workspaces/WorkspaceCard.tsx b/desktop/src/views/Workspaces/WorkspaceCard.tsx
@@ -10,6 +10,7 @@ import {
   HStack,
   Icon,
   IconButton,
+  IconProps,
   Image,
   InputGroup,
   Menu,
@@ -27,6 +28,7 @@ import {
   Select,
   Stack,
   Text,
+  TextProps,
   Tooltip,
   useDisclosure,
   useToast,
@@ -38,7 +40,7 @@ import { useCallback, useMemo, useState } from "react"
 import { HiClock, HiOutlineCode, HiShare } from "react-icons/hi"
 import { useNavigate } from "react-router"
 import { client } from "../../client"
-import { IconTag } from "../../components"
+import { IconTag, Ripple } from "../../components"
 import { TActionID, TActionObj, useWorkspace, useWorkspaceActions } from "../../contexts"
 import { ArrowPath, Ellipsis, Pause, Play, Stack3D, Trash } from "../../icons"
 import { CodeJPG } from "../../images"
@@ -104,7 +106,7 @@ export function WorkspaceCard({ workspaceID, onSelectionChange }: TWorkspaceCard
 
       const source = encodeURIComponent(getSourceName(workspace.data.source))
       const workspaceID = encodeURIComponent(id)
-      let devpodLink = `https://devpod.sh/open#source=${source}&workspace=${workspaceID}`
+      let devpodLink = `https://devpod.sh/open#${source}&workspace=${workspaceID}`
       const maybeProviderName = workspace.data.provider?.name
       if (exists(maybeProviderName)) {
         devpodLink = devpodLink.concat(`&provider=${encodeURIComponent(maybeProviderName)}`)
@@ -473,29 +475,30 @@ function WorkspaceStatusBadge({
     ? `Workspace is loading`
     : `Workspace is ${status ?? "Pending"}`
 
-  const sharedProps = useMemo<BoxProps>(
-    () => ({
+  const badge = useMemo(() => {
+    const sharedProps: BoxProps = {
       as: "span",
       borderRadius: "full",
       width: "12px",
       height: "12px",
       borderWidth: "2px",
-    }),
-    []
-  )
-  const sharedTextProps = useMemo(
-    () => ({
+      zIndex: "1",
+    }
+    const sharedTextProps: TextProps = {
       fontWeight: "medium",
       fontSize: "sm",
-    }),
-    []
-  )
+    }
+    const rippleProps: IconProps = {
+      boxSize: 8,
+      position: "absolute",
+      left: "-12px",
+      zIndex: "0",
+    }
 
-  const badge = useMemo(() => {
     if (hasError) {
       return (
         <>
-          <Box {...sharedProps} backgroundColor="transparent" borderColor="red.400" />
+          <Box {...sharedProps} backgroundColor="white" borderColor="red.400" />
           <Text {...sharedTextProps} color="red.400">
             Error
           </Text>
@@ -506,7 +509,8 @@ function WorkspaceStatusBadge({
     if (isLoading) {
       return (
         <>
-          <Box {...sharedProps} backgroundColor="transparent" borderColor="yellow.500" />
+          <Box {...sharedProps} backgroundColor="white" borderColor="yellow.500" />
+          <Ripple {...rippleProps} color="yellow.500" />
           <Text {...sharedTextProps} color="yellow.500">
             Loading
           </Text>
@@ -527,17 +531,21 @@ function WorkspaceStatusBadge({
 
     return (
       <>
-        <Box {...sharedProps} backgroundColor="purple.200" borderColor="purple.400" />
+        <Box {...sharedProps} backgroundColor="purple.200" borderColor="purple.400" zIndex="1" />
         <Text {...sharedTextProps} color="purple.400">
           {status ?? "Unknown"}
         </Text>
       </>
     )
-  }, [hasError, isLoading, sharedProps, sharedTextProps, status])
+  }, [hasError, isLoading, status])
 
   return (
     <Tooltip label={label}>
-      <HStack cursor={onClick ? "pointer" : "default"} onClick={onClick} spacing="1">
+      <HStack
+        cursor={onClick ? "pointer" : "default"}
+        onClick={onClick}
+        spacing="1"
+        position="relative">
         {badge}
       </HStack>
     </Tooltip>