From 61e50ac68ea4c07e292a79c5084a1de6f70fe18b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 27 Sep 2023 23:05:10 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(codeTabsComponent):=20remove?=
 =?UTF-8?q?=20unnecessary=20max-h-48=20class=20from=20codeTabsComponent=20?=
 =?UTF-8?q?to=20fix=20overflow=20issue=20=F0=9F=94=A7=20fix(keypairListCom?=
 =?UTF-8?q?ponent):=20add=20mx-2=20class=20to=20keypairListComponent=20whe?=
 =?UTF-8?q?n=20there=20are=20multiple=20key-value=20pairs=20to=20improve?=
 =?UTF-8?q?=20spacing=20=F0=9F=94=A7=20fix(keypairListComponent):=20remove?=
 =?UTF-8?q?=20ref=20parameter=20from=20onChange=20function=20in=20keypairL?=
 =?UTF-8?q?istComponent=20to=20fix=20unnecessary=20re-rendering=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(keypairListComponent):=20add=20mx-2=20class?=
 =?UTF-8?q?=20to=20keypairListComponent=20when=20there=20are=20multiple=20?=
 =?UTF-8?q?key-value=20pairs=20to=20improve=20spacing=20=F0=9F=94=A7=20fix?=
 =?UTF-8?q?(editNodeModal):=20add=20my-3=20class=20to=20keypairListCompone?=
 =?UTF-8?q?nt=20when=20there=20are=20multiple=20key-value=20pairs=20to=20i?=
 =?UTF-8?q?mprove=20spacing=20=F0=9F=94=A7=20fix(types):=20add=20advanced?=
 =?UTF-8?q?=20property=20to=20KeyPairListComponentType=20to=20support=20ad?=
 =?UTF-8?q?vanced=20mode=20in=20keypairListComponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/codeTabsComponent/index.tsx    |  2 +-
 .../components/keypairListComponent/index.tsx |  7 +++---
 .../src/modals/EditNodeModal/index.tsx        | 15 ++++++++++-
 src/frontend/src/types/components/index.ts    | 25 ++++++++++---------
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index adff0bb32..b0326bd30 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -682,7 +682,7 @@ export default function CodeTabsComponent({
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "dict" ? (
-                                              <div className="mx-auto max-h-48 overflow-auto custom-scroll">
+                                              <div className="mx-auto overflow-auto custom-scroll">
                                                 <KeypairListComponent
                                                   disabled={false}
                                                   editNode={true}
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index 540975682..b92a8faa5 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -12,6 +12,7 @@ export default function KeypairListComponent({
   disabled,
   editNode = false,
   duplicateKey,
+  advanced = false,
 }: KeyPairListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -24,7 +25,7 @@ export default function KeypairListComponent({
   useEffect(() => {
     if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
       ref.current = value;
-      onChange(value, ref);
+      onChange(value);
     }
   }, [value]);
 
@@ -46,14 +47,14 @@ export default function KeypairListComponent({
   return (
     <div
       className={classNames(
-        ref.current?.length > 1 && editNode ? "my-1" : "",
+        ref.current?.length > 1 && editNode ? "mx-2 my-1" : "",
         "flex h-full flex-col gap-3"
       )}
     >
       {ref.current?.map((obj, index) => {
         return Object.keys(obj).map((key, idx) => {
           return (
-            <div key={idx} className="flex w-full gap-3">
+            <div key={idx} className="flex w-full gap-2">
               <Input
                 type="text"
                 value={key.trim()}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 6d6c5cfda..d4707c140 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -256,8 +256,21 @@ const EditNodeModal = forwardRef(
                                 </div>
                               ) : myData.current.node?.template[templateParam]
                                   .type === "dict" ? (
-                                <div className="mt-2 max-h-48 w-full overflow-auto custom-scroll">
+                                <div
+                                  className={classNames(
+                                    "max-h-48 w-full overflow-auto custom-scroll",
+                                    myData.current.node!.template[templateParam]
+                                      .value?.length > 1
+                                      ? "my-3"
+                                      : ""
+                                  )}
+                                >
                                   <KeypairListComponent
+                                    advanced={
+                                      myData.current.node?.template[
+                                        templateParam
+                                      ].advanced
+                                    }
                                     disabled={disabled}
                                     editNode={true}
                                     value={
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index a3801d10e..579e19780 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -61,6 +61,7 @@ export type KeyPairListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   duplicateKey?: boolean;
+  advanced?: boolean;
 };
 
 export type DictComponentType = {
@@ -134,18 +135,18 @@ export type TooltipComponentType = {
   children: ReactElement;
   title: string | ReactElement;
   placement?:
-    | "bottom-end"
-    | "bottom-start"
-    | "bottom"
-    | "left-end"
-    | "left-start"
-    | "left"
-    | "right-end"
-    | "right-start"
-    | "right"
-    | "top-end"
-    | "top-start"
-    | "top";
+  | "bottom-end"
+  | "bottom-start"
+  | "bottom"
+  | "left-end"
+  | "left-start"
+  | "left"
+  | "right-end"
+  | "right-start"
+  | "right"
+  | "top-end"
+  | "top-start"
+  | "top";
 };
 
 export type ProgressBarType = {