Admin UI branding hook

[Vultraz]

This adds a new Branding Admin UI hook. This should be a React component and will appear on the Sign In page. In order to get this working, I needed to enable access to the Admin UI hooks prior to login. Should be ok since we allow access to the admin meta at that point already.

Does this seem like a good design?

@gautamsi (Since you've been working on the hooks stuff)

Example usage:

const Branding = memo(BrandingComponent);

export default {
  branding: {
    logo: ({ defaultLogo }) => (<Branding />)
  }
};

Resolves #2175

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 8918d0d

We got this.

This PR includes changesets to release 1 package

Name	Type
@keystonejs/app-admin-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gautamsi]

with recently added one hook by @MadeByMike and I added other hooks in #2469 the paradigm is that we pass on the existing component and you can decide if you want to render additional components or replace it. like this :
const brandingHook = ({Logo, ...props}) => (<div><MyLogo/></Logo/></div>) and you pass on existing components like {Branding? brandingHookName({ Logo, ...otherProps}) : <Logo/>

In this scenario it will mostly be replaced, I am with the design you are proposing.

I also feel that we should have more hooks for branding, not just Branding as logo replacement. There are other places the Logo size may be small and we may need multiple hooks for each logo placement and guideline for size etc.

eventually:

{
   branding: {
       logo: LogoComponent,
      footer: FooterCompnent,
      primaryColor: ColorCSSObject,
// etc
   }
}

[MadeByMike]

Remember our discussion where we decided that we should not be passing props through hooks?

Once we made our Admin UI components completely stateless and rely on context variables we no longer even need to pass the existing components through the hooks. Instead we just export them from @keystonejs/app-admin-ui/components

We're also not going to nest hooks in favour of a flat structure:

{
  logo: LogoComponent,
  footer: FooterCompnent,
  header: HeaderComponent,
}

For the Header component add a style tag, or alternatively we export Helmet from the list of components and you use this in other hooks? I need to give some more thought to styling overrides so I'd suggest leaving it off any initial PRs.

[gautamsi]

It should not be a problem to have hooks before auth, as some environment may not even use auth.

moreover it is developer who can make use of non-auth components here.

[Vultraz]

@gautamsi Thanks! Incorporated your suggestions 😃

[MadeByMike]

You don't actually need this as it will look for an admin folder by default

[MadeByMike]

That said maybe an explicit example is better?

[MadeByMike]

Remember our discussion where we decided that we should not be passing props through hooks?

Once we made our Admin UI components completely stateless and rely on context variables we no longer even need to pass the existing components through the hooks. Instead we just export them from @keystonejs/app-admin-ui/components

We're also not going to nest hooks in favour of a flat structure:

{
  logo: LogoComponent,
  footer: FooterCompnent,
  header: HeaderComponent,
}

For the Header component add a style tag, or alternatively we export Helmet from the list of components and you use this in other hooks? I need to give some more thought to styling overrides so I'd suggest leaving it off any initial PRs.

[MadeByMike]

Can we please split this up into one PR per hook implementing my suggestions above.

[Vultraz]

@MadeByMike switched to logo (no more nesting), stopped passing the default logo to the hook, and exported KeystoneLogo.

[abhijithvijayan]

Any updates on this PR?

[Vultraz]

It's ready, just waiting final approval by @MadeByMike

[rafaneri]

@Vultraz , how to use this feature?

[VinayaSathyanarayana]

Is this still Work in Progress or merged?