Implement possibility to alter built-in crud buttons using custom operations

[Egor Stambakio]

[Egor Stambakio]

I have a proposal about allowing repositioning of instance-related buttons (standard ones, like edit or delete, custom operations defined via model and external operations defined via props).

These groups of buttons are linked to a particular instance and are displayed together.

The goal is to give an ability to define a custom layout for these buttons. Flexible and easy to use.

For the user-end side I propose the following API:

// this function should be placed in model.ui.VIEW_NAME
//
// only instance-related buttons layout is handled here;
// all other editor buttons stay where they belong
//
// if layout is not specified - the default layout is used
// edit/show/create views are TBD - allow dropdowns or inline only, 
// allow inline repositioning or not, etc.

const instanceButtonsLayout = ({
  // 'standard' is an object of the following pattern: 
  // {
  //   'edit': {
  //     name: 'edit', // standard button name
  //     type: 'standard'
  //   },
  //   ...
  // }
  //
  //  PARAMS RECEIVED BY FUNCTION
  //
  standard, // built-in crud editor buttons

  // 'custom' and 'external' are arrays of similar objects
  custom, // operations defined by model.customOperations
  external // operations passed to editor via props
}) => 
  // despite the order, buttons are displayed based on permissions
  // in the following layout if 'edit' is permitted -> 
  // button 'edit' will be shown, button 'show' won't be displayed.
  // permissions are handled internally by crud editor
  // 
  // if mentioned button does not exist among available buttons -> 
  // it's simply not displayed. so, if there is a typo in layout -> 
  // there won't be a button. 
  //
  // for 'standard' buttons it's safe to mention maximum amount of buttons
  // and don't care about permissions the current user has
  // 
  //  THE LAYOUT ITSELF
  //
[
  standard['edit'], // a single object will become a regular button
  standard['show'], // either 'edit' or 'show' is displayed based on permissions system; just mention both
  [...custom], // an array will become a dropdown
  external[0], // a single button...
  [...external.slice(1)], // ...and adjusted dropdown
  standard['delete']
]

If this proposal receives positive feedback, I could provide internal implementation details I have in mind.

Ping @amourzenkov-sc @asergeev-sc @dzhitomirsky-sc

[Egor Stambakio]

Comment by @dzhitomirsky-sc : no need to mix standard and custom buttons. This is enough to define layout in-place where you define custom operations, and place custom buttons either before or after standard ones.

[Egor Stambakio]

Demo for QA

[Nikolai Stoliar]

Tested in Chrome, FF and IE. Buttons are displayed correctly. Please, merge with master branch. Spent 0.5 hour.