Angular workflow plugin

Summary:
An angular workflow consists of many steps. However, there is currently no way to add, remove, or modify existing workflow steps without editing source code. This blueprint focuses on a process that enables a more pluggable way to modify workflows. However, the process illustrated here can be generalized to other angular components.

Motivation:
We currently have a robust way to add dashboards and panels via a plugin mechanism, but nothing at a more granular level like workflows, table columns, actions, etc. This is a new process for client-side code that will allow users to do more granular and pluggable modifications.

Background:
Recently, we have a mechanism that auto collects static files in your plugin. Alternately, you can point the static collector to a directory in settings to include your own custom code. Bottom line is, you have a few options to include custom code and even override them.

Description:
Lets take a look at a real-world example in order to understand the problem. Below are the conditions:

There is a single workflow A containing 3 steps
There are two teams, red and blue, seeking to add to workflow A
They both want to do this without modifying code in trunk

So how do we address this problem? We can use angular’s dependency injection to help us! Red team just have to inject workflow A and do something to it. Blue team will also inject workflow A and do something to it. However, we end up in a race condition, because we don’t know ahead of time which team’s file is going to get picked up first.

The race condition is not really an issue if we allow each team to insert their step at a particular position and optionally specify a priority. Lets say they both want to add their custom step after Step1. All they need to do is specify the id to where they want to insert, and a priority number (which they will have to work out internally, much like how our enabled files work today).

Below is pseudo code that would address this issue.

Workflow Service
——————————
// priority is an OPTIONAL parameter
app.factory(‘workflowService’, function(){
  return {
    prepend: function(config){...}
    append: function(config){…},
    insertStep: function(stepId, config, priority){…},
    removeStep: function(stepId){…}
  };
});

Base workflow
-----------------
app.factory(‘workflowA’, function(workflowService) {
  return workflowService({
    title: ‘Workflow A',
    steps: [{ id:’’, title: ‘', templateUrl: ‘’, helpUrl: ‘’, formName: ‘’ }, ……]
  });
});

Blue Team
------------
app.factory(‘workflowA’, function(workflowA) {
  return workflowA.insertStep(’step1’, config={...}, priority=1);
});

Red Team
-----------
app.factory(‘workflowA’, function(workflowA) {
  return workflowA.insertStep(’step1’, config={...}, priority=2);
});

Final WorkflowA
-------------------
title: ‘Workflow A',
steps: [
  { id:’step1’, title: ‘', templateUrl: ‘’, helpUrl: ‘’, formName: ‘’ },
  { id:’blueteam’, title: ‘', templateUrl: ‘’, helpUrl: ‘’, formName: ‘’ },
  { id:’redteam’, title: ‘', templateUrl: ‘’, helpUrl: ‘’, formName: ‘’ },
   ……
 ]

Doc Impact:
Need documentation for this process.