fix(desktop): obfuscate password options in provider preview

desktop/src/icons/ArrowCycle.tsx

@@ -12,4 +12,4 @@ export const ArrowCycle = createIcon({
       d="M12 9.75 14.25 12m0 0 2.25 2.25M14.25 12l2.25-2.25M14.25 12 12 14.25m-2.58 4.92-6.374-6.375a1.125 1.125 0 0 1 0-1.59L9.42 4.83c.21-.211.497-.33.795-.33H19.5a2.25 2.25 0 0 1 2.25 2.25v10.5a2.25 2.25 0 0 1-2.25 2.25h-9.284c-.298 0-.585-.119-.795-.33Z"
     />
   ),
-});
+})

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

@@ -22,15 +22,15 @@ import {
 } from "@chakra-ui/react"
 import { ReactElement, useCallback, useRef, useState } from "react"
 import { HiPencil } from "react-icons/hi2"
-import { TNamedProvider } from "../../../types"
+import { TNamedProvider, TProviderOptions } from "../../../types"
 
 type TProviderOptionsPopoverProps = Readonly<{ provider: TNamedProvider; trigger: ReactElement }>
 export function ProviderOptionsPopover({ provider, trigger }: TProviderOptionsPopoverProps) {
   const { isOpen, onClose, onOpen } = useDisclosure()
   const bodyRef = useRef<HTMLDivElement | null>(null)
 
   const options = useProviderOptions(
-    provider.state?.options ?? {},
+    mergeOptionDefinitions(provider.state?.options ?? {}, provider.config?.options ?? {}),
     provider.config?.optionGroups ?? []
   )
   const [isLocked, setIsLocked] = useState(false)
@@ -163,33 +163,55 @@ function ProviderOptionList({ options }: TProviderOptionListProps) {
 
   return (
     <List width="full" marginBottom="2">
-      {options.map((option, i) => (
-        <ListItem key={i} width="full" display="flex" flexFlow="row nowrap">
-          <Tooltip label={option.displayName}>
+      {options.map((option, i) => {
+        let value = option.value ?? "-"
+        if (option.password) {
+          value = "*".repeat(value.length)
+        }
+
+        return (
+          <ListItem key={i} width="full" display="flex" flexFlow="row nowrap">
+            <Tooltip label={option.displayName}>
+              <Text
+                whiteSpace="nowrap"
+                wordBreak="keep-all"
+                marginRight="4"
+                width="40"
+                minWidth="40"
+                overflowX="hidden"
+                textOverflow="ellipsis">
+                {option.displayName}
+              </Text>
+            </Tooltip>
             <Text
-              whiteSpace="nowrap"
+              textOverflow="ellipsis"
               wordBreak="keep-all"
-              marginRight="4"
-              width="40"
-              minWidth="40"
+              whiteSpace="nowrap"
+              width="full"
               overflowX="hidden"
-              textOverflow="ellipsis">
-              {option.displayName}
+              color={valueColor}
+              userSelect="auto"
+              _hover={{ overflow: "visible", cursor: "text" }}>
+              {value}
             </Text>
-          </Tooltip>
-          <Text
-            textOverflow="ellipsis"
-            wordBreak="keep-all"
-            whiteSpace="nowrap"
-            width="full"
-            overflowX="hidden"
-            color={valueColor}
-            userSelect="auto"
-            _hover={{ overflow: "visible", cursor: "text" }}>
-            {option.value ?? "-"}
-          </Text>
-        </ListItem>
-      ))}
+          </ListItem>
+        )
+      })}
     </List>
   )
 }
+
+function mergeOptionDefinitions(
+  stateOptions: TProviderOptions,
+  configOptions: TProviderOptions
+): TProviderOptions {
+  const res: TProviderOptions = {}
+  for (const [k, v] of Object.entries(stateOptions)) {
+    const config = configOptions[k]
+    if (config) {
+      res[k] = { ...config, ...v }
+    }
+  }
+
+  return res
+}

desktop/src/views/Workspaces/WorkspaceCard.tsx

@@ -48,7 +48,16 @@ import {
   useWorkspace,
   useWorkspaceActions,
 } from "../../contexts"
-import { ArrowCycle, ArrowPath, CommandLine, Ellipsis, Pause, Play, Stack3D, Trash } from "../../icons"
+import {
+  ArrowCycle,
+  ArrowPath,
+  CommandLine,
+  Ellipsis,
+  Pause,
+  Play,
+  Stack3D,
+  Trash,
+} from "../../icons"
 import { getIDEDisplayName, useHover } from "../../lib"
 import { QueryKeys } from "../../queryKeys"
 import { Routes } from "../../routes"
@@ -78,11 +87,7 @@ export function WorkspaceCard({ workspaceID, isSelected, onSelectionChange }: TW
     onOpen: handleRebuildClicked,
     onClose: onRebuildClose,
   } = useDisclosure()
-  const {
-    isOpen: isResetOpen,
-    onOpen: handleResetClicked,
-    onClose: onResetClose,
-  } = useDisclosure()
+  const { isOpen: isResetOpen, onOpen: handleResetClicked, onClose: onResetClose } = useDisclosure()
 
   const { isOpen: isStopOpen, onOpen: handleStopClicked, onClose: onStopClose } = useDisclosure()
   const workspace = useWorkspace(workspaceID)
@@ -165,10 +170,9 @@ export function WorkspaceCard({ workspaceID, isSelected, onSelectionChange }: TW
           <ModalCloseButton />
           <ModalBody>
             Reseting the workspace will erase all state saved in the docker container overlay and
-            DELETE ALL UNCOMMITTED CODE.
-            This means you might need to reinstall or reconfigure certain applications.
-            You will start with a fresh clone of the repository.
-            Are you sure you want to rebuild {workspace.data.id}?
+            DELETE ALL UNCOMMITTED CODE. This means you might need to reinstall or reconfigure
+            certain applications. You will start with a fresh clone of the repository. Are you sure
+            you want to rebuild {workspace.data.id}?
           </ModalBody>
           <ModalFooter>
             <HStack spacing={"2"}>