code integration discoverability tweaks (#89)

* discoverability tweaks * tweak
flydelabs · Feb 5, 2024 · 03551c1 · 03551c1
1 parent 3e10fb0
commit 03551c1
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 46 deletions.
diff --git a/flow-editor/src/visual-node-editor/AddMainPinModal/AddMainPinModal.tsx b/flow-editor/src/visual-node-editor/AddMainPinModal/AddMainPinModal.tsx
@@ -0,0 +1,81 @@
+import {
+  Button,
+  Callout,
+  Classes,
+  Dialog,
+  FormGroup,
+  Intent,
+} from "@blueprintjs/core";
+import { InfoSign } from "@blueprintjs/icons";
+import { PinType } from "@flyde/core";
+import classNames from "classnames";
+import React, { useCallback, useMemo } from "react";
+
+export interface AddMainPinModalProps {
+  type: PinType;
+  onAdd: (type: PinType, name: string) => void;
+  onClose: () => void;
+}
+
+export const AddMainPinModal: React.FC<AddMainPinModalProps> = ({
+  type,
+  onAdd,
+  onClose,
+}) => {
+  const [name, setName] = React.useState("");
+
+  const _onAdd = useCallback(() => {
+    onAdd(type, name);
+  }, [name, onAdd, type]);
+
+  const explanation = useMemo(() => {
+    const suffix = (
+      <>
+        Learn how to connect this flow with your casebase{" "}
+        <a href="https://www.flyde.dev/docs/integrate-flows">here</a>
+      </>
+    );
+    switch (type) {
+      case "input": {
+        return (
+          <Callout intent="primary" icon={<InfoSign />}>
+            Main inputs are Flyde's way of receiving external data.
+            <div>{suffix}</div>
+          </Callout>
+        );
+      }
+      case "output": {
+        <Callout intent="primary" icon={<InfoSign />}>
+          Main outputs are Flyde's way of emitting values externally.
+          <div>{suffix}</div>
+        </Callout>;
+      }
+    }
+  }, [type]);
+
+  return (
+    <Dialog isOpen={true} onClose={onClose} className="add-main-pin-modal">
+      <main className={classNames(Classes.DIALOG_BODY)} tabIndex={0}>
+        <FormGroup>
+          <label className={Classes.LABEL}>New main {type} name:</label>
+          <input
+            className={Classes.INPUT}
+            type="text"
+            placeholder="Enter name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </FormGroup>
+        {explanation}
+      </main>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={onClose}>Close</Button>
+          <Button onClick={_onAdd} intent={Intent.PRIMARY}>
+            Add
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
diff --git a/flow-editor/src/visual-node-editor/AddMainPinModal/index.tsx b/flow-editor/src/visual-node-editor/AddMainPinModal/index.tsx
@@ -0,0 +1 @@
+export * from "./AddMainPinModal";
diff --git a/flow-editor/src/visual-node-editor/HelpBubble/HelpBubble.tsx b/flow-editor/src/visual-node-editor/HelpBubble/HelpBubble.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   Classes,
   Dialog,
   H4,
@@ -17,7 +18,6 @@ import {
   HotkeysMenuData,
 } from "../../lib/react-utils/use-hotkeys";
 
-import { helpIcon } from "./icon";
 import { usePorts } from "../../flow-editor/ports";
 
 export interface HelpBubbleProps {}
@@ -44,6 +44,25 @@ type Mutable<Type> = {
   -readonly [Key in keyof Type]: Type[Key];
 };
 
+const mainDocItems = [
+  {
+    title: "Core Concepts",
+    link: "https://www.flyde.dev/docs/core-concepts/",
+  },
+  {
+    title: "Integrate With Existing Code",
+    link: "https://www.flyde.dev/docs/integrate-flows/",
+  },
+  {
+    title: "Creating Custom Nodes",
+    link: "https://www.flyde.dev/docs/custom-nodes/",
+  },
+  {
+    title: "TroubleShooting",
+    link: "https://www.flyde.dev/docs/troubleshooting/",
+  },
+];
+
 export const HelpBubble: React.FC<HelpBubbleProps> = () => {
   const [hotkeysModalOpen, setHotkeysModalOpen] = React.useState(false);
 
@@ -85,6 +104,24 @@ export const HelpBubble: React.FC<HelpBubbleProps> = () => {
 
   const menu = (
     <Menu>
+      {mainDocItems.map((item) => (
+        <MenuItem
+          key={item.title}
+          text={item.title}
+          onClick={() => {
+            reportEvent("helpMenuItem", { item: item.title });
+          }}
+          href={item.link}
+          target="_blank"
+        />
+      ))}
+      <MenuDivider />
+      <MenuItem
+        text="Discord"
+        onClick={() => reportEvent("helpMenuItem", { item: "discord" })}
+        href="https://discord.gg/x7t4tjZQP8"
+        target="_blank"
+      />
       <MenuItem
         text="Hotkeys"
         onClick={() => {
@@ -93,18 +130,11 @@ export const HelpBubble: React.FC<HelpBubbleProps> = () => {
         }}
       />
       <MenuItem
-        text="Documentation"
+        text="Full Documentation"
         onClick={() => reportEvent("helpMenuItem", { item: "documentation" })}
         href="https://www.flyde.dev/docs"
         target="_blank"
       />
-      <MenuDivider />
-      <MenuItem
-        text="Discord"
-        onClick={() => reportEvent("helpMenuItem", { item: "discord" })}
-        href="https://discord.gg/x7t4tjZQP8"
-        target="_blank"
-      />
     </Menu>
   );
   return (
@@ -114,7 +144,7 @@ export const HelpBubble: React.FC<HelpBubbleProps> = () => {
         modifiers={popperModifiers}
         onOpened={() => reportEvent("helpMenuOpen", {})}
       >
-        <div dangerouslySetInnerHTML={{ __html: helpIcon }} />
+        <Button>Help</Button>
       </Popover>
       {hotkeysModal}
     </div>

diff --git a/flow-editor/src/visual-node-editor/SelectionIndicator/SelectionIndicator.scss b/flow-editor/src/visual-node-editor/SelectionIndicator/SelectionIndicator.scss
@@ -11,6 +11,7 @@
   gap: 6px;
   font-size: 10px;
   z-index: 1;
+  user-select: none;
 
   button {
     font-size: 10px;

diff --git a/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx b/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx
@@ -126,10 +126,10 @@ import {
   SelectionIndicatorProps,
 } from "./SelectionIndicator";
 import { NodesLibrary } from "./NodesLibrary";
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { RunFlowModal } from "./RunFlowModal";
 
 import { Play } from "@blueprintjs/icons";
+import { AddMainPinModal } from "./AddMainPinModal";
 
 const MemodSlider = React.memo(Slider);
 
@@ -274,6 +274,9 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
 
       const [runModalVisible, setRunModalVisible] = useState(false);
 
+      const [addMainPinModalVisibleType, setAddMainPinModalVisibleType] =
+        useState<PinType | undefined>();
+
       const [quickAddMenuVisible, setQuickAddMenuVisible] =
         useState<QuickAddMenuData>();
 
@@ -1111,10 +1114,8 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
         []
       );
 
-      const onAddIoPin = React.useCallback(
-        async (type: PinType) => {
-          const newPinId = await _prompt("New name?");
-
+      const onAddMainPin = React.useCallback(
+        (type: PinType, newPinId: string) => {
           if (!newPinId) {
             // name selection dismissed, cancelling
             return;
@@ -1144,10 +1145,15 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
 
           onChange(newValue, functionalChange("add new io pin"));
           reportEvent("addIoPin", { type });
+          setAddMainPinModalVisibleType(undefined);
         },
-        [_prompt, node, onChange, reportEvent]
+        [node, onChange, reportEvent]
       );
 
+      const onCloseAddMainPinModal = React.useCallback(() => {
+        setAddMainPinModalVisibleType(undefined);
+      }, []);
+
       const editCompletionOutputs = React.useCallback(async () => {
         const curr = node.completionOutputs?.join(",");
         const newVal = await _prompt(`Edit completion outputs`, curr);
@@ -1688,15 +1694,26 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
         return (
           <Menu>
             <MenuItem
-              text={`New input ${maybeDisabledLabel}`}
+              text={`New main input ${maybeDisabledLabel}`}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={preventDefaultAnd(() =>
+                setAddMainPinModalVisibleType("input")
+              )}
+              disabled={!nodeIoEditable}
+            />
+            <MenuItem
               onMouseDown={(e) => e.stopPropagation()}
-              onClick={preventDefaultAnd(() => onAddIoPin("input"))}
+              text={`New main output ${maybeDisabledLabel}`}
+              onClick={preventDefaultAnd(() =>
+                setAddMainPinModalVisibleType("input")
+              )}
               disabled={!nodeIoEditable}
             />
             <MenuItem
               onMouseDown={(e) => e.stopPropagation()}
-              text={`New output ${maybeDisabledLabel}`}
-              onClick={preventDefaultAnd(() => onAddIoPin("output"))}
+              text={`Integrate with existing code (docs link)`}
+              href="https://www.flyde.dev/docs/integrate-flows/"
+              target="_blank"
               disabled={!nodeIoEditable}
             />
             <MenuItem
@@ -1742,7 +1759,6 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
         node.defaultStyle,
         onChangeDefaultStyle,
         _prompt,
-        onAddIoPin,
         editCompletionOutputs,
         editReactiveInputs,
         editNodeDescription,
@@ -2410,6 +2426,13 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
             {runModalVisible ? (
               <RunFlowModal node={node} onClose={closeRunModal} />
             ) : null}
+            {addMainPinModalVisibleType ? (
+              <AddMainPinModal
+                type={addMainPinModalVisibleType}
+                onAdd={onAddMainPin}
+                onClose={onCloseAddMainPinModal}
+              />
+            ) : null}
           </ContextMenu>
         );
       } catch (e) {

diff --git a/flow-editor/src/visual-node-editor/instance-view/InstanceView.tsx b/flow-editor/src/visual-node-editor/instance-view/InstanceView.tsx
@@ -52,6 +52,8 @@ import {
   Menu,
   MenuItem,
   Tooltip,
+  Dialog,
+  Classes,
 } from "@blueprintjs/core";
 import ReactDOM from "react-dom";
 import { NodeStyleMenu } from "./NodeStyleMenu";
@@ -682,25 +684,25 @@ export const InstanceView: React.FC<InstanceViewProps> =
       if (inlineGroupProps) {
         return (
           // ReactDOM.createPortal((<Resizable width={inlineEditorSize.w} height={inlineEditorSize.h} onResize={onResizeInline} handle={<span className='no-drag react-resizable-handle react-resizable-handle-se'/>}>
-          ReactDOM.createPortal(
-            <div
-              className="inline-group-editor-container no-drag"
-              // style={{ width: `${inlineEditorSize.w}px`, height: `${inlineEditorSize.h}px` }}
-            >
-              <header>
-                {content}{" "}
-                <button onClick={props.onCloseInlineEditor}>close</button>
-              </header>
+          <Dialog
+            isOpen={true}
+            onClose={props.onCloseInlineEditor}
+            className="inline-group-editor-container no-drag"
+            title={`Editing inline node ${content}`}
+
+            // style={{ width: `${inlineEditorSize.w}px`, height: `${inlineEditorSize.h}px` }}
+          >
+            <main className={classNames(Classes.DIALOG_BODY)} tabIndex={0}>
               <VisualNodeEditor
                 {...props.inlineGroupProps}
                 className="no-drag"
                 ref={inlineEditorRef}
               />
-            </div>,
-            inlineEditorPortalDomNode
-          )
-          // </Resizable>), inlineEditorPortalDomNode)
+            </main>
+          </Dialog>
         );
+
+        // </Resizable>), inlineEditorPortalDomNode)
       } else {
         return (
           <ContextMenu

diff --git a/flow-editor/src/visual-node-editor/instance-view/style.scss b/flow-editor/src/visual-node-editor/instance-view/style.scss
@@ -98,27 +98,18 @@ $half-of-pin-height: 16px;
     }
 
     @at-root {
-      .inline-editor-portal-root .inline-group-editor-container {
+      .inline-group-editor-container {
         // width: 400px;
         // height: 300px;
         // max-width: 600px;
 
         width: 80%;
-        height: 85%;
+        height: 85vh;
         left: 10%;
         top: 7.5%;
 
-        background: #ffffff;
-
-        box-shadow: $shadow-a;
         // position: relative;
 
-        z-index: 2;
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        overflow: hidden;
-
         > header {
           font-size: 20px;
           font-weight: 600;
@@ -129,7 +120,15 @@ $half-of-pin-height: 16px;
           z-index: 1;
         }
 
-        > .visual-node-editor {
+        > main {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          overflow: hidden;
+        }
+
+        > main > .visual-node-editor {
           flex: 1;
           display: flex;
           position: relative;