From 0d0952cf44c47c78ab5bc07d82ff13e1adbc87fe Mon Sep 17 00:00:00 2001
From: Gideon Pinto <gideonpinto123@gmail.com>
Date: Thu, 18 Apr 2024 09:00:04 -0400
Subject: [PATCH] fix: Render context menu components in the feed tree (#1160)

---
 src/components/FeedTree/Node.tsx           | 18 +++++++++++++++++-
 src/components/NodeDetails/NodeDetails.tsx | 17 -----------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/FeedTree/Node.tsx b/src/components/FeedTree/Node.tsx
index 56a2adf3d..36e48e456 100644
--- a/src/components/FeedTree/Node.tsx
+++ b/src/components/FeedTree/Node.tsx
@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { notification } from "antd";
 import { HierarchyPointNode } from "d3-hierarchy";
 import { select } from "d3-selection";
-import { Fragment, useContext, useEffect, useRef, memo } from "react";
+import { Fragment, memo, useContext, useEffect, useRef } from "react";
 import { useDispatch } from "react-redux";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import { useTypedSelector } from "../../store/hooks";
@@ -13,7 +13,12 @@ import {
   getSelectedPlugin,
 } from "../../store/pluginInstance/actions";
 import { getPluginInstanceStatusRequest } from "../../store/resources/actions";
+import AddNodeConnect from "../AddNode/AddNode";
+import { AddNodeProvider } from "../AddNode/context";
+import AddPipeline from "../AddPipeline/AddPipeline";
 import { ThemeContext } from "../DarkTheme/useTheme";
+import DeleteNode from "../DeleteNode";
+import { PipelineProvider } from "../PipelinesCopy/context";
 import { FeedTreeScaleType } from "./Controls";
 import DropdownMenu from "./DropdownMenu";
 import TreeNodeDatum, { Datum, Point } from "./data";
@@ -245,6 +250,17 @@ const Node = (props: NodeProps) => {
 
   return (
     <Fragment>
+      <>
+        {/* Note this modals are fired from the dropdown menu in the tree*/}
+        <AddNodeProvider>
+          <AddNodeConnect />
+        </AddNodeProvider>
+        {/* Graph Node Container is missing */}
+        <DeleteNode />
+        <PipelineProvider>
+          <AddPipeline />
+        </PipelineProvider>
+      </>
       {contextHolder}
       {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
       <g
diff --git a/src/components/NodeDetails/NodeDetails.tsx b/src/components/NodeDetails/NodeDetails.tsx
index 5061a6f76..1f0db50e5 100644
--- a/src/components/NodeDetails/NodeDetails.tsx
+++ b/src/components/NodeDetails/NodeDetails.tsx
@@ -14,15 +14,10 @@ import React, { Fragment, ReactNode } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useNavigate } from "react-router";
 import { useTypedSelector } from "../../store/hooks";
-import AddNodeConnect from "../AddNode/AddNode";
-import { AddNodeProvider } from "../AddNode/context";
-import AddPipeline from "../AddPipeline/AddPipeline";
 import { SpinContainer } from "../Common";
 import { isPlVisualDataset } from "../DatasetRedirect/getDatasets";
-import DeleteNode from "../DeleteNode";
 import FeedNote from "../FeedDetails/FeedNote";
 import { CalendarAltIcon, PreviewIcon } from "../Icons";
-import { PipelineProvider } from "../PipelinesCopy/context";
 import "./NodeDetails.css";
 import PluginLog from "./PluginLog";
 import PluginTitle from "./PluginTitle";
@@ -219,18 +214,6 @@ const NodeDetails: React.FC = () => {
               </Grid>
             </ExpandableSection>
 
-            <>
-              {/* Note this modals are fired from the dropdown menu in the tree*/}
-              <AddNodeProvider>
-                <AddNodeConnect />
-              </AddNodeProvider>
-              {/* Graph Node Container is missing */}
-              <DeleteNode />
-              <PipelineProvider>
-                <AddPipeline />
-              </PipelineProvider>
-            </>
-
             {
               // Jennings: hastily adding an extra button here.
               // IMO the Node Details pane should be cleaned up.