Refactor[NodeModal]: Remove unnused code (NodeModal)

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -7,7 +7,6 @@ import { useSSE } from "../../contexts/SSEContext";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
-import NodeModal from "../../modals/NodeModal";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { NodeDataType } from "../../types/flow";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
@@ -91,13 +90,6 @@ export default function GenericNode({
             </div>
           </div>
           <div className="round-button-div">
-            <button
-              className="relative"
-              onClick={(event) => {
-                event.preventDefault();
-                openPopUp(<NodeModal data={data} />);
-              }}
-            ></button>
           </div>
           <div className="round-button-div">
             <div>

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -35,6 +35,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { classNames } from "../../utils/utils";
+import { editNodeToggleType } from "../../types/components";
 
 export default function EditNodeModal({
   data,
@@ -87,7 +88,8 @@ export default function EditNodeModal({
     setNodeValue(!nodeValue);
   }
 
-  const handleOnNewValue = (newValue: any, name) => {
+  const handleOnNewValue = (newValue, name) => {
+    console.log({ newValue, name })
     data.node.template[name].value = newValue;
     // Set state to pending
     setTabsState((prev) => {
@@ -210,6 +212,7 @@ export default function EditNodeModal({
                             ) : data.node.template[n].type === "bool" ? (
                               <div className="ml-auto">
                                 {" "}
+                                oi
                                 <ToggleShadComponent
                                   disabled={disabled}
                                   enabled={data.node.template[n].value}
@@ -230,7 +233,7 @@ export default function EditNodeModal({
                                   }}
                                 />
                               </div>
-                            ) : data.node.template[n].type === "str" &&
+                            ) : data.node.template[n].type === "str" && 
                               data.node.template[n].options ? (
                               <div className="mx-auto">
                                 <Dropdown

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -1,175 +0,0 @@
-import { useState } from "react";
-import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import Dropdown from "../../../../components/dropdownComponent";
-import FloatComponent from "../../../../components/floatComponent";
-import InputComponent from "../../../../components/inputComponent";
-import InputFileComponent from "../../../../components/inputFileComponent";
-import InputListComponent from "../../../../components/inputListComponent";
-import IntComponent from "../../../../components/intComponent";
-import PromptAreaComponent from "../../../../components/promptComponent";
-import TextAreaComponent from "../../../../components/textAreaComponent";
-import ToggleComponent from "../../../../components/toggleComponent";
-import { classNames } from "../../../../utils/utils";
-
-export default function ModalField({
-  data,
-  title,
-  required,
-  id,
-  name,
-  type,
-  index,
-}) {
-  const [enabled, setEnabled] = useState(
-    data.node.template[name]?.value ?? false
-  );
-  const display =
-    type === "str" ||
-    type === "int" ||
-    type === "prompt" ||
-    type === "bool" ||
-    type === "float" ||
-    type === "file" ||
-    type === "code";
-
-  return (
-    <div
-      className={classNames(
-        "flex w-full flex-row items-center justify-between",
-        display ? "" : "hidden",
-        Object.keys(data.node.template).filter(
-          (t) =>
-            t.charAt(0) !== "_" &&
-            data.node.template[t].advanced &&
-            data.node.template[t].show
-        ).length -
-          1 ===
-          index
-          ? "pb-4"
-          : ""
-      )}
-    >
-      {display && (
-        <div>
-          <span className="mx-2">{title}</span>
-          <span className="text-status-red">{required ? " *" : ""}</span>
-        </div>
-      )}
-
-      {type === "str" && !data.node.template[name].options ? (
-        <div className="w-1/2">
-          {data.node.template[name].list ? (
-            <InputListComponent
-              disabled={false}
-              value={
-                !data.node.template[name].value ||
-                data.node.template[name].value === ""
-                  ? [""]
-                  : data.node.template[name].value
-              }
-              onChange={(t: string[]) => {
-                data.node.template[name].value = t;
-              }}
-            />
-          ) : data.node.template[name].multiline ? (
-            <TextAreaComponent
-              disabled={false}
-              value={data.node.template[name].value ?? ""}
-              onChange={(t: string) => {
-                data.node.template[name].value = t;
-              }}
-            />
-          ) : (
-            <InputComponent
-              disabled={false}
-              password={data.node.template[name].password ?? false}
-              value={data.node.template[name].value ?? ""}
-              onChange={(t) => {
-                data.node.template[name].value = t;
-              }}
-            />
-          )}
-        </div>
-      ) : type === "bool" ? (
-        <div className="ml-auto">
-          {" "}
-          <ToggleComponent
-            disabled={false}
-            enabled={enabled}
-            setEnabled={(t) => {
-              data.node.template[name].value = t;
-              setEnabled(t);
-            }}
-            size="small"
-          />
-        </div>
-      ) : type === "float" ? (
-        <div className="w-1/2">
-          <FloatComponent
-            disabled={false}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-            }}
-          />
-        </div>
-      ) : type === "str" && data.node.template[name].options ? (
-        <div className="w-1/2">
-          <Dropdown
-            options={data.node.template[name].options}
-            onSelect={(newValue) => (data.node.template[name].value = newValue)}
-            value={data.node.template[name].value ?? "Choose an option"}
-          ></Dropdown>
-        </div>
-      ) : type === "int" ? (
-        <div className="w-1/2">
-          <IntComponent
-            disabled={false}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-            }}
-          />
-        </div>
-      ) : type === "file" ? (
-        <div className="w-1/2">
-          <InputFileComponent
-            disabled={false}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[name].value = t;
-            }}
-            fileTypes={data.node.template[name].fileTypes}
-            suffixes={data.node.template[name].suffixes}
-            onFileChange={(t: string) => {
-              data.node.template[name].content = t;
-            }}
-          ></InputFileComponent>
-        </div>
-      ) : type === "prompt" ? (
-        <div className="w-1/2">
-          <PromptAreaComponent
-            field_name={name}
-            disabled={false}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[name].value = t;
-            }}
-          />
-        </div>
-      ) : type === "code" ? (
-        <div className="w-1/2">
-          <CodeAreaComponent
-            disabled={false}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[name].value = t;
-            }}
-          />
-        </div>
-      ) : (
-        <div className="hidden"></div>
-      )}
-    </div>
-  );
-}

src/frontend/src/modals/NodeModal/index.tsx

@@ -1,167 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useContext, useRef, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
-import { limitScrollFieldsModal } from "../../constants/constants";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { typesContext } from "../../contexts/typesContext";
-import { NodeDataType } from "../../types/flow";
-import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
-import { classNames, toTitleCase } from "../../utils/utils";
-import ModalField from "./components/ModalField";
-
-export default function NodeModal({
-  data,
-}: {
-  data: NodeDataType;
-}): JSX.Element {
-  const [open, setOpen] = useState(true);
-  const { closePopUp } = useContext(PopUpContext);
-  const { types } = useContext(typesContext);
-  const ref = useRef();
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
-  // any to avoid type conflict
-  const Icon: any = nodeIconsLucide[types[data.type]];
-  return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="node-modal-div" />
-        </Transition.Child>
-
-        <div className="node-modal-dialog-arrangement">
-          <div className="node-modal-dialog-div">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="node-modal-dialog-panel">
-                <div className=" node-modal-dialog-panel-div">
-                  <button
-                    type="button"
-                    className="node-modal-dialog-button"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <IconComponent
-                      name="X"
-                      className="h-6 w-6"
-                      aria-hidden="true"
-                    />
-                  </button>
-                </div>
-                <div className="node-modal-dialog-icon-div">
-                  <div className="node-modal-icon-arrangement">
-                    <Icon
-                      strokeWidth={1.5}
-                      className="node-modal-icon"
-                      style={{
-                        color:
-                          nodeColors[types[data.type]] ?? nodeColors.unknown,
-                      }}
-                    />
-                    <div className="node-modal-title-div">
-                      <Dialog.Title as="h3" className="node-modal-title">
-                        {data.type}
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div className="node-modal-template-div">
-                    <div className="flex-max-width h-[445px]">
-                      <div
-                        className={classNames(
-                          "node-modal-template",
-                          Object.keys(data.node.template).filter(
-                            (t) =>
-                              t.charAt(0) !== "_" &&
-                              data.node.template[t].advanced &&
-                              data.node.template[t].show
-                          ).length > limitScrollFieldsModal
-                            ? "overflow-scroll overflow-x-hidden custom-scroll"
-                            : "overflow-hidden"
-                        )}
-                      >
-                        <div className="node-modal-template-column">
-                          {Object.keys(data.node.template)
-                            .filter(
-                              (t) =>
-                                t.charAt(0) !== "_" &&
-                                data.node.template[t].advanced &&
-                                data.node.template[t].show
-                            )
-                            .map((t: string, idx) => {
-                              return (
-                                <ModalField
-                                  key={idx}
-                                  data={data}
-                                  title={
-                                    data.node.template[t].display_name
-                                      ? data.node.template[t].display_name
-                                      : data.node.template[t].name
-                                      ? toTitleCase(data.node.template[t].name)
-                                      : toTitleCase(t)
-                                  }
-                                  required={data.node.template[t].required}
-                                  id={
-                                    data.node.template[t].type +
-                                    "|" +
-                                    t +
-                                    "|" +
-                                    data.id
-                                  }
-                                  name={t}
-                                  type={data.node.template[t].type}
-                                  index={idx}
-                                />
-                              );
-                            })}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="node-modal-button-box">
-                    <button
-                      type="button"
-                      className="node-modal-button"
-                      onClick={() => {
-                        setModalOpen(false);
-                      }}
-                    >
-                      Done
-                    </button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}

src/frontend/src/types/components/index.ts

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode } from "react";
 import { APIClassType } from "../api";
 import { FlowStyleType, NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
+import { BlobOptions } from "buffer";
 
 export type InputComponentType = {
   value: string;
@@ -463,3 +464,16 @@ export type chatInputType = {
   sendMessage: () => void;
   setChatValue: (value: string) => void;
 };
+
+export type editNodeToggleType = {
+  advanced: boolean;
+  info: string;
+  list: boolean;
+  multiline: boolean;
+  name: string;
+  password: boolean;
+  placeholder: string;
+  required: boolean;
+  show: boolean;
+  type: string;
+};