[Bug]: [@admins/relations] custom action icon not shown

[captHarlock69]

Contact Details

No response

What happened?

added a new custom action to a resource A with "icon" property. In the list page of the resource the icon is correctly show. In a second resource B I added a oneToMany relation to resource B but when I enter in frontend of resource B in the relations-list I see there is a button with the custom action but with an empy box . Action handler is called properly. Only icon not visible.

Bug prevalence

whenever I open che relation "show" in frontend

AdminJS dependencies version

adminjs version 7.81 admin/relations version 1.1.2

What browsers do you see the problem on?

No response

Relevant log output

No response

Relevant code that's giving you issues

// preson.resource.ts
import { targetRelationSettingsFeature } from '@adminjs/relations';
import { Person } from './models/index.js';

export const createPersonResource = () => ({
  resource: Person,
  options: {
    actions: {
       addChild: {
         actionType: 'record',
         isVisible: true,
         isAccessible: true,
         icon: 'PlusCircle' // <--- just added this
         component: AddChildComponent,
         handler: () => {} // my handler
       }
    }
  },
  features: [targetRelationSettingsFeature()],
});

// team.resource.ts --> as in examples

[kaynansc]

The same here!

[Sjoertjuh]

Unfortunately they are using a hard-coded icons map:

const actionIcons = {
    show: "Eye",
    edit: "Edit2",
    delete: "Trash2",
};

// ...

<Icon icon={actionIcons[action.name]} />

If you're using yarn or pnpm, you can easily create a patch for this (for v1.1.2):

diff --git a/lib/components/one-to-many/RelationRecordInListActions.js b/lib/components/one-to-many/RelationRecordInListActions.js
index 6d9795005a120eba4259fbf4c369ff17963a6937..218cbefaa368c855955af6845d802f9b534c07c1 100644
--- a/lib/components/one-to-many/RelationRecordInListActions.js
+++ b/lib/components/one-to-many/RelationRecordInListActions.js
@@ -1 +1 @@
-import{Box,Button,Icon}from"@adminjs/design-system";import{ActionButton}from"adminjs";import React from"react";import{useLocation,useNavigate}from"react-router";import{useRelationConfig}from"../../providers/RelationConfigProvider.js";import{useRedirectUrl}from"../shared/useRedirectUrl.js";export const RelationRecordInListActions=a=>{const{record:{recordActions:b,id:c},resource:{id:d}}=a,{refresh:e}=useRelationConfig(),f=useNavigate(),g=useRedirectUrl(),{pathname:h,search:i}=useLocation(),j={show:"Eye",edit:"Edit2",delete:"Trash2"},k=({notice:a})=>{a&&"success"===a.type&&(f({pathname:h,search:i}),e())};return/*#__PURE__*/React.createElement(Box,{flex:!0,justifyContent:"end"},b.map(a=>/*#__PURE__*/React.createElement(ActionButton,{key:a.name,action:a,resourceId:d,recordId:c,actionPerformed:k,queryParams:{redirectUrl:g}},/*#__PURE__*/React.createElement(Button,{size:"icon",rounded:!0,color:a.variant},/*#__PURE__*/React.createElement(Icon,{icon:j[a.name]})))))};
\ No newline at end of file
+import{Box,Button,Icon}from"@adminjs/design-system";import{ActionButton}from"adminjs";import React from"react";import{useLocation,useNavigate}from"react-router";import{useRelationConfig}from"../../providers/RelationConfigProvider.js";import{useRedirectUrl}from"../shared/useRedirectUrl.js";export const RelationRecordInListActions=a=>{const{record:{recordActions:b,id:c},resource:{id:d}}=a,{refresh:e}=useRelationConfig(),f=useNavigate(),g=useRedirectUrl(),{pathname:h,search:i}=useLocation(),j={show:"Eye",edit:"Edit2",delete:"Trash2"},k=({notice:a})=>{a&&"success"===a.type&&(f({pathname:h,search:i}),e())};return/*#__PURE__*/React.createElement(Box,{flex:!0,justifyContent:"end"},b.map(a=>/*#__PURE__*/React.createElement(ActionButton,{key:a.name,action:a,resourceId:d,recordId:c,actionPerformed:k,queryParams:{redirectUrl:g}},/*#__PURE__*/React.createElement(Button,{size:"icon",rounded:!0,color:a.variant},/*#__PURE__*/React.createElement(Icon,{icon:j[a.name]??a.icon})))))};

This will add the following fallback:

<Icon icon={actionIcons[action.name] ?? action.icon} />