Workflow import UI improvements

[neoformit]

Workflow import UI enhancement

(FYI opening a draft so people can see this while we (Galaxy AU) are reviewing)

This will close #20842.

The workflow import might feel really usable for devs and advanced users, but it's pretty confusing for beginner to intermediate users. What is a TRS ID? What is GA4GH? The majority of people have no idea. Furthermore, when I look at a workflow on workflowhub.eu I don't see any mention of TRS IDs or GA4GH.

So anyway, I think this now reflects the user journeys that we mapped out a lot better, and helps guide the user to where they want to go. Yes, it adds a couple more clicks, but I think it's worth it for the added clarity. I also tidied up the TrsTool component a little, which previously listed workflow versions as a vertical list of buttons, and had some counter-intuitive styling.

workflow-import-ui.webm

How to test the changes?

(Select all options that apply)

• This is a refactoring of components with existing test coverage.

License

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

[neoformit]

@itisAliRH I know it's a draft, but just wanted to grab your attention and see if you have any thoughts about the UX flow?

[davelopez]

Thank you so much for working on this @neoformit!

I woud suggest using the GenericWizard component for UI/UX consistency since this looks pretty much like a wizard flow. You can find several usages of it already in the code base, like workflow invocation export or history export wizards.

[itisAliRH]

Great work on improving the workflow import UX, @neoformit!

I agree with @davelopez - this would benefit from using GenericWizard for consistency with other Galaxy workflows

Could you refactor to use GenericWizard first? We can review the implementation again after the change.

[neoformit]

Thanks guys, sure I'll give it a crack

[neoformit]

Ok, it felt like a little bit of a hack making GenericWizard work with a non-linear flow (maybe I used it wrong) but it looks great. Let me know if it seems ok? The main issue is that the "next step(s)" change dynamically, so initially it thinks it's on the last step already. I inserted a "placeholder" last step so that dynamicIsLast resolves correctly (otherwise it displays the "Import" button prematurely). I guess I could have the first option auto-selected on init, that would also solve that problem.

Oh, also I re-styled the TrsTool component a little to make the table hover/selected a bit more obvious to the user, and copied the "selected" style from GenericWizard so they match. And I moved the "Versions" to the top so that doesn't get buried beneath long Markdown descriptions - it's important that the user sees that they can select the version.

wf-import-ui-generic-wizard.webm

[neoformit]

I can't figure out this Babel parser error, it hates some syntax in there that my linter is not picking up. I've spend ages trial & error tweaking things trying to figure it out! Will try again Monday...

[jmchilton]

I'm working on an agent to review client code and check for older-vs-newer style Bootstrap components to help make sure we don't backtrack on our migration effort. The report for this PR is here: https://gist.github.com/jmchilton/d2dc11d138bee96ab24a2ef5d5dd02ed. If it is non-sense - I apologize but I reviewed the output and it looks valid and looks like the migration advice is actionable and well explained. I'm not sure if these are need to have or nice to have - I guess the UI team should come up with some policy here.

[neoformit]

Thanks @jmchilton that was helpful - I made most of the suggested replacements, but for some reason I could not figure out, the BCard -> GCard in WorkflowImport.vue resulted in this:

EDIT: think I got it figured out, it was a good old flexbox issue.

[jmchilton]

@neoformit I'm so glad it worked out and thank you for being my test subject. The CSS changes in the card conversion look to really clean up things so that is exciting either way. I've not touched this stuff though and my head hurts every time I see the word flexbox.

[neoformit]

No worries, it seems like a great feature for devs like me who rarely dip into Galaxy and can't keep up with which components are deprecated now 😆

[neoformit]

Ok getting closer to final PR stage, just sharing an issue here with workflow versions:

When showing workflows fetched from GA4GH repos, I have used semvar to sort the workflow versions, after noticing that Dockstore and WFHub return version lists in an inconsistent order (desc vs asc). However, some workflows clearly have no implicit order to their versions, like this one from Dockstore, leaving users totally clueless as to which version they should use:

Does GA4GH have a "default/recommended version" field that we could use? Should it? Or is it just a fault of this specific workflow record that it has been versioned non-semantically?