Merge pull request #1020 from 89luca89/feat/gui_dotfiles

feat(desktop): add customization settings for dotfiles

desktop/src-tauri/src/settings.rs

@@ -30,6 +30,7 @@ pub struct Settings {
     experimental_devpod_pro: bool,
     additional_cli_flags: String,
     additional_env_vars: String,
+    dotfiles_url: String,
 }
 
 #[derive(Debug, Serialize, TS)]

desktop/src/client/client.ts

@@ -59,7 +59,7 @@ type TChannels = {
 }
 type TChannelName = keyof TChannels
 type TClientEventListener<TChannel extends TChannelName> = (payload: TChannels[TChannel]) => void
-type TClientSettings = Pick<TSettings, "debugFlag" | "additionalCliFlags">
+type TClientSettings = Pick<TSettings, "debugFlag" | "additionalCliFlags" | "dotfilesURL" >
 export type TPlatform = Awaited<ReturnType<typeof os.platform>>
 export type TArch = Awaited<ReturnType<typeof os.arch>>
 
@@ -85,6 +85,9 @@ class Client {
     if (name === "additionalCliFlags") {
       this.workspaces.setAdditionalFlags(value as string)
     }
+    if (name === "dotfilesURL") {
+      this.workspaces.setDotfilesFlag(value as string)
+    }
   }
   public ready(): Promise<void> {
     return invoke("ui_ready")

desktop/src/client/workspaces/client.ts

@@ -91,6 +91,10 @@ export class WorkspacesClient implements TDebuggable {
     WorkspaceCommands.DEBUG = isEnabled
   }
 
+  public setDotfilesFlag(dotfilesURL: string): void {
+    WorkspaceCommands.ADDITIONAL_FLAGS = WorkspaceCommands.ADDITIONAL_FLAGS + " --dotfiles=" + dotfilesURL
+  }
+
   public setAdditionalFlags(additionalFlags: string): void {
     WorkspaceCommands.ADDITIONAL_FLAGS = additionalFlags
   }

desktop/src/contexts/SettingsContext.tsx

@@ -38,6 +38,7 @@ const initialSettings: TSettings = {
   experimental_devPodPro: false,
   additionalCliFlags: "",
   additionalEnvVars: "",
+  dotfilesURL: "",
 }
 function getSettingKeys(): readonly TSetting[] {
   return getKeys(initialSettings)
@@ -94,6 +95,10 @@ export function SettingsProvider({ children }: Readonly<{ children?: ReactNode }
     client.setSetting("additionalCliFlags", settings.additionalCliFlags)
   }, [settings.additionalCliFlags])
 
+  useEffect(() => {
+    client.setSetting("dotfilesURL", settings.dotfilesURL)
+  }, [settings.dotfilesURL])
+
   const set = useCallback<TSettingsContext["set"]>((key, value) => {
     settingsStore.set(key, value)
   }, [])

desktop/src/gen/Settings.ts

@@ -17,4 +17,5 @@ export interface Settings {
   experimental_devPodPro: boolean
   additionalCliFlags: string
   additionalEnvVars: string
+  dotfilesURL: string
 }

desktop/src/views/Settings/Settings.tsx

@@ -38,6 +38,7 @@ import {
 } from "../../lib"
 import { useWelcomeModal } from "../../useWelcomeModal"
 import {
+  useDotfilesOption,
   useCLIFlagsOption,
   useAgentURLOption,
   useTelemetryOption,
@@ -146,13 +147,14 @@ function GeneralSettings() {
 }
 
 function CustomizationSettings() {
+  const { input: dotfilesInput } = useDotfilesOption()
   const { settings, set } = useChangeSettings()
   const { ides, defaultIDE, updateDefaultIDE } = useIDESettings()
 
   return (
     <>
       <SettingSection
-        showDivider={false}
+        showDivider={true}
         title="IDE"
         description="Select the default IDE you're using for workspaces. This will be overridden whenever you create a workspace with a different IDE. You can prevent this by checking the 'Always use this IDE' checkbox">
         <>
@@ -174,6 +176,12 @@ function CustomizationSettings() {
           </Checkbox>
         </>
       </SettingSection>
+      <SettingSection
+        showDivider={true}
+        title="Dotfiles"
+        description="Set the dotfiles git repository to use inside workspaces">
+        {dotfilesInput}
+      </SettingSection>
     </>
   )
 }

desktop/src/views/Settings/useContextOptions.tsx

@@ -311,3 +311,83 @@ export function useExtraEnvVarsOption() {
 
   return { input, helpText }
 }
+
+export function useDotfilesOption() {
+  const { settings, set } = useChangeSettings()
+  const updateOption = useCallback(
+    (value: string) => {
+      set("dotfilesURL", value)
+      client.setSetting("dotfilesURL", value)
+    },
+    [set]
+  )
+  const [hasFocus, setHasFocus] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      const value = e.target.value.trim()
+      updateOption(value)
+      setHasFocus(false)
+    },
+    [updateOption]
+  )
+
+  const handleKeyUp = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== "Enter") return
+
+    e.currentTarget.blur()
+  }, [])
+
+  const handleFocus = useCallback(() => {
+    setHasFocus(true)
+  }, [])
+
+  const handleClearDevPodDotfiles = useCallback(() => {
+    const el = inputRef.current
+    if (!el) return
+
+    el.value = ""
+  }, [])
+
+  const input = useMemo(
+    () => (
+      <InputGroup maxWidth="72">
+        <Input
+          ref={inputRef}
+          spellCheck={false}
+          placeholder="Dotfiles repo URL"
+          defaultValue={settings.dotfilesURL}
+          onBlur={handleBlur}
+          onKeyUp={handleKeyUp}
+          onFocus={handleFocus}
+        />
+        <InputRightElement>
+          <IconButton
+            visibility={hasFocus ? "visible" : "hidden"}
+            size="xs"
+            borderRadius="full"
+            icon={<CloseIcon />}
+            aria-label="clear"
+            onMouseDown={(e) => {
+              // needed to prevent losing focus from input
+              e.stopPropagation()
+              e.preventDefault()
+            }}
+            onClick={handleClearDevPodDotfiles}
+          />
+        </InputRightElement>
+      </InputGroup>
+    ),
+    [
+      settings.dotfilesURL,
+      handleBlur,
+      handleKeyUp,
+      handleFocus,
+      hasFocus,
+      handleClearDevPodDotfiles,
+    ]
+  )
+
+  return { input }
+}