[#46021] - [6.1] Implementation of graphical workflow editor feature
- Pending
- Medium
- Build: 6.1-dev
- Draft PR
- # 46021
- Diff
- Dileepadari:6.1-dev
User tests: Successful: Unsuccessful:
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
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | SQL Administration com_admin Postgresql com_content com_workflow JavaScript |
| Title |
|
||||||
Please check the css you are adding. Some of it seems to be duplicating css already present in the admin template
Thanks a lot for all the feedback, I'm adding the language strings now and also will review the whole code once to remove redundancy. Thanks for the early feedback.
Thank you @Dileepadari for your contribution, that's a really nice feature!
@Dileepadari Not sure if it is a good idea to mark my change suggestions for the update SQL scripts as resolved without having implemented them.
Oh sorry, I am making changes in my local repo and marking as resolved whatever I have updated. So that I can get track of what else changes I need to do. Any other suggestions for that?
Oh sorry, I am making changes in my local repo and marking as resolved whatever I have updated. So that I can get track of what else changes I need to do. Any other suggestions for that?
@Dileepadari Whatever works best for you. But for readers it could be misleading if things are marked as resolved before the solution is visible here. 2 possible ways out: 1. You always push changes when done, and then mark as resolved here, or 2. keep a local list where you can mark what you have done locally.
ok @richard67, Thanks for the suggestion. second option looks good, ill make a list.
| Labels |
Added:
Feature
PR-6.1-dev
|
||
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
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
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
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
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
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.
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.
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?
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.
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?
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)
@Dileepadari First of all thanks a lot for this PR. I've seen your presentation in JUG London recently and was very impressed.
Please forgive us if we already leave review comments and suggestions while this PR is still in draft status, i.e. not ready for review.
But I thought I should give early feedback on the basic things so you can fix them early before the more fine grained reviews drop in.