feat(ui): add custom entity support

Author: a-asaad

ui/genApiFromSchema.js

@@ -10,7 +10,7 @@ import path from "node:path"
 // TODO: Use git tags instead of commit hashes
 // To use an updated source schema, change this to point to the desired version.
 
-const COMMIT_HASH = "9ccbe6e4f960451e36476572df05aa2bad375d4e"
+const COMMIT_HASH = "47b4b770e33f576da45ec1b5156d3b94d744d2ee"
 
 const SCHEMAS = ["eipComponentDef.schema.json", "eipFlow.schema.json"]
 

ui/package-lock.json

@@ -34,6 +34,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
+    "react-resizable-panels": "^3.0.4",
     "react-simple-code-editor": "^0.14.1",
     "zundo": "^2.3.0",
     "zustand": "^4.5.7"

ui/package.json

@@ -10,7 +10,7 @@ import "./styles.scss"
 
 import FlowCanvas from "./components/canvas/FlowCanvas"
 import EipConfigSidePanel from "./components/config-panel/EipConfigSidePanel"
-import NodeChooserPanel from "./components/draggable-panel/NodeChooserPanel"
+import Palette from "./components/palette/Palette"
 import OptionsMenu from "./components/options-menu/OptionsMenu"
 import ToolbarMenu from "./components/toolbar/ToolbarMenu"
 
@@ -29,7 +29,7 @@ const App = () => (
       </Column>
 
       <Column>
-        <NodeChooserPanel />
+        <Palette />
       </Column>
 
       <Column>

ui/src/App.tsx

@@ -31,6 +31,12 @@ export type AttributeType = string | number | boolean;
 export interface EipFlow {
   nodes?: EipNode[];
   edges?: FlowEdge[];
+  /**
+   * Custom entities do not appear on the flow diagram, but can be referenced by flow node attributes.
+   */
+  customEntities?: {
+    [k: string]: string;
+  };
 }
 /**
  * An instance of an 'EipComponent' as a node in the flow diagram

ui/src/api/generated/eipFlow.ts

@@ -8,4 +8,5 @@
 declare module "@carbon/themes" {
   export const interactive: string
   export const layer01: string
+  export const supportError: string
 }

ui/src/carbon-themes.d.ts

@@ -40,7 +40,7 @@ import {
   onEdgesChange,
   onNodesChange,
 } from "../../singletons/store/reactFlowActions"
-import { DragTypes } from "../draggable-panel/dragTypes"
+import { DragTypes } from "../palette/dragTypes"
 import DynamicEdge from "./DynamicEdge"
 import { EipNode, FollowerNode } from "./EipNode"
 
@@ -235,6 +235,7 @@ const FlowCanvas = () => {
             showZoom={false}
           >
             <ControlButton title="clear" onClick={clearFlow}>
+              {/* TODO: style this button as a dangerous action */}
               <TrashCan />
             </ControlButton>
           </Controls>

ui/src/components/canvas/FlowCanvas.tsx

@@ -0,0 +1,47 @@
+import { Stack } from "@carbon/react"
+import { supportError } from "@carbon/themes"
+import hljs from "highlight.js/lib/core"
+import json from "highlight.js/lib/languages/json"
+import xml from "highlight.js/lib/languages/xml"
+import Editor from "react-simple-code-editor"
+
+hljs.registerLanguage("json", json)
+hljs.registerLanguage("xml", xml)
+
+interface ModalCodeEditorProps {
+  content: string
+  setContent: (content: string) => void
+  language: "json" | "xml"
+  helperText?: string
+  invalid?: boolean
+  invalidText?: string
+}
+
+export const ModalCodeEditor = ({
+  content,
+  setContent,
+  language,
+  helperText,
+  invalid,
+  invalidText,
+}: ModalCodeEditorProps) => {
+  const errorOutline = invalid ? { outline: `2px solid ${supportError}` } : {}
+
+  return (
+    <Stack gap={3}>
+      <div className="modal__code-editor" style={errorOutline}>
+        <Editor
+          value={content}
+          onValueChange={(code) => setContent(code)}
+          highlight={(code) => hljs.highlight(code, { language }).value}
+          padding={16}
+          textareaClassName="modal__code-editor-textarea"
+        />
+      </div>
+      {invalid && <p className="modal__error-message">{invalidText}</p>}
+      {!invalid && helperText && (
+        <p className="modal__helper-text">{helperText}</p>
+      )}
+    </Stack>
+  )
+}

ui/src/components/editor/ModalCodeEditor.tsx

@@ -1,24 +1,15 @@
 import { Modal } from "@carbon/react"
 import { InlineLoadingStatus } from "@carbon/react/lib/components/InlineLoading/InlineLoading"
-import hljs from "highlight.js/lib/core"
-import json from "highlight.js/lib/languages/json"
 import { useState } from "react"
 import { createPortal } from "react-dom"
-import Editor from "react-simple-code-editor"
 import { importFlowFromJson } from "../../../singletons/store/appActions"
-
-hljs.registerLanguage("json", json)
+import { ModalCodeEditor } from "../../editor/ModalCodeEditor"
 
 interface ImportFlowModalProps {
   open: boolean
   setOpen: (open: boolean) => void
 }
 
-interface JsonEditorProps {
-  content: string
-  setContent: (content: string) => void
-}
-
 const getLoadingDescription = (status: InlineLoadingStatus) => {
   switch (status) {
     case "active":
@@ -31,20 +22,6 @@ const getLoadingDescription = (status: InlineLoadingStatus) => {
   }
 }
 
-const FlowJsonEditor = ({ content, setContent }: JsonEditorProps) => {
-  return (
-    <div className="options-modal__editor">
-      <Editor
-        value={content}
-        onValueChange={(code) => setContent(code)}
-        highlight={(code) => hljs.highlight(code, { language: "json" }).value}
-        padding={16}
-        textareaClassName="options-modal__editor-textarea"
-      />
-    </div>
-  )
-}
-
 export const ImportFlowModal = ({ open, setOpen }: ImportFlowModalProps) => {
   const [loadingStatus, setLoadingStatus] =
     useState<InlineLoadingStatus>("inactive")
@@ -84,7 +61,11 @@ export const ImportFlowModal = ({ open, setOpen }: ImportFlowModalProps) => {
       loadingDescription={getLoadingDescription(loadingStatus)}
       onRequestSubmit={doImport}
     >
-      <FlowJsonEditor content={content} setContent={updateContent} />
+      <ModalCodeEditor
+        content={content}
+        setContent={updateContent}
+        language="json"
+      />
     </Modal>,
     document.body
   )