Move module description and links within a popup

[clarkepaul]

As a user I would like to have more information about the status and health of whats installed on my site.

AC's

• We have the ability to show more information about a module by utilising the popover component.
  The brief description of the module will move to the popover so that eventually more information can accompany the description, it will eventually accommodate:
  • Module support breakdown rating (health status)
  • User help link
  • Link to module on Addons
• There is a clear action to indicate there is more information available about the module (which triggers the popover)

Requirements

The popover can be triggered and navigated via keyboard (can raise issue in CMS core if it doesn't)

Design

Designs: https://projects.invisionapp.com/share/ASGU6A7RT8U#/screens/291050684

[robbieaverill]

I think to achieve this we'll first need #79 merged and will need to render PopoverField React components using ReactDOM.render() via entwine. We can pass in the content for it via serialised data props probably.

[robbieaverill]

I just ran a quick POC, the PopoverField in silverstripe/admin also comes with a button which actually opens the Popover (from reactstrap). The popover itself is closed by default, so when you:

Click the module row:

You get the button:

Then you click that and you get the popover:

We could require reactstrap directly for this, and use the Popover component from it directly, or I guess another possibility is to adjust the designs to have a popover button (meatballs) somewhere (maybe the RHS) that triggers a popover that contains module health and other things. It might look a bit weird though.

Thoughts @clarkepaul?

[clarkepaul]

Had a discussion with @robbieaverill and looks like we can use ReactStrap rather than the CMS component as the icon button pattern isn't flexible enough to replace with link text, requiring a bit more effort.