Merge pull request #252 from pascalbreuninger/main

feat(ui): add civo and terraform as recommended providers
loft-sh · May 15, 2023 · 162016f · 162016f
2 parents 6ee61d0 + 1afd630
commit 162016f
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 17 deletions.
diff --git a/desktop/package.json b/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "devpod",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/desktop/src/client/workspaces/client.ts b/desktop/src/client/workspaces/client.ts
@@ -1,6 +1,6 @@
 import { invoke } from "@tauri-apps/api"
 import { TActionID, TActionName, TActionObj } from "../../contexts"
-import { exists, noop, Result, ResultError, Return, THandler } from "../../lib"
+import { Result, ResultError, Return, THandler, exists, noop } from "../../lib"
 import {
   TStreamID,
   TUnsubscribeFn,

diff --git a/desktop/src/components/ExampleCard.tsx b/desktop/src/components/ExampleCard.tsx
@@ -13,8 +13,8 @@ type TExampleCardProps = {
 
 const sizes: Record<"sm" | "md" | "lg", BoxProps["width"]> = {
   sm: "12",
-  md: "20",
-  lg: "24",
+  md: "16",
+  lg: "20",
 } as const
 
 export function ExampleCard({

diff --git a/desktop/src/constants.ts b/desktop/src/constants.ts
@@ -2,11 +2,13 @@ import { BoxProps } from "@chakra-ui/react"
 import {
   AWSSvg,
   AzureSvg,
+  CivoSvg,
   DigitalOceanSvg,
   DockerSvg,
   GCloudSvg,
   KubernetesSvg,
   SSHSvg,
+  TerraformSvg,
 } from "./images"
 
 export const STATUS_BAR_HEIGHT: NonNullable<BoxProps["height"]> = "8"
@@ -21,4 +23,6 @@ export const RECOMMENDED_PROVIDER_SOURCES = [
   { image: GCloudSvg, name: "gcloud", group: "cloud" },
   { image: AzureSvg, name: "azure", group: "cloud" },
   { image: DigitalOceanSvg, name: "digitalocean", group: "cloud" },
+  { image: CivoSvg, name: "civo", group: "cloud" },
+  { image: TerraformSvg, name: "terraform", group: "cloud" },
 ] as const
diff --git a/desktop/src/images/civo.svg b/desktop/src/images/civo.svg
diff --git a/desktop/src/images/index.ts b/desktop/src/images/index.ts
@@ -16,3 +16,5 @@ export { default as GCloudSvg } from "./gcp.svg"
 export { default as AWSSvg } from "./aws.svg"
 export { default as DigitalOceanSvg } from "./digitalocean.svg"
 export { default as AzureSvg } from "./azure.svg"
+export { default as CivoSvg } from "./civo.svg"
+export { default as TerraformSvg } from "./terraform.svg"
diff --git a/desktop/src/images/terraform.svg b/desktop/src/images/terraform.svg
diff --git a/desktop/src/views/Workspaces/CreateWorkspace/CreateWorkspace.tsx b/desktop/src/views/Workspaces/CreateWorkspace/CreateWorkspace.tsx
@@ -407,14 +407,11 @@ type TProviderInputProps = Readonly<{
   onRecommendedProviderClicked: (provider: TProviderID) => void
 }>
 function ProviderInput({ options, field, onRecommendedProviderClicked }: TProviderInputProps) {
+  const gridChildWidth = useToken("sizes", "12")
+
   return (
-    <Grid
-      templateRows={{
-        lg: "repeat(2, 1fr)",
-        xl: options.installed.length <= 2 ? "1fr" : "repeat(2, 1fr)",
-      }}
-      gridAutoFlow={"column"}>
-      <HStack>
+    <Grid>
+      <HStack height="fit-content">
         {options.installed.map((p) => (
           <Box key={p.name}>
             <ExampleCard
@@ -427,15 +424,24 @@ function ProviderInput({ options, field, onRecommendedProviderClicked }: TProvid
           </Box>
         ))}
       </HStack>
-      <HStack position={"relative"} top={"-10px"} marginTop={"20px"}>
+      <Grid
+        gap={2}
+        height="fit-content"
+        templateRows={{ base: "repeat(2, 1fr)", xl: "1fr" }}
+        templateColumns={{
+          base: `repeat(6, ${gridChildWidth})`,
+          xl: `repeat(10, ${gridChildWidth})`,
+        }}
+        position={"relative"}
+        marginTop={"8"}>
         <Text
-          position={"absolute"}
-          left={"5px"}
+          position="absolute"
+          left="0"
           top={"-18px"}
           textAlign="center"
           fontSize="sm"
           color="gray.500">
-          {"Recommended Providers"}
+          Recommended Providers
         </Text>
         {options.recommended.map((p) => (
           <Box key={p.name} filter="grayscale(100%)" _hover={{ filter: "grayscale(0%)" }}>
@@ -447,7 +453,7 @@ function ProviderInput({ options, field, onRecommendedProviderClicked }: TProvid
             />
           </Box>
         ))}
-      </HStack>
+      </Grid>
     </Grid>
   )
 }
@@ -464,8 +470,9 @@ function IDEInput({ ides, field, onClick }: TIDEInputProps) {
 
   return (
     <Grid
+      gap={2}
       gridTemplateColumns={{
-        lg: `repeat(8, ${gridChildWidth})`,
+        lg: `repeat(6, ${gridChildWidth})`,
         xl: `repeat(11, ${gridChildWidth})`,
         "2xl": `repeat(auto-fit, ${gridChildWidth})`,
       }}>