# @tithon/app-admin-ui
> Tithon Admin UI App.
Latest version **0.0.12** (published 2020-09-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install @tithon/app-admin-ui
pnpm add @tithon/app-admin-ui
yarn add @tithon/app-admin-ui
bun add @tithon/app-admin-ui
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.12 |
| Published | 2020-09-06 |
| First published | 2020-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 74 |
| Unpacked size | 356.8 KB |
| Known vulnerabilities | 0 (+27 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | The KeystoneJS Development Team |
| Maintainers | jameskemp |
## Links
- npm: https://www.npmjs.com/package/@tithon/app-admin-ui
- Repository: https://github.com/Regenine/keystone/tree/master/packages/app-admin-ui
- npm.io page: https://npm.io/package/@tithon/app-admin-ui
## Dependencies (74)
- [axios](https://npm.io/package/axios.md) ^0.20.0
- [react](https://npm.io/package/react.md) ^16.13.1
- [falsey](https://npm.io/package/falsey.md) ^1.0.0
- [express](https://npm.io/package/express.md) ^4.17.1
- [graphql](https://npm.io/package/graphql.md) ^14.7.0
- [webpack](https://npm.io/package/webpack.md) 4.44.1
- [raf-schd](https://npm.io/package/raf-schd.md) ^4.0.2
- [apply-ref](https://npm.io/package/apply-ref.md) ^0.2.3
- [base64url](https://npm.io/package/base64url.md) ^3.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [react-uid](https://npm.io/package/react-uid.md) ^2.3.0
- [css-loader](https://npm.io/package/css-loader.md) ^3.6.0
- [lodash.set](https://npm.io/package/lodash.set.md) ^4.3.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.5
- [compression](https://npm.io/package/compression.md) ^1.7.4
- [cross-fetch](https://npm.io/package/cross-fetch.md) ^3.0.5
- [file-loader](https://npm.io/package/file-loader.md) ^3.0.1
- [memoize-one](https://npm.io/package/memoize-one.md) ^5.1.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.49
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.1.0
- [react-select](https://npm.io/package/react-select.md) ^3.1.0
- [style-loader](https://npm.io/package/style-loader.md) ^1.2.1
- [@arch-ui/card](https://npm.io/package/@arch-ui/card.md) ^0.0.15
- [@arch-ui/pill](https://npm.io/package/@arch-ui/pill.md) ^0.1.17
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.35
- [@apollo/client](https://npm.io/package/@apollo/client.md) ^3.1.4
- [@arch-ui/alert](https://npm.io/package/@arch-ui/alert.md) ^0.0.18
- [@arch-ui/badge](https://npm.io/package/@arch-ui/badge.md) ^0.0.17
- [@arch-ui/hooks](https://npm.io/package/@arch-ui/hooks.md) ^0.0.11
- [@arch-ui/input](https://npm.io/package/@arch-ui/input.md) ^0.1.11
- [@arch-ui/theme](https://npm.io/package/@arch-ui/theme.md) ^0.0.11
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.2
- [clipboard-copy](https://npm.io/package/clipboard-copy.md) ^3.1.0
- [@arch-ui/button](https://npm.io/package/@arch-ui/button.md) ^0.0.21
- [@arch-ui/common](https://npm.io/package/@arch-ui/common.md) ^0.0.12
- [@arch-ui/dialog](https://npm.io/package/@arch-ui/dialog.md) ^0.0.22
- [@arch-ui/drawer](https://npm.io/package/@arch-ui/drawer.md) ^0.0.22
- [@arch-ui/fields](https://npm.io/package/@arch-ui/fields.md) ^3.0.4
- [@arch-ui/layout](https://npm.io/package/@arch-ui/layout.md) ^0.2.14
- [@arch-ui/navbar](https://npm.io/package/@arch-ui/navbar.md) ^0.1.12
- [@arch-ui/popout](https://npm.io/package/@arch-ui/popout.md) ^0.0.20
- [@arch-ui/select](https://npm.io/package/@arch-ui/select.md) ^0.1.9
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [@arch-ui/confirm](https://npm.io/package/@arch-ui/confirm.md) ^0.0.20
- [@arch-ui/loading](https://npm.io/package/@arch-ui/loading.md) ^0.0.18
- [@arch-ui/lozenge](https://npm.io/package/@arch-ui/lozenge.md) ^0.0.17
- [@arch-ui/options](https://npm.io/package/@arch-ui/options.md) ^0.0.23
- [@arch-ui/tooltip](https://npm.io/package/@arch-ui/tooltip.md) ^0.1.13
- [react-router-dom](https://npm.io/package/react-router-dom.md) 5.2.0
- [@arch-ui/controls](https://npm.io/package/@arch-ui/controls.md) ^0.1.9
- [@arch-ui/dropdown](https://npm.io/package/@arch-ui/dropdown.md) ^0.0.19
- [@keystonejs/utils](https://npm.io/package/@keystonejs/utils.md) ^5.4.3
- [react-prop-toggle](https://npm.io/package/react-prop-toggle.md) ^1.0.2
- [react-pseudo-state](https://npm.io/package/react-pseudo-state.md) ^2.2.2
- [@arch-ui/pagination](https://npm.io/package/@arch-ui/pagination.md) ^0.0.25
- [@arch-ui/typography](https://npm.io/package/@arch-ui/typography.md) ^0.0.18
- [@keystonejs/session](https://npm.io/package/@keystonejs/session.md) ^8.1.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^4.4.1
- [use-resize-observer](https://npm.io/package/use-resize-observer.md) ^6.1.0
- [@arch-ui/color-utils](https://npm.io/package/@arch-ui/color-utils.md) ^0.0.2
- [apollo-upload-client](https://npm.io/package/apollo-upload-client.md) ^14.1.1
- [babel-plugin-emotion](https://npm.io/package/babel-plugin-emotion.md) ^10.0.33
- [@primer/octicons-react](https://npm.io/package/@primer/octicons-react.md) ^10.1.0
- [@tithon/keystonefields](https://npm.io/package/@tithon/keystonefields.md) ^0.0.3
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^9.1.2
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.1
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^3.7.2
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.25.0
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1
- [react-toast-notifications](https://npm.io/package/react-toast-notifications.md) ^2.4.0
- [express-history-api-fallback](https://npm.io/package/express-history-api-fallback.md) ^2.2.1
- [@keystonejs/field-views-loader](https://npm.io/package/@keystonejs/field-views-loader.md) ^6.0.0
## Recent versions
- 0.0.12 (latest) — 2020-09-06
- 0.0.11 — 2020-09-06
- 0.0.10 — 2020-09-06
- 0.0.9 — 2020-09-06
- 0.0.8 — 2020-09-05
- 0.0.7 — 2020-09-05
- 0.0.6 — 2020-09-05
- 0.0.5 — 2020-09-05
- 0.0.4 — 2020-09-04
- 0.0.3 — 2020-09-03
- 0.0.2 — 2020-09-03
- 0.0.1 — 2020-09-02
## README
# Admin UI app
[](https://changelogs.xyz/@keystonejs/app-admin-ui)
A KeystoneJS app which provides an Admin UI for content management.
## Usage
```js
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 | Required | Description |
| -------------------- | ---------- | ------------- | -------- | -------------------------------------------------------------------------- |
| `name` | `String` | `undefined` | `false` | The name of the project. |
| `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](https://keystonejs.com/guides/authentication) |
| `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 |
| `defaultPageSize` | `Integer` | 50 | `false` | The default number of list items to show at once. |
| `maximumPageSize` | `Integer` | 1000 | `false` | 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.
If omitted, Keystone will look under `./admin-ui/` for a hooks config export.
#### Usage
```javascript title=index.js
new AdminUIApp({ hooks: require.resolve('./custom-hooks-path') });
```
The following hooks are available. Each is a function that takes no arguments.
```javascript title=/custom-hooks-path/index.js
export default {
logo,
pages,
customToast,
};
```
#### `logo`
The logo to display on the signin screen.
> This must return a React component.
```javascript
export default {
logo: () => ,
};
```
#### `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.
```javascript title=/admin-ui/index.js
import { ItemId, AddNewItem } from '@keystonejs/app-admin-ui/components';
export default {
// re-implement the default AddNewItem and ItemId button + custom text
itemHeaderActions: () => (
),
};
```
#### `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.
```javascript title=/admin-ui/index.js
import { CreateItem } from '@keystonejs/app-admin-ui/components';
export default {
// re-implement the default create item button + custom text
listHeaderActions: () => (
),
};
```
#### `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.
```javascript title=/admin-ui/index.js
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: () => (
),
};
```
#### `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. |
```javascript
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.
```javascript
export default {
customToast: ({ item, list, message }) => {
// custom Toast for MyList
if (list.key === 'MyList') {
return (
My custom toast notification!
{item && item._label_ ? {item._label_} : null}
);
}
// Default toast
return (
{item && item._label_ ?
{item._label_} : null}
{message}