Develop

dist/plugins/action/Action.d.ts

@@ -8,9 +8,10 @@ export type ActionConfig = {
 };
 export type ActionArgs = {
     name: string;
-    label?: string;
     icon?: HTMLElement;
-    iconTitle?: string;
+    title?: string;
+    iconClassList?: Array<string>;
+    btnClassList?: Array<string>;
     style?: Record<string, Partial<CSSStyleDeclaration>>;
     url?: string;
     customAction?: string;

dist/plugins/action/dom/ActionLxDom.d.ts

@@ -3,7 +3,7 @@ import { ActionArgsWithEffect } from '../Action';
 
 declare class ActionLxDom extends AbstractLxDom {
     constructor();
-    $actionButton({ name, label, iconTitle, icon, style, effect, }: ActionArgsWithEffect): HTMLButtonElement;
+    $actionButton({ name, title, icon, iconClassList, btnClassList, style, effect, }: ActionArgsWithEffect): HTMLButtonElement;
     defineDefaultCellStyle(cell: HTMLElement): void;
 }
 export default ActionLxDom;

lib/plugins/action/Action.ts

@@ -11,9 +11,10 @@ export type ActionConfig = {
 
 export type ActionArgs = {
   name: string;
-  label?: string;
   icon?: HTMLElement;
-  iconTitle?: string;
+  title?: string;
+  iconClassList?: Array<string>;
+  btnClassList?: Array<string>;
   style?: Record<string, Partial<CSSStyleDeclaration>>;
   url?: string;
   customAction?: string;
@@ -143,7 +144,7 @@ class Action {
    */
   validateConfig(): Action {
     this.#actionConfig.map((config) => {
-      if (!config.icon && !config.iconTitle)
+      if (!config.icon && !config.iconClassList)
         throw new ActionError('You must provide an icon name or an icon title');
       if (config.icon && !(config.icon instanceof HTMLElement))
         throw new ActionError('Icon must be of type HTMLElement');

lib/plugins/action/CustomAction.ts

@@ -14,13 +14,13 @@ class CustomAction {
   ) {
     this.customActions = [
       {
-        name: 'SURVEA_EDIT',
+        name: 'FOLLOW_URL_REDIRECT',
         effect: async (rowData: any) => {
           if (!action.url) throw new Error('URL is not defined');
           try {
             const parsedUrl = parsingUrl(action.url, rowData);
             const redirectUrl = await ActionDao.fetchUrl(parsedUrl);
-            if (!redirectUrl.url)
+            if (redirectUrl.url)
               window.open(redirectUrl.url, action.blank ? '_blank' : '_self');
           } catch (err) {
             throw err;

lib/plugins/action/dom/ActionLxDom.ts

@@ -8,33 +8,32 @@ class ActionLxDom extends AbstractLxDom {
 
   $actionButton({
     name,
-    label,
-    iconTitle,
+    title,
     icon,
+    iconClassList,
+    btnClassList,
     style,
     effect,
   }: ActionArgsWithEffect): HTMLButtonElement {
-    const defaultStyle: Record<string, Partial<CSSStyleDeclaration>> = {
-      padding: '4px',
-    };
     let _icon;
-    if (iconTitle) {
+    if (iconClassList) {
       _icon = this.$element('i', {
-        classList: ['fa', iconTitle],
+        classList: ['fa'].concat(iconClassList || []),
       });
     }
     if (icon) {
       _icon = icon.cloneNode(true) as HTMLElement;
     }
 
     return this.$element<HTMLButtonElement>('button', {
-      classList: ['btn'],
+      classList: ['btn'].concat(btnClassList || []),
       children: [_icon!],
       attributes: {
         name: name,
-        'aria-label': label ?? name,
+        title: title ?? '',
+        'aria-label': title ?? name,
       },
-      style: { ...defaultStyle, ...style },
+      style: { ...style },
       onClick: Array.isArray(effect) ? effect : [effect],
     });
   }

tests/specs/plugins/action.test.ts

@@ -7,7 +7,7 @@ import ActionError from '../../../lib/plugins/action/ActionError';
 
 describe('Action', () => {
   describe('validateConfig', () => {
-    it('should throw an ActionError if icon and iconTitle are not provided', () => {
+    it('should throw an ActionError if icon and iconClassList are not provided', () => {
       const config: ActionConfig = {
         width: '50px',
         actions: [
@@ -41,7 +41,12 @@ describe('Action', () => {
         width: '50px',
         actions: [
           // @ts-ignore
-          { iconTitle: 'icon1', url: 'url1', blank: true, effect: () => {} },
+          {
+            iconClassList: ['icon1'],
+            url: 'url1',
+            blank: true,
+            effect: () => {},
+          },
         ],
       };
       const action = new Action(config);
@@ -53,7 +58,7 @@ describe('Action', () => {
         width: '50px',
         actions: [
           // @ts-ignore
-          { iconTitle: 'icon1', name: 'action1', blank: true },
+          { iconClassList: ['icon1'], name: 'action1', blank: true },
         ],
       };
       const action = new Action(config);
@@ -65,7 +70,7 @@ describe('Action', () => {
         width: '50px',
         actions: [
           // @ts-ignore
-          { iconTitle: 'icon1', name: 'action1', effect: 'toto' },
+          { iconClassList: ['icon1'], name: 'action1', effect: 'toto' },
         ],
       };
       const action = new Action(config);
@@ -78,7 +83,7 @@ describe('Action', () => {
         actions: [
           // @ts-ignore
           {
-            iconTitle: 'icon1',
+            iconClassList: ['icon1'],
             name: 'action1',
             url: 'url1',
             blank: true,
@@ -98,7 +103,7 @@ describe('test _getUrlParams', () => {
     actions: [
       // @ts-ignore
       {
-        iconTitle: 'icon1',
+        iconClassList: ['icon1'],
         name: 'action1',
         url: 'https://example.com/api/{resource}/{id}',
         blank: true,
@@ -145,7 +150,7 @@ describe('parseUrlString', () => {
     actions: [
       // @ts-ignore
       {
-        iconTitle: 'icon1',
+        iconClassList: ['icon1'],
         name: 'action1',
         url: 'https://example.com/api/{resource}/{id}',
         blank: true,