From eab44909900cdb5e33a22404b1a30660f4f97c2c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 12:30:41 -0300 Subject: [PATCH 01/65] feat: Add NoteDraggableComponent to extraSidebarComponent This commit adds the NoteDraggableComponent to the extraSidebarComponent in the FlowPage. The NoteDraggableComponent allows users to drag and drop sticky note icons onto the page. When a note is dragged, its data is set as "note" in the dataTransfer object. The note has a default text value of null and a noteColor of "yellow". This component enhances the user experience by providing a convenient way to add notes to the page. --- .../sideBarNoteComponent/index.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx new file mode 100644 index 00000000000..b20ae1f7d8b --- /dev/null +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx @@ -0,0 +1,15 @@ +import IconComponent from "../../../../../components/genericIconComponent"; +export default function NoteDraggableComponent(){ + + function onDragStart( + event: React.DragEvent, + ): void { + event.dataTransfer.setData("note", JSON.stringify({text:null,noteColor:"yellow"})); + } + + return ( +
onDragStart(event)}> + +
+ ) +} \ No newline at end of file From fa2f40be9ff478f387ee2d184a9f754e357f50af Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 12:31:34 -0300 Subject: [PATCH 02/65] feat: Add NoteNode component for displaying and editing notes This commit adds the NoteNode component, which is responsible for displaying and editing notes in the FlowPage. The NoteNode component includes functionality for resizing, selecting, and editing the note text. It enhances the user experience by providing a convenient way to add and manage notes on the page. --- .../src/CustomNodes/NoteNode/index.tsx | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/frontend/src/CustomNodes/NoteNode/index.tsx diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx new file mode 100644 index 00000000000..1615c8bfd45 --- /dev/null +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -0,0 +1,66 @@ +import { useEffect, useRef, useState } from "react"; +import { NodeResizeControl } from "reactflow"; +import { cn } from "../../utils/utils"; + +function NoteNode({ data, selected }) { + const [value, setValue] = useState(data.text); + const [editable, setEditable] = useState(false); + + useEffect(() => { + if (!selected) { + setEditable(false); + } + }, [selected]); + + return ( + <> +
+ +
+
+
+ +
+
setValue(e.currentTarget.textContent)} + className={cn( + editable + ? "nocopy nopan nodelete nodrag nound cursor-text outline-none" + : "", + "h-fit w-full text-black", + )} + onBlur={() => { + data.label = value; + setEditable(false); + window!.getSelection()!.removeAllRanges(); + }} + onClick={(event) => { + if (!editable) { + event.preventDefault(); + event.stopPropagation(); + setEditable(true); + } + }} + > + {data.label} +
+
+
+ + ); +} + +export default NoteNode; \ No newline at end of file From af364300d67ab1203abb6dc8fe79d06899124e03 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 12:32:31 -0300 Subject: [PATCH 03/65] feat: Add NoteNode and NoteDraggableComponent for managing notes in FlowPage This commit adds the NoteNode component, responsible for displaying and editing notes in the FlowPage. It also introduces the NoteDraggableComponent, allowing users to drag and drop sticky note icons onto the page. These components enhance the user experience by providing a convenient way to add and manage notes on the page. --- .../components/PageComponent/index.tsx | 3 + .../extraSidebarComponent/index.tsx | 69 +++++++++++-------- src/frontend/src/utils/styleUtils.ts | 2 + 3 files changed, 45 insertions(+), 29 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 61060f93337..2584bba33ee 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -51,9 +51,11 @@ import ConnectionLineComponent from "../ConnectionLineComponent"; import SelectionMenu from "../SelectionMenuComponent"; import getRandomName from "./utils/get-random-name"; import isWrappedWithClass from "./utils/is-wrapped-with-class"; +import NoteNode from "@/CustomNodes/NoteNode"; const nodeTypes = { genericNode: GenericNode, + noteNode: NoteNode }; export default function Page({ view }: { view?: boolean }): JSX.Element { @@ -325,6 +327,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { (event: React.DragEvent) => { event.preventDefault(); if (event.dataTransfer.types.some((types) => types === "nodedata")) { + console.log(event) takeSnapshot(); // Extract the data from the drag event and parse it as a JSON object diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index b16d7cc733c..4e1ea822227 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -21,6 +21,7 @@ import ParentDisclosureComponent from "../ParentDisclosureComponent"; import SidebarDraggableComponent from "./sideBarDraggableComponent"; import { sortKeys } from "./utils"; import sensitiveSort from "./utils/sensitive-sort"; +import NoteDraggableComponent from "./sideBarNoteComponent"; export default function ExtraSidebar(): JSX.Element { const data = useTypesStore((state) => state.data); @@ -212,20 +213,30 @@ export default function ExtraSidebar(): JSX.Element { >
+
+
+
Add a Note
+
+ +
+
+
+ +
Components
+ {Object.keys(dataFilter) .sort(sortKeys) .filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x)) @@ -281,7 +292,7 @@ export default function ExtraSidebar(): JSX.Element { } official={ dataFilter[SBSectionName][SBItemName].official === - false + false ? false : true } @@ -375,33 +386,33 @@ export default function ExtraSidebar(): JSX.Element { {index === Object.keys(dataFilter).length - - PRIORITY_SIDEBAR_ORDER.length + - 1 && ( - <> - -
- {/* BUG ON THIS ICON */} - + PRIORITY_SIDEBAR_ORDER.length + + 1 && ( + <> + +
+ {/* BUG ON THIS ICON */} + - - Discover More - -
-
-
- + + Discover More + +
+
+
+ +
-
- - - )} + + + )} ) : (
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index f1607acb55f..68e0bdd3062 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -136,6 +136,7 @@ import { Sparkles, Square, SquarePen, + StickyNote, Store, SunIcon, Table, @@ -580,6 +581,7 @@ export const nodeIconsLucide: iconsType = { Command, ArrowBigUp, Dot, + StickyNote, RotateCcw, Wrench, FolderPlusIcon, From 44a3102ddce1338a19ac2ec4fb607a7c0254ff53 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 16:30:03 -0300 Subject: [PATCH 04/65] feat: Add DRAG_EVENTS_CUSTOM_TYPESS constant for custom drag event types This commit adds the DRAG_EVENTS_CUSTOM_TYPESS constant to the constants file. It defines custom drag event types for the generic node and note node components. This constant enhances the code by providing a centralized place to manage and reference the custom drag event types. --- src/frontend/src/constants/constants.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index 2b66818dbee..19fe55f027e 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -897,3 +897,7 @@ export const SHORTCUT_KEYS = ["cmd", "ctrl", "alt", "shift"]; export const SERVER_HEALTH_INTERVAL = 10000; export const REFETCH_SERVER_HEALTH_INTERVAL = 20000; +export const DRAG_EVENTS_CUSTOM_TYPESS = { + genericnode: "genericNode", + notenode: "noteNode", +}; From 401e15b00497439d770c39e8f7261ebc351ab9c7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 16:30:34 -0300 Subject: [PATCH 05/65] feat: Add support functions for custom drag event types --- src/frontend/src/utils/utils.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index b0e58ae0085..4561c047cfb 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -4,6 +4,7 @@ import clsx, { ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender"; import { + DRAG_EVENTS_CUSTOM_TYPESS, MESSAGES_TABLE_ORDER, MODAL_CLASSES, SHORTCUT_KEYS, @@ -621,3 +622,12 @@ export function addPlusSignes(array: string[]): string[] { return "+" + key; }); } + + +export function isSupportedNodeTypes(type:string) { + return Object.keys(DRAG_EVENTS_CUSTOM_TYPESS).some(key=>key===type); +} + +export function getNodeRenderType(MIMEtype:string) { + return DRAG_EVENTS_CUSTOM_TYPESS[MIMEtype]; +} From ab3a527ec51ff23638a59d6505b2ea5fc642a7b2 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 16:30:57 -0300 Subject: [PATCH 06/65] feat: Add support for custom drag event types in PageComponent This commit adds support for custom drag event types in the PageComponent of the FlowPage. It imports the necessary functions from the utils file and uses them to check if the dragged data has supported node types. This enhancement improves the drag and drop functionality by allowing only supported node types to be dropped on the page. --- .../FlowPage/components/PageComponent/index.tsx | 12 +++++++----- .../components/extraSidebarComponent/index.tsx | 2 +- .../sideBarNoteComponent/index.tsx | 10 +++++++++- src/frontend/src/stores/flowStore.ts | 2 +- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 2584bba33ee..ae8353222b7 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -52,6 +52,7 @@ import SelectionMenu from "../SelectionMenuComponent"; import getRandomName from "./utils/get-random-name"; import isWrappedWithClass from "./utils/is-wrapped-with-class"; import NoteNode from "@/CustomNodes/NoteNode"; +import { getNodeRenderType, isSupportedNodeTypes } from "@/utils/utils"; const nodeTypes = { genericNode: GenericNode, @@ -316,7 +317,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { const onDragOver = useCallback((event: React.DragEvent) => { event.preventDefault(); - if (event.dataTransfer.types.some((types) => types === "nodedata")) { + if (event.dataTransfer.types.some((types) => isSupportedNodeTypes(types))) { event.dataTransfer.dropEffect = "move"; } else { event.dataTransfer.dropEffect = "copy"; @@ -326,20 +327,21 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { const onDrop = useCallback( (event: React.DragEvent) => { event.preventDefault(); - if (event.dataTransfer.types.some((types) => types === "nodedata")) { - console.log(event) + if (event.dataTransfer.types.some((type) => isSupportedNodeTypes(type))) { takeSnapshot(); + const datakey = event.dataTransfer.types.find( type =>isSupportedNodeTypes(type)); + // Extract the data from the drag event and parse it as a JSON object const data: { type: string; node?: APIClassType } = JSON.parse( - event.dataTransfer.getData("nodedata"), + event.dataTransfer.getData(datakey!), ); const newId = getNodeId(data.type); const newNode: NodeType = { id: newId, - type: "genericNode", + type: getNodeRenderType(datakey!), position: { x: 0, y: 0 }, data: { ...data, diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 4e1ea822227..819f36a3621 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -44,7 +44,7 @@ export default function ExtraSidebar(): JSX.Element { crt.classList.add("cursor-grabbing"); document.body.appendChild(crt); event.dataTransfer.setDragImage(crt, 0, 0); - event.dataTransfer.setData("nodedata", JSON.stringify(data)); + event.dataTransfer.setData("genericNode", JSON.stringify(data)); } // Handle showing components after use search input diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx index b20ae1f7d8b..5bf6dc38527 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx @@ -1,10 +1,18 @@ +import { APIClassType } from "@/types/api"; import IconComponent from "../../../../../components/genericIconComponent"; export default function NoteDraggableComponent(){ function onDragStart( event: React.DragEvent, ): void { - event.dataTransfer.setData("note", JSON.stringify({text:null,noteColor:"yellow"})); + const noteNode :APIClassType = { + description: "", + display_name: "", + documentation: "", + template:{}, + noteColor:"yellow" + } + event.dataTransfer.setData("noteNode", JSON.stringify({node:noteNode,type:"node"})); } return ( diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index f30b3e7edd6..00c77eb294d 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -342,7 +342,7 @@ const useFlowStore = create((set, get) => ({ // Create a new node object const newNode: NodeType = { id: newId, - type: "genericNode", + type: node.type, position: { x: insidePosition.x + node.position!.x - minimumX, y: insidePosition.y + node.position!.y - minimumY, From 3b35bb7bd6024fcb41f716b1ce0502bc32a18757 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 16:31:01 -0300 Subject: [PATCH 07/65] feat: Add NoteDataType for managing note data in FlowPage --- src/frontend/src/types/flow/index.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 2f8457138f4..d73f91b5987 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -22,6 +22,13 @@ export type FlowType = { webhook?: boolean; }; +export type NoteDataType={ + showNode?: boolean; + type: string; + id: string; + content?: string; +} + export type NodeType = { id: string; type?: string; From d859cebe126cffe858f4397c681e1ded239d192c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 17:04:46 -0300 Subject: [PATCH 08/65] refactor: create new types for noteNode --- src/frontend/src/types/flow/index.ts | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index d73f91b5987..24c6d625d8f 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -22,13 +22,6 @@ export type FlowType = { webhook?: boolean; }; -export type NoteDataType={ - showNode?: boolean; - type: string; - id: string; - content?: string; -} - export type NodeType = { id: string; type?: string; @@ -37,6 +30,19 @@ export type NodeType = { selected?: boolean; }; +export interface noteClassType extends Pick { + template: { + backgroundColor: string; + [key: string]: any; + }; +} + +export interface noteDataType extends Pick { + showNode?: boolean; + type: string; + node?: noteClassType; + id: string; +} export type NodeDataType = { showNode?: boolean; type: string; From bcb75486cc25652a5838f626ce327b8f42741ffc Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 17:43:11 -0300 Subject: [PATCH 09/65] feat: Update NoteNode component to use new NoteDataType The NoteNode component in the NoteNode/index.tsx file has been updated to use the new NoteDataType for managing note data in the FlowPage. This change ensures consistency and improves the codebase. --- .../src/CustomNodes/NoteNode/index.tsx | 60 +++---------------- .../sideBarNoteComponent/index.tsx | 1 - 2 files changed, 8 insertions(+), 53 deletions(-) diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index 1615c8bfd45..b68497a9998 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -1,62 +1,18 @@ import { useEffect, useRef, useState } from "react"; import { NodeResizeControl } from "reactflow"; import { cn } from "../../utils/utils"; +import { noteDataType } from "@/types/flow"; +import IconComponent from "../../components/genericIconComponent"; +import NodeName from "../GenericNode/components/NodeName"; -function NoteNode({ data, selected }) { - const [value, setValue] = useState(data.text); - const [editable, setEditable] = useState(false); - - useEffect(() => { - if (!selected) { - setEditable(false); - } - }, [selected]); +function NoteNode({ data, selected }:{data: noteDataType, selected: boolean}) { return ( <> -
- -
-
-
- -
-
setValue(e.currentTarget.textContent)} - className={cn( - editable - ? "nocopy nopan nodelete nodrag nound cursor-text outline-none" - : "", - "h-fit w-full text-black", - )} - onBlur={() => { - data.label = value; - setEditable(false); - window!.getSelection()!.removeAllRanges(); - }} - onClick={(event) => { - if (!editable) { - event.preventDefault(); - event.stopPropagation(); - setEditable(true); - } - }} - > - {data.label} -
+
+
+ +
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx index 5bf6dc38527..286786ac2fc 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx @@ -10,7 +10,6 @@ export default function NoteDraggableComponent(){ display_name: "", documentation: "", template:{}, - noteColor:"yellow" } event.dataTransfer.setData("noteNode", JSON.stringify({node:noteNode,type:"node"})); } From edf1bc7d318df3467a24b43e146f9c814acbb667 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 18:20:41 -0300 Subject: [PATCH 10/65] node with title and description --- .../GenericNode/components/NodeName/index.tsx | 2 +- src/frontend/src/CustomNodes/NoteNode/index.tsx | 12 +++++++----- .../sideBarNoteComponent/index.tsx | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx index c33ec1e467d..7190c5394e3 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx @@ -17,7 +17,7 @@ export default function NodeName({ const [nodeName, setNodeName] = useState(display_name); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const setNode = useFlowStore((state) => state.setNode); - + console.log(display_name); useEffect(() => { if (!selected) { setInputName(false); diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index b68497a9998..c67a89bc086 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -1,19 +1,21 @@ -import { useEffect, useRef, useState } from "react"; -import { NodeResizeControl } from "reactflow"; -import { cn } from "../../utils/utils"; + import { noteDataType } from "@/types/flow"; import IconComponent from "../../components/genericIconComponent"; import NodeName from "../GenericNode/components/NodeName"; +import { Textarea } from "@/components/ui/textarea"; +import NodeDescription from "../GenericNode/components/NodeDescription"; function NoteNode({ data, selected }:{data: noteDataType, selected: boolean}) { return ( <>
-
+
- +
+
); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx index 286786ac2fc..9a0fa613280 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx @@ -11,7 +11,7 @@ export default function NoteDraggableComponent(){ documentation: "", template:{}, } - event.dataTransfer.setData("noteNode", JSON.stringify({node:noteNode,type:"node"})); + event.dataTransfer.setData("noteNode", JSON.stringify({node:noteNode,type:"note"})); } return ( From 1032be0ebff6294d17db04c30e80c475c56affb0 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 18:54:39 -0300 Subject: [PATCH 11/65] feat: Add "note" alias for StickyNote in nodeIconsLucide This commit adds the "note" alias for the StickyNote icon in the nodeIconsLucide object in the styleUtils.ts file. This alias allows for more intuitive usage of the StickyNote icon by providing an alternative name. It improves code readability and maintainability. --- src/frontend/src/utils/styleUtils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 68e0bdd3062..09730204fa5 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -582,6 +582,7 @@ export const nodeIconsLucide: iconsType = { ArrowBigUp, Dot, StickyNote, + note: StickyNote, RotateCcw, Wrench, FolderPlusIcon, From 3eba0ea75a07487731e73636d16d02d83fceec0c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 19:26:58 -0300 Subject: [PATCH 12/65] refactor: Update NodeDescription component to use emptyPlaceholder prop The NodeDescription component in the GenericNode/components/NodeDescription/index.tsx file has been updated to use the emptyPlaceholder prop. This change allows for more flexibility in customizing the placeholder text when the description is empty. It improves code reusability and enhances the user experience. --- .../GenericNode/components/NodeDescription/index.tsx | 4 +++- src/frontend/src/CustomNodes/NoteNode/index.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 81d334b1936..6f4582f2de2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -10,10 +10,12 @@ export default function NodeDescription({ description, selected, nodeId, + emptyPlaceholder="Double Click to Edit Description", }: { description?: string; selected: boolean; nodeId: string; + emptyPlaceholder?: string; }) { const [inputDescription, setInputDescription] = useState(false); const [nodeDescription, setNodeDescription] = useState(description); @@ -87,7 +89,7 @@ export default function NodeDescription({ }} > {description === "" || !description ? ( - "Double Click to Edit Description" + emptyPlaceholder ) : ( {String(description)} diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index c67a89bc086..f6574901d65 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -14,7 +14,7 @@ function NoteNode({ data, selected }:{data: noteDataType, selected: boolean}) {
-
From f744500aa3eddc7a0a65acf1cccf9635d9b595f0 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 19:27:09 -0300 Subject: [PATCH 13/65] refactor: Remove unused Textarea import in NoteNode component --- src/frontend/src/CustomNodes/NoteNode/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index f6574901d65..28ac672a6d3 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -2,7 +2,6 @@ import { noteDataType } from "@/types/flow"; import IconComponent from "../../components/genericIconComponent"; import NodeName from "../GenericNode/components/NodeName"; -import { Textarea } from "@/components/ui/textarea"; import NodeDescription from "../GenericNode/components/NodeDescription"; function NoteNode({ data, selected }:{data: noteDataType, selected: boolean}) { From 2d7a3fdc5bbb71cd0bf27d08ea27a90a76271ada Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 20 Aug 2024 19:35:47 -0300 Subject: [PATCH 14/65] add initial resize to note component --- src/frontend/src/CustomNodes/NoteNode/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index 28ac672a6d3..b885415d9b4 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -3,11 +3,14 @@ import { noteDataType } from "@/types/flow"; import IconComponent from "../../components/genericIconComponent"; import NodeName from "../GenericNode/components/NodeName"; import NodeDescription from "../GenericNode/components/NodeDescription"; +import { NodeResizer } from "reactflow"; function NoteNode({ data, selected }:{data: noteDataType, selected: boolean}) { return ( <> + +
From fba892620c4e7fb8608bdcb426e4e21a0cf2b8f6 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Tue, 20 Aug 2024 22:37:25 +0000 Subject: [PATCH 15/65] [autofix.ci] apply automated fixes --- .../components/NodeDescription/index.tsx | 2 +- .../src/CustomNodes/NoteNode/index.tsx | 41 ++++++++---- .../components/PageComponent/index.tsx | 10 +-- .../extraSidebarComponent/index.tsx | 63 ++++++++++--------- .../sideBarNoteComponent/index.tsx | 42 +++++++------ src/frontend/src/types/flow/index.ts | 6 +- src/frontend/src/utils/utils.ts | 7 +-- 7 files changed, 98 insertions(+), 73 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 6f4582f2de2..ae8aaa9e338 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -10,7 +10,7 @@ export default function NodeDescription({ description, selected, nodeId, - emptyPlaceholder="Double Click to Edit Description", + emptyPlaceholder = "Double Click to Edit Description", }: { description?: string; selected: boolean; diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index b885415d9b4..06b5c10ad14 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -1,26 +1,43 @@ - import { noteDataType } from "@/types/flow"; +import { NodeResizer } from "reactflow"; import IconComponent from "../../components/genericIconComponent"; -import NodeName from "../GenericNode/components/NodeName"; import NodeDescription from "../GenericNode/components/NodeDescription"; -import { NodeResizer } from "reactflow"; - -function NoteNode({ data, selected }:{data: noteDataType, selected: boolean}) { +import NodeName from "../GenericNode/components/NodeName"; +function NoteNode({ + data, + selected, +}: { + data: noteDataType; + selected: boolean; +}) { return ( <> - +
-
- - -
- + + +
+
); } -export default NoteNode; \ No newline at end of file +export default NoteNode; diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index ae8353222b7..ba4344751a5 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -1,7 +1,9 @@ +import NoteNode from "@/CustomNodes/NoteNode"; import LoadingComponent from "@/components/loadingComponent"; import { useGetBuildsQuery } from "@/controllers/API/queries/_builds"; import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow"; import useUploadFlow from "@/hooks/flows/use-upload-flow"; +import { getNodeRenderType, isSupportedNodeTypes } from "@/utils/utils"; import _, { cloneDeep } from "lodash"; import { KeyboardEvent, @@ -51,12 +53,10 @@ import ConnectionLineComponent from "../ConnectionLineComponent"; import SelectionMenu from "../SelectionMenuComponent"; import getRandomName from "./utils/get-random-name"; import isWrappedWithClass from "./utils/is-wrapped-with-class"; -import NoteNode from "@/CustomNodes/NoteNode"; -import { getNodeRenderType, isSupportedNodeTypes } from "@/utils/utils"; const nodeTypes = { genericNode: GenericNode, - noteNode: NoteNode + noteNode: NoteNode, }; export default function Page({ view }: { view?: boolean }): JSX.Element { @@ -330,7 +330,9 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { if (event.dataTransfer.types.some((type) => isSupportedNodeTypes(type))) { takeSnapshot(); - const datakey = event.dataTransfer.types.find( type =>isSupportedNodeTypes(type)); + const datakey = event.dataTransfer.types.find((type) => + isSupportedNodeTypes(type), + ); // Extract the data from the drag event and parse it as a JSON object const data: { type: string; node?: APIClassType } = JSON.parse( diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 819f36a3621..b6448504aa7 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -19,9 +19,9 @@ import { removeCountFromString } from "../../../../utils/utils"; import DisclosureComponent from "../DisclosureComponent"; import ParentDisclosureComponent from "../ParentDisclosureComponent"; import SidebarDraggableComponent from "./sideBarDraggableComponent"; +import NoteDraggableComponent from "./sideBarNoteComponent"; import { sortKeys } from "./utils"; import sensitiveSort from "./utils/sensitive-sort"; -import NoteDraggableComponent from "./sideBarNoteComponent"; export default function ExtraSidebar(): JSX.Element { const data = useTypesStore((state) => state.data); @@ -213,18 +213,19 @@ export default function ExtraSidebar(): JSX.Element { >
-
+
Add a Note
- +
@@ -292,7 +293,7 @@ export default function ExtraSidebar(): JSX.Element { } official={ dataFilter[SBSectionName][SBItemName].official === - false + false ? false : true } @@ -386,33 +387,33 @@ export default function ExtraSidebar(): JSX.Element { {index === Object.keys(dataFilter).length - - PRIORITY_SIDEBAR_ORDER.length + - 1 && ( - <> - -
- {/* BUG ON THIS ICON */} - + PRIORITY_SIDEBAR_ORDER.length + + 1 && ( + <> + +
+ {/* BUG ON THIS ICON */} + - - Discover More - -
-
-
- -
+ + Discover More + +
+
+
+
- - - )} +
+ + + )} ) : (
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx index 9a0fa613280..f7037befbeb 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx @@ -1,22 +1,26 @@ import { APIClassType } from "@/types/api"; import IconComponent from "../../../../../components/genericIconComponent"; -export default function NoteDraggableComponent(){ +export default function NoteDraggableComponent() { + function onDragStart(event: React.DragEvent): void { + const noteNode: APIClassType = { + description: "", + display_name: "", + documentation: "", + template: {}, + }; + event.dataTransfer.setData( + "noteNode", + JSON.stringify({ node: noteNode, type: "note" }), + ); + } - function onDragStart( - event: React.DragEvent, - ): void { - const noteNode :APIClassType = { - description: "", - display_name: "", - documentation: "", - template:{}, - } - event.dataTransfer.setData("noteNode", JSON.stringify({node:noteNode,type:"note"})); - } - - return ( -
onDragStart(event)}> - -
- ) -} \ No newline at end of file + return ( +
onDragStart(event)} + > + +
+ ); +} diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 24c6d625d8f..573ae688d9b 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -30,14 +30,16 @@ export type NodeType = { selected?: boolean; }; -export interface noteClassType extends Pick { +export interface noteClassType + extends Pick { template: { backgroundColor: string; [key: string]: any; }; } -export interface noteDataType extends Pick { +export interface noteDataType + extends Pick { showNode?: boolean; type: string; node?: noteClassType; diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 4561c047cfb..1ba82a392e8 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -623,11 +623,10 @@ export function addPlusSignes(array: string[]): string[] { }); } - -export function isSupportedNodeTypes(type:string) { - return Object.keys(DRAG_EVENTS_CUSTOM_TYPESS).some(key=>key===type); +export function isSupportedNodeTypes(type: string) { + return Object.keys(DRAG_EVENTS_CUSTOM_TYPESS).some((key) => key === type); } -export function getNodeRenderType(MIMEtype:string) { +export function getNodeRenderType(MIMEtype: string) { return DRAG_EVENTS_CUSTOM_TYPESS[MIMEtype]; } From 9059b959e5bc6a73ea8e2c66e831b8fe19cc0cbd Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Wed, 21 Aug 2024 10:24:54 -0300 Subject: [PATCH 16/65] refactor: add code validation functionality on tanstack mutation (#3469) * Added Validate endpoint * Added API Code Validate type * Added post validate code hook * Used mutation instead of API call to validate code * Removed validate code api call --- src/frontend/src/modals/codeAreaModal/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 9a6943576c1..cd29a295d8c 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -52,6 +52,7 @@ export default function CodeAreaModal({ const setErrorData = useAlertStore((state) => state.setErrorData); const [openConfirmation, setOpenConfirmation] = useState(false); const codeRef = useRef(null); + const { mutate, isPending } = usePostValidateCode(); const [error, setError] = useState<{ detail: CodeErrorDataTypeAPI; } | null>(null); From a245352267036ec64e4a8258c33ffa1623281c39 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 21 Aug 2024 12:46:15 -0300 Subject: [PATCH 17/65] refactor: Update NodeName component to use full width in GenericNode The NodeName component in the GenericNode module has been updated to use the full width of the parent container. This change ensures that the input field or tooltip for the node name occupies the entire available space, improving the visual consistency and user experience. --- .../GenericNode/components/NodeName/index.tsx | 4 +-- .../src/CustomNodes/NoteNode/index.tsx | 29 ++++++++++++------- src/frontend/src/utils/styleUtils.ts | 2 ++ 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx index 7190c5394e3..826dea383d9 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx @@ -29,7 +29,7 @@ export default function NodeName({ }, [display_name]); return inputName ? ( -
+
{ setInputName(false); @@ -58,7 +58,7 @@ export default function NodeName({ />
) : ( -
+
{ diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx index 06b5c10ad14..42fd96f0114 100644 --- a/src/frontend/src/CustomNodes/NoteNode/index.tsx +++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx @@ -3,6 +3,7 @@ import { NodeResizer } from "reactflow"; import IconComponent from "../../components/genericIconComponent"; import NodeDescription from "../GenericNode/components/NodeDescription"; import NodeName from "../GenericNode/components/NodeName"; +import { Button } from "@/components/ui/button"; function NoteNode({ data, @@ -14,20 +15,28 @@ function NoteNode({ return ( <> -
-
- - +
+
+
+ +
+ + +
+
+
Date: Wed, 21 Aug 2024 13:02:52 -0300 Subject: [PATCH 18/65] refactor: Update NodeDescription component to use full height in GenericNode The NodeDescription component in the GenericNode module has been updated to use the full height of the parent container. This change ensures that the description text area occupies the entire available space, improving the visual consistency and user experience. --- .../GenericNode/components/NodeDescription/index.tsx | 4 ++-- src/frontend/src/CustomNodes/NoteNode/index.tsx | 4 +++- src/frontend/src/style/applies.css | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index ae8aaa9e338..536b836df46 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -36,7 +36,7 @@ export default function NodeDescription({
{inputDescription ? (