From 854667034d001120f067d9f5ec95a10e6e613026 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Wed, 2 Apr 2025 16:03:38 -0700
Subject: [PATCH] fix(ui): fixed issue with params not appearing for blocks
 that require oauth, ui improvement to truncate text in credential selector

---
 .../credential-selector.tsx                   | 25 ++++++++-----------
 .../sub-block/components/dropdown.tsx         |  9 ++++++-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx
index 377605436d..2d07397b3b 100644
--- a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -197,24 +197,21 @@ export function CredentialSelector({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-full justify-between"
+            className="w-full justify-between relative"
             disabled={disabled}
           >
-            {selectedCredential ? (
-              <div className="flex items-center gap-2">
-                {getProviderIcon(provider)}
-                <span className="font-normal">{selectedCredential.name}</span>
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                {getProviderIcon(provider)}
-                <span className="text-muted-foreground">{label}</span>
-              </div>
-            )}
-            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <div className="flex items-center gap-2 max-w-[calc(100%-20px)] overflow-hidden">
+              {getProviderIcon(provider)}
+              {selectedCredential ? (
+                <span className="font-normal truncate">{selectedCredential.name}</span>
+              ) : (
+                <span className="text-muted-foreground truncate">{label}</span>
+              )}
+            </div>
+            <ChevronDown className="h-4 w-4 shrink-0 opacity-50 absolute right-3" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="p-0" align="start">
+        <PopoverContent className="p-0 w-[250px]" align="start">
           <Command>
             <CommandInput placeholder="Search credentials..." />
             <CommandList>
diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/dropdown.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/dropdown.tsx
index 0c315d3614..5e3bbda7c3 100644
--- a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/dropdown.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/dropdown.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import {
   Select,
   SelectContent,
@@ -55,6 +55,13 @@ export function Dropdown({ options, defaultValue, blockId, subBlockId }: Dropdow
     return undefined
   }, [value, defaultValue, evaluatedOptions])
 
+  // Set initial default value if current value is null/undefined
+  useEffect(() => {
+    if ((value === null || value === undefined) && effectiveValue !== undefined) {
+      setValue(effectiveValue)
+    }
+  }, [value, effectiveValue, setValue])
+
   // Handle the case where evaluatedOptions changes and the current selection is no longer valid
   const isValueInOptions = useMemo(() => {
     if (!effectiveValue || evaluatedOptions.length === 0) return false