[Information Architecture] EE - Improve definition canvas structure

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.1.X, 7.2.X, Master
• Component/s: Workflow
• Labels:
  • ux_done
• Branch Version/s:
  7.2.x, 7.1.x
• Backported to Branch:
  Committed
• Priority Level: Low
• Epic Link: Workflow UX revamping
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal-ee/pull/19607

Technical Story

The definition canvas should be divided in two levels, as detailed bellow:

Level 1: tabs to switch between Diagram and Source views. They stay on the top left of the page. 

Level 2: this content will change depending on the selected tab for the previous level. They stay bellow the first level.

• The Diagram view should have the left sidebar with tabs for Nodes and Properties and the diagram canvas;
• The Source view should have the text editor only - the nodes sidebar should be removed at this view.

DOD:

1. Remove the draft history navigation from the canvas;
   1. All revision history will be accessed through the Revision History section under the info bar;
2. The labels for the first level tabs should be "Diagram" and "Source";
3. The labels for the second level under "Diagram" should be "Nodes" and "Properties";
4. The second level for the "Source" tab should provide a text + link to import and XML file "Write your definition or import an XML file" and the nodes sidebar should be removed at this view.

Product Design references:

• Invision Prototype: https://liferay.invisionapp.com/share/DMCMBZX2R#/screens/245278593
• See attached images