Repository: exadel-inc/esl
Pull request #2165 (2024-01-11 11:34:20)

fix(esl-share): fix merging of `additional`(nested) params when `ESLShareConfig.update` method is called
Plus: tech dept of renaming `alertText` to `copyAlertMsg`


Patch:
diff --git a/src/modules/esl-share/README.md b/src/modules/esl-share/README.md
index 4f0f515c1..9a87e6b03 100644
--- a/src/modules/esl-share/README.md
+++ b/src/modules/esl-share/README.md
@@ -176,7 +176,7 @@ or for example the configuration of the copy button
     "name": "copy",
     "title": "Copy",
     "additional": {
-        "alertText": "Copied to clipboard"
+        "copyAlertMsg": "Copied to clipboard"
     }
 }
 ```
@@ -221,7 +221,7 @@ The group may include another group. So this configuration describing nested gro
 ### Share actions available for use
 
 ESLShare provides several actions available for you to use:
- - `copy` - action for copying to the clipboard. It can use additional params `alertText` (with message text) to show an alert to indicate a successful operation
+ - `copy` - action for copying to the clipboard. It can use additional params `copyAlertMsg` (with message text) to show an alert to indicate a successful operation
  - `external` - action for sharing via an external application. It is used to produce actions via external applications linked via schema in URL (for example mailto:, news: or tel: )
  - `media` - action for sharing via a link to share on a social media
  - `native` - action for sharing that invokes the native sharing mechanism of Web Share API
diff --git a/src/modules/esl-share/actions/copy-action.ts b/src/modules/esl-share/actions/copy-action.ts
index 878a3db7e..eace66e5b 100644
--- a/src/modules/esl-share/actions/copy-action.ts
+++ b/src/modules/esl-share/actions/copy-action.ts
@@ -20,15 +20,15 @@ export class ESLShareCopyAction extends ESLShareBaseAction {
     if (!this.isAvailable || !url) return;
 
     await navigator.clipboard.writeText(url);
-    this.showCopyAlert($button.shareAdditional?.alertText);
+    this.showCopyAlert($button.shareAdditional?.copyAlertMsg);
   }
 
   /** Shows alert about the successful action completion */
-  protected showCopyAlert(alertText: string): void {
-    if (!alertText) return;
+  protected showCopyAlert(msg: string): void {
+    if (!msg) return;
     const detail = {
       cls: 'esl-share-alert',
-      html: `<span>${alertText}</span>`
+      html: `<span>${msg}</span>`
     };
     ESLEventUtils.dispatch(document.body, 'esl:alert:show', {detail});
   }
diff --git a/src/modules/esl-share/buttons/copy.ts b/src/modules/esl-share/buttons/copy.ts
index 217647599..1d6f6e28b 100644
--- a/src/modules/esl-share/buttons/copy.ts
+++ b/src/modules/esl-share/buttons/copy.ts
@@ -11,7 +11,7 @@ export const copy: ESLShareButtonConfig = {
   name: 'copy',
   title: 'Copy',
   additional: {
-    alertText: 'Copied to clipboard'
+    copyAlertMsg: 'Copied to clipboard'
   }
 };
 ESLShareConfig.append(copy);
diff --git a/src/modules/esl-share/core/esl-share-config.ts b/src/modules/esl-share/core/esl-share-config.ts
index 626d2fd2f..eceddba5b 100644
--- a/src/modules/esl-share/core/esl-share-config.ts
+++ b/src/modules/esl-share/core/esl-share-config.ts
@@ -1,6 +1,6 @@
 import {decorate, memoize} from '../../esl-utils/decorators';
 import {microtask} from '../../esl-utils/async/microtask';
-import {isObject} from '../../esl-utils/misc/object/types';
+import {isObject, deepMerge} from '../../esl-utils/misc/object';
 import {uniq} from '../../esl-utils/misc/array';
 import {SyntheticEventTarget} from '../../esl-utils/dom/events/target';
 
@@ -176,7 +176,7 @@ export class ESLShareConfig extends SyntheticEventTarget {
   /** Updates items by the name and passed changes */
   public update(name: string, changes: Partial<ESLShareButtonConfig>): ESLShareConfig {
     for (const btn of this.get(name)) {
-      this.append(Object.assign({}, btn, changes));
+      this.append(deepMerge({}, btn, changes));
     }
     return this;
   }


Test patch:
diff --git a/src/modules/esl-share/test/actions/copy-action.test.ts b/src/modules/esl-share/test/actions/copy-action.test.ts
index 32375c2ce..901f56147 100644
--- a/src/modules/esl-share/test/actions/copy-action.test.ts
+++ b/src/modules/esl-share/test/actions/copy-action.test.ts
@@ -23,7 +23,7 @@ describe('ESLShare: "copy" action public API', () => {
     document.body.appendChild($button);
     $button.setAttribute('share-title', 'Test button title');
     $button.setAttribute('share-url', '/test/button/url');
-    $button.setAttribute('additional', '{"alertText": "Copied to clipboard"}');
+    $button.setAttribute('additional', '{"copyAlertMsg": "Copied to clipboard"}');
   });
 
   afterEach(() => {
@@ -44,7 +44,7 @@ describe('ESLShare: "copy" action public API', () => {
     expect(mockClipboard.writeText).toBeCalledWith('http://localhost/test/button/url');
   });
 
-  test('should dispatch esl:alert:show with shareAdditional.alertText when share() calls', (done) => {
+  test('should dispatch esl:alert:show with shareAdditional.copyAlertMsg when share() calls', (done) => {
     document.body.addEventListener('esl:alert:show', (e) => {
       expect((e as CustomEvent).detail).toEqual({
         cls: 'esl-share-alert',
diff --git a/src/modules/esl-share/test/esl-share-button.test.ts b/src/modules/esl-share/test/esl-share-button.test.ts
index f2a6b7675..df92d9480 100644
--- a/src/modules/esl-share/test/esl-share-button.test.ts
+++ b/src/modules/esl-share/test/esl-share-button.test.ts
@@ -47,7 +47,7 @@ describe('ESLShareButton tests', () => {
     });
 
     test('shareAdditional getter available', () => {
-      expect($copyButton.shareAdditional).toEqual({alertText: 'Copied to clipboard'});
+      expect($copyButton.shareAdditional).toEqual({copyAlertMsg: 'Copied to clipboard'});
     });
     test('shareLink getter available', () => {
       expect($facebookButton.shareLink).toBe('//www.facebook.com/sharer.php?u={u}');
diff --git a/src/modules/esl-share/test/esl-share-config.test.ts b/src/modules/esl-share/test/esl-share-config.test.ts
index b2d92172b..a878dab45 100644
--- a/src/modules/esl-share/test/esl-share-config.test.ts
+++ b/src/modules/esl-share/test/esl-share-config.test.ts
@@ -11,6 +11,7 @@ describe('ESLShareConfig tests', () => {
   const SAMPLE_BUTTON_3: ESLShareButtonConfig = {name: 'sn3', title: 'SN3', action: 'media', link: 'https://sn3.com'};
   const SAMPLE_BUTTON_4: ESLShareButtonConfig = {name: 'sn4', title: 'SN4', action: 'media', link: 'https://sn4.com', icon: '<svg id="svg-4"></svg>'};
   const SAMPLE_BUTTON_5: ESLShareButtonConfig = {name: 'sn-5', title: 'SN5', action: 'media', link: 'https://sn5.com'};
+  const SAMPLE_BUTTON_6: ESLShareButtonConfig = {name: 'sn6', title: 'SN6', action: 'media', link: 'https://sn5.com', additional: {a: 1, b: 'test'}};
 
   describe('Getting ESLShareConfig state', () => {
     const instance: ESLShareConfig = new (ESLShareConfig as any)();
@@ -295,6 +296,12 @@ describe('ESLShareConfig tests', () => {
       }
     });
 
+    test('ESLShareConfig.update merge additional properties', () => {
+      instance.append(SAMPLE_BUTTON_6);
+      instance.update('sn6', {additional: {a: 2, c: 'test'}});
+      expect(instance.get('sn6')).toEqual([expect.objectContaining({...SAMPLE_BUTTON_6, additional: {a: 2, b: 'test', c: 'test'}})]);
+    });
+
     test('ESLShareConfig.update does not introduce new items', () => {
       instance.append([SAMPLE_BUTTON_1, SAMPLE_BUTTON_2]);
       instance.update('sn1', {title: 'SN3'});