feat(ui): improve the display of unregistered workflow nodes

ui/src/components/workflow/designer/Designer.tsx

@@ -20,8 +20,8 @@ import { isTouchSupported } from "@/utils/browser";
 import { DegisnerContextProvider } from "./_context";
 import { getAllElements } from "./elements";
 import NodeRender from "./NodeRender";
-import { getAllNodeRegistries } from "./nodes";
-import { BranchNode } from "./nodes/_shared";
+import { getAllNodeRegistries, isNodeTypeRegistered } from "./nodes";
+import { BaseNode } from "./nodes/_shared";
 import "./flowgram.css";
 
 export interface DesignerProps {
@@ -110,7 +110,7 @@ const Designer = forwardRef<DesignerInstance, DesignerProps>(
               defaultExpanded: true,
             },
             formMeta: {
-              render: () => <BranchNode description={type} />,
+              render: () => <BaseNode description={type} />,
             },
           };
         },
@@ -195,6 +195,12 @@ const Designer = forwardRef<DesignerInstance, DesignerProps>(
           if (typeof node === "string") {
             node = flowgramEditorRef.current!.document.getNode(node)!;
           }
+          if (!node) {
+            return Promise.reject(`Node '${node}' not found`);
+          }
+          if (!isNodeTypeRegistered(node.type)) {
+            return Promise.reject(`Node type '${node.type}' is not registered`);
+          }
 
           const form = node.form;
           return form ? form.validate().then((res) => res && !form.state.invalid) : Promise.resolve(true);

ui/src/components/workflow/designer/nodes/NodeRegistries.ts

@@ -0,0 +1,35 @@
+import { type FlowNodeType } from "@flowgram.ai/fixed-layout-editor";
+
+import { BizApplyNodeRegistry } from "./BizApplyNodeRegistry";
+import { BizDeployNodeRegistry } from "./BizDeployNodeRegistry";
+import { BizMonitorNodeRegistry } from "./BizMonitorNodeRegistry";
+import { BizNotifyNodeRegistry } from "./BizNotifyNodeRegistry";
+import { BizUploadNodeRegistry } from "./BizUploadNodeRegistry";
+import { BranchBlockNodeRegistry, ConditionNodeRegistry } from "./ConditionNode";
+import { DelayNodeRegistry } from "./DelayNode";
+import { EndNodeRegistry } from "./EndNode";
+import { StartNodeRegistry } from "./StartNode";
+import { CatchBlockNodeRegistry, TryCatchNodeRegistry } from "./TryCatchNode";
+
+const nodeRegistries = [
+  StartNodeRegistry,
+  EndNodeRegistry,
+  DelayNodeRegistry,
+  BizApplyNodeRegistry,
+  BizUploadNodeRegistry,
+  BizMonitorNodeRegistry,
+  BizDeployNodeRegistry,
+  BizNotifyNodeRegistry,
+  ConditionNodeRegistry,
+  BranchBlockNodeRegistry,
+  TryCatchNodeRegistry,
+  CatchBlockNodeRegistry,
+];
+
+export const getAllNodeRegistries = () => {
+  return [...nodeRegistries];
+};
+
+export const isNodeTypeRegistered = (type: FlowNodeType) => {
+  return nodeRegistries.some((registry) => registry.type === type);
+};

ui/src/components/workflow/designer/nodes/_shared.tsx

@@ -17,6 +17,7 @@ import { mergeCls } from "@/utils/css";
 import { type NodeJSON, type NodeRegistry } from "./typings";
 import { duplicateNodeJSON } from "../_util";
 import { useNodeRenderContext } from "../NodeRenderContext";
+import { isNodeTypeRegistered } from "./NodeRegistries";
 
 const useInternalRenamingInput = ({ nodeRender }: { nodeRender: NodeRenderReturnType }) => {
   const inputRef = useRef<InputRef>(null);
@@ -98,11 +99,11 @@ const InternalNodeCard = ({
 
   const isActivated = useMemo(() => nodeRenderData.activated || nodeRenderData.lineActivated, [nodeRenderData.activated, nodeRenderData.lineActivated]);
   const [isHovering, setIsHovering] = useState(false);
-  const [isNodeInvalid, setIsNodeInvalid] = useState(false);
+  const [isNodeInvalid, setIsNodeInvalid] = useState(!isNodeTypeRegistered(nodeRegistry.type));
   const isNodeDisabled = useWatchFormValueIn(nodeRender.node, "disabled");
 
   const formState = useWatchFormState(nodeRender.node);
-  useEffect(() => setIsNodeInvalid(!!formState?.invalid), [formState?.invalid]);
+  useEffect(() => setIsNodeInvalid(!isNodeTypeRegistered(nodeRegistry.type) || !!formState?.invalid), [formState?.invalid]);
 
   return (
     <Card

ui/src/components/workflow/designer/nodes/index.ts

@@ -1,29 +1,3 @@
-import { BizApplyNodeRegistry } from "./BizApplyNodeRegistry";
-import { BizDeployNodeRegistry } from "./BizDeployNodeRegistry";
-import { BizMonitorNodeRegistry } from "./BizMonitorNodeRegistry";
-import { BizNotifyNodeRegistry } from "./BizNotifyNodeRegistry";
-import { BizUploadNodeRegistry } from "./BizUploadNodeRegistry";
-import { BranchBlockNodeRegistry, ConditionNodeRegistry } from "./ConditionNode";
-import { DelayNodeRegistry } from "./DelayNode";
-import { EndNodeRegistry } from "./EndNode";
-import { StartNodeRegistry } from "./StartNode";
-import { CatchBlockNodeRegistry, TryCatchNodeRegistry } from "./TryCatchNode";
-
-export const getAllNodeRegistries = () => {
-  return [
-    StartNodeRegistry,
-    EndNodeRegistry,
-    DelayNodeRegistry,
-    BizApplyNodeRegistry,
-    BizUploadNodeRegistry,
-    BizMonitorNodeRegistry,
-    BizDeployNodeRegistry,
-    BizNotifyNodeRegistry,
-    ConditionNodeRegistry,
-    BranchBlockNodeRegistry,
-    TryCatchNodeRegistry,
-    CatchBlockNodeRegistry,
-  ];
-};
+export { getAllNodeRegistries, isNodeTypeRegistered } from "./NodeRegistries";
 
 export type * from "./typings";