@dile/crud 2.6.3 → 2.7.1

package/components/list/src/DileCrudItemActions.js

@@ -0,0 +1,191 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '@dile/ui/components/button/button.js';
+import '@dile/iconlib/material-icons/edit.js';
+import '@dile/iconlib/material-icons/delete.js';
+import '@dile/iconlib/material-icons/restore-from-trash.js';
+
+export class DileCrudItemActions extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dile-crud-item-actions-gap, 0.25rem);
+      }
+      dile-button.action-button {
+        --dile-button-background-color: var(--dile-crud-list-item-action-button-background-color, transparent);
+        --dile-button-border-color: var(--dile-crud-list-item-action-button-border-color, transparent);
+        --dile-button-hover-background-color: var(--dile-crud-list-item-action-button-hover-background-color, var(--dile-neutral-color, #f1f5f9));
+        --dile-button-hover-border-color: var(--dile-crud-list-item-action-button-hover-border-color, transparent);
+        --dile-button-padding-y: var(--dile-crud-list-item-action-button-padding-y, 0.25rem);
+        --dile-button-padding-x: var(--dile-crud-list-item-action-button-padding-x, 0.25rem);
+        --dile-button-icon-size: var(--dile-crud-list-item-action-button-icon-size, 24px);
+        --dile-button-border-radius: var(--dile-crud-list-item-action-button-border-radius, 2rem);
+      }
+      dile-button.action-button.edit {
+        --dile-button-icon-color: var(--edit-icon-color, var(--dile-alert-neutral-color, #0c7595));
+        --dile-button-icon-hover-color: var(--dile-crud-list-item-edit-icon-hover-color, var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7)));
+      }
+      dile-button.action-button.delete {
+        --dile-button-icon-color: var(--delete-icon-color, var(--dile-danger-color, #e33));
+        --dile-button-icon-hover-color: var(--dile-crud-list-item-delete-icon-hover-color, var(--delete-icon-color, var(--dile-danger-color, #e33)));
+      }
+      dile-button.action-button.restore {
+        --dile-button-icon-color: var(--restore-icon-color, var(--dile-alert-success-color, #00900f));
+        --dile-button-icon-hover-color: var(--dile-crud-list-item-restore-icon-hover-color, var(--restore-icon-color, var(--dile-alert-success-color, #00900f)));
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      item: { type: Object },
+      itemId: { type: String },
+      config: { type: Object },
+      disableEdit: { type: Boolean },
+      disableDelete: { type: Boolean },
+      disableRestore: { type: Boolean },
+      isDeleted: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = null;
+    this.disableEdit = false;
+    this.disableDelete = false;
+    this.disableRestore = false;
+    this.isDeleted = false;
+  }
+
+  static hasActions(config) {
+    if (!config) {
+      return true;
+    }
+    if (config.customization?.disableListActions) {
+      return false;
+    }
+    const editDisabled = Boolean(config.customization?.disableEdit);
+    const deleteDisabled = Boolean(config.customization?.disableDelete);
+    const restoreDisabled = Boolean(config.customization?.disableRestore);
+
+    return !(editDisabled && deleteDisabled && restoreDisabled);
+  }
+
+  get computedIsDeleted() {
+    if (this.isDeleted) {
+      return true;
+    }
+    return Boolean(this.item?.deleted_at);
+  }
+
+  get computedItemId() {
+    if (this.itemId !== undefined && this.itemId !== null && this.itemId !== '') {
+      return this.itemId;
+    }
+    if (this.config?.computeItemId && typeof this.config.computeItemId === 'function' && this.item) {
+      return this.config.computeItemId(this.item);
+    }
+    return this.item?.id;
+  }
+
+  get isEditable() {
+    if (this.disableEdit) {
+      return false;
+    }
+    if (this.config) {
+      if (this.config.customization?.disableListActions || this.config.customization?.disableEdit) {
+        return false;
+      }
+      if (typeof this.config.isItemEditable === 'function' && this.item) {
+        return this.config.isItemEditable(this.item);
+      }
+    }
+    return true;
+  }
+
+  get isDeletable() {
+    if (this.disableDelete) {
+      return false;
+    }
+    if (this.config) {
+      if (this.config.customization?.disableListActions || this.config.customization?.disableDelete) {
+        return false;
+      }
+      if (typeof this.config.isItemDeletable === 'function' && this.item) {
+        return this.config.isItemDeletable(this.item);
+      }
+    }
+    return true;
+  }
+
+  get isRestorable() {
+    if (this.disableRestore) {
+      return false;
+    }
+    if (this.config?.customization?.disableListActions || this.config?.customization?.disableRestore) {
+      return false;
+    }
+    return true;
+  }
+
+  render() {
+    return this.computedIsDeleted ? this.restoreActionsTemplate : this.regularActionsTemplate;
+  }
+
+  get regularActionsTemplate() {
+    const showEdit = this.isEditable;
+    const showDelete = this.isDeletable;
+
+    if (!showEdit && !showDelete) {
+      return nothing;
+    }
+
+    return html`
+      ${showEdit
+        ? html`<dile-button class="action-button edit" icon="material.edit" label="Edit" @click=${this.editClick}></dile-button>`
+        : nothing
+      }
+      ${showDelete
+        ? html`<dile-button class="action-button delete" icon="material.delete" label="Delete" @click=${this.deleteClick}></dile-button>`
+        : nothing
+      }
+    `;
+  }
+
+  get restoreActionsTemplate() {
+    if (!this.isRestorable) {
+      return nothing;
+    }
+
+    return html`
+      <dile-button class="action-button restore" icon="material.restore-from-trash" label="Restore" @click=${this.restoreClick}></dile-button>
+    `;
+  }
+
+  _dispatchItemEvent(eventName) {
+    this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        item: this.item,
+        itemId: this.computedItemId,
+      }
+    }));
+  }
+
+  editClick(e) {
+    e?.stopPropagation();
+    this._dispatchItemEvent('crud-item-edit');
+  }
+
+  deleteClick(e) {
+    e?.stopPropagation();
+    this._dispatchItemEvent('crud-item-delete');
+  }
+
+  restoreClick(e) {
+    e?.stopPropagation();
+    this._dispatchItemEvent('crud-item-restore');
+  }
+}

package/components/list/src/DileCrudList.js

@@ -7,6 +7,7 @@ import '../../list/crud-list-pagination-links.js';
 import '../crud-list-item.js';
 import '../crud-select-all.js';
 import '../crud-list-service.js';
+import '../crud-data-grid.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 
 export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
@@ -67,9 +68,14 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
             }
             .elements-container {
                 display: grid;
-                grid-template-columns: var(--dile-crud-list-elements-container-template-columns,  minmax(0, 1fr));
+                grid-template-columns: var(--dile-crud-list-elements-container-template-columns, minmax(0, 1fr));
                 gap: var(--dile-crud-list-elements-container-gap, 0);
             }
+            .grid-container {
+                display: block;
+                width: 100%;
+                margin: var(--dile-crud-list-grid-container-margin, 0 0 1rem 0);
+            }
         `
     ];
 
@@ -94,7 +100,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
 
     constructor() {
         super();
-        this.paginationData = {}
+        this.paginationData = {};
         this.elements = [];
         this.pageSize = 10;
         this.keyword = '';
@@ -207,6 +213,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
             ></dile-ajax>
         `;
     }
+
     get emptyTemplate() {
         return html`
             <div class="empty">
@@ -243,6 +250,32 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     get elementsTemplate() {
+        if (this.config?.templates?.grid && typeof this.config.templates.grid === 'function') {
+            return html`
+                <div
+                    class="grid-container"
+                    @item-checkbox-changed=${this.onItemsCheckboxChanged}
+                    @dile-data-grid-sort=${this.onGridSort}
+                >
+                    ${this.config.templates.grid(this.elements, this.actionIds, this.config)}
+                </div>
+            `;
+        }
+        if (this.config?.grid?.columns && Array.isArray(this.config.grid.columns)) {
+            return html`
+                <div
+                    class="grid-container"
+                    @item-checkbox-changed=${this.onItemsCheckboxChanged}
+                    @dile-data-grid-sort=${this.onGridSort}
+                >
+                    <dile-crud-data-grid
+                        .items=${this.elements}
+                        .selectedIds=${this.actionIds}
+                        .config=${this.config}
+                    ></dile-crud-data-grid>
+                </div>
+            `;
+        }
         return html`
             <div class="elements-container">
                 ${this.elements.map(element => html`
@@ -252,7 +285,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                         .actionIds="${this.actionIds}"
                         ?disableEdit=${!this.isItemEditable(element)}
                         ?disableDelete=${!this.isItemDeletable(element)}
-                        ?disableRestore=${this.config?.customization?.disableRestore}
+                        ?disableRestore=${this.config?.customization?.disableRestore || this.config?.customization?.disableListActions}
                         ?hideCheckboxSelection="${this.config?.customization?.hideCheckboxSelection}"
                         @item-checkbox-changed=${this.onItemsCheckboxChanged}
                         ?isDeleted=${element.deleted_at}
@@ -276,13 +309,13 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     isItemEditable(element) {
-        const isGloballyDisabled = this.config?.customization?.disableEdit;
+        const isGloballyDisabled = this.config?.customization?.disableListActions || this.config?.customization?.disableEdit;
         const isItemEditable = this.config?.isItemEditable(element) ?? true;
         return !isGloballyDisabled && isItemEditable;
     }
 
     isItemDeletable(element) {
-        const isGloballyDisabled = this.config?.customization?.disableDelete;
+        const isGloballyDisabled = this.config?.customization?.disableListActions || this.config?.customization?.disableDelete;
         const isItemDeletable = this.config?.isItemDeletable(element) ?? true;
         return !isGloballyDisabled && isItemDeletable;
     }
@@ -314,11 +347,11 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     goNext() {
-        this.elservice.goNext()
+        this.elservice.goNext();
     }
 
     goPrev() {
-        this.elservice.goPrev()
+        this.elservice.goPrev();
     }
 
     refresh() {
@@ -332,7 +365,6 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
             this.shadowRoot.querySelector('dile-crud-select-all').reset();
         }
         this.elservice.refresh();
-        
     }    
 
     setKeyword(keyword) {
@@ -347,6 +379,20 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.elservice.setSort(sortObject);
     }  
 
+    onGridSort(e) {
+        if (e.detail?.field) {
+            this.setSort({
+                sortField: e.detail.field,
+                sortDirection: e.detail.direction || 'asc',
+            });
+        } else {
+            this.setSort({
+                sortField: null,
+                sortDirection: null,
+            });
+        }
+    }
+
     setPageSize(size) {
         this.loading = true;
         this.pageSize = size;
@@ -389,7 +435,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
       if(this.config.customization?.disablePagination) {
         let ids = this.elements.map(item => this.config.computeItemId(item));
         this.dispactSelectAll(ids);
-      } else{
+      } else {
         let data = {
             keyword: this.keyword,
             filters: this.filters,
@@ -413,7 +459,6 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         if (!e.detail.checked && this.isSelectAllActive) {
             this.shadowRoot.querySelector('dile-crud-select-all').resetWithoutDispatch();
         }
-        
     }
 
     onListError(e) {

package/components/list/src/DileCrudListItem.js

@@ -1,67 +1,42 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import '@dile/ui/components/checkbox/checkbox.js';
-import '@dile/ui/components/button/button.js';
-import '@dile/iconlib/material-icons/edit.js';
-import '@dile/iconlib/material-icons/delete.js';
-import '@dile/iconlib/material-icons/restore-from-trash.js';
+import '../crud-item-actions.js';
 
 export class DileCrudListItem extends LitElement {
   static styles = [
     css`
-        :host {
-            display: var(--dile-crud-list-item-display, block);
-            max-width: var(--dile-crud-list-item-max-width, 100%);
-            width: var(--dile-crud-list-item-width, 100%);
-        }
+      :host {
+        display: var(--dile-crud-list-item-display, block);
+        max-width: var(--dile-crud-list-item-max-width, 100%);
+        width: var(--dile-crud-list-item-width, 100%);
+      }
+      section {
+        max-width: 100%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: var(--dile-crud-list-item-padding, 0.5rem 0.5rem);
+        border-bottom: var(--dile-crud-list-item-line-separator, 1px solid #ddd);
+      }
+      dile-checkbox {
+        margin-right: 0.5rem;
+        --dile-checkbox-unchecked-color: #888;
+      }
+      main {
+        flex-grow: 1;
+        overflow: hidden;
+      }
+      .actions {
+        margin-left: 0.5rem;
+        display: flex;
+        align-items: center;
+        text-align: right;
+      }
+      @media (min-width: 550px) {
         section {
-            max-width: 100%;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            padding: var(--dile-crud-list-item-padding, 0.5rem 0.5rem);
-            border-bottom: var(--dile-crud-list-item-line-separator, 1px solid #ddd);
-        }
-        dile-checkbox {
-            margin-right: 0.5rem;
-            --dile-checkbox-unchecked-color: #888;
-        }
-        main {
-            flex-grow: 1;
-            overflow: hidden;
-        }
-        .actions {
-            margin-left: 0.5rem;
-            display: flex;
-            align-items: center;
-            text-align: right;
-        }
-        dile-button.action-button {
-            --dile-button-background-color: var(--dile-crud-list-item-action-button-background-color, transparent);
-            --dile-button-border-color: var(--dile-crud-list-item-action-button-border-color, transparent);
-            --dile-button-hover-background-color: var(--dile-crud-list-item-action-button-hover-background-color, var(--dile-neutral-color, transparent));
-            --dile-button-hover-border-color: var(--dile-crud-list-item-action-button-hover-border-color, transparent);
-            --dile-button-padding-y: var(--dile-crud-list-item-action-button-padding-y, 0.25rem);
-            --dile-button-padding-x: var(--dile-crud-list-item-action-button-padding-x, 0.25rem);
-            --dile-button-icon-size: var(--dile-crud-list-item-action-button-icon-size, 24px);
-            --dile-button-border-radius: var(--dile-crud-list-item-action-button-border-radius, 2rem);
-        }
-        dile-button.action-button.edit {
-            --dile-button-icon-color: var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7));
-            --dile-button-icon-hover-color: var(--dile-crud-list-item-edit-icon-hover-color, var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7)));
-        }
-        dile-button.action-button.delete {
-            --dile-button-icon-color: var(--delete-icon-color, var(--dile-danger-color, #e33));
-            --dile-button-icon-hover-color: var(--dile-crud-list-item-delete-icon-hover-color, var(--delete-icon-color, var(--dile-danger-color, #e33)));
-        }
-        dile-button.action-button.restore {
-            --dile-button-icon-color: var(--restore-icon-color, var(--dile-alert-success-color, #00900f));
-            --dile-button-icon-hover-color: var(--dile-crud-list-item-restore-icon-hover-color, var(--restore-icon-color, var(--dile-alert-success-color, #00900f)));
-        }
-        @media(min-width: 550px) {
-            section {
-                padding: var(--dile-crud-list-item-padding, 0.5rem 1rem);
-            }
+          padding: var(--dile-crud-list-item-padding, 0.5rem 1rem);
         }
+      }
     `
   ];
 
@@ -72,6 +47,7 @@ export class DileCrudListItem extends LitElement {
       actionIds: { type: Array },
       disableEdit: { type: Boolean },
       disableDelete: { type: Boolean },
+      disableRestore: { type: Boolean },
       /** Hide checkboxes on the item list */
       hideCheckboxSelection: { type: Boolean },
       isDeleted: { type: Boolean },
@@ -85,86 +61,64 @@ export class DileCrudListItem extends LitElement {
     this.disableDelete = false;
     this.disableRestore = false;
     this.hideCheckboxSelection = false;
+    this.isDeleted = false;
+  }
 
+  get hasActions() {
+    if (this.isDeleted) {
+      return !this.disableRestore;
+    }
+    return !this.disableEdit || !this.disableDelete;
   }
 
   render() {
     return html`
-        <section>
-            ${this.hideCheckboxSelection ? '' : html`
-                <dile-checkbox ?checked="${this.includes(this.actionIds, this.itemId)}" @dile-checkbox-changed=${this.checkboxChanged}></dile-checkbox>
+      <section>
+        ${this.hideCheckboxSelection
+          ? ''
+          : html`
+              <dile-checkbox
+                ?checked="${this.includes(this.actionIds, this.itemId)}"
+                @dile-checkbox-changed=${this.checkboxChanged}
+              ></dile-checkbox>
             `}
-            <main>
-                <slot></slot>
-            </main>
-            <div class="actions">
-                ${this.isDeleted
-                  ? this.restoreActionsTemplate
-                  : this.regularActionsTemplate
-                }
-            </div>
-        </section>
+        <main>
+          <slot></slot>
+        </main>
+        ${this.hasActions
+          ? html`
+              <div class="actions">
+                <dile-crud-item-actions
+                  .item=${this.item}
+                  itemId="${this.itemId}"
+                  ?disableEdit=${this.disableEdit}
+                  ?disableDelete=${this.disableDelete}
+                  ?disableRestore=${this.disableRestore}
+                  ?isDeleted=${this.isDeleted}
+                ></dile-crud-item-actions>
+              </div>
+            `
+          : nothing
+        }
+      </section>
     `;
   }
 
-  get regularActionsTemplate() {
-    return html`
-      ${this.disableEdit
-        ? ''
-        : html`<dile-button class="action-button edit" icon="material.edit" label="Edit" @click=${this.editClick}></dile-button>`
-      }
-      ${this.disableDelete
-        ? ''
-        : html`<dile-button class="action-button delete" icon="material.delete" label="Delete" @click=${this.deleteClick}></dile-button>`
-      }
-    `
-  }
-
-  get restoreActionsTemplate() {
-    return html`
-      ${this.disableRestore
-        ? ''
-        : html`<dile-button class="action-button restore" icon="material.restore-from-trash" label="Restore" @click=${this.restoreClick}></dile-button>`
-      }
-    `
-  }
-
   includes(actionIds, itemId) {
     const stringIds = actionIds.map(String);
     return stringIds.includes(String(itemId));
   }
 
   checkboxChanged(e) {
-    this.dispatchEvent(new CustomEvent('item-checkbox-changed', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        checked: e.detail.checked,
-        itemId: this.itemId
-      }
-    }));
-  }
-
-  _dispatchItemEvent(eventName) {
-    this.dispatchEvent(new CustomEvent(eventName, {
-      bubbles: true,
-      composed: true,
-      detail: {
-        item: this.item,
-        itemId: this.itemId,
-      }
-    }));
-  }
-
-  editClick() {
-    this._dispatchItemEvent('crud-item-edit');
-  }
-
-  deleteClick() {
-    this._dispatchItemEvent('crud-item-delete');
-  }
-
-  restoreClick() {
-    this._dispatchItemEvent('crud-item-restore');
+    this.dispatchEvent(
+      new CustomEvent('item-checkbox-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          checked: e.detail.checked,
+          itemId: this.itemId,
+        },
+      })
+    );
   }
-}
+}

package/lib/CrudConfigBuilder.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { CrudConfigBuilder } from './CrudConfigBuilder.js';
+
+describe('CrudConfigBuilder', () => {
+  it('merges customConfig.grid.columns over the default null grid', () => {
+    const columns = [{ field: 'id', header: 'ID' }];
+
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      grid: { columns },
+    }).getConfig();
+
+    expect(config.grid.columns).toEqual(columns);
+  });
+
+  it('sets the endpoint from the constructor argument', () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {}).getConfig();
+
+    expect(config.endpoint).toBe('https://example.test/api/items');
+  });
+
+  it('getConfig(endpoint) returns a copy with an overridden endpoint without mutating the original config', () => {
+    const builder = new CrudConfigBuilder('https://example.test/api/items', {
+      grid: { columns: [{ field: 'id' }] },
+    });
+
+    const relatedConfig = builder.getConfig('https://example.test/api/items/1/related');
+
+    expect(relatedConfig.endpoint).toBe('https://example.test/api/items/1/related');
+    expect(builder.getConfig().endpoint).toBe('https://example.test/api/items');
+    expect(relatedConfig.grid.columns).toEqual([{ field: 'id' }]);
+  });
+});

package/lib/deepMerge.spec.js

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { deepMerge } from './deepMerge.js';
+
+describe('deepMerge', () => {
+  it('replaces a null target property with a plain object from source', () => {
+    const target = { grid: null };
+    const source = { grid: { columns: [{ field: 'id' }] } };
+
+    const result = deepMerge(target, source);
+
+    expect(result.grid).toEqual({ columns: [{ field: 'id' }] });
+  });
+
+  it('preserves array order and content when merging a columns array under a previously-null key', () => {
+    const columns = [
+      { field: 'id', header: 'ID' },
+      { field: 'name', header: 'Name' },
+      { field: 'continent', header: 'Continent' },
+    ];
+
+    const result = deepMerge({ grid: null }, { grid: { columns } });
+
+    expect(result.grid.columns).toEqual(columns);
+    expect(result.grid.columns).not.toBe(columns);
+  });
+
+  it('does not mutate the source when merging into a null target key', () => {
+    const source = { grid: { columns: [{ field: 'id' }] } };
+
+    const result = deepMerge({ grid: null }, source);
+    result.grid.columns.push({ field: 'extra' });
+
+    expect(source.grid.columns.length).toBe(1);
+  });
+
+  it('overwrites configured overwriteProperties instances as-is instead of merging them', () => {
+    class Adapter {}
+    const targetAdapter = new Adapter();
+    const sourceAdapter = new Adapter();
+
+    const result = deepMerge({ responseAdapter: targetAdapter }, { responseAdapter: sourceAdapter });
+
+    expect(result.responseAdapter).toBe(sourceAdapter);
+  });
+});

package/lib/defaultConfig.js

@@ -16,6 +16,7 @@ export const defaultConfig = {
     initial: 25,
   },
   maxBatchActionItems: 100,
+  grid: null,
   customization: {
     disableKeywordSearch: true,
     hideCountSummary: false,
@@ -26,6 +27,7 @@ export const defaultConfig = {
     disableEdit: false,
     disableDelete: false,
     disableRestore: false,
+    disableListActions: false,
     disablePagination: true,
     disableSort: true,
     disableFilter: true,
@@ -62,6 +64,7 @@ export const defaultConfig = {
   },
   templates: {
     item: () => templatePlaceholder('item'),
+    grid: null,
     insertForm: (belongsTo, relationId) => templatePlaceholder('insertForm'),
     updateForm: () => templatePlaceholder('updateForm'),
     help: () => templatePlaceholder('help'),
@@ -84,4 +87,4 @@ export const defaultConfig = {
   onActionListSuccess(actionSuccessDetail) {},
   onActionSingleSuccess(actionSuccessDetail) {},
   destructiveActionNames: ['DeleteAction'],
-}
+}