diff --git a/dev-server/src/server.ts b/dev-server/src/server.ts index 529d40b8..30c260a2 100644 --- a/dev-server/src/server.ts +++ b/dev-server/src/server.ts @@ -102,9 +102,9 @@ export const runDevServer = ( } }); - app.use("/editor", express.static(editorStaticRoot)); + app.use("/", express.static(editorStaticRoot)); - app.use(["/editor", "/editor/*"], async (req, res, next) => { + app.use(["/", "/*"], async (req, res, next) => { const path = join(editorStaticRoot, "index.html"); res.sendFile(path); }); diff --git a/editor/package.json b/editor/package.json index 8ccc6a5a..7da5dac8 100644 --- a/editor/package.json +++ b/editor/package.json @@ -9,10 +9,9 @@ "license": "agpl-3.0", "proxy": "http://localhost:8484", "dependencies": { - "@blueprintjs/core": "^3.54.0", - "@blueprintjs/icons": "^4.16.0", - "@blueprintjs/popover2": "^0.3.3", - "@blueprintjs/select": "^3.19.1", + "@blueprintjs/core": "^5.0.0", + "@blueprintjs/icons": "^5.0.0", + "@blueprintjs/select": "^5.0.0", "@flyde/core": "workspace:*", "@flyde/dev-server": "workspace:*", "@flyde/flow-editor": "workspace:*", @@ -22,11 +21,9 @@ "@types/jest": "^26.0.24", "@types/lodash": "^4.14.197", "@types/node": "^12.20.55", - "@types/react": "^17.0.64", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", "@types/react-resizable": "^1.7.4", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "axios": "^0.27.2", "classnames": "^2.3.2", "cuid": "^2.1.8", @@ -36,14 +33,15 @@ "lodash": "^4.17.21", "patch-package": "^6.5.1", "query-string": "^7.1.3", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-resizable": "^1.11.1", - "react-router-dom": "^5.3.4", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-resizable": "^3.0.0", + "react-router": "^6.15.0", + "react-router-dom": "^6.15.0", "react-scripts": "5.0.0", "use-debounce": "^8.0.4", "use-error-boundary": "^2.0.6", - "use-query-params": "^1.2.3", + "use-query-params": "^2.2.0", "usehooks-ts": "^2.9.1", "web-vitals": "^1.1.2" }, @@ -54,10 +52,10 @@ "typescript": "^4.9.5" }, "scripts": { - "build": "PUBLIC_URL=/editor REACT_APP_FLYDE_MODE=production react-scripts build --debug --log --verbose", + "build": "PUBLIC_URL=/ REACT_APP_FLYDE_MODE=production react-scripts build --debug --log --verbose", "test": ":", "eject": "react-scripts eject", - "dev": "WDS_SOCKET_HOST=localhost DANGEROUSLY_DISABLE_HOST_CHECK=true FAST_REFRESH=false PUBLIC_URL=/editor REACT_APP_FLYDE_MODE=development FORCE_ENV=production react-scripts start", + "dev": "WDS_SOCKET_HOST=localhost DANGEROUSLY_DISABLE_HOST_CHECK=true FAST_REFRESH=false PUBLIC_URL=/ REACT_APP_FLYDE_MODE=development FORCE_ENV=production react-scripts start", "__publish": "npm version patch && npm publish", "start": "pnpm run dev", "postinstall": "node dependencies-patch/index.js || true" @@ -81,4 +79,4 @@ ] }, "gitHead": "5f06bd4a0f3da610e64d74c19cc84babc4557f56" -} +} \ No newline at end of file diff --git a/editor/src/index.scss b/editor/src/index.scss index 2df1551a..40b8e14c 100644 --- a/editor/src/index.scss +++ b/editor/src/index.scss @@ -3,7 +3,7 @@ @import "~@blueprintjs/core/lib/css/blueprint.css"; @import "~@blueprintjs/select/lib/css/blueprint-select.css"; @import "~@blueprintjs/icons/lib/css/blueprint-icons.css"; -@import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css"; +// @import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css"; @import "~@flyde/flow-editor/src/index.scss"; diff --git a/editor/src/index.tsx b/editor/src/index.tsx index f6f39c1b..2749b7b9 100644 --- a/editor/src/index.tsx +++ b/editor/src/index.tsx @@ -1,9 +1,10 @@ /* eslint-disable no-restricted-globals */ -import * as React from "react"; -import * as ReactDOM from "react-dom"; + +import { createRoot } from "react-dom/client"; import { FocusStyleManager } from "@blueprintjs/core"; -import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; +import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; +import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6"; import { QueryParamProvider } from "use-query-params"; @@ -16,7 +17,7 @@ import "./index.scss"; disableCookieAccessForVscode(); FocusStyleManager.onlyShowFocusOnTabs(); -const baseName = "/editor"; +const baseName = ""; export enum AppState { LOADING, @@ -26,17 +27,15 @@ export enum AppState { const RoutedApp = () => { return ( - - - - - - - + + + } /> + } /> + ); }; -ReactDOM.render(, document.getElementById("root") as HTMLElement); -// registerServiceWorker(); +const root = createRoot(document.getElementById("root") as HTMLElement); // createRoot(container!) if you use TypeScript +root.render(); diff --git a/editor/src/integrated-flow-manager/flow-loader.tsx b/editor/src/integrated-flow-manager/flow-loader.tsx index 74515381..457c975f 100644 --- a/editor/src/integrated-flow-manager/flow-loader.tsx +++ b/editor/src/integrated-flow-manager/flow-loader.tsx @@ -2,7 +2,7 @@ import { FlydeFlow, ResolvedDependenciesDefinitions } from "@flyde/core"; import { File, FolderStructure } from "@flyde/dev-server"; import React, { useCallback, useEffect, useRef } from "react"; -import { useHistory, useLocation } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; import { useQueryParam } from "use-query-params"; import { useDevServerApi } from "../api/dev-server-api"; import { Loader, PortsContext } from "@flyde/flow-editor"; // ../../common/lib/loader @@ -23,7 +23,7 @@ export const FlowLoader: React.FC = (props) => { const [executionId, setExecutionId] = React.useState("n/a"); - const history = useHistory(); + const navigate = useNavigate(); const { search } = useLocation(); const devServerClient = useDevServerApi(); @@ -31,7 +31,7 @@ export const FlowLoader: React.FC = (props) => { const ports = useRef( isEmbedded ? createVsCodePorts() - : createWebPorts({ devServerClient, history }) + : createWebPorts({ devServerClient, navigate }) ); const loadData = useCallback(async () => { diff --git a/editor/src/integrated-flow-manager/side-menu/FoldersSection/index.tsx b/editor/src/integrated-flow-manager/side-menu/FoldersSection/index.tsx index e87534a6..c0a71d26 100644 --- a/editor/src/integrated-flow-manager/side-menu/FoldersSection/index.tsx +++ b/editor/src/integrated-flow-manager/side-menu/FoldersSection/index.tsx @@ -1,10 +1,7 @@ import { Classes, Collapse, - ContextMenu, - ITreeNode, - Menu, - MenuItem, + TreeNodeInfo, Tree, TreeEventHandler, } from "@blueprintjs/core"; @@ -15,8 +12,7 @@ import "./styles.scss"; import { FolderStructure, FileOrFolder } from "@flyde/dev-server"; import { useDevServerApi } from "../../../api/dev-server-api"; import { Loader } from "@flyde/flow-editor"; // ../../../../common/lib/loader -import { toastMsg } from "@flyde/flow-editor"; // ../../../../common/toaster -import { useHistory } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { NewFlowModal } from "./NewFlowModal/NewFlowModal"; import { BaseNode, @@ -41,7 +37,7 @@ const toTreeNode = ( fileOrFolder: FileOrFolder, expanded: Set, selected: Set -): ITreeNode => { +): TreeNodeInfo => { const base = { label: fileOrFolder.name, id: fileOrFolder.relativePath, @@ -90,7 +86,7 @@ export const FoldersSection: React.FC = (props) => { [foldersExpanded] ); - const history = useHistory(); + const navigate = useNavigate(); useEffect(() => { devClient.fileStructure().then(setStructure); @@ -112,9 +108,9 @@ export const FoldersSection: React.FC = (props) => { [] ); - const onCreateFlowHere = (data: FileOrFolder) => { - setNewFlowTarget(data.relativePath); - }; + // const onCreateFlowHere = (data: FileOrFolder) => { + // setNewFlowTarget(data.relativePath); + // }; const onNodeContextMenu: TreeEventHandler = React.useCallback( (node, _, e) => { @@ -126,38 +122,38 @@ export const FoldersSection: React.FC = (props) => { e.preventDefault(); - if (data.isFolder) { - const menu = ( - - onCreateFlowHere(data)} - // onClick={preventDefaultAnd(() => onAddIoPin("input"))} - // disabled={!nodeIoEditable} - /> - - ); - ContextMenu.show(menu, { left: e.pageX, top: e.pageY }); - } else { - const menu = ( - - toastMsg("Bob " + data?.fullPath)} - // onClick={preventDefaultAnd(() => onAddIoPin("input"))} - // disabled={!nodeIoEditable} - /> - toastMsg("Bob " + data?.fullPath)} - // onClick={preventDefaultAnd(() => onAddIoPin("input"))} - // disabled={!nodeIoEditable} - /> - - ); - ContextMenu.show(menu, { left: e.pageX, top: e.pageY }); - } + // if (data.isFolder) { + // const menu = ( + // + // onCreateFlowHere(data)} + // // onClick={preventDefaultAnd(() => onAddIoPin("input"))} + // // disabled={!nodeIoEditable} + // /> + // + // ); + // ContextMenu.show(menu, { left: e.pageX, top: e.pageY }); + // } else { + // const menu = ( + // + // toastMsg("Bob " + data?.fullPath)} + // // onClick={preventDefaultAnd(() => onAddIoPin("input"))} + // // disabled={!nodeIoEditable} + // /> + // toastMsg("Bob " + data?.fullPath)} + // // onClick={preventDefaultAnd(() => onAddIoPin("input"))} + // // disabled={!nodeIoEditable} + // /> + // + // ); + // ContextMenu.show(menu, { left: e.pageX, top: e.pageY }); + // } }, [] ); @@ -166,10 +162,10 @@ export const FoldersSection: React.FC = (props) => { (node) => { const data = node.nodeData; if (data && !data.isFolder && data.isFlyde) { - history.push(`/files?fileName=${data.relativePath}`); + navigate(`/files?fileName=${data.relativePath}`); } }, - [history] + [navigate] ); const onCreateFlow = useCallback( @@ -187,9 +183,9 @@ export const FoldersSection: React.FC = (props) => { }; devClient.saveFile(path, flow); - history.push(`/files?fileName=${path}`); + navigate(`/files?fileName=${path}`); }, - [devClient, newFlowTarget, history] + [devClient, newFlowTarget, navigate] ); if (!structure) { diff --git a/editor/src/integrated-flow-manager/side-menu/add-section/index.tsx b/editor/src/integrated-flow-manager/side-menu/add-section/index.tsx index c1cf94ff..2c6a30bc 100644 --- a/editor/src/integrated-flow-manager/side-menu/add-section/index.tsx +++ b/editor/src/integrated-flow-manager/side-menu/add-section/index.tsx @@ -19,7 +19,7 @@ export const MenuAddSection: React.FC = (props) => { return k.toLowerCase().includes(debouncedSearch.toLowerCase()); }); - const onSearchChange = useCallback((e) => { + const onSearchChange = useCallback((e: any) => { setSearchTerm(e.target.value); }, []); diff --git a/editor/src/web-ports.ts b/editor/src/web-ports.ts index 8f2b1110..763e819b 100644 --- a/editor/src/web-ports.ts +++ b/editor/src/web-ports.ts @@ -1,15 +1,15 @@ import { DevServerClient } from "@flyde/dev-server"; import { EditorPorts, toastMsg } from "@flyde/flow-editor"; -import { useHistory } from "react-router"; +import { useNavigate } from "react-router-dom"; export type WebPortsConfig = { devServerClient: DevServerClient; - history: ReturnType; + navigate: ReturnType; }; export const createWebPorts = ({ devServerClient, - history, + navigate, }: WebPortsConfig): EditorPorts => { return { prompt: async ({ text, defaultValue }) => { @@ -19,11 +19,11 @@ export const createWebPorts = ({ return confirm(text); }, openFile: async ({ absPath }) => { - const params = new URLSearchParams(history.location.search); + const params = new URLSearchParams(location.search); params.set("fileName", absPath); const newUrl = decodeURIComponent(`${location.pathname}?${params}`); toastMsg(newUrl); - history.push(newUrl); + navigate(newUrl); }, readFlow: async ({ absPath }) => { return devServerClient.readFile(absPath); diff --git a/flow-editor/package.json b/flow-editor/package.json index 74d565f9..e0ada583 100644 --- a/flow-editor/package.json +++ b/flow-editor/package.json @@ -15,9 +15,8 @@ "author": "", "license": "agpl-3.0", "dependencies": { - "@blueprintjs/core": "^3.54.0", - "@blueprintjs/popover2": "^0.3.3", - "@blueprintjs/select": "^3.19.1", + "@blueprintjs/core": "^5.0.0", + "@blueprintjs/select": "^5.0.1", "@flyde/core": "workspace:*", "@flyde/dev-server": "workspace:*", "@flyde/remote-debugger": "workspace:*", @@ -31,8 +30,7 @@ "@types/jest": "^26.0.24", "@types/lodash": "^4.14.197", "@types/node": "^12.20.55", - "@types/react-resizable": "^1.7.4", - "@types/react-router-dom": "^5.3.3", + "@types/react-resizable": "^3.0.0", "classnames": "^2.3.2", "cuid": "^3.0.0", "handlebars": "^4.7.8", @@ -40,14 +38,9 @@ "immer": "^4.0.2", "lodash": "^4.17.21", "moment": "^2.29.4", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-draggable": "^3.3.2", + "react-draggable": "^4.4.5", "react-json-view": "^1.21.3", - "react-loaders": "^3.0.1", - "react-resizable": "^1.11.1", - "react-router-dom": "^5.3.4", - "react-tooltip": "^4.5.1", + "react-resizable": "^3.0.5", "rooks": "^7.14.1", "typescript": "^4.9.5", "use-debounce": "^8.0.4", @@ -55,22 +48,22 @@ }, "devDependencies": { "@types/mocha": "^10.0.1", - "@types/react": "^17.0.64", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", "chai": "^4.3.7", "mocha": "^10.2.0", "patch-package": "^6.5.1", "postinstall-postinstall": "^2.1.0", - "react": "^17.0.0", - "react-dom": "^17.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "sinon": "^14.0.2", "ts-node-dev": "^2.0.0" }, "peerDependencies": { - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - "react": "^17.0.0", - "react-dom": "^17.0.0" + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "gitHead": "5f06bd4a0f3da610e64d74c19cc84babc4557f56" -} +} \ No newline at end of file diff --git a/flow-editor/src/flow-editor/DataInspectionModal/DataInspectionModal.tsx b/flow-editor/src/flow-editor/DataInspectionModal/DataInspectionModal.tsx index c78a2e71..30b751f0 100644 --- a/flow-editor/src/flow-editor/DataInspectionModal/DataInspectionModal.tsx +++ b/flow-editor/src/flow-editor/DataInspectionModal/DataInspectionModal.tsx @@ -169,7 +169,7 @@ export const DataInspectionModal: React.FC = ( ) : null} = React.memo( React.forwardRef((props, visualEditorRef) => { const { state, onChangeEditorState } = props; diff --git a/flow-editor/src/flow-editor/getNodeDef.ts b/flow-editor/src/flow-editor/getNodeDef.ts new file mode 100644 index 00000000..2b952327 --- /dev/null +++ b/flow-editor/src/flow-editor/getNodeDef.ts @@ -0,0 +1,16 @@ +import { NodeDefinition, getNodeDef } from "@flyde/core"; + +export const loadingDef: NodeDefinition = { + id: "Loading", + inputs: {}, + outputs: {}, +}; + +export const safelyGetNodeDef: typeof getNodeDef = (idOrIns, resolved) => { + try { + return getNodeDef(idOrIns, resolved); + } catch (e) { + // console.error(e); + return loadingDef; + } +}; diff --git a/flow-editor/src/flow-editor/inline-code-modal/InlineCodeModal.tsx b/flow-editor/src/flow-editor/inline-code-modal/InlineCodeModal.tsx index 0b9ae8f3..aa334928 100644 --- a/flow-editor/src/flow-editor/inline-code-modal/InlineCodeModal.tsx +++ b/flow-editor/src/flow-editor/inline-code-modal/InlineCodeModal.tsx @@ -3,6 +3,9 @@ import * as React from "react"; // ; import Editor, { OnMount } from "@monaco-editor/react"; + +// import Editor from "@monaco-editor/react"; + import { Button, Callout, @@ -17,7 +20,7 @@ import { import classNames from "classnames"; import { getVariables } from "./inline-code-to-node"; import { InlineValueNodeType, ExecuteEnv, isDefined } from "@flyde/core"; -import { Tooltip2 } from "@blueprintjs/popover2"; +import { Tooltip } from "@blueprintjs/core"; export type InlineCodeModalProps = { initialValue?: string; @@ -153,9 +156,9 @@ export const InlineCodeModal: React.FC = React.memo( labelElement={ Value{" "} - + - + } value={InlineValueNodeType.VALUE} @@ -164,9 +167,9 @@ export const InlineCodeModal: React.FC = React.memo( labelElement={ Function{" "} - + - + } value={InlineValueNodeType.FUNCTION} @@ -184,9 +187,9 @@ export const InlineCodeModal: React.FC = React.memo( Input pins detected:{" "} {vars.length ? vars.map((v) => {v}) : "None"} - + - +
diff --git a/flow-editor/src/index.scss b/flow-editor/src/index.scss index a4bba913..a2c3014b 100644 --- a/flow-editor/src/index.scss +++ b/flow-editor/src/index.scss @@ -3,7 +3,7 @@ @import "~@blueprintjs/core/lib/css/blueprint.css"; @import "~@blueprintjs/select/lib/css/blueprint-select.css"; @import "~@blueprintjs/icons/lib/css/blueprint-icons.css"; -@import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css"; +// @import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css"; @import "./flow-editor/style.scss"; @import "./visual-node-editor/style.scss"; @@ -22,9 +22,9 @@ body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23ffffff' fill-opacity='0.91'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } -.bp3-button, -.bp3-control, -.bp3-input { +.bp5-button, +.bp5-control, +.bp5-input { font-family: Nunito, sans-serif; } diff --git a/flow-editor/src/lib/InfoTooltip.tsx b/flow-editor/src/lib/InfoTooltip.tsx index d095365d..13080c17 100644 --- a/flow-editor/src/lib/InfoTooltip.tsx +++ b/flow-editor/src/lib/InfoTooltip.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Icon } from "@blueprintjs/core"; -import { Tooltip2 } from "@blueprintjs/popover2"; +import { Tooltip } from "@blueprintjs/core"; export interface InfoTooltipProps { content: string; @@ -10,8 +10,8 @@ export interface InfoTooltipProps { export const InfoTooltip: React.FC = (props) => { const { content } = props; return ( - + - + ); }; diff --git a/flow-editor/src/lib/loader.tsx b/flow-editor/src/lib/loader.tsx index d479cdfc..83e07f63 100644 --- a/flow-editor/src/lib/loader.tsx +++ b/flow-editor/src/lib/loader.tsx @@ -1,5 +1,30 @@ -import { default as ReactLoader } from "react-loaders"; - export const Loader = () => { - return ; + // + return ( +
+ + + + + + + + + + +
+ ); }; diff --git a/flow-editor/src/lib/tooltip.tsx b/flow-editor/src/lib/tooltip.tsx deleted file mode 100644 index 53274053..00000000 --- a/flow-editor/src/lib/tooltip.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useEffect, useRef } from "react"; -import ReactDOM from "react-dom"; -import { TooltipProps, default as ReactTooltip } from "react-tooltip"; - -// Wrapper component to portal react-tooltips -function BodyPortal({ children, domNode }: any) { - return ReactDOM.createPortal(children, domNode); -} - -// Custom tooltip wrapper to ensure all tooltips get rendered into the portal -export const CustomReactTooltip: React.FC = (props) => { - const domNode = useRef(); - - useEffect(() => { - domNode.current = document.createElement("div"); - document.body.appendChild(domNode.current); - }, []); - return domNode.current ? ( - - - - ) : null; -}; - -export default CustomReactTooltip; diff --git a/flow-editor/src/toaster.ts b/flow-editor/src/toaster.ts index 44463556..6256a89a 100644 --- a/flow-editor/src/toaster.ts +++ b/flow-editor/src/toaster.ts @@ -1,11 +1,17 @@ -import { Intent, IToaster, Position, Toaster } from "@blueprintjs/core"; +import { + Intent, + OverlayToasterProps, + Position, + OverlayToaster, + Toaster, +} from "@blueprintjs/core"; /** Singleton toaster instance. Create separate instances for different options. */ // Toaster triggers document as a side effect, -const createToaster = (): IToaster => { +const createToaster = (): Toaster => { try { - return Toaster.create({ + return OverlayToaster.create({ className: "app-toaster", position: Position.BOTTOM_RIGHT, }); diff --git a/flow-editor/src/visual-node-editor/ActionsMenu/ActionsMenu.tsx b/flow-editor/src/visual-node-editor/ActionsMenu/ActionsMenu.tsx index 9ed150fe..668da810 100644 --- a/flow-editor/src/visual-node-editor/ActionsMenu/ActionsMenu.tsx +++ b/flow-editor/src/visual-node-editor/ActionsMenu/ActionsMenu.tsx @@ -1,5 +1,5 @@ import { Button } from "@blueprintjs/core"; -import { Tooltip2 } from "@blueprintjs/popover2"; +import { Tooltip } from "@blueprintjs/core"; import { ConnectionNode, getNodeDef, @@ -28,6 +28,7 @@ import { } from "./icons/icons"; import { PromptAIMenu } from "./PromptAIMenu"; import { RunFlowModal } from "./RunFlowModal"; +import { safelyGetNodeDef } from "../../flow-editor/getNodeDef"; export enum ActionType { AddNode = "add-node", @@ -120,7 +121,7 @@ export const ActionsMenu: React.FC = (props) => { console.error(`Could not find instance with id ${selectedInstances[0]}`); } else { try { - const node = getNodeDef(instance, resolvedNodes); + const node = safelyGetNodeDef(instance, resolvedNodes); if (isVisualNode(node)) { types.push(ActionType.UnGroup); } @@ -372,14 +373,14 @@ export const ActionButton: React.FC = (props) => { ); return (
- - +
); }; diff --git a/flow-editor/src/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenu.tsx b/flow-editor/src/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenu.tsx index 0f891c63..ac6e6ae0 100644 --- a/flow-editor/src/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenu.tsx +++ b/flow-editor/src/visual-node-editor/ActionsMenu/AddNodeMenu/AddNodeMenu.tsx @@ -5,10 +5,10 @@ import { Dialog, Icon, Intent, - ITreeNode, + TreeNodeInfo, Tree, + Tooltip, } from "@blueprintjs/core"; -import { Tooltip2 } from "@blueprintjs/popover2"; import { ImportableSource, simplePluralize } from "@flyde/core"; import classNames from "classnames"; import React, { useCallback, useEffect } from "react"; @@ -43,7 +43,7 @@ export const AddNodeMenu: React.FC = (props) => { const [importablesErrors, setImportablesErrors] = React.useState< LocalImportableResult["errors"] >([]); - const [openNodes, setOpenNodes] = React.useState>( + const [openNodes, setOpenNodes] = React.useState>( new Set() ); @@ -62,7 +62,7 @@ export const AddNodeMenu: React.FC = (props) => { React.useState(null); const onNodeExpand = useCallback( - (node: ITreeNode) => { + (node: TreeNodeInfo) => { openNodes.add(node.id); setOpenNodes(new Set(openNodes)); }, @@ -70,7 +70,7 @@ export const AddNodeMenu: React.FC = (props) => { ); const onNodeCollapse = useCallback( - (node: ITreeNode) => { + (node: TreeNodeInfo) => { openNodes.delete(node.id); setOpenNodes(new Set(openNodes)); }, @@ -202,7 +202,7 @@ export const AddNodeMenu: React.FC = (props) => { ); const onNodeClick = useCallback( - ({ nodeData }: ITreeNode) => { + ({ nodeData }: TreeNodeInfo) => { if (JSON.stringify(nodeData) === JSON.stringify(filter)) { if (nodeData.type === "external") { if (nodeData.namespace) { @@ -302,7 +302,7 @@ export const AddNodeMenu: React.FC = (props) => {