🙏 Update workflow sidebar

next/src/components/PrimaryButton.tsx

@@ -16,7 +16,7 @@ export default function PrimaryButton({ children, onClick, icon, className }: Pr
     <Button
       onClick={onClick}
       className={clsx(
-        "group rounded-full border border-black bg-white text-black transition duration-200 ease-in-out hover:hover:bg-neutral-200 focus-visible:bg-white/90 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/30",
+        "group rounded-full border border-black bg-white text-black transition duration-300 ease-in-out hover:hover:bg-neutral-200 focus-visible:bg-white/90 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/30",
         className
       )}
     >

next/src/components/drawer/WorkflowSidebar.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 import { FaBars } from "react-icons/fa";
 import type { Edge, Node } from "reactflow";
@@ -13,7 +14,7 @@ import {
 } from "../../services/workflow/node-block-definitions";
 import type { WorkflowEdge, WorkflowNode } from "../../types/workflow";
 import WorkflowSidebarInput from "../../ui/WorkflowSidebarInput";
-import TextButton from "../TextButton";
+import PrimaryButton from "../PrimaryButton";
 
 type WorkflowControls = {
   selectedNode: Node<WorkflowNode> | undefined;
@@ -41,16 +42,32 @@ const WorkflowSidebar = ({ show, setShow, controls }: WorkflowSidebarProps) => {
 
   return (
     <Sidebar show={show} setShow={setShow} side="right">
-      <div className="text-color-primary flex h-screen flex-col gap-2">
+      <div className="text-color-primary mx-2 flex h-screen flex-col gap-2">
         <div className="flex flex-row items-center gap-1">
           <button
             className="neutral-button-primary rounded-md border-none transition-all"
             onClick={() => setShow(!show)}
           >
-            <FaBars size="15" className="z-20 m-2" />
+            <FaBars size="15" className="z-20 mr-2" />
           </button>
-          <TextButton onClick={() => setTab("inspect")}>Inspect</TextButton>
-          <TextButton onClick={() => setTab("create")}>Create</TextButton>
+          <div className="rounded-full bg-white/10 p-0.5">
+            <PrimaryButton
+              className={clsx(
+                tab != "inspect" && "border-transparent bg-white/0 text-white hover:text-black"
+              )}
+              onClick={() => setTab("inspect")}
+            >
+              Inspect
+            </PrimaryButton>
+            <PrimaryButton
+              className={clsx(
+                tab != "create" && "border-transparent bg-white/0 text-white hover:text-black"
+              )}
+              onClick={() => setTab("create")}
+            >
+              Create
+            </PrimaryButton>
+          </div>
           <div />
         </div>
         {tab === "inspect" && <InspectSection {...controls} />}
@@ -69,7 +86,11 @@ type InspectSectionProps = {
 
 const InspectSection = ({ selectedNode, updateNode, nodes, edges }: InspectSectionProps) => {
   if (selectedNode == undefined)
-    return <div>No components selected. Click on a component to select it</div>;
+    return (
+      <div className="text-sm font-light">
+        No components selected. Click on a component to select it
+      </div>
+    );
 
   const definition = getNodeBlockDefinitionFromNode(selectedNode);
 
@@ -127,7 +148,7 @@ const InspectSection = ({ selectedNode, updateNode, nodes, edges }: InspectSecti
           <div key={definition?.type + outputField.name}>
             <p>
               <span className="text-sm font-bold">{outputField.name}:</span>{" "}
-              <span className="text-sm font-thin">{outputField.type}</span>
+              <span className="text-sm">{outputField.type}</span>
             </p>
             <p className="text-sm font-thin">{outputField.description}</p>
           </div>
@@ -165,7 +186,7 @@ type NodeBlockProps = {
 const NodeBlock = ({ definition, createNode }: NodeBlockProps) => {
   return (
     <div
-      className="flex cursor-pointer flex-row gap-2 rounded-md border border-white/20 p-2 hover:bg-white/10 "
+      className="flex cursor-pointer flex-col gap-2 rounded-md border border-white/20 p-2 hover:bg-white/10 "
       onClick={() => {
         const input: Record<string, string> = {};
         for (const field of definition.input_fields) {
@@ -175,11 +196,11 @@ const NodeBlock = ({ definition, createNode }: NodeBlockProps) => {
         createNode({ input: input, type: definition.type });
       }}
     >
-      <definition.icon size={20} className="mt-1" />
-      <div>
+      <div className="flex items-center gap-2">
+        <definition.icon size={17} />
         <h3 className="font-medium">{definition.type}</h3>
-        <p className="text-sm font-thin">{definition.description}</p>
       </div>
+      <p className="text-sm font-thin">{definition.description}</p>
     </div>
   );
 };

next/src/components/workflow/Flowchart.tsx

@@ -81,9 +81,15 @@ const FlowChart: FC<FlowChartProps> = ({
       fitViewOptions={fitViewOptions}
       {...props}
     >
+      <Background
+        variant={BackgroundVariant.Lines}
+        lineWidth={1}
+        gap={80}
+        className="bg-neutral-800"
+        color="#FFFFFF10"
+      />
       {props.minimap && <MiniMap nodeStrokeWidth={3} />}
       {props.controls && <Controls />}
-      <Background variant={BackgroundVariant.Lines} lineWidth={0} />
     </ReactFlow>
   );
 };

next/src/services/workflow/node-block-definitions.ts

@@ -15,7 +15,7 @@ import type { WorkflowNode } from "../../types/workflow";
 
 const IOFieldSchema = z.object({
   name: z.string(),
-  description: z.string(),
+  description: z.string().optional(),
   type: z.enum(["string", "array", "enum"]),
   items: z.object({ type: z.string() }).optional(),
   enum: z.array(z.string()).optional(),
@@ -145,14 +145,28 @@ const IfBlockDefinition: NodeBlockDefinition = {
   image_url: "/tools/web.png",
   icon: FaCodeBranch,
   input_fields: [
+    {
+      name: "value_one",
+      type: "string",
+    },
     {
       name: "operator",
       description: "The type of equality to check for",
       type: "string",
-      enum: ["=", "!="],
+      enum: ["==", "!="],
+    },
+    {
+      name: "value_two",
+      type: "string",
+    },
+  ],
+  output_fields: [
+    {
+      name: "result",
+      description: "The result of the condition",
+      type: "string",
     },
   ],
-  output_fields: [],
 };
 
 const TriggerBlockDefinition: NodeBlockDefinition = {

platform/reworkd_platform/services/worker/execution_engine.py

@@ -11,7 +11,7 @@
     Node,
     WorkflowFull,
 )
-from reworkd_platform.schemas.workflow.blocks.conditions.ifcondition import (
+from reworkd_platform.schemas.workflow.blocks.conditions.if_condition import (
     IfCondition,
     IfOutput,
 )

platform/reworkd_platform/tests/workflow/test_if_condition.py

@@ -1,6 +1,6 @@
 import pytest
 
-from reworkd_platform.schemas.workflow.blocks.conditions.ifcondition import (
+from reworkd_platform.schemas.workflow.blocks.conditions.if_condition import (
     IfCondition,
     IfInput,
     IfOutput,

platform/reworkd_platform/web/api/workflow/blocks/web/__init__.py

@@ -2,14 +2,16 @@
 from reworkd_platform.schemas.workflow.blocks.agents.web_interaction_agent import (
     WebInteractionAgent,
 )
-from reworkd_platform.schemas.workflow.blocks.conditions.ifcondition import IfCondition
+from reworkd_platform.schemas.workflow.blocks.conditions.if_condition import IfCondition
 from reworkd_platform.schemas.workflow.blocks.manual_trigger import ManualTriggerBlock
 from reworkd_platform.schemas.workflow.blocks.slack_webhook import SlackWebhook
-from reworkd_platform.schemas.workflow.blocks.status_check import UrlStatusCheckBlock
 from reworkd_platform.schemas.workflow.blocks.summarization_webhook import (
     SummaryWebhook,
 )
 from reworkd_platform.schemas.workflow.blocks.text_input_webhook import TextInputWebhook
+from reworkd_platform.schemas.workflow.blocks.url_status_check import (
+    UrlStatusCheckBlock,
+)
 
 
 def get_block_runner(block: Block) -> Block: