As an Operations Manager, I want to add a State node in the React Designer

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4.3.5 CE GA5, 7.4.13 DXP U1, Master
• Component/s: Workflow
• Labels:
  • 7.4-portal-ga5
  • M
  • fc_21_12
  • qa_test_mapped
• Epic Link: Kaleo Designer to React migration

As an Operations Manager, I want to add a State node so that I can create States in my workflow.

Design Deliverables

Mockup

Context 

In order to satisfy the growing needs and expectations of our users, the Workflow builder technology needs to evolve. The current technology limits us from evolving and achieving our low-code first vision. It was therefore decided that we will replace the current Kaleo Designer of Workflow built in Alloy with a new and improved Workflow Process Designer built in React and leveraging the React Flow Library.

This will allow us to not only improve the UI/UX of the feature, but also enable the company to drastically reduce the cost to maintain and develop new features in the Workflow Process Builder. Overall, this migration is key to the future goals of Workflow, the Low Code Initiative and Commerce Use Cases.

 

As part of this migration, we will be migrating the State node to react. This node is utilized to place the workflow in a particular state. This node is commonly used to insert an automated action into the workflow. The Start and End nodes are the two most common nodes. 

In this Story's scope, users should be able to:

1. View the Start and End nodes by default
2. Create a State node 
3. Delete a State node using:
   • the Delete Icon in the sidebar
   • the Delete key
4. Edit the Node Label, Node ID and Description
5. Localize the Node Label

Not in the scope:

1. Add transitions between State nodes (this will be added in LPS-140056)

Acceptance Criteria

Given that a user is defining a workflow process using the React Designer,
when a user views the storyboard, 
then the user should be able to see the Start and End nodes by default.

Given that a user is defining a workflow process using the React Designer,
when a user drags and drops a State node to to storyboard, 
then a State node should be added to the workflow.

Given that a user is defining a workflow process using the React Designer,
and a State node has been added to the workflow process,
when the user clicks on a State node,
then the user is able to delete the state node using the Delete icon in the sidebar and the Delete key.

Given that a user is defining a workflow process using the React Designer,
when a user clicks on a State node, 
then the user should be able to edit the Step Label.

Given that a user is defining a workflow process using the React Designer,
when the user adds a translation to another language, 
then the user should be able to localize the Step Label of the State node.

Definition of Done (DoD):

• All Acceptance Criteria were passed;
• Make sure that the expected automated tests were created (unit / integration / functional) and passed successfully;
• Code with peer review completed;
• Validated by QA, Product Designer and/or PM;
• No critical bug related to Story scope (ex.: similar of FP4, FP5);
• Make sure that all system documentation were updated (if necessary)
•  Make sure that it has the extensions points needed to allow GS and customers to customize the feature (If applicable)