Allow customize Admin UI branding options

[jeancx]

Closes #391

• Modify interface AdminUiConfig on common/lib/shared-types to accept new configs.
• Make admin-ui-plugin to accept new configs.
• Modify admin-ui to render customizations on component html
• Set title on app load.
• Update docs

What this PR does change:

• Allow to add brand on title and on side of vendure brand.
• Allow to hide Vendure branding.
• Allow to hide Vendure version.

To test:

AdminUiPlugin.init({
    adminUiConfig: {
        brand: 'My Store',
        faviconPath: path.join(__dirname, 'favicon.ico'),
        hideVendureBranding: false,
        hideVersion: false,
    },
}),

[michaelbromley]

Hi!

Wow thanks for all your work on this PR! I'm just catching up on a bunch of things after the New Year break, but I'll make time to review this PR soon.

[michaelbromley]

Alright, I've spent a bit of time looking around the changes and here are my thoughts:

There are currently 2 ways to customize the Admin UI:

1. via the AdminUiPlugin.init() options object
2. via the @vendure/ui-devkit function compileUiExtensions().

The first method is mainly intended for environment-dependent configuration (api urls etc), whereas the second method is aimed toward functional extensions of the UI via extension modules.

These changes fall somewhere in between - they don't extend the UI per se, but they are purely visual changes not related to the underlying configuration of the admin ui.

I'm tending to think that (at least some of) this functionality belongs in the ui-devkit package rather than admin-ui-plugin. The reasons for this are:

1. The ui devkit already allows you to replace the logos (in a rather hacky way, see Own Logo #309 (comment)). This existing functionality could be wrapped in a convenience function. We could add a similar mechanism for the favicon.
2. The compileUiExtensions function is executed pre-build. This unlocks more possibilities regarding custom styling. For example, allowing you to specify sass files directly, or even overriding sass variables to enable app-wide colour branding. I've also been thinking of making use of CSS variables for the colours etc to make custom styling even easier.

I think your approach (of adding options to AdminUiPlugin) makes sense for the branding options though.

Here's what I propose:

1. Reduce the scope of this PR to just the branding options (brand, hideVendureBranding, hideVersion).
2. Do the logos & favicon parts separately as part of the ui-devkit package.
3. Further research and design work needed on how we best deal with custom styles. Might require some refactoring of the admin ui source, e.g. if we want to incorporate CSS variables.

[jeancx]

Make sense move logo, icon and css to ui-devkit, i think that even the user could suply his own scaffold dir, enabling him to make advanced customizations on specifc modules.

[jeancx]

I have reduced the scope of this PR to branding options (brand, hideVendureBranding, hideVersion), as suggested.

[michaelbromley]

@jeancx Thank you very much for your contribution! Especially the docs - that's really thorough and appreciated.

I was thinking of working on the other 2 aspects myself (branding images & styling) unless you have a particularly strong desire to tackle either?

[jeancx]

I just tested today, all workin fine, was a good work, very clean code.