FOUR-8527 - Visualize the Process Map

[eiresendez]

Issue & Reproduction Steps

As a user, I want to visualize the process map on the Process Request Page (Overview tab) to understand the context of my task.

1. Create a Process with multiple tasks
2. Run a new Request.
3. Go to /requests/{id} page and click the "Overview" tab.

You should be able to see the Process Map.

Solution

• Created a new route process.inflight to display a minified version of Modeler. It was simpler and safer to create a new layout, views, and resources for this use case.
  • The BPMN version is obtained based on the current request.
  • This version only displays the paper and removes sidebars, navbars, inspector, toolbar, and all related components.
  • The new component is called ModelerReadonly (see Modeler's PR).
• Formatting changes were applied using ESLint and PHP CS Fixer.

Working video:

Screen.Recording.2023-05-24.at.3.25.11.p.m.mov

How to Test

• Follow the reproduction steps of above.
• Link Modeler and Core or test using the deployed QA Server.

Related Tickets & Packages

• FOUR-8527
• FOUR-8535
• FOUR-8536
• FOUR-8537
• Modeler's PR

Code Review Checklist

• I have pulled this code locally and tested it on my instance, along with any associated packages.
• This code adheres to ProcessMaker Coding Guidelines.
• This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• This solution fixes the bug reported in the original ticket.
• This solution does not alter the expected output of a component in a way that would break existing Processes.
• This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• This ticket conforms to the PRD associated with this part of ProcessMaker.

ci:modeler:feature/FOUR-8527
ci:deploy

[gustavobascope]

When the process model is too large the overview cut it

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[gustavobascope]

The observation was fixed

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net

[pmkerberos]

QA server was successfully deployed https://ci-e77ed785c9.eng.processmaker.net