From 75642cc2d6e815a2fe68a4fd0443f21356a80313 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Sun, 19 May 2024 21:12:47 -0300
Subject: [PATCH] "Fix allowExport prop in CodeTabsComponent and ApiModal"
 (#1918)

* fix(codeTabsComponent): add allowExport prop to CodeTabsComponent to conditionally
render ExportModal component based on the prop value
feat(apiModal): pass allowExport prop to CodeTabsComponent in ApiModal view
feat(types): add allowExport prop to codeTabsPropsType in components index file

* fix bug on delete edge
---
 .../components/codeTabsComponent/index.tsx    | 63 ++++++++++---------
 .../src/modals/apiModal/views/index.tsx       |  1 +
 src/frontend/src/types/components/index.ts    |  1 +
 src/frontend/src/utils/reactflowUtils.ts      | 26 ++++----
 4 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 0b08aaccd..1d12145a5 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -54,6 +54,7 @@ export default function CodeTabsComponent({
   tweaks,
   setActiveTweaks,
   activeTweaks,
+  allowExport = false,
 }: codeTabsPropsType) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
@@ -141,39 +142,43 @@ export default function CodeTabsComponent({
         )}
 
         <div className="float-right mx-1 mb-1 mt-2 flex gap-2">
-          <div
-            className={
-              Number(activeTab) > 2
-                ? "hidden"
-                : "relative top-[2.5px] flex gap-2"
-            }
-          >
-            <Switch
-              style={{
-                transform: `scaleX(${0.7}) scaleY(${0.7})`,
-              }}
-              id="tweaks-switch"
-              onCheckedChange={setActiveTweaks}
-              autoFocus={false}
-            />
-            <Label
+          {tweaks && (
+            <div
               className={
-                "relative right-1 top-[4px] text-xs font-medium text-gray-500 dark:text-gray-300 " +
-                (activeTweaks
-                  ? "font-bold text-black dark:text-white"
-                  : "font-medium")
+                Number(activeTab) > 2
+                  ? "hidden"
+                  : "relative top-[2.5px] flex gap-2"
               }
-              htmlFor="tweaks-switch"
             >
-              Tweaks
-            </Label>
-          </div>
-          <ExportModal>
-            <div className="flex cursor-pointer items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300">
-              <IconComponent name="FileDown" className="h-4 w-4" />
-              Export Flow
+              <Switch
+                style={{
+                  transform: `scaleX(${0.7}) scaleY(${0.7})`,
+                }}
+                id="tweaks-switch"
+                onCheckedChange={setActiveTweaks}
+                autoFocus={false}
+              />
+              <Label
+                className={
+                  "relative right-1 top-[4px] text-xs font-medium text-gray-500 dark:text-gray-300 " +
+                  (activeTweaks
+                    ? "font-bold text-black dark:text-white"
+                    : "font-medium")
+                }
+                htmlFor="tweaks-switch"
+              >
+                Tweaks
+              </Label>
             </div>
-          </ExportModal>
+          )}
+          {allowExport && (
+            <ExportModal>
+              <div className="flex cursor-pointer items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300">
+                <IconComponent name="FileDown" className="h-4 w-4" />
+                Export Flow
+              </div>
+            </ExportModal>
+          )}
 
           {Number(activeTab) < 4 && (
             <>
diff --git a/src/frontend/src/modals/apiModal/views/index.tsx b/src/frontend/src/modals/apiModal/views/index.tsx
index 159c3ac69..7c24ededa 100644
--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@@ -212,6 +212,7 @@ const ApiModal = forwardRef(
             }}
             activeTweaks={activeTweaks}
             setActiveTweaks={setActiveTweaks}
+            allowExport
           />
         </BaseModal.Content>
       </BaseModal>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 6b3f9b224..cb6d95e6a 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -663,6 +663,7 @@ export type codeTabsPropsType = {
   };
   activeTweaks?: boolean;
   setActiveTweaks?: (value: boolean) => void;
+  allowExport?: boolean;
 };
 
 export type crashComponentPropsType = {
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 65a85960b..d37676ff4 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -740,28 +740,30 @@ export function validateSelection(
   selection: OnSelectionChangeParams,
   edges: Edge[],
 ): Array<string> {
+  const clonedSelection = cloneDeep(selection);
+  const clonedEdges = cloneDeep(edges);
   //add edges to selection if selection mode selected only nodes
-  if (selection.edges.length === 0) {
-    selection.edges = edges;
+  if (clonedSelection.edges.length === 0) {
+    clonedSelection.edges = clonedEdges;
   }
 
   // get only edges that are connected to the nodes in the selection
   // first creates a set of all the nodes ids
-  let nodesSet = new Set(selection.nodes.map((n) => n.id));
+  let nodesSet = new Set(clonedSelection.nodes.map((n) => n.id));
   // then filter the edges that are connected to the nodes in the set
-  let connectedEdges = selection.edges.filter(
+  let connectedEdges = clonedSelection.edges.filter(
     (e) => nodesSet.has(e.source) && nodesSet.has(e.target),
   );
   // add the edges to the selection
-  selection.edges = connectedEdges;
+  clonedSelection.edges = connectedEdges;
 
   let errorsArray: Array<string> = [];
   // check if there is more than one node
-  if (selection.nodes.length < 2) {
+  if (clonedSelection.nodes.length < 2) {
     errorsArray.push("Please select more than one node");
   }
   if (
-    selection.nodes.some(
+    clonedSelection.nodes.some(
       (node) =>
         isInputNode(node.data as NodeDataType) ||
         isOutputNode(node.data as NodeDataType),
@@ -773,8 +775,8 @@ export function validateSelection(
   }
   //check if there are two or more nodes with free outputs
   if (
-    selection.nodes.filter(
-      (n) => !selection.edges.some((e) => e.source === n.id),
+    clonedSelection.nodes.filter(
+      (n) => !clonedSelection.edges.some((e) => e.source === n.id),
     ).length > 1
   ) {
     errorsArray.push("Please select only one node with free outputs");
@@ -782,10 +784,10 @@ export function validateSelection(
 
   // check if there is any node that does not have any connection
   if (
-    selection.nodes.some(
+    clonedSelection.nodes.some(
       (node) =>
-        !selection.edges.some((edge) => edge.target === node.id) &&
-        !selection.edges.some((edge) => edge.source === node.id),
+        !clonedSelection.edges.some((edge) => edge.target === node.id) &&
+        !clonedSelection.edges.some((edge) => edge.source === node.id),
     )
   ) {
     errorsArray.push("Please select only nodes that are connected");