Improve creator UI

[randomnetcat]

More closely approximate the mockups at RHCLOUD-30247.

[Hyperkid123]

The last step should not have the preview enabled. It should also have an action to create a new resource:

There is also a missing banner.

[Hyperkid123]

The preview should not have a white background.

[randomnetcat]

It... doesn't on my end? On either Firefox or Chrome

What browser are you using? How are you testing it?

[Hyperkid123]

I use the latest Chrome. I did nothing special, the background is just white.

[randomnetcat]

Running it with npm run build; BETA=true npm run static -- --port=8004 in learning-resources and BETA=true CHROME_SERVICE=8000 CONFIG_PORT=8000 NAV_CONFIG=8000 LOCAL_APPS=learning-resources:8004~http npm run dev in insights-chrome (on the latest master), I still get a grey background on Google Chrome.

The quickstart pulling focus in #57 (review) makes me think at least the quickstarts dependency is outdated (should be 5.4.0-prerelease.1); could you double check that?

Also, (as I asked below) what OS is this?

[florkbr]

Tested locally and I am not seeing the white background:

[Hyperkid123]

For quickstarts:

The tasks filed array should look different:

Currently, your items lose focus when typing into them. I suspect the components are not re-rendered but re-created instead:
screencast-stage_foo_redhat_com_1337-2024_07_17-10_32_31.webm

The preview of a quickstart is showing extra empty space:

The show work check should be a toggle/switch, not a checkbox:

[Hyperkid123]

For learning paths:

The "Associated bundles: select is supposed to be required. Rest is similar to the documentation steps.

For the other category:

Same as associated bundles.

[randomnetcat]

Currently, your items lose focus when typing into them. I suspect the components are not re-rendered but re-created instead:

I added a feature to the quickstarts extension to configure it not to grab focus. That should have been pulled in with RedHatInsights/insights-chrome#2870

The preview of a quickstart is showing extra empty space:

This doesn't show up in my local setup.

What browser are you using? Is it possible the quickstarts version is different?

[randomnetcat]

There is also a missing banner.

That will need data-driven-forms/react-forms#1476 to be merged so that the padding around the wizard body can be removed (and the banner can go to the edges).

[randomnetcat]

Alright, I think that's everything fixed that I can replicate locally:

• Banner added
• Bundles input required
• Work check toggle
• Task title array input rewritten
• Preview disabled on last step

I've asked UX about what that help text should be. (Update: the tooltip has been removed.) Still not sure what's causing the display issues on your end; is there anything else you can share? What OS is this? Are the dependencies up-to-date?

[florkbr]

@randomnetcat not blocking getting this in - but I noticed if I fill out the details on step 2 for any content type, then switch back and choose a different content type, the fields on the second page remain filled for the new type. I think we discussed this before - but it would be nice to have a way to "clear" the form fields. I know we have overlap between each type - but if I make a mistake or don't want to carry things over - it would be nice to "reset".

[florkbr]

I did notice it is possible to submit a quickstart with task 1's title being empty (although it looks to be required with the red asterisk):

Which results in a weird UI:

[florkbr]

@randomnetcat overall I think this is a great improvement over what we have in stage today! We can take over the remaining issues. Thank you for your work!