npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@keystonejs/app-admin-ui

v7.5.2

Published

KeystoneJS Admin UI App.

Downloads

2,858

Readme

Admin UI app

This is the last active development release of this package as Keystone 5 is now in a 6 to 12 month active maintenance phase. For more information please read our Keystone 5 and beyond post.

View changelog

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

Usage

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

const keystone = new Keystone({...});

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

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

Config

| Option | Type | Default | Description | | -------------------- | ---------- | ------------- | -------------------------------------------------------------------------- | | name | String | undefined | The name of the project. | | adminPath | String | /admin | The path of the Admin UI. | | apiPath | String | /admin/api | The path of the API provided to the Admin UI. | | graphiqlPath | String | /admin/api | The path of the GraphQL Playground, an in-browser GraphQL IDE. | | authStrategy | Object | null | See Authentication Guides | | hooks | String | ./admin-ui/ | Path to customization hooks. See below for more information. | | enableDefaultRoute | Bool | false | If enabled, the path of the Admin UI app will be set to /. | | schemaName | String | public | | | isAccessAllowed | Function | true | Controls which users have access to the Admin UI. | | adminMeta | Object | {} | Provides additional adminMeta. Useful for Hooks and other customizations | | defaultPageSize | Integer | 50 | The default number of list items to show at once. | | maximumPageSize | Integer | 1000 | The maximum number of list items to show at once. |

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. See Customization for available hooks.

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

Usage

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

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,
}),

Customization

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

export default {
  customToast,
  itemHeaderActions,
  listHeaderActions,
  listManageActions,
  logo,
  pages,
};

logo

The logo to display on the signin screen.

This must return a React component.

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

itemHeaderActions

Header components on the Item Details page can be replaced using this hook. Ths replaces the components for item Details page for all Lists.

This must return a React component.

import { ItemId, AddNewItem } from '@keystonejs/app-admin-ui/components';
export default {
  // re-implement the default AddNewItem and ItemId button + custom text
  itemHeaderActions: () => (
    <div>
      <ItemId />
      <AddNewItem />
      <p>Hello world</p>
    </div>
  ),
};

listHeaderActions

Header components on the List page can be replaced using this hook. This replaces components on list page for all Lists.

This must return a React component.

import { CreateItem } from '@keystonejs/app-admin-ui/components';
export default {
  // re-implement the default create item button + custom text
  listHeaderActions: () => (
    <div>
      <CreateItem />
      <p>Hello world</p>
    </div>
  ),
};

listManageActions

Custom Actions component for multiple items in the list can be replaced with this hook. This replaces the list management toolbar Items for all lists.

This must return a React component.

import { UpdateItems, DeleteItems } from '@keystonejs/app-admin-ui/components';
export default {
  // re-implement the default delete many and update many items buttons + custom text
  listManageActions: () => (
    <div>
      <UpdateItems />
      <DeleteItems />
      <p>Hello world</p>
    </div>
  ),
};

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 | A React component which will be used to render this page. | | 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'],
    },
  ],
};

customToast

Allows customising the content of toast notification when an item is updated or deleted.

The hook function receives a context variable containing an item key with the original item data, a list key that can be used to limit the scope of the hook, the original message as well as a toastAction that will be either 'update' or 'delete'. The function should return a React component.

export default {
  customToast: ({ item, list, message }) => {
    // custom Toast for MyList
    if (list.key === 'MyList') {
      return (
        <div>
          <strong>My custom toast notification!</strong>
          {item && item._label_ ? <strong>{item._label_}</strong> : null}
        </div>
      );
    }
    // Default toast
    return (
      <div>
        {item && item._label_ ? <strong>{item._label_}</strong> : null}
        <div>{message}</div>
      </div>
    );
  },
};