feat: Implement the scrum feedback in the pipelines tree

FNNDSC · Apr 29, 2024 · 29b623e · 29b623e
1 parent 98d4c5c
commit 29b623e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "preval.macro": "^5.0.0",
     "query-string": "^9.0.0",
     "rc-tree": "^5.8.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-activity": "^2.1.3",
     "react-bootstrap-typeahead": "^6.2.3",
     "react-cookie": "^7.0.1",
@@ -96,8 +96,8 @@
     "@types/d3-zoom": "^1.8.2",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.11.5",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/redux-logger": "^3.0.11",
     "@types/uuid": "^9.0.6",
     "@vitejs/plugin-react-swc": "^3.5.0",

diff --git a/src/components/FeedTree/Node.tsx b/src/components/FeedTree/Node.tsx
@@ -120,7 +120,8 @@ const Node = (props: NodeProps) => {
 
   if (
     value.length > 0 &&
-    (value === data.item?.data.plugin_name || value === data.item?.data.title)
+    (data.item?.data.plugin_name?.toLowerCase().includes(value.toLowerCase()) ||
+      data.item?.data.title?.toLowerCase().includes(value.toLowerCase()))
   ) {
     statusClass = "search";
   }

diff --git a/src/components/PipelinesCopy/SelectAllCompute.tsx b/src/components/PipelinesCopy/SelectAllCompute.tsx
@@ -97,7 +97,7 @@ function SelectAllCompute({ pipeline }: OwnProps) {
         ? "List of Compute"
         : selectedItem
           ? selectedItem
-          : "Select a Compute"}
+          : "Set a Compute for the Tree"}
     </MenuToggle>
   );
 

diff --git a/src/components/PipelinesCopy/Tree.tsx b/src/components/PipelinesCopy/Tree.tsx
@@ -27,6 +27,7 @@ import {
 import useSize from "../FeedTree/useSize";
 import NodeData from "./NodeData";
 import { PipelineContext } from "./context";
+import SelectAllCompute from "./SelectAllCompute";
 
 const nodeSize = { x: 120, y: 80 };
 const scale = 1;
@@ -215,41 +216,50 @@ const Tree = (props: TreeProps) => {
         {loading ? (
           <SpinContainer title="Constructing the tree..." />
         ) : translate.x > 0 && translate.y > 0 ? (
-          <svg
-            focusable="true"
-            className={`${svgClassName}`}
-            height={height}
-            width="100%"
+          <div
+            style={{
+              display: "flex",
+            }}
           >
-            <title>Pipeline Tree</title>
-            <TransitionGroupWrapper
-              component="g"
-              className={graphClassName}
-              transform={`translate(${translate.x},${translate.y}) scale(${scale})`}
+            <svg
+              focusable="true"
+              className={`${svgClassName}`}
+              height={height}
+              width="100%"
             >
-              {links?.map((linkData, i) => {
-                return (
-                  <LinkData
-                    orientation="vertical"
-                    key={`link${i}`}
-                    linkData={linkData}
-                  />
-                );
-              })}
-              {nodes?.map(({ data, x, y, parent }, i) => {
-                return (
-                  <NodeData
-                    key={`node_${i}`}
-                    data={data}
-                    position={{ x, y }}
-                    parent={parent}
-                    orientation="vertical"
-                    currentPipelineId={currentPipeline.data.id}
-                  />
-                );
-              })}
-            </TransitionGroupWrapper>
-          </svg>
+              <title>Pipeline Tree</title>
+              <TransitionGroupWrapper
+                component="g"
+                className={graphClassName}
+                transform={`translate(${translate.x},${translate.y}) scale(${scale})`}
+              >
+                {links?.map((linkData, i) => {
+                  return (
+                    <LinkData
+                      orientation="vertical"
+                      key={`link${i}`}
+                      linkData={linkData}
+                    />
+                  );
+                })}
+                {nodes?.map(({ data, x, y, parent }, i) => {
+                  return (
+                    <NodeData
+                      key={`node_${i}`}
+                      data={data}
+                      position={{ x, y }}
+                      parent={parent}
+                      orientation="vertical"
+                      currentPipelineId={currentPipeline.data.id}
+                    />
+                  );
+                })}
+              </TransitionGroupWrapper>
+            </svg>
+            <div style={{ height: "3rem" }}>
+              <SelectAllCompute pipeline={currentPipeline} />
+            </div>
+          </div>
         ) : (
           <EmptyStateComponent />
         )}

diff --git a/src/components/PipelinesCopy/index.tsx b/src/components/PipelinesCopy/index.tsx
@@ -259,46 +259,6 @@ const PipelinesCopy = () => {
                       {description}
                     </span>
                   </div>
-                  <div style={{ display: "flex", alignItems: "center" }}>
-                    <SelectAllCompute pipeline={pipeline} />
-                    {!browseOnly && (
-                      <Button
-                        size="sm"
-                        onClick={(e) => {
-                          if (state.selectedPipeline?.[id]) {
-                            // If the pipeline already exists, don't propogate since the onChange event of the
-                            // collapse component fires and we don't refetch all the resource again. Let's assume that
-                            // the user's intent is to add the pipeline
-                            e.stopPropagation();
-                          }
-
-                          if (state?.pipelineToAdd?.data.id === id) {
-                            // If this pipeline already exists, user wants to deselect it
-                            dispatch({
-                              type: Types.PipelineToAdd,
-                              payload: {
-                                pipeline: undefined,
-                              },
-                            });
-                          } else {
-                            dispatch({
-                              type: Types.PipelineToAdd,
-                              payload: {
-                                pipeline,
-                              },
-                            });
-                          }
-                        }}
-                        variant="primary"
-                        key="select-action"
-                        style={{ marginLeft: "1em", width: "80px" }} // Set a fixed width
-                      >
-                        {pipeline.data.id === state.pipelineToAdd?.data.id
-                          ? "Selected"
-                          : "Select"}
-                      </Button>
-                    )}
-                  </div>
                 </div>
               ),
               children: (