diff --git a/src/backend/actions/action.interface.ts b/src/backend/actions/action.interface.ts index fe8892a60..8c858670e 100644 --- a/src/backend/actions/action.interface.ts +++ b/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} */ -export type ActionHandler = ( - request: ActionRequest, - response: any, - context: ActionContext -) => Promise +// eslint-disable-next-line max-len +export type ActionHandler = (request: ActionRequest, response: any, context: ActionContext) => Promise /** * 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 /** @@ -235,17 +232,10 @@ export type After = ( /** * Invocation context */ - context: ActionContext, + context: ActionContext ) => Promise -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 { +export interface Action { /** * Name of an action which is its uniq key. * If you use one of _list_, _search_, _edit_, _new_, _show_, _delete_ or diff --git a/src/frontend/components/app/action-header/action-header.tsx b/src/frontend/components/app/action-header/action-header.tsx index 863ea24df..857b2bdb7 100644 --- a/src/frontend/components/app/action-header/action-header.tsx +++ b/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 = (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 = (props) => { const resourceId = resource.id const params = { resourceId, recordId: record?.id } - const handleActionClick = (event, sourceAction: ActionJSON): any | Promise => ( - buildActionClickHandler({ - action: sourceAction, - params, - actionResponseHandler, - push: history.push, - })(event) - ) + // eslint-disable-next-line max-len + const handleActionClick = (event, sourceAction: ActionJSON): any | Promise => buildActionClickHandler({ + action: sourceAction, + params, + actionResponseHandler, + push: history.push, + })(event) const actionButtons = actionsToButtonGroup({ actions: record @@ -65,10 +62,20 @@ export const ActionHeader: React.FC = (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 = (props) => { return ( - {action.showInDrawer ? '' : ( + {action.showInDrawer ? ( + '' + ) : ( @@ -99,12 +108,22 @@ export const ActionHeader: React.FC = (props) => { {!isList && listAction ? ( - ) : ''} + ) : ( + '' + )} {title} - {tag ? ({tag}) : ''} + {tag ? ( + + {tag} + + ) : ( + '' + )} - {omitActions ? '' : ( + {omitActions ? ( + '' + ) : (