Inventory page UX enhancements

[Ron-Lavi]

• Moved the page description into a modal which is reachable from the dropdown kebab.
• Moved also the settings card into a modal.
• Small margin/padding fixes.
• replace PF3 Buttons with PF4 Buttons.

Screenshot of the previous look:

Screenshots of the new look:

[Ron-Lavi]

JS Ci is fixed in #861

[Ron-Lavi]

@jameerpathan111 @chris1984 @ShimShtein due to the amount of components movement we can postpone this change to the branch that aligns with foreman_3_10, I guess this might affect some of our automation/docs.

[ShimShtein]

I think we will need UX approval for this one...
I suppose it will need documentation changes too.

[Ron-Lavi]

Hey @MariSvirik, what do you think about this look for the new year? :)
Any recommendations?

Was thinking to move the dropdown kebab to the buttons row and add a bit more spacing between them, what do you think?

[ShimShtein]

To add some context:
I would like to look at this page as a Control and Status page for all things related to the communication with RH Cloud.
Because of that, I do intend to rename and move this page to a different place in the menu, but it's a different discussion.

I think that inventory upload is just one aspect of the RH communication status, so having it as a central thing, while hiding away settings controls feels a bit less natural.
For example, one of the things I am still thinking about adding to this page is a connectivity status - we already have it as a modal, but I intend to expand it more (add RHC status as well) and bush it to the main area of this page as well. This comes from users that do not trust the remediation process, because of the connectivity issues. I think displaying the connectivity status is the least we can do to ease the situation.

As for hiding the "About" part - I don't have a strong opinion about it, but still would like to present the user if not the full text, but at least a "clue" that there is a more detailed text without hiding it in the kebab.

[Ron-Lavi]

I think displaying the connectivity status is the least we can do to ease the situation.

Agree, maybe some indicator under the page title would be good.

As for hiding the "About" part - I don't have a strong opinion about it, but still would like to present the user if not the full text, but at least a "clue" that there is a more detailed text without hiding it in the kebab.

In most of the pages in Satellite we have "Documentation" button, maybe that will be better for consistency?

[MariSvirik]

@Ron-Lavi
So these are my former sketches.

But we can talk about it. What to keep or change.

[Ron-Lavi]

@MariSvirik it looks much better than my UX mess :)

Shim any fresh thoughts about those designs? Thanks

[chris1984]

Once you merge this one in and the docs one, I will do a new release so we got both bz's into post state

[Ron-Lavi]

As discussed with Shim and Maria, we will leave the major changes to the release with Foreman 3.10/3.11 and can do some smaller enhancements instead for 3.9

Moving to draft meanwhile

[chris1984]

Sounds good, will just wait for you to merge the docs one and then will get everything bundled up

[mjivraja]

I liked the draft UI sketched by @MariSvirik and it looks more organized. From the text side, I will have some minor inputs. When we initiate this, I can provide my suggestion 👍