[6.1] Implementation of graphical workflow editor feature

[Dileepadari]

Pull Request for Issue # .

Summary of Changes

• Added a Vue.js based Workflow Graph:

  • Displays an overview of the entire workflow with all stages and transitions the user has permission for.
  • Allows users with permissions to create, edit, or delete stages and transitions directly from the same page.

• View only Graph:

  • Implemented a button in the article edit page (frontend) which opens a view-only workflow graph.
  • This view-only graph enables non-admin users to see the available workflow options without edit option.

Testing Instructions

1. Workflow Graph Editor (Backend)

• Login as Administrator.

• Enable Workflows in Article Integration and navigate to the Workflows page.

• You should see a Graph button - click it.

• A Workflow Graph page should open showing all workflow details including stages and transitions.

• Verify the following:

  • Editing: If you have permissions, edit options should appear in the menu of each stage/transition.

  • Keyboard Shortcuts: Check navigation and available shortcuts (reference button at the top-right).

  • Adding Items:

    • Add a new stage/transition.
    • Add a transition by hovering over a stage -> drag from the dots to another stage.

  • Layout Changes: Drag stages to rearrange them - the layout should auto-save.

  • Zoom Controls: Test zoom in, zoom out, and fit-to-view using buttons at the bottom-right.

2. View-Only Graph (Frontend)

• Login to the frontend as a user with workflow access.
• Open the Edit Article page.
• In the Publishing tab, next to the Run Transition option, there should be a Graph button.
• Click the button - a view-only workflow graph should appear, showing all stages and transitions available to that user.

Actual result BEFORE applying this Pull Request

• No graphical representation of workflows.
• Stages and transitions must be managed individually via list views.
• No quick overview of workflow options for non-admin users in the frontend.

Expected result AFTER applying this Pull Request

• A Vue.js based workflow graph is available in the workflows with full management capabilities (depending on permissions).

• Non-admin users in the frontend can access a view-only workflow graph from the article page.

Link to documentations

Please select:

• Documentation link for docs.joomla.org: Link

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

I can see that you have tried to make this accessible and supporting screen readers and I applaud you for trying. But have you actually tested it with a screen reader as I don't think it's working as you expect. I'm not even sure if it is even realistically achievable to support screen readers in this visual presentation

[brianteeman]

In the front end view some of the keyboard shortcuts still work but they are not documented. Also you dont get the mini map at the bottom left that you do in the admin

[brianteeman]

I think there is a z-index issue on the front end as some of the lines are on top of the boxes

Admin

Site

[Dileepadari]

What are these supposed to do? I was never able to focus on them and if I unhide them the links all load the same page

Yeah I realized as it is single page, they are not necessary, removed them.

[Dileepadari]

Something weird going on when you try to open an action button with a click. It appears to work ok if the stage is not already active. But when it is active then the button does nothing
chrome_s6qYY56Wla.mp4

Thanks for pointing out, I found a small bug, will fix it soon.

[Dileepadari]

get the

We thought that the view only panel should be as minimal as possible as it has no other use case other than just viewing the connections and the flow, so we felt the mini-map is redundant, do we really need it?

[brianteeman]

get the

We thought that the view only panel should be as minimal as possible as it has no other use case other than just viewing the connections and the flow, so we felt the mini-map is redundant, do we really need it?

whatever the justification is for having it in the main admin view has not changed in the site view or article view.

[brianteeman]

Sorry I am going to back out of any further tests for this.

When I look at the Basic Workflow I dont see anything useful. For example it says there are 7 transitions but not what they are.

are they all on top of each other?

[brianteeman]

update to the last comment. Yes all the transitions are absolutely positioned in the same place. I was expecting something like this (with the correct lines as well)

[brianteeman]

Please revert the last commit updating tinymce

[brianteeman]

Thanks for fixing the transitions all being placed on top of each other

[brianteeman]

The hidden screenreader text uses "published/unpublished" but the visible text uses "enabled/disabled"