@koikorn/app-admin-ui

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

Option	Type	Default	Required	Description
adminPath	String	/admin	false	The path of the Admin UI.
apiPath	String	/admin/api	false	The path of the API provided to the Admin UI.
graphiqlPath	String	/admin/api	false	The path of the graphiql app, an in-browser IDE for exploring GraphQL.
authStrategy	Object	null	false	See Authentication Guides
hooks	String	./admin-ui/	false	Path to customization hooks. See below for more information.
enableDefaultRoute	Bool	false	false	If enabled, the path of the Admin UI app will be set to /.
schemaName	String	public	false
isAccessAllowed	Function	true	false	Controls which users have access to the Admin UI.
adminMeta	Object	{}	false	Provides additional adminMeta. Useful for Hooks and other customizations

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:

Name	Type	Description
label	String	The page name to display in the sidebar.
path	String	The page path.
component	`Function	Class`
children	Array	An array of either Keystone list keys or objects with listKey and label 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,
}),