From c84d93fa5ce77d08ee2e89138964d5968dd418d4 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 21 Nov 2023 16:42:56 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(parameterComponent):=20imp?=
 =?UTF-8?q?rove=20CSS=20for=20dropdown=20and=20refresh=20button=20in=20Par?=
 =?UTF-8?q?ameterComponent=20=F0=9F=90=9B=20fix(parameterComponent):=20add?=
 =?UTF-8?q?=20conditional=20rendering=20for=20refresh=20button=20based=20o?=
 =?UTF-8?q?n=20data.node.template[name].refresh=20value?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 76bf46fad..d0bef8741 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -428,20 +428,25 @@ export default function ParameterComponent({
         ) : left === true &&
           type === "str" &&
           data.node?.template[name].options ? (
-          <div className="mt-2 w-full">
-            <Dropdown
-              options={data.node.template[name].options}
-              onSelect={handleOnNewValue}
-              value={data.node.template[name].value ?? "Choose an option"}
-            ></Dropdown>
-            <Button
-              className="mt-2 w-full"
-              onClick={() => {
-                handleUpdateValues(name, data);
-              }}
-            >
-              Refresh
-            </Button>
+          // TODO: Improve CSS
+          <div className="mt-2 flex w-full items-center">
+            <div className="w-5/6 flex-grow">
+              <Dropdown
+                options={data.node.template[name].options}
+                onSelect={handleOnNewValue}
+                value={data.node.template[name].value ?? "Choose an option"}
+              />
+            </div>
+            {data.node?.template[name].refresh && (
+              <button
+                className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
+                onClick={() => {
+                  handleUpdateValues(name, data);
+                }}
+              >
+                <IconComponent name="RefreshCcw" />
+              </button>
+            )}
           </div>
         ) : left === true && type === "code" ? (
           <div className="mt-2 w-full">