@koikorn/app-admin-ui v5.12.0

Admin UI app

A KeystoneJS app which provides an Admin UI for content management.

Usage

const { Keystone } = require('@koikorn/keystone');
const { GraphQLApp } = require('@koikorn/app-graphql');
const { AdminUIApp } = require('@koikorn/app-admin-ui');

const authStrategy = keystone.createAuthStrategy({...});

module.exports = {
  keystone: new Keystone(),
  apps: [
    new GraphQLApp(),
    new AdminUIApp({
      adminPath: '/admin',
      authStrategy,
    }),
  ],
};

Config

hooks

Customization hooks allow you to modify various areas of the Admin UI to better suit your development needs. The index.js file at the given path should export a single config object containing your chosen hooks. All are optional.

If omitted, Keystone will look under ./admin-ui/ for a hooks config export.

Usage

new AdminUIApp({ hooks: require.resolve('./custom-hooks-path') });

The following hooks are available. Each is a function that takes no arguments.

export default {
  logo,
  pages,
};

logo

The logo to display on the signin screen.

Should return a React component.

export default {
  logo: () => <MyAwesomeLogo />,
};

pages

Allows grouping list pages in the sidebar or defining completely new pages.

Should return an array of objects, which may contain the following properties:

export default {
  pages: () => [
    // Custom pages
    {
      label: 'A new dashboard',
      path: '',
      component: Dashboard,
    },
    {
      label: 'About this project',
      path: 'about',
      component: About,
    },
    // Ordering existing list pages
    {
      label: 'Blog',
      children: [
        { listKey: 'Post' },
        { listKey: 'PostCategory', label: 'Categories' },
        { listKey: 'Comment' },
      ],
    },
    {
      label: 'People',
      children: ['User'],
    },
  ],
};

isAccessAllowed

This function takes the same arguments as a shorthand imperative boolean access control. It must return either true or false.

Important: If omitted, all users with accounts will be able to access the Admin UI. The example below would restrict access to users with the isAdmin permission.

Usage

new AdminUIApp({
  /*...config */
  isAccessAllowed: ({ authentication: { item: user, listKey: list } }) => !!user && !!user.isAdmin,
}),