feat(small): allow adding buttons to Action header

src/backend/actions/action.interface.ts

@@ -71,11 +71,11 @@ export type PageContext = {
    * current instance of AdminJS. You may use it to fetch other Resources by their names:
    */
   _admin: AdminJS;
-    /**
+  /**
    * Currently logged in admin
    */
   currentAdmin?: CurrentAdmin;
-    /**
+  /**
    * view helpers
    */
   h: ViewHelpers;
@@ -191,11 +191,8 @@ export type BulkActionResponse = ActionResponse & {
  * @memberof Action
  * @returns {Promise<T>}
  */
-export type ActionHandler<T> = (
-  request: ActionRequest,
-  response: any,
-  context: ActionContext
-) => Promise<T>
+// eslint-disable-next-line max-len
+export type ActionHandler<T> = (request: ActionRequest, response: any, context: ActionContext) => Promise<T>
 
 /**
  * Before action hook. When it is given - it is performed before the {@link ActionHandler}
@@ -210,10 +207,10 @@ export type Before = (
    * Request object
    */
   request: ActionRequest,
-    /**
+  /**
    * Invocation context
    */
-  context: ActionContext,
+  context: ActionContext
 ) => Promise<ActionRequest>
 
 /**
@@ -235,17 +232,10 @@ export type After<T> = (
   /**
    * Invocation context
    */
-  context: ActionContext,
+  context: ActionContext
 ) => Promise<T>
 
-export type BuildInActions =
-  'show' |
-  'edit' |
-  'list' |
-  'delete' |
-  'bulkDelete' |
-  'new' |
-  'search'
+export type BuildInActions = 'show' | 'edit' | 'list' | 'delete' | 'bulkDelete' | 'new' | 'search'
 
 /**
  * @classdesc
@@ -300,6 +290,15 @@ export type BuildInActions =
  *           actionType: 'resource',
  *           handler: async (request, response, context) => {...}
  *         }
+ *         // Example of adding a link button to Action header
+ *         //  for User model
+ *         someLinkAction: {
+ *           actionType: "resource",
+ *           name: "link #1",
+ *           custom: { Link: "https://google.com" },
+ *           variant: "info",
+ *           icon: "SettingsAdjust",
+ *         },
  *       }
  *     }
  *   }]
@@ -310,7 +309,7 @@ export type BuildInActions =
  * ACTIONS.show.after = async () => {...}
  * ```
  */
-export interface Action <T extends ActionResponse> {
+export interface Action<T extends ActionResponse> {
   /**
    * Name of an action which is its uniq key.
    * If you use one of _list_, _search_, _edit_, _new_, _show_, _delete_ or

src/frontend/components/app/action-header/action-header.tsx

@@ -24,9 +24,7 @@ import { ActionJSON, buildActionClickHandler } from '../../../interfaces/action'
  * @subcategory Application
  */
 export const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
-  const {
-    resource, toggleFilter, actionPerformed, record, action, tag, omitActions,
-  } = props
+  const { resource, toggleFilter, actionPerformed, record, action, tag, omitActions } = props
 
   const { translateButton } = useTranslation()
   const history = useHistory()
@@ -39,14 +37,13 @@ export const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
   const resourceId = resource.id
   const params = { resourceId, recordId: record?.id }
 
-  const handleActionClick = (event, sourceAction: ActionJSON): any | Promise<any> => (
-    buildActionClickHandler({
-      action: sourceAction,
-      params,
-      actionResponseHandler,
-      push: history.push,
-    })(event)
-  )
+  // eslint-disable-next-line max-len
+  const handleActionClick = (event, sourceAction: ActionJSON): any | Promise<any> => buildActionClickHandler({
+    action: sourceAction,
+    params,
+    actionResponseHandler,
+    push: history.push,
+  })(event)
 
   const actionButtons = actionsToButtonGroup({
     actions: record
@@ -65,10 +62,20 @@ export const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
     })
   }
 
+  const addCustomLinks = resource?.resourceActions
+    ?.filter(ra => ra.custom.Link)
+    .map((ra) => {
+      actionButtons.unshift({
+        label: ra.label || 'link',
+        icon: ra.icon || 'Link',
+        href: ra.custom.Link,
+      })
+    })
+
   // list and new actions are special and are are always
   const customResourceButtons = actionsToButtonGroup({
     actions: action.showResourceActions
-      ? resource.resourceActions.filter(ra => !['list', 'new'].includes(ra.name))
+      ? resource.resourceActions.filter(ra => !['list', 'new'].includes(ra.name) && !ra.custom.Link)
       : [],
     params: { resourceId },
     handleClick: handleActionClick,
@@ -86,7 +93,9 @@ export const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
 
   return (
     <Box className={cssClass('ActionHeader')}>
-      {action.showInDrawer ? '' : (
+      {action.showInDrawer ? (
+        ''
+      ) : (
         <Box flex flexDirection="row" px={['default', 0]}>
           <Breadcrumbs resource={resource} actionName={action.name} record={record} />
           <Box flexShrink={0}>
@@ -99,12 +108,22 @@ export const ActionHeader: React.FC<ActionHeaderProps> = (props) => {
           <CssHComponent mb="lg">
             {!isList && listAction ? (
               <StyledBackButton resourceId={resourceId} showInDrawer={action.showInDrawer} />
-            ) : ''}
+            ) : (
+              ''
+            )}
             {title}
-            {tag ? (<Badge variant="primary" ml="default">{tag}</Badge>) : ''}
+            {tag ? (
+              <Badge variant="primary" ml="default">
+                {tag}
+              </Badge>
+            ) : (
+              ''
+            )}
           </CssHComponent>
         </Box>
-        {omitActions ? '' : (
+        {omitActions ? (
+          ''
+        ) : (
           <Box mt="xl" mb={cssActionsMB} flexShrink={0}>
             <ButtonGroup buttons={actionButtons} />
           </Box>