[for Discussion] More hooks for admin ui

[gautamsi]

another POC based on hooks implementation and extending #2155 (includes commits from #2155)

with following config and component I am able to recreate #1724 (item page title button for duplicate)

hooks config

  lists: {
    User: {
      views: {
        email: {
          Field: TextFieldEx,
        },
      },
      components: {
        ItemTitle: [
          DuplicateAction,
        ]
      }
    },
  },

component

/** @jsx jsx */

import { jsx } from '@emotion/core';
import React from 'react';
import { useEffect, useState } from 'react';
import { ChevronLeftIcon, PlusIcon, DiffIcon } from '@arch-ui/icons';
import { IconButton } from '@arch-ui/button';
import Tooltip from '@arch-ui/tooltip';

const DuplicateItem = ({ item, list, CreateItemModal, onCreate }) => {
  const [showDuplicateModal, setShowDuplicateModal] = useState(false);
  let mounted = true;
  useEffect(() => {
    return () => {
      mounted = false;
    };
  }, []);

  const onDuplicate = result => {
    if (onCreate) onCreate(result);
    if (!mounted) return;
    setShowDuplicateModal(false);
  };

  return (
    <>
      <Tooltip content="Duplicate" hideOnMouseDown hideOnKeyDown>
        {ref => (
          <IconButton
            ref={ref}
            css={{ marginRight: -12 }}
            variant="subtle"
            icon={DiffIcon}
            onClick={() => setShowDuplicateModal(true)}
          />
        )}
      </Tooltip>
      <CreateItemModal
        isOpen={showDuplicateModal}
        list={list}
        onClose={() => setShowDuplicateModal(false)}
        onCreate={onDuplicate}
        prefillData={item}
      />
    </>
  );
};

export default DuplicateItem;

discuss here or ping slack :)

[changeset-bot]

🦋 Changeset is good to go

Latest commit: 9d325c6

We got this.

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]

this can be used to consume components for all list pages

[gautamsi]

list level hooks (with components)

[MadeByMike]

@gautamsi not sure we need additional list level hooks. Why not simply use the existing adminUI hooks?

/index.js

new AdminUIApp({
  hooks: require.resolve('./admin-folder/')
});

/admin-folder/index.js

export default {
  /* Currently we only have pages: */
  pages: () => [ ... ],

  /* The hardest part will be deciding what other hooks we should allow, and what the naming conventions for these should be. Here is a quick example to demonstrate your ideas. My current feeling is these should be flat and not nested keys, but I need to give it more thought. */

  itemsListActions: (existingItems) => [...existingActions, DuplicateComponent],
  itemEditFieldsemail: (existingItem) => ({ ...existingItem, Field: TextFieldEx })
 
};

[gautamsi]

only way I can think of having a flat key value pair in hooks is which it can be provided to list's fields config and adminConfig this way plugin/extension is easier like this:

admin/index.js - hooks config file

import {customViews, customHooks} from 'keystone-contrib-packages'
export default = {
 pages: {.....pages},
...customViews, // exports certain views for fields used in list plugins
...customHooks, // adds list config for custom hooks entry point in admin ui
emailField: require('./views/emailViewField'),
emailCell: require('./views/emailViewCell'),
myAction2: require('./actions/exportList'),
}

this can be used in list config

const { customPlugins } = require('keystone-contrib-packages');
//...... other things
keystone.createList('SomeList', {
    fields: {
      email: {type: Text, field: 'emailViewField', cell: 'emailViewCell'},
    },
    adminConfig: {
      listActions: ['myAction2'],
    },
    plugins: [
      customPlugins(keystone), // this is from 'keystone-contrib-packages' which sets up custom actions for admin ui.
    ]
  });

Also need to document each entryPoint in the admin ui like this (#1739 (comment))

• listActions: list level custom Actions
  

• listItemActions: action for each row of Items in list, in the dropdown ( we should expose this dropdown as overflow dropdown, like keep 2-3 iconButton on screen and dropdown action for overflow)
  

• listItemsActions (plural items) : custom action when you select item(s) in list page
  

• itemActions: action for item's page
  

• and more points to be explored (Custom createItemModal, Custom Modify Modal etc.)

if above entry points are found as key in hooks config, then we can assume it applies for all lists. Any other config in the list's adminConfig may add or override or replace entry points.

I may sound against your idea of single place for all config (in hooks/index.js for example) but it is far more easier to have combination of hooks file which exposes certain hooks and, list config/adminConfig to consume them. Much cleaner api and easier debugging, Let me setup this for POC with blog demo.

[VinayaSathyanarayana]

Will this cover #1452 ?

[gautamsi]

fixed merge conflicts

[gautamsi]

I think I missed the changes done to ItemTitle.js in #2279
I see that a hook could be used for itemHeaderActions.

I should really have extended upon that rather than this PR. closing now.