refactor(ui): move .net and ruby example to dedicated community quick…

…start

desktop/src/images/index.ts

@@ -26,4 +26,3 @@ export { default as TerraformSvg } from "./terraform.svg"
 export { default as VSCodeBrowser } from "./vscodebrowser.svg"
 export { default as ProviderPlaceholderSvg } from "./provider_placeholder.svg"
 export { default as RubySvg } from "./ruby.svg"
-export { default as RubySvgDark } from "./ruby_dark.svg"

desktop/src/useAppReady.tsx

@@ -174,7 +174,7 @@ export function useAppReady() {
               options: event.options,
             })
             if (importResult.err) {
-              const cleanedMsg = importResult.val.message.split("\n").at(-1) ?? "";
+              const cleanedMsg = importResult.val.message.split("\n").at(-1) ?? ""
               setFailedMessage("Failed to import workspace: " + cleanedMsg)
 
               return

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

@@ -2,6 +2,7 @@ import { ExampleCard, Form, IDEIcon, WarningMessageBox } from "@/components"
 import {
   Box,
   Button,
+  Flex,
   FormControl,
   FormErrorMessage,
   FormHelperText,
@@ -12,39 +13,39 @@ import {
   IconButton,
   Input,
   Link,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
   SimpleGrid,
   Text,
   Tooltip,
+  VStack,
   useColorMode,
   useColorModeValue,
   useToken,
-  VStack,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverHeader,
-  PopoverBody,
-  PopoverArrow,
-  PopoverCloseButton
 } 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"
-import { ProviderPlaceholderSvg } from "../../../images"
+import { CommunitySvg, ProviderPlaceholderSvg } from "../../../images"
 import { exists, getKeys, isEmpty, useFormErrors } from "../../../lib"
 import { Routes } from "../../../routes"
-import { useBorderColor } from "../../../Theme"
 import { TIDE } from "../../../types"
 import { useIDEs } from "../../../useIDEs"
 import { useSetupProviderModal } from "../../Providers"
-import { WORKSPACE_EXAMPLES, COMMUNITY_WORKSPACE_EXAMPLES } from "./constants"
 import { ProviderOptionsPopover } from "./ProviderOptionsPopover"
+import { COMMUNITY_WORKSPACE_EXAMPLES, WORKSPACE_EXAMPLES } from "./constants"
 import {
   FieldName,
   TCreateWorkspaceArgs,
@@ -268,7 +269,7 @@ export function CreateWorkspace() {
                 alignItems="center"
                 isRequired
                 isInvalid={exists(sourceError)}>
-                <SimpleGrid columns={2} spacingX={4} spacingY={4} marginBottom={4}>
+                <SimpleGrid columns={2} spacingX={4} spacingY={4}>
                   {WORKSPACE_EXAMPLES.map((example) => (
                     <ExampleCard
                       key={example.source}
@@ -281,36 +282,31 @@ export function CreateWorkspace() {
                       onClick={() => handleExampleCardClicked(example.source)}
                     />
                   ))}
+                  <Popover>
+                    <PopoverTrigger>
+                      <ExampleCard name="Community Quickstart" size="sm" image={CommunitySvg} />
+                    </PopoverTrigger>
+                    <PopoverContent>
+                      <PopoverArrow />
+                      <PopoverCloseButton />
+                      <PopoverHeader>Community Quickstart</PopoverHeader>
+                      <PopoverBody>
+                        <Flex gap={4}>
+                          {COMMUNITY_WORKSPACE_EXAMPLES.map((example) => (
+                            <ExampleCard
+                              key={example.source}
+                              size="sm"
+                              image={colorMode === "dark" ? example.imageDark : example.image}
+                              name={example.name}
+                              isSelected={currentSource === example.source}
+                              onClick={() => handleExampleCardClicked(example.source)}
+                            />
+                          ))}
+                        </Flex>
+                      </PopoverBody>
+                    </PopoverContent>
+                  </Popover>
                 </SimpleGrid>
-                {/* Add a popover "More" for community quickstart */}
-                <Popover>
-                  <PopoverTrigger>
-                    <Button>More</Button>
-                  </PopoverTrigger>
-                  <PopoverContent>
-                    <PopoverArrow />
-                    <PopoverCloseButton />
-                    <PopoverHeader>Community Quickstart</PopoverHeader>
-                    <PopoverBody>
-                      <SimpleGrid columns={2} spacingX={4} spacingY={4}>
-                        {COMMUNITY_WORKSPACE_EXAMPLES.map((example) => (
-                          <ExampleCard
-                            key={example.source}
-                            size="sm"
-                            image={
-                              colorMode === "dark"
-                                ? example.imageDark ?? example.image
-                                : example.image
-                            }
-                            name={example.name}
-                            isSelected={currentSource === example.source}
-                            onClick={() => handleExampleCardClicked(example.source)}
-                          />
-                        ))}
-                      </SimpleGrid>
-                    </PopoverBody>
-                  </PopoverContent>
-                </Popover>
               </FormControl>
             </Box>
           </HStack>

desktop/src/views/Workspaces/CreateWorkspace/constants.ts

@@ -8,10 +8,9 @@ import {
   PhpSvg,
   PhpSvgDark,
   PythonSvg,
+  RubySvg,
   RustSvg,
   RustSvgDark,
-  RubySvg,
-  RubySvgDark,
 } from "../../../images"
 
 export const WORKSPACE_EXAMPLES = [
@@ -53,18 +52,18 @@ export const WORKSPACE_EXAMPLES = [
     source: "https://github.com/microsoft/vscode-remote-try-cpp",
     name: "Try C++",
   },
-  {
-    image: DotnetcoreSvg,
-    source: "https://github.com/microsoft/vscode-remote-try-dotnet",
-    name: "Try Dotnet",
-  }
 ]
 
 export const COMMUNITY_WORKSPACE_EXAMPLES = [
   {
     image: RubySvg,
-    imageDark: RubySvgDark,
-    source: "https://github.com/Aunali321/ruby-quickstarter-template",
+    imageDark: RubySvg,
+    source: "https://github.com/loft-sh/devpod-quickstart-ruby",
     name: "Try Ruby",
-  }
-]
+  },
+  {
+    image: DotnetcoreSvg,
+    source: "https://github.com/microsoft/vscode-remote-try-dotnet",
+    name: "Try Dotnet",
+  },
+]

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

@@ -192,9 +192,8 @@ export function useCreateWorkspaceForm(
           maybeDevcontainerPath = undefined
         } else if (settings.experimental_multiDevcontainer && maybeDevcontainerPath === "") {
           // check for multiple devcontainers
-          const checkDevcontainerSetupResult = await client.workspaces.checkDevcontainerSetup(
-            workspaceSource
-          )
+          const checkDevcontainerSetupResult =
+            await client.workspaces.checkDevcontainerSetup(workspaceSource)
           setIsSubmitLoading(false)
           if (!checkDevcontainerSetupResult.ok) {
             setError(FieldName.DEVCONTAINER_PATH, {