fix(SFINT-3295): Add events for show and hide of UserActionsPanel

coveo · Jul 8, 2020 · 18631ff · 18631ff
1 parent a3744ac
commit 18631ff
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/src/components/UserActions/UserActions.ts b/src/components/UserActions/UserActions.ts
@@ -87,6 +87,10 @@ export class UserActions extends Component {
      * Identifier of the Search-UI component.
      */
     static readonly ID = 'UserActions';
+    static readonly Events = {
+        Hide: 'userActionsPanelHide',
+        Show: 'userActionsPanelShow'
+    };
 
     /**
      * Default initialization options of the **UserActions** class.
@@ -156,33 +160,45 @@ export class UserActions extends Component {
             (get(this.root, UserProfileModel) as UserProfileModel).deleteActions(this.options.userId);
             this.root.classList.remove(UserActions.USER_ACTION_OPENED);
             this.isOpened = false;
+            this.element.dispatchEvent(new CustomEvent(UserActions.Events.Hide));
         }
     }
 
     /**
      * Open the panel.
      */
-    public show() {
+    public async show() {
         if (!this.isOpened) {
-            (get(this.root, UserProfileModel) as UserProfileModel)
-                .getActions(this.options.userId)
-                .then(actions => (actions.length > 0 ? this.render() : this.renderNoActions()))
-                .catch(e => (e && e.statusCode === 404 ? this.renderEnablePrompt() : this.renderNoActions()));
-
+            this.element.dispatchEvent(new CustomEvent(UserActions.Events.Show));
             this.bindings.usageAnalytics.logCustomEvent({ name: 'openUserActions', type: 'User Actions' }, {}, this.element);
             this.root.classList.add(UserActions.USER_ACTION_OPENED);
             this.isOpened = true;
+
+            try {
+                const userActions = await (get(this.root, UserProfileModel) as UserProfileModel).getActions(this.options.userId);
+                if (userActions.length > 0) {
+                    this.render();
+                } else {
+                    this.renderNoActions();
+                }
+            } catch (e) {
+                if (e && e.statusCode === 404) {
+                    this.renderEnablePrompt();
+                } else {
+                    this.renderNoActions();
+                }
+            }
         }
     }
 
     /**
      * Toggle the visibility of the panel.
      */
-    public toggle() {
+    public async toggle() {
         if (this.isOpened) {
             this.hide();
         } else {
-            this.show();
+            await this.show();
         }
     }
 

diff --git a/tests/components/UserActions/UserActions.spec.ts b/tests/components/UserActions/UserActions.spec.ts
@@ -486,6 +486,13 @@ describe('UserActions', () => {
                 expect(modelMock.getActions.calledWithExactly(someUserId)).toBe(true);
             });
         });
+
+        it('should trigger a userActionsShow event', () => {
+            const spyDispatchEvent = sandbox.spy(mock.cmp.element, 'dispatchEvent');
+            mock.cmp.show();
+
+            expect(spyDispatchEvent.calledOnceWith(new CustomEvent('userActionsPanelHide')));
+        });
     });
 
     describe('hide', () => {
@@ -544,6 +551,15 @@ describe('UserActions', () => {
                 expect(modelMock.deleteActions.calledWithExactly(someUserId)).toBe(true);
             });
         });
+
+        it('should trigger a userActionsHide event', () => {
+            mock.cmp.show();
+            const spyDispatchEvent = sandbox.spy(mock.cmp.element, 'dispatchEvent');
+
+            mock.cmp.hide();
+
+            expect(spyDispatchEvent.calledOnceWith(new CustomEvent('userActionsPanelHide')));
+        });
     });
 
     describe('tagViewsOfUser', () => {