From 76e0c6546a40cb3933e36a6b04360995d52869af Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 26 Sep 2023 23:44:15 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(codeTabsComponent):=20r?=
 =?UTF-8?q?emove=20unused=20import=20of=20ShadTooltip=20component=20to=20i?=
 =?UTF-8?q?mprove=20code=20cleanliness=20and=20reduce=20bundle=20size=20?=
 =?UTF-8?q?=F0=9F=94=A8=20refactor(codeTabsComponent):=20remove=20unnecess?=
 =?UTF-8?q?ary=20wrapping=20of=20TextAreaComponent=20and=20InputFileCompon?=
 =?UTF-8?q?ent=20components=20with=20ShadTooltip=20component=20to=20simpli?=
 =?UTF-8?q?fy=20code=20structure=20and=20improve=20performance=20?=
 =?UTF-8?q?=F0=9F=94=A8=20refactor(codeTabsComponent):=20remove=20unused?=
 =?UTF-8?q?=20onChange=20handlers=20in=20TextAreaComponent=20and=20InputFi?=
 =?UTF-8?q?leComponent=20components=20to=20remove=20unnecessary=20code=20a?=
 =?UTF-8?q?nd=20improve=20code=20readability=20=F0=9F=94=A8=20refactor(cod?=
 =?UTF-8?q?eTabsComponent):=20remove=20unnecessary=20className=20attribute?=
 =?UTF-8?q?=20in=20InputFileComponent=20component=20to=20remove=20redundan?=
 =?UTF-8?q?t=20styling=20=F0=9F=94=A8=20refactor(codeTabsComponent):=20rem?=
 =?UTF-8?q?ove=20unused=20useEffect=20and=20useState=20imports=20to=20remo?=
 =?UTF-8?q?ve=20unnecessary=20code=20and=20improve=20code=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 fix(codeTabsComponent): fix JSX syntax error and improve code readability
✨ feat(codeTabsComponent): refactor codeTabsComponent to use separate components for different template types
---
 .../components/codeTabsComponent/index.tsx    | 501 ++++++++----------
 1 file changed, 216 insertions(+), 285 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 49abb948f..adff0bb32 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -3,7 +3,6 @@ import { useContext, useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import AccordionComponent from "../../components/AccordionComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -322,55 +321,46 @@ export default function CodeTabsComponent({
                                                 ) : node.data.node.template[
                                                     templateField
                                                   ].multiline ? (
-                                                  <ShadTooltip
-                                                    content={tweaks.buildContent!(
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].value
-                                                    )}
-                                                  >
-                                                    <div>
-                                                      <TextAreaComponent
-                                                        disabled={false}
-                                                        editNode={true}
-                                                        value={
-                                                          !node.data.node
-                                                            .template[
+                                                  <div>
+                                                    <TextAreaComponent
+                                                      disabled={false}
+                                                      editNode={true}
+                                                      value={
+                                                        !node.data.node
+                                                          .template[
+                                                          templateField
+                                                        ].value ||
+                                                        node.data.node.template[
+                                                          templateField
+                                                        ].value === ""
+                                                          ? ""
+                                                          : node.data.node
+                                                              .template[
+                                                              templateField
+                                                            ].value
+                                                      }
+                                                      onChange={(target) => {
+                                                        setData((old) => {
+                                                          let newInputList =
+                                                            cloneDeep(old);
+                                                          newInputList![
+                                                            i
+                                                          ].data.node.template[
                                                             templateField
-                                                          ].value ||
+                                                          ].value = target;
+                                                          return newInputList;
+                                                        });
+                                                        tweaks.buildTweakObject!(
+                                                          node["data"]["id"],
+                                                          target,
                                                           node.data.node
                                                             .template[
                                                             templateField
-                                                          ].value === ""
-                                                            ? ""
-                                                            : node.data.node
-                                                                .template[
-                                                                templateField
-                                                              ].value
-                                                        }
-                                                        onChange={(target) => {
-                                                          setData((old) => {
-                                                            let newInputList =
-                                                              cloneDeep(old);
-                                                            newInputList![
-                                                              i
-                                                            ].data.node.template[
-                                                              templateField
-                                                            ].value = target;
-                                                            return newInputList;
-                                                          });
-                                                          tweaks.buildTweakObject!(
-                                                            node["data"]["id"],
-                                                            target,
-                                                            node.data.node
-                                                              .template[
-                                                              templateField
-                                                            ]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  </ShadTooltip>
+                                                          ]
+                                                        );
+                                                      }}
+                                                    />
+                                                  </div>
                                                 ) : (
                                                   <InputComponent
                                                     editNode={true}
@@ -452,52 +442,35 @@ export default function CodeTabsComponent({
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "file" ? (
-                                              <ShadTooltip
-                                                content={tweaks.buildContent!(
-                                                  !node.data.node.template[
-                                                    templateField
-                                                  ].value ||
+                                              <div className="mx-auto">
+                                                <InputFileComponent
+                                                  editNode={true}
+                                                  disabled={false}
+                                                  value={
                                                     node.data.node.template[
                                                       templateField
-                                                    ].value === ""
-                                                    ? ""
-                                                    : node.data.node.template[
-                                                        templateField
-                                                      ].value
-                                                )}
-                                              >
-                                                <div className="mx-auto">
-                                                  <InputFileComponent
-                                                    editNode={true}
-                                                    disabled={false}
-                                                    value={
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].value ?? ""
-                                                    }
-                                                    onChange={(
-                                                      target: any
-                                                    ) => {}}
-                                                    fileTypes={
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].fileTypes
-                                                    }
-                                                    suffixes={
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].suffixes
-                                                    }
-                                                    onFileChange={(
-                                                      value: any
-                                                    ) => {
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].file_path = value;
-                                                    }}
-                                                  ></InputFileComponent>
-                                                </div>
-                                              </ShadTooltip>
+                                                    ].value ?? ""
+                                                  }
+                                                  onChange={(target: any) => {}}
+                                                  fileTypes={
+                                                    node.data.node.template[
+                                                      templateField
+                                                    ].fileTypes
+                                                  }
+                                                  suffixes={
+                                                    node.data.node.template[
+                                                      templateField
+                                                    ].suffixes
+                                                  }
+                                                  onFileChange={(
+                                                    value: any
+                                                  ) => {
+                                                    node.data.node.template[
+                                                      templateField
+                                                    ].file_path = value;
+                                                  }}
+                                                ></InputFileComponent>
+                                              </div>
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "float" ? (
@@ -629,223 +602,181 @@ export default function CodeTabsComponent({
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "prompt" ? (
-                                              <ShadTooltip
-                                                content={tweaks.buildContent!(
-                                                  !node.data.node.template[
-                                                    templateField
-                                                  ].value ||
+                                              <div className="mx-auto">
+                                                <PromptAreaComponent
+                                                  editNode={true}
+                                                  disabled={false}
+                                                  value={
+                                                    !node.data.node.template[
+                                                      templateField
+                                                    ].value ||
                                                     node.data.node.template[
                                                       templateField
                                                     ].value === ""
-                                                    ? ""
-                                                    : node.data.node.template[
+                                                      ? ""
+                                                      : node.data.node.template[
+                                                          templateField
+                                                        ].value
+                                                  }
+                                                  onChange={(target) => {
+                                                    setData((old) => {
+                                                      let newInputList =
+                                                        cloneDeep(old);
+                                                      newInputList![
+                                                        i
+                                                      ].data.node.template[
                                                         templateField
-                                                      ].value
-                                                )}
-                                              >
-                                                <div className="mx-auto">
-                                                  <PromptAreaComponent
-                                                    editNode={true}
-                                                    disabled={false}
-                                                    value={
-                                                      !node.data.node.template[
-                                                        templateField
-                                                      ].value ||
+                                                      ].value = target;
+                                                      return newInputList;
+                                                    });
+                                                    tweaks.buildTweakObject!(
+                                                      node["data"]["id"],
+                                                      target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ].value === ""
-                                                        ? ""
-                                                        : node.data.node
-                                                            .template[
-                                                            templateField
-                                                          ].value
-                                                    }
-                                                    onChange={(target) => {
-                                                      setData((old) => {
-                                                        let newInputList =
-                                                          cloneDeep(old);
-                                                        newInputList![
-                                                          i
-                                                        ].data.node.template[
-                                                          templateField
-                                                        ].value = target;
-                                                        return newInputList;
-                                                      });
-                                                      tweaks.buildTweakObject!(
-                                                        node["data"]["id"],
-                                                        target,
-                                                        node.data.node.template[
-                                                          templateField
-                                                        ]
-                                                      );
-                                                    }}
-                                                  />
-                                                </div>
-                                              </ShadTooltip>
+                                                      ]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "code" ? (
-                                              <ShadTooltip
-                                                content={tweaks.buildContent!(
-                                                  tweaks.getValue!(
+                                              <div className="mx-auto">
+                                                <CodeAreaComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={
+                                                    !node.data.node.template[
+                                                      templateField
+                                                    ].value ||
                                                     node.data.node.template[
                                                       templateField
-                                                    ].value,
-                                                    node.data,
-                                                    node.data.node.template[
-                                                      templateField
-                                                    ]
-                                                  )
-                                                )}
-                                              >
-                                                <div className="mx-auto">
-                                                  <CodeAreaComponent
-                                                    disabled={false}
-                                                    editNode={true}
-                                                    value={
-                                                      !node.data.node.template[
+                                                    ].value === ""
+                                                      ? ""
+                                                      : node.data.node.template[
+                                                          templateField
+                                                        ].value
+                                                  }
+                                                  onChange={(target) => {
+                                                    setData((old) => {
+                                                      let newInputList =
+                                                        cloneDeep(old);
+                                                      newInputList![
+                                                        i
+                                                      ].data.node.template[
                                                         templateField
-                                                      ].value ||
+                                                      ].value = target;
+                                                      return newInputList;
+                                                    });
+                                                    tweaks.buildTweakObject!(
+                                                      node["data"]["id"],
+                                                      target,
                                                       node.data.node.template[
                                                         templateField
-                                                      ].value === ""
-                                                        ? ""
-                                                        : node.data.node
-                                                            .template[
-                                                            templateField
-                                                          ].value
-                                                    }
-                                                    onChange={(target) => {
-                                                      setData((old) => {
-                                                        let newInputList =
-                                                          cloneDeep(old);
-                                                        newInputList![
-                                                          i
-                                                        ].data.node.template[
-                                                          templateField
-                                                        ].value = target;
-                                                        return newInputList;
-                                                      });
-                                                      tweaks.buildTweakObject!(
-                                                        node["data"]["id"],
-                                                        target,
-                                                        node.data.node.template[
-                                                          templateField
-                                                        ]
-                                                      );
-                                                    }}
-                                                  />
-                                                </div>
-                                              </ShadTooltip>
+                                                      ]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "dict" ? (
-                                              <ShadTooltip
-                                                content={tweaks.buildContent!(
-                                                  tweaks.getValue!(
-                                                    node.data.node.template[
+                                              <div className="mx-auto max-h-48 overflow-auto custom-scroll">
+                                                <KeypairListComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={
+                                                    node.data.node!.template[
                                                       templateField
-                                                    ].value,
-                                                    node.data,
-                                                    node.data.node.template[
+                                                    ].value?.length === 0 ||
+                                                    !node.data.node!.template[
                                                       templateField
-                                                    ]
-                                                  )
-                                                )}
-                                              >
-                                                <div className="mx-auto max-h-48 overflow-auto custom-scroll">
-                                                  <KeypairListComponent
-                                                    disabled={false}
-                                                    editNode={true}
-                                                    value={
-                                                      node.data.node!.template[
-                                                        templateField
-                                                      ].value?.length === 0 ||
-                                                      !node.data.node!.template[
-                                                        templateField
-                                                      ].value
-                                                        ? [{ "": "" }]
-                                                        : convertObjToArray(
-                                                            node.data.node!
-                                                              .template[
-                                                              templateField
-                                                            ].value
-                                                          )
-                                                    }
-                                                    duplicateKey={
-                                                      errorDuplicateKey
-                                                    }
-                                                    onChange={(target) => {
-                                                      const valueToNumbers =
-                                                        convertValuesToNumbers(
-                                                          target
-                                                        );
-                                                      node.data.node!.template[
-                                                        templateField
-                                                      ].value = valueToNumbers;
-                                                      setErrorDuplicateKey(
-                                                        hasDuplicateKeys(
-                                                          valueToNumbers
-                                                        )
-                                                      );
-                                                      setData((old) => {
-                                                        let newInputList =
-                                                          cloneDeep(old);
-                                                        newInputList![
-                                                          i
-                                                        ].data.node.template[
-                                                          templateField
-                                                        ].value = target;
-                                                        return newInputList;
-                                                      });
-                                                      tweaks.buildTweakObject!(
-                                                        node["data"]["id"],
-                                                        target,
-                                                        node.data.node.template[
-                                                          templateField
-                                                        ]
-                                                      );
-                                                    }}
-                                                  />
-                                                </div>
-                                              </ShadTooltip>
-                                            ) : node.data.node.template[
-                                                templateField
-                                              ].type === "NestedDict" ? (
-                                              <ShadTooltip
-                                                content={tweaks.buildContent!(
-                                                  tweaks.getValue!(
-                                                    node.data.node.template[
-                                                      templateField
-                                                    ].value,
-                                                    node.data,
-                                                    node.data.node.template[
-                                                      templateField
-                                                    ]
-                                                  )
-                                                )}
-                                              >
-                                                <div className="mx-auto">
-                                                  <DictComponent
-                                                    disabled={false}
-                                                    editNode={true}
-                                                    value={
-                                                      node.data.node!.template[
-                                                        templateField
-                                                      ].value.toString() ===
-                                                      "{}"
-                                                        ? {
-                                                            yourkey: "value",
-                                                          }
-                                                        : node.data.node!
+                                                    ].value
+                                                      ? [{ "": "" }]
+                                                      : convertObjToArray(
+                                                          node.data.node!
                                                             .template[
                                                             templateField
                                                           ].value
-                                                    }
-                                                    onChange={(target) => {}}
-                                                  />
-                                                </div>
-                                              </ShadTooltip>
+                                                        )
+                                                  }
+                                                  duplicateKey={
+                                                    errorDuplicateKey
+                                                  }
+                                                  onChange={(target) => {
+                                                    const valueToNumbers =
+                                                      convertValuesToNumbers(
+                                                        target
+                                                      );
+                                                    node.data.node!.template[
+                                                      templateField
+                                                    ].value = valueToNumbers;
+                                                    setErrorDuplicateKey(
+                                                      hasDuplicateKeys(
+                                                        valueToNumbers
+                                                      )
+                                                    );
+                                                    setData((old) => {
+                                                      let newInputList =
+                                                        cloneDeep(old);
+                                                      newInputList![
+                                                        i
+                                                      ].data.node.template[
+                                                        templateField
+                                                      ].value = target;
+                                                      return newInputList;
+                                                    });
+                                                    tweaks.buildTweakObject!(
+                                                      node["data"]["id"],
+                                                      target,
+                                                      node.data.node.template[
+                                                        templateField
+                                                      ]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
+                                            ) : node.data.node.template[
+                                                templateField
+                                              ].type === "NestedDict" ? (
+                                              <div className="mx-auto">
+                                                <DictComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={
+                                                    node.data.node!.template[
+                                                      templateField
+                                                    ].value.toString() === "{}"
+                                                      ? {
+                                                          yourkey: "value",
+                                                        }
+                                                      : node.data.node!
+                                                          .template[
+                                                          templateField
+                                                        ].value
+                                                  }
+                                                  onChange={(target) => {
+                                                    setData((old) => {
+                                                      let newInputList =
+                                                        cloneDeep(old);
+                                                      newInputList![
+                                                        i
+                                                      ].data.node.template[
+                                                        templateField
+                                                      ].value = target;
+                                                      return newInputList;
+                                                    });
+                                                    tweaks.buildTweakObject!(
+                                                      node["data"]["id"],
+                                                      target,
+                                                      node.data.node.template[
+                                                        templateField
+                                                      ]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
                                             ) : node.data.node.template[
                                                 templateField
                                               ].type === "Any" ? (