Refactor Admin Dashboard (next steps)

[askvortsov1]

It would be very nice if we could move the buildSettingComponent logic (and other underlying logic) from ExtensionPage to a new base AdminPage, and try to standardize how each admin page works as much as possible: that would make it easier to maintain and add new admin pages.

Also, buildSettingComponent currently doesn't support placeholder, min, max, etc. Perhaps all non-reserved keys in the setting object should be applied as attrs to the input?

[askvortsov1]

I added this to 0.2, but it would be good to get the attrs part for 0.1

[askvortsov1]

Related:

• [Tags] Extension permission grids can be confusing #2503
• Admin UX - cannot scroll horizontally on permission grids in extension pages #2504
• [Accessibility] Enabled/Disabled extension dot indicators not accessibility-friendly #2520

[SychO9]

Few things I noticed while working on a theme, let me know if I should create separate issues for them:

Decouple ExtensionsWidget JSX
The component's content method builds all of the JSX, as in, the widget element itself, each category, and each extension item, making it harder to customize as you have to override the whole thing if you just wanted to edit extension items for example. We should separate them into different methods and call those methods.

https://github.com/flarum/core/blob/a2d5dd3397707be167fd27a23af0da133f7579f0/js/src/admin/components/ExtensionsWidget.js#L16-L43

Some CSS selectors are overly specified
Here's an example, .ExtensionsList-Category should be moved out of .ExtensionsWidget-list because it creates unnecessary over-specification. So when admins or theme designers try to override these styles (since there's no current mechanism of completely replacing a specific set of styles) they would have to overly specify even more, and that can become a mess.

https://github.com/flarum/core/blob/a2d5dd3397707be167fd27a23af0da133f7579f0/less/admin/ExtensionWidget.less#L6-L14

Another file with noticeable over-specification is AdminPage.less

Calculated max width doesn't actually work
We forgot to wrap the max width calculation shown below in ~"calc(...)" so that LESS doesn't calculate that itself and leaves it to the CSS.

.ExtensionNavButton {
  .Button-label {
    display: inline-block;
    max-width: calc(100% - 18px);

Leftovers
I think we forgot to remove the AddExtensionModal and possibly its language strings?

[askvortsov1]

Moving this back to beta 16 milestone for everything except the first bit (completely refactoring Flarum's core config admin pages), which is still planned for 0.2