Load workflow blocks from server and remove block definitions from builder

packages/builder/src/builderStore/store/workflow/Workflow.js

@@ -1,5 +1,4 @@
 import mustache from "mustache"
-import blockDefinitions from "components/workflow/WorkflowPanel/blockDefinitions"
 import { generate } from "shortid"
 
 /**
@@ -7,8 +6,9 @@ import { generate } from "shortid"
  * Workflow definitions are stored in linked lists.
  */
 export default class Workflow {
-  constructor(workflow) {
+  constructor(workflow, blockDefinitions) {
     this.workflow = workflow
+    this.blockDefinitions = blockDefinitions
   }
 
   hasTrigger() {
@@ -56,12 +56,14 @@ export default class Workflow {
 
   createUiTree() {
     if (!this.workflow.definition) return []
-    return Workflow.buildUiTree(this.workflow.definition)
+    return Workflow.buildUiTree(this.workflow.definition, this.blockDefinitions)
   }
 
-  static buildUiTree(definition) {
+  static buildUiTree(definition, blockDefinitions) {
     const steps = []
-    if (definition.trigger) steps.push(definition.trigger)
+    if (definition.trigger) {
+      steps.push(definition.trigger)
+    }
 
     return [...steps, ...definition.steps].map(step => {
       // The client side display definition for the block

packages/builder/src/builderStore/store/workflow/index.js

@@ -4,11 +4,20 @@ import Workflow from "./Workflow"
 
 const workflowActions = store => ({
   fetch: async () => {
-    const WORKFLOWS_URL = `/api/workflows`
-    const workflowResponse = await api.get(WORKFLOWS_URL)
-    const json = await workflowResponse.json()
+    const responses = await Promise.all([
+      api.get(`/api/workflows`),
+      api.get(`/api/workflows/trigger/list`),
+      api.get(`/api/workflows/action/list`),
+      api.get(`/api/workflows/logic/list`),
+    ])
+    const jsonResponses = await Promise.all(responses.map(x => x.json()))
     store.update(state => {
-      state.workflows = json
+      state.workflows = jsonResponses[0]
+      state.blockDefinitions = {
+        TRIGGER: jsonResponses[1],
+        ACTION: jsonResponses[2],
+        LOGIC: jsonResponses[3],
+      }
       return state
     })
   },
@@ -24,7 +33,10 @@ const workflowActions = store => ({
     const json = await response.json()
     store.update(state => {
       state.workflows = state.workflows.concat(json.workflow)
-      state.currentWorkflow = new Workflow(json.workflow)
+      state.currentWorkflow = new Workflow(
+        json.workflow,
+        state.blockDefinitions
+      )
       return state
     })
   },
@@ -38,7 +50,10 @@ const workflowActions = store => ({
       )
       state.workflows.splice(existingIdx, 1, json.workflow)
       state.workflows = state.workflows
-      state.currentWorkflow = new Workflow(json.workflow)
+      state.currentWorkflow = new Workflow(
+        json.workflow,
+        state.blockDefinitions
+      )
       return state
     })
   },
@@ -72,7 +87,7 @@ const workflowActions = store => ({
   },
   select: workflow => {
     store.update(state => {
-      state.currentWorkflow = new Workflow(workflow)
+      state.currentWorkflow = new Workflow(workflow, state.blockDefinitions)
       state.selectedWorkflowBlock = null
       return state
     })
@@ -96,11 +111,14 @@ const workflowActions = store => ({
 export const getWorkflowStore = () => {
   const INITIAL_WORKFLOW_STATE = {
     workflows: [],
+    blockDefinitions: {
+      TRIGGER: [],
+      ACTION: [],
+      LOGIC: [],
+    },
   }
 
   const store = writable(INITIAL_WORKFLOW_STATE)
-
   store.actions = workflowActions(store)
-
   return store
 }

packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte

@@ -1,9 +1,6 @@
 <script>
-  import { onMount } from "svelte"
-  import { backendUiStore, workflowStore } from "builderStore"
-  import WorkflowList from "../WorkflowList/WorkflowList.svelte"
+  import { workflowStore } from "builderStore"
   import WorkflowBlock from "./WorkflowBlock.svelte"
-  import blockDefinitions from "../blockDefinitions"
   import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
 
   let selectedTab = "TRIGGER"
@@ -17,7 +14,7 @@
     { value: "LOGIC", text: "Logic" },
   ]
 
-  $: definitions = Object.entries(blockDefinitions[selectedTab])
+  $: definitions = Object.entries($workflowStore.blockDefinitions[selectedTab])
   $: {
     if (
       $workflowStore.currentWorkflow.hasTrigger() &&

packages/builder/src/components/workflow/WorkflowPanel/blockDefinitions.js

@@ -1,170 +0,0 @@
-const ACTION = {
-  SET_STATE: {
-    name: "Update UI State",
-    tagline: "Update <b>{{path}}</b> to <b>{{value}}</b>",
-    icon: "ri-refresh-line",
-    description: "Update your User Interface with some data.",
-    environment: "CLIENT",
-    params: {
-      path: "string",
-      value: "longText",
-    },
-  },
-  NAVIGATE: {
-    name: "Navigate",
-    tagline: "Navigate to <b>{{url}}</b>",
-    icon: "ri-navigation-line",
-    description: "Navigate to another page.",
-    environment: "CLIENT",
-    params: {
-      url: "string",
-    },
-  },
-  SAVE_RECORD: {
-    name: "Save Record",
-    tagline: "<b>Save</b> a <b>{{record.model.name}}</b> record",
-    icon: "ri-save-3-fill",
-    description: "Save a record to your database.",
-    environment: "SERVER",
-    params: {
-      record: "record",
-    },
-    args: {
-      record: {},
-    },
-  },
-  DELETE_RECORD: {
-    description: "Delete a record from your database.",
-    icon: "ri-delete-bin-line",
-    name: "Delete Record",
-    tagline: "<b>Delete</b> a <b>{{record.model.name}}</b> record",
-    environment: "SERVER",
-    params: {
-      record: "record",
-    },
-    args: {
-      record: {},
-    },
-  },
-  // FIND_RECORD: {
-  //   description: "Find a record in your database.",
-  //   tagline: "<b>Find</b> a <b>{{record.model.name}}</b> record",
-  //   icon: "ri-search-line",
-  //   name: "Find Record",
-  //   environment: "SERVER",
-  //   params: {
-  //     record: "string",
-  //   },
-  // },
-  CREATE_USER: {
-    description: "Create a new user.",
-    tagline: "Create user <b>{{username}}</b>",
-    icon: "ri-user-add-fill",
-    name: "Create User",
-    environment: "SERVER",
-    params: {
-      username: "string",
-      password: "password",
-      accessLevelId: "accessLevel",
-    },
-  },
-  SEND_EMAIL: {
-    description: "Send an email.",
-    tagline: "Send email to <b>{{to}}</b>",
-    icon: "ri-mail-open-fill",
-    name: "Send Email",
-    environment: "SERVER",
-    params: {
-      to: "string",
-      from: "string",
-      subject: "longText",
-      text: "longText",
-    },
-  },
-}
-
-const TRIGGER = {
-  RECORD_SAVED: {
-    name: "Record Saved",
-    event: "record:save",
-    icon: "ri-save-line",
-    tagline: "Record is added to <b>{{model.name}}</b>",
-    description: "Save a record to your database.",
-    environment: "SERVER",
-    params: {
-      model: "model",
-    },
-  },
-  RECORD_DELETED: {
-    name: "Record Deleted",
-    event: "record:delete",
-    icon: "ri-delete-bin-line",
-    tagline: "Record is deleted from <b>{{model.name}}</b>",
-    description: "Fired when a record is deleted from your database.",
-    environment: "SERVER",
-    params: {
-      model: "model",
-    },
-  },
-  // CLICK: {
-  //   name: "Click",
-  //   icon: "ri-cursor-line",
-  //   tagline: "{{component}} is clicked",
-  //   description: "Trigger when you click on an element in the UI.",
-  //   environment: "CLIENT",
-  //   params: {
-  //     component: "component"
-  //   }
-  // },
-  // LOAD: {
-  //   name: "Load",
-  //   icon: "ri-loader-line",
-  //   tagline: "{{component}} is loaded",
-  //   description: "Trigger an element has finished loading.",
-  //   environment: "CLIENT",
-  //   params: {
-  //     component: "component"
-  //   }
-  // },
-  // INPUT: {
-  //   name: "Input",
-  //   icon: "ri-text",
-  //   tagline: "Text entered into {{component}",
-  //   description: "Trigger when you type into an input box.",
-  //   environment: "CLIENT",
-  //   params: {
-  //     component: "component"
-  //   }
-  // },
-}
-
-const LOGIC = {
-  FILTER: {
-    name: "Filter",
-    tagline: "{{field}} <b>{{condition}}</b> {{value}}",
-    icon: "ri-git-branch-line",
-    description: "Filter any workflows which do not meet certain conditions.",
-    environment: "CLIENT",
-    params: {
-      filter: "string",
-      condition: ["equals"],
-      value: "string",
-    },
-  },
-  DELAY: {
-    name: "Delay",
-    icon: "ri-time-fill",
-    tagline: "Delay for <b>{{time}}</b> milliseconds",
-    description: "Delay the workflow until an amount of time has passed.",
-    environment: "CLIENT",
-    params: {
-      time: "number",
-    },
-  },
-}
-
-export default {
-  ACTION,
-  TRIGGER,
-  LOGIC,
-}