From 3092dd6396761cbb6a587c1e03ffd2da9e09b22c Mon Sep 17 00:00:00 2001
From: Pascal Breuninger <117151367+pascalbreuninger@users.noreply.github.com>
Date: Fri, 13 Dec 2024 10:14:40 +0100
Subject: [PATCH] fix(desktop): set userSelect to text instead of auto to fix
 an issue (#1472)

where users were not able to select text in DevPod Desktop
---
 desktop/src/Theme/theme.ts                                  | 6 +++---
 desktop/src/components/Error/ErrorMessageBox.tsx            | 2 +-
 desktop/src/components/Warning/WarningMessageBox.tsx        | 2 +-
 .../Pro/CreateWorkspace/InfrastructureTemplateInput.tsx     | 2 +-
 desktop/src/views/Providers/AddProvider/OptionFormField.tsx | 2 +-
 .../Workspaces/CreateWorkspace/ProviderOptionsPopover.tsx   | 4 ++--
 desktop/src/views/Workspaces/WorkspaceCard.tsx              | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/desktop/src/Theme/theme.ts b/desktop/src/Theme/theme.ts
index 4b2c2f5ec..13b635f4c 100644
--- a/desktop/src/Theme/theme.ts
+++ b/desktop/src/Theme/theme.ts
@@ -41,7 +41,7 @@ const Link = defineStyleConfig({
 const FormError = defineStyleConfig({
   baseStyle: {
     text: {
-      userSelect: "auto",
+      userSelect: "text",
       cursor: "text",
     },
   },
@@ -71,10 +71,10 @@ export const theme = extendTheme({
           cursor: "default",
         },
         td: {
-          userSelect: "auto",
+          userSelect: "text",
         },
         code: {
-          userSelect: "auto",
+          userSelect: "text",
           cursor: "text",
         },
         "input::placeholder": {
diff --git a/desktop/src/components/Error/ErrorMessageBox.tsx b/desktop/src/components/Error/ErrorMessageBox.tsx
index 5acd719ff..f6c6f90d0 100644
--- a/desktop/src/components/Error/ErrorMessageBox.tsx
+++ b/desktop/src/components/Error/ErrorMessageBox.tsx
@@ -14,7 +14,7 @@ export function ErrorMessageBox({ error, ...boxProps }: TErrorMessageBox) {
       borderRadius="md"
       display="inline-block"
       {...boxProps}>
-      <Text userSelect="auto" cursor="text" color={textColor} fontFamily="monospace">
+      <Text userSelect="text" cursor="text" color={textColor} fontFamily="monospace">
         {error.message.split("\n").map((line, index) => (
           <React.Fragment key={index}>
             {line}
diff --git a/desktop/src/components/Warning/WarningMessageBox.tsx b/desktop/src/components/Warning/WarningMessageBox.tsx
index b46fed646..ffeb2eb05 100644
--- a/desktop/src/components/Warning/WarningMessageBox.tsx
+++ b/desktop/src/components/Warning/WarningMessageBox.tsx
@@ -42,7 +42,7 @@ export function WarningMessageBox({
             borderRadius: "md",
           }
         : {})}
-      userSelect="auto"
+      userSelect="text"
       display="inline-block">
       <Text color={textColor} fontSize={fontSize}>
         {warning}
diff --git a/desktop/src/views/Pro/CreateWorkspace/InfrastructureTemplateInput.tsx b/desktop/src/views/Pro/CreateWorkspace/InfrastructureTemplateInput.tsx
index affb3293a..f00579b56 100644
--- a/desktop/src/views/Pro/CreateWorkspace/InfrastructureTemplateInput.tsx
+++ b/desktop/src/views/Pro/CreateWorkspace/InfrastructureTemplateInput.tsx
@@ -319,7 +319,7 @@ function OptionFormField({
       {exists(optionError) ? (
         <FormErrorMessage>{optionError.message?.toString() ?? "Error"}</FormErrorMessage>
       ) : (
-        exists(description) && <FormHelperText userSelect="auto">{description}</FormHelperText>
+        exists(description) && <FormHelperText userSelect="text">{description}</FormHelperText>
       )}
 
       {input}
diff --git a/desktop/src/views/Providers/AddProvider/OptionFormField.tsx b/desktop/src/views/Providers/AddProvider/OptionFormField.tsx
index 28d1ffa93..c3410e802 100644
--- a/desktop/src/views/Providers/AddProvider/OptionFormField.tsx
+++ b/desktop/src/views/Providers/AddProvider/OptionFormField.tsx
@@ -177,7 +177,7 @@ export function OptionFormField({
       {exists(optionError) ? (
         <FormErrorMessage>{optionError.message?.toString() ?? "Error"}</FormErrorMessage>
       ) : (
-        exists(description) && <FormHelperText userSelect="auto">{description}</FormHelperText>
+        exists(description) && <FormHelperText userSelect="text">{description}</FormHelperText>
       )}
     </FormControl>
   )
diff --git a/desktop/src/views/Workspaces/CreateWorkspace/ProviderOptionsPopover.tsx b/desktop/src/views/Workspaces/CreateWorkspace/ProviderOptionsPopover.tsx
index cc1647783..cf04fcd81 100644
--- a/desktop/src/views/Workspaces/CreateWorkspace/ProviderOptionsPopover.tsx
+++ b/desktop/src/views/Workspaces/CreateWorkspace/ProviderOptionsPopover.tsx
@@ -196,7 +196,7 @@ function ProviderOptionList({ options }: TProviderOptionListProps) {
                 width="full"
                 overflowX="hidden"
                 color={valueColor}
-                userSelect="auto"
+                userSelect="text"
                 _hover={{ overflow: "visible", cursor: "text" }}>
                 {option.enum.find((e) => e.value === value)?.displayName ?? value}
               </Text>
@@ -208,7 +208,7 @@ function ProviderOptionList({ options }: TProviderOptionListProps) {
                 width="full"
                 overflowX="hidden"
                 color={valueColor}
-                userSelect="auto"
+                userSelect="text"
                 _hover={{ overflow: "visible", cursor: "text" }}>
                 {value}
               </Text>
diff --git a/desktop/src/views/Workspaces/WorkspaceCard.tsx b/desktop/src/views/Workspaces/WorkspaceCard.tsx
index a18dce95d..74049cb04 100644
--- a/desktop/src/views/Workspaces/WorkspaceCard.tsx
+++ b/desktop/src/views/Workspaces/WorkspaceCard.tsx
@@ -220,7 +220,7 @@ export function WorkspaceCard({ workspaceID, isSelected, onSelectionChange }: TW
                 <Text
                   fontSize="sm"
                   color="gray.500"
-                  userSelect="auto"
+                  userSelect="text"
                   maxWidth="30rem"
                   overflow="hidden"
                   whiteSpace="nowrap"