feat(desktop): Add context settings to toggle docker/git credential (loft-sh#1251)

forwarding behaviour for default context from desktop app

Author: pascalbreuninger

desktop/src/types.ts

@@ -206,7 +206,11 @@ export type TImportWorkspaceConfig = Readonly<{
 //#region Context
 export type TContextOptions = Record<TContextOptionName, TContextOption>
 // See pkg/config/context.go
-export type TContextOptionName = "AGENT_URL" | "TELEMETRY"
+export type TContextOptionName =
+  | "AGENT_URL"
+  | "TELEMETRY"
+  | "SSH_INJECT_DOCKER_CREDENTIALS"
+  | "SSH_INJECT_GIT_CREDENTIALS"
 export type TContextOption = Readonly<{
   name: TContextOptionName
   description: string | null | undefined

desktop/src/views/Settings/ClearableInput.tsx

@@ -0,0 +1,75 @@
+import { CloseIcon } from "@chakra-ui/icons"
+import { IconButton, Input, InputGroup, InputLeftAddon, InputRightElement } from "@chakra-ui/react"
+import { FocusEvent, KeyboardEvent, ReactNode, useCallback, useRef, useState } from "react"
+
+type TClearableInputProps = Readonly<{
+  defaultValue: string
+  placeholder: string
+  label?: ReactNode
+  onChange: (newValue: string) => void
+}>
+export function ClearableInput({
+  defaultValue,
+  placeholder,
+  label,
+  onChange,
+}: TClearableInputProps) {
+  const [hasFocus, setHasFocus] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      const value = e.target.value.trim()
+      onChange(value)
+      setHasFocus(false)
+    },
+    [onChange]
+  )
+
+  const handleKeyUp = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== "Enter") return
+
+    e.currentTarget.blur()
+  }, [])
+
+  const handleFocus = useCallback(() => {
+    setHasFocus(true)
+  }, [])
+
+  const handleClearClicked = useCallback(() => {
+    const el = inputRef.current
+    if (!el) return
+
+    el.value = ""
+  }, [])
+
+  return (
+    <InputGroup maxWidth="96">
+      {label && <InputLeftAddon>{label}</InputLeftAddon>}
+      <Input
+        ref={inputRef}
+        spellCheck={false}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        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={handleClearClicked}
+        />
+      </InputRightElement>
+    </InputGroup>
+  )
+}

desktop/src/views/Settings/Settings.tsx

@@ -39,15 +39,19 @@ import {
 } from "../../lib"
 import { useWelcomeModal } from "../../useWelcomeModal"
 import {
-  useDotfilesOption,
-  useSSHKeySignatureOption,
-  useCLIFlagsOption,
   useAgentURLOption,
+  useDockerCredentialsForwardingOption,
+  useGitCredentialsForwardingOption,
   useTelemetryOption,
-  useExtraEnvVarsOption,
-  useProxyOptions,
 } from "./useContextOptions"
 import { useIDESettings } from "./useIDESettings"
+import {
+  useCLIFlagsOption,
+  useDotfilesOption,
+  useExtraEnvVarsOption,
+  useProxyOptions,
+  useSSHKeySignatureOption,
+} from "./useSettingsOptions"
 
 const SETTINGS_TABS = [
   { label: "General", component: <GeneralSettings /> },
@@ -159,11 +163,14 @@ function CustomizationSettings() {
   const { input: gitSSHSignatureInput } = useSSHKeySignatureOption()
   const { settings, set } = useChangeSettings()
   const { ides, defaultIDE, updateDefaultIDE } = useIDESettings()
+  const { input: dockerCredentialForwardingInput, helpText: dockerCredentialForwardingHelpText } =
+    useDockerCredentialsForwardingOption()
+  const { input: gitCredentialForwardingInput, helpText: gitCredentialForwardingHelpText } =
+    useGitCredentialsForwardingOption()
 
   return (
     <>
       <SettingSection
-        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">
         <>
@@ -185,18 +192,31 @@ function CustomizationSettings() {
           </Checkbox>
         </>
       </SettingSection>
+
       <SettingSection
-        showDivider={true}
         title="Dotfiles"
         description="Set the dotfiles git repository to use inside workspaces">
         {dotfilesInput}
       </SettingSection>
+
       <SettingSection
-        showDivider={false}
         title="SSH Key for Git commit signing"
         description="Set path of your SSH key you want to use for signing Git commits">
         {gitSSHSignatureInput}
       </SettingSection>
+
+      <SettingSection
+        title="Docker credentials forwarding"
+        description={dockerCredentialForwardingHelpText}>
+        {dockerCredentialForwardingInput}
+      </SettingSection>
+
+      <SettingSection
+        showDivider={false}
+        title="Git credentials forwarding"
+        description={gitCredentialForwardingHelpText}>
+        {gitCredentialForwardingInput}
+      </SettingSection>
     </>
   )
 }