Create workflow (CRUD) editor

[estambakio-sc]

Goal: create a simple schema editor (React component) which has a built-in editable JSON schema where a user can define:

1. fsm schema name - input field,
2. initial state - a dropdown input,
3. final state(s) - multiselect input,
4. transitions - create, edit and delete functionality.

Names of states are parsed from transitions object. User cannot just add a state if there is no corresponding transition which mentions this state.

Button add transition or create opens up a modal dialog with a form, where user can

• select existing from and to states or enter a new state name
• enter a name of event
• click Ok to close the modal

The component should emit new schema onChange (if schema is valid).

[estambakio-sc]

Current demo

[amourzenkov-sc]

Package viz.js can be use for FSM directed graph auto-building and visualization. See an example which works in IE 11 also.

A converter from our state machine configuration to the .dot language expected by GraphViz can be written similar to this package.

[estambakio-sc]

Current demo

States and transitions are implemented as independently editable within own editors.

TODO:

1. confirmation dialog for
   • leaving without saving changes (guards and states)
   • if transitions will be deleted when a used state is deleted (and/or maybe give a chance to replace all occurencies of deleted state with one of existing states)
2. visible and readable errors in case of trying to create existing state
3. Pass css colors via props

[estambakio-sc]

Notes for reference

[estambakio-sc]

For future reference: (possibly better) solution for workflow visualization: mxGraph

example: full editor, simpler editor

docs: one, two

Upsides: 90 degree arrows, names for vertexes and arrows, drag&drop editor.

Challenges: it's a big one and could take quite some time to get comfortable with.

[estambakio-sc]

Current demo after renaming directory.

[estambakio-sc]

Implemented, merged into master in #42

Current demo: link