refactor: improve NodeOutputField and NodeInputField components (#3235)

* remove refhtml and create new component * refactor: refactor NodeOutputField component in GenericNode * refactor: refactor NodeOutputField component in GenericNode * refactor: refactor NodeInputField component in GenericNode * refactor: remove output shortcut * [autofix.ci] apply automated fixes * refactor: remove console.log statements in NodeOutputField component * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-08-13 16:52:26 -03:00 · 2024-08-13 16:52:26 -03:00 · 62b1b88644
commit 62b1b88644
parent 120786fe38
5 changed files with 85 additions and 108 deletions
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
@ -14,6 +14,7 @@ import {
 import { scapedJSONStringfy } from "../../../../utils/reactflowUtils";
 import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
 import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
+import NodeInputInfo from "../NodeInputInfo";
 import HandleRenderComponent from "../handleRenderComponent";

 export default function NodeInputField({
@ -31,7 +32,6 @@ export default function NodeInputField({
  showNode,
 }: NodeInputFieldComponentType): JSX.Element {
  const ref = useRef<HTMLDivElement>(null);
-  const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
  const nodes = useFlowStore((state) => state.nodes);
  const edges = useFlowStore((state) => state.edges);
  const myData = useTypesStore((state) => state.data);
@ -57,19 +57,6 @@ export default function NodeInputField({

  useFetchDataOnMount(data.node!, handleNodeClass, name, postTemplateValue);

-  useEffect(() => {
-    // @ts-ignore
-    infoHtml.current = (
-      <div className="h-full w-full break-words">
-        {info.split("\n").map((line, index) => (
-          <p key={index} className="block">
-            {line}
-          </p>
-        ))}
-      </div>
-    );
-  }, [info]);
-
  useEffect(() => {
    if (optionalHandle && optionalHandle.length === 0) {
      optionalHandle = null;
@ -77,24 +64,29 @@ export default function NodeInputField({
  }, [optionalHandle]);

  const displayHandle =
-    !LANGFLOW_SUPPORTED_TYPES.has(type ?? "") || optionalHandle;
+    !LANGFLOW_SUPPORTED_TYPES.has(type ?? "") ||
+    (optionalHandle && optionalHandle.length > 0);
+
+  const Handle = (
+    <HandleRenderComponent
+      left={true}
+      nodes={nodes}
+      tooltipTitle={tooltipTitle}
+      proxy={proxy}
+      id={id}
+      title={title}
+      edges={edges}
+      myData={myData}
+      colors={colors}
+      setFilterEdge={setFilterEdge}
+      showNode={showNode}
+      testIdComplement={`${data?.type?.toLowerCase()}-${showNode ? "shownode" : "noshownode"}`}
+    />
+  );

  return !showNode ? (
    displayHandle ? (
-      <HandleRenderComponent
-        left={true}
-        nodes={nodes}
-        tooltipTitle={tooltipTitle}
-        proxy={proxy}
-        id={id}
-        title={title}
-        edges={edges}
-        myData={myData}
-        colors={colors}
-        setFilterEdge={setFilterEdge}
-        showNode={showNode}
-        testIdComplement={`${data?.type?.toLowerCase()}-noshownode`}
-      />
+      Handle
    ) : (
      <></>
    )
@ -125,7 +117,7 @@ export default function NodeInputField({
          </span>
          <div className="">
            {info !== "" && (
-              <ShadTooltip content={infoHtml.current}>
+              <ShadTooltip content={<NodeInputInfo info={info} />}>
                {/* put div to avoid bug that does not display tooltip */}
                <div className="cursor-help">
                  <IconComponent
@ -137,24 +129,8 @@ export default function NodeInputField({
            )}
          </div>
        </div>
-        {(Array.isArray(displayHandle)
-          ? displayHandle.length > 0
-          : displayHandle) && (
-          <HandleRenderComponent
-            left={true}
-            nodes={nodes}
-            tooltipTitle={tooltipTitle}
-            proxy={proxy}
-            id={id}
-            title={title}
-            edges={edges}
-            myData={myData}
-            colors={colors}
-            setFilterEdge={setFilterEdge}
-            showNode={showNode}
-            testIdComplement={`${data?.type?.toLowerCase()}-shownode`}
-          />
-        )}
+
+        {displayHandle && Handle}
        {data.node?.template[name] !== undefined && (
          <div className="mt-2 w-full">
            <ParameterRenderComponent
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputInfo/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputInfo/index.tsx
@ -0,0 +1,11 @@
+export default function NodeInputInfo({ info }: { info: string }) {
+  return (
+    <div className="h-full w-full break-words">
+      {info.split("\n").map((line, index) => (
+        <p key={index} className="block">
+          {line}
+        </p>
+      ))}
+    </div>
+  );
+}
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@ -85,12 +85,10 @@ export default function NodeOutputField({

  function handleOutputWShortcut() {
    if (!displayOutputPreview || unknownOutput) return;
-    if (isThereModal() && !openOutputModal) return;
    if (selected) {
      setOpenOutputModal((state) => !state);
    }
  }
-
  const output = useShortcutsStore((state) => state.output);
  useHotkeys(output, handleOutputWShortcut, { preventDefault });

@ -123,7 +121,7 @@ export default function NodeOutputField({
    }
  }, [disabledOutput]);

-  return !showNode ? (
+  const Handle = (
    <HandleRenderComponent
      left={false}
      nodes={nodes}
@ -135,8 +133,12 @@ export default function NodeOutputField({
      colors={colors}
      setFilterEdge={setFilterEdge}
      showNode={showNode}
-      testIdComplement={`${data?.type?.toLowerCase()}-noshownode`}
+      testIdComplement={`${data?.type?.toLowerCase()}-${showNode ? "shownode" : "noshownode"}`}
    />
+  );
+
+  return !showNode ? (
+    Handle
  ) : (
    <div
      ref={ref}
@ -161,12 +163,12 @@ export default function NodeOutputField({
              />
            </Button>
          </div>
-          <Case condition={data.node?.frozen}>
+
+          {data.node?.frozen && (
            <div className="pr-1">
              <IconComponent className="h-5 w-5 text-ice" name={"Snowflake"} />
            </div>
-          </Case>
-
+          )}
          <div className="flex gap-2">
            <span className={data.node?.frozen ? "text-ice" : ""}>
              <OutputComponent
@ -192,53 +194,40 @@ export default function NodeOutputField({
                  : "Please build the component first"
              }
            >
-              <Button
-                unstyled
+              <OutputModal
                disabled={!displayOutputPreview || unknownOutput}
-                onClick={() => setOpenOutputModal(true)}
-                data-testid={`output-inspection-${title.toLowerCase()}`}
+                nodeId={flowPoolId}
+                outputName={internalOutputName}
              >
-                {errorOutput ? (
-                  <IconComponent
-                    className={classNames("h-5 w-5 rounded-md text-status-red")}
-                    name={"X"}
-                  />
-                ) : (
-                  <IconComponent
-                    className={classNames(
-                      "h-5 w-5 rounded-md",
-                      displayOutputPreview && !unknownOutput
-                        ? "hover:text-medium-indigo"
-                        : "cursor-not-allowed text-muted-foreground",
-                    )}
-                    name={"ScanEye"}
-                  />
-                )}
-              </Button>
+                <Button
+                  unstyled
+                  disabled={!displayOutputPreview || unknownOutput}
+                  data-testid={`output-inspection-${title.toLowerCase()}`}
+                >
+                  {errorOutput ? (
+                    <IconComponent
+                      className={classNames(
+                        "h-5 w-5 rounded-md text-status-red",
+                      )}
+                      name={"X"}
+                    />
+                  ) : (
+                    <IconComponent
+                      className={classNames(
+                        "h-5 w-5 rounded-md",
+                        displayOutputPreview && !unknownOutput
+                          ? "hover:text-medium-indigo"
+                          : "cursor-not-allowed text-muted-foreground",
+                      )}
+                      name={"ScanEye"}
+                    />
+                  )}
+                </Button>
+              </OutputModal>
            </ShadTooltip>
          </div>
        </div>
-        <HandleRenderComponent
-          left={false}
-          nodes={nodes}
-          tooltipTitle={tooltipTitle}
-          id={id}
-          title={title}
-          edges={edges}
-          myData={myData}
-          colors={colors}
-          setFilterEdge={setFilterEdge}
-          showNode={showNode}
-          testIdComplement={`${data?.type?.toLowerCase()}-shownode`}
-        />
-        {openOutputModal && (
-          <OutputModal
-            open={openOutputModal}
-            nodeId={flowPoolId}
-            setOpen={setOpenOutputModal}
-            outputName={internalOutputName}
-          />
-        )}
+        {Handle}
      </>
    </div>
  );
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
@ -5,14 +5,14 @@ import BaseModal from "../../../../modals/baseModal";
 import SwitchOutputView from "./components/switchOutputView";

 export default function OutputModal({
-  open,
-  setOpen,
  nodeId,
  outputName,
+  children,
+  disabled,
 }): JSX.Element {
  const [activeTab, setActiveTab] = useState<"Outputs" | "Logs">("Outputs");
  return (
-    <BaseModal open={open} setOpen={setOpen} size="large">
+    <BaseModal disable={disabled} size="large">
      <BaseModal.Header description="Inspect the output of the component below.">
        <div className="flex items-center">
          <span className="pr-2">Component Output</span>
@ -37,13 +37,8 @@ export default function OutputModal({
          type={activeTab}
        />
      </BaseModal.Content>
-      <BaseModal.Footer>
-        <div className="flex w-full justify-end pt-2">
-          <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
-            Close
-          </Button>
-        </div>
-      </BaseModal.Footer>
+      <BaseModal.Footer close></BaseModal.Footer>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
    </BaseModal>
  );
 }
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@ -88,7 +88,8 @@ const Footer: React.FC<{
    dataTestId?: string;
    onClick?: () => void;
  };
-}> = ({ children, submit }) => {
+  close?: boolean;
+}> = ({ children, submit, close }) => {
  return (
    <div className="flex flex-shrink-0 flex-row-reverse">
      {submit ? (
@ -115,6 +116,11 @@ const Footer: React.FC<{
      ) : (
        <>{children && children}</>
      )}
+      {close && (
+        <DialogClose asChild>
+          <Button type="button">Close</Button>
+        </DialogClose>
+      )}
    </div>
  );
 };