New Workflow List and Card View

[itisAliRH]

This pull request introduces several new features including a workflow list, card view, workflow quick view, and other improvements. It's a part of our ongoing efforts to enhance user experience.
It's a part of usegalaxy-au/elixir-biocommons-colab#1

• Includes new tabs for "My workflows," which are owned by the user, "Shared with me," which are workflows shared by other users, and "Published workflows," which are publicly accessible.
• One component for all types of workflow
• Responsive view in list and grid view modes based on container (card parent) size (using CSS container)
• Quick read-only view
• Filter on deleted and bookmarked
• Optional highlight for published and imported
• Infinite list instead of a paginated list using the virtual list (Using the virtual list creates significant performance and UI issues: 1. In grid view, it can not calculate the exact height of all rendered items 2. StatelessTags in edit mode crashes the list and uses resources too much). To reduce the performance problem, edit tags are temporarily disabled (here af9d2f0). But to solve the UI issue, the total height in the grid should be passed to the virtual list or use pagination without infinite view)
• Refactored and vuetified workflow create component

workflow.cards.latest.mp4

Workflow Card View

Workflow Expanded View

My Workflows (card view)

My Workflows (list view)

Workflows shared with me

Public workflows

Deleted Workflows

Requires

• Workflows list API return wrong Total_matches #17165
• Migrate /api/workflow/create to use in WorkflowCreate component
• A new field in /api/workflows result like invocations that has the total number of runs or the latest invocation run time or if there is a running invocation exist

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. Navigate to Workflow from the header or Workflows from the Shared Data dropdown

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[afgane]

Looking pretty nice. I've got a few comments regarding the layout that I captured in this annotated screenshot:

To put it out there, as I suggested during our initial discussion, I am still of the opinion that it would possibly be nicer UX to put all these selection options into a single vertical panel next to the activity bar. If all the options are checkboxes, one could easily create a view that shows a single list of workflows that spans their workflows, shared workflows, and public workflows. Combined with search, one could search for RNA-Seq and then at once see all the options available to them vs. having to switch tabs. It would also open doors for visibly exposing more options in the future by which to filter the shown workflows. Here's an example of how travel companies often do this:

[wm75]

No strong opinion regarding tabs vs vertical panel, but tending to prefer the tab layout proposed here because

1. in my work with Galaxy I tend to be much more limited in horizontal than in vertical space and the proposed design scales down acceptably well to half a screen width for me, meaning I can have training material or other windows open side-by-side and still work productively.
2. virtually every time I'm looking for a WF I know beforehand which category I want. I'm always looking either for a WF I know I've created, a WF somebody just shared with me or some published WF. It's very, very rarely the case that I'd need a mixed search result across categories.

[wm75]

after playing around with your test instance @itisAliRH I have a couple of suggestions:

• what's special about Delete/Copy/Export that they live in their own row of icons? Shouldn't they live inside the dropdown menu?
• conversely, I would put Download as an icon next to Edit and Run
• for WFs not owned by the user (shared and published ones), I would not grey out the Edit button, but replace it with an Import one; in exchange, I would not offer Copy for such workflows (imo, importing captures better what you do with the WF than copying)
• currently the "My workflows" tab lists also workflows shared with the user, which I think is wrong (the user doesn't own these yet). This was more of a hack in the old workflow list because there was no other way to access workflows shared with you, but now that you have the dedicated tab these things should get separated
• hitting Delete or Copy on any card doesn't refresh the view; you'll see the effect only after refreshing the page
• same is true for Add bookmark, which doesn't toggle to Remove bookmark until the next page refresh
• regarding bookmarking it would also be nice to have cards of bookmarked WFs highlighted somehow; a is:bookmarked advanced filter would also be nice to have
• can we have much more prominent indicators for TRS-imported and published WFs please (colorful large icons?). Such workflows are really special and you want to have them highlighted clearly. For example you don't want to edit such workflows by mistake. For a published workflow there could even be an extra warning when you try to delete it.
• for WFs imported via link I'm not convinced by the option "View external link". For many such links following them will just trigger a WF file download from the remote source, when you could have downloaded the WF also from Galaxy. In the best case you're taken to a text view of the WF file. I think the link icon with its option to copy the link address is enough here.
• is it really helpful to expand the dropdown box into icons even when there's enough space?
  personally, I find it confusing when the layout keeps changing back and forth like this and I don't find the icons intuitive enough anyway to speed things up for me; just always hiding all actions (besides download, edit and run) in the dropdown would be fine for me)
• the View option is currently duplicated (as an icon on the card and in the dropdown menu) unless you have enough horizontal space to expand the dropdown menu completely.
  I'm not convinced this should have an icon at all, but maybe popping up the preview could be triggered by clicking anywhere on the card instead?
• in the Preview window, I would prefer to have Author changed to Owner, which makes the difference to Creator clearer
  (that one's not specific to this PR, but applies to the WF preview on any branch)
• the tabs here and on the workflows import page should look the same

in addition I discovered some bugs left to fix:

• in the preview window, the link to "All workflows published by ..." isn't doing what it says, but takes you to all published workflows (not a new bug though but also happening on public servers currently)
• for some reason the first workflow card invariably says "workflow runs: 2" and "last run: 2 days ago" (even if that's certainly wrong - like for a freshly create workflow)
• tag filtering gets broken by # tags (clicking on a tag gets converted into a non-parseable filter, while in the old implementation # had no special meaning in a workflow tag)
• there is some strange interaction with the activity bar (see screenshot below)
  when you go to the workflows view from the activity bar you're getting an extra panel that contains some workflows which are not in any of the other views. What's special about these and why are they not displayed anywhere else?

[wm75]

lots of points, but don't get me wrong: I really like the new look!

[guerler]

This is very cool, really looking forward to it. Thank you @itisAliRH. I have a question/suggestion would it make sense to just use two tabs i.e. My Workflows and Published Workflows, and then display the workflows Shared with me in the published Workflow list? Shared with me could then just be a filter for the published workflows list. I think this could simplify the view particularly considering that the number of individually shared workflows is probably limited for most users.

[itisAliRH]

This is very cool, really looking forward to it. Thank you @itisAliRH. I have a question/suggestion would it make sense to just use two tabs i.e. My Workflows and Published Workflows, and then display the workflows Shared with me in the published Workflow list? Shared with me could then just be a filter for the published workflows list. I think this could simplify the view particularly considering that the number of individually shared workflows is probably limited for most users.

@guerler Thanks for the feedback! Appreciate it :-) I'm open to this idea, but let's discuss it with others for more input :)

[guerler]

Thanks a lot for working on this, I think the card view is 10x better than the table we are currently using. Moving forward it would be awesome to add a card view option to the GridList component, so that all other grids would also benefit from this development. Here are some notes and suggestions:

1. The help modal does not display any content when I click on it.
2. When navigating directly to the create workflow route, an error is thrown when attempting to create a workflow.
3. Looking at the console logs, there seems to be a failing race condition related to identifying the current user.
4. modalView property in should probably just be named showHeading or could be instead specified in the actual model itself.
5. I would avoid using if as object attribute since it is a reserved key word and use something like condition instead.
6. The loading message should only be shown once imo, not on every resorting of data i.e. the current data can be shown instead, if a spinner is desired it should be in the button itself.
7. It probably makes sense to just always highlight published workflows by showing a border with primary color, deleted workflows could have a red border.
8. There is some inconsistency with regard to icons:
   1. They are often of different padding/width.
   2. It is not entirely clear how the three different icon areas have been populated e.g. the download is at the bottom left, export at the top right in the dropdown menu although functionality is overlapping. The edit has a label, the run does not. Invocations is circled, but the eye icon is not.
   3. One could e.g. move the Create image next to the download action using an image icon, and replace the dropdown at the top with a single delete option?

[itisAliRH]

Thanks a lot for working on this, I think the card view is 10x better than the table we are currently using. Moving forward it would be awesome to add a card view option to the GridList component, so that all other grids would also benefit from this development. Here are some notes and suggestions:

1. The help modal does not display any content when I click on it.

2. When navigating directly to the create workflow route, an error is thrown when attempting to create a workflow.

3. Looking at the console logs, there seems to be a failing race condition related to identifying the current user.

4. modalView property in should probably just be named showHeading or could be instead specified in the actual model itself.

5. I would avoid using if as object attribute since it is a reserved key word and use something like condition instead.

6. The loading message should only be shown once imo, not on every resorting of data i.e. the current data can be shown instead, if a spinner is desired it should be in the button itself.

7. It probably makes sense to just always highlight published workflows by showing a border with primary color, deleted workflows could have a red border.

8. There is some inconsistency with regard to icons:

   1. They are often of different padding/width.
   2. It is not entirely clear how the three different icon areas have been populated e.g. the download is at the bottom left, export at the top right in the dropdown menu although functionality is overlapping. The edit has a label, the run does not. Invocations is circled, but the eye icon is not.
   3. One could e.g. move the Create image next to the download action using an image icon, and replace the dropdown at the top with a single delete option?

@guerler Thanks a lot for reviewing it again, appreciate it! Adding the card view option to the GrdiList is a great idea, I will work on it in the follow-up. I just have a few questions:

2. When navigating directly to the create workflow route, an error is thrown when attempting to create a workflow.

I've commented on the PR requirements descriptions. Can it be done without migrating other parts of the workflow API?

5. I would avoid using if as object attribute since it is a reserved key word and use something like condition instead.

Where is it? I can't find it.

6. The loading message should only be shown once imo, not on every resorting of data i.e. the current data can be shown instead, if a spinner is desired it should be in the button itself.

I added the overlay to the list, but the loading button is also nice. To be consistent, I'd keep the overlay. What do you think?

7. It probably makes sense to just always highlight published workflows by showing a border with primary color, deleted workflows could have a red border.

The user needs to know in advance what is the meaning of each colour. How could it be explained to them? The idea of having filters is that users can understand what is the meaning of the border.

[itisAliRH]

The failed test is irrelevant!