feat(SFINT-4388) no results text when no user actions (#106)

* SFINT-4388 no results text when no user actions or when user actions are not enabled
coveo · Feb 4, 2022 · cb75ccf · cb75ccf
1 parent 35e19ab
commit cb75ccf
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 18 deletions.
diff --git a/src/components/UserActions/Strings.ts b/src/components/UserActions/Strings.ts
@@ -1,7 +1,13 @@
 import { Translation, Language } from '../../utils/translation';
 
 Translation.register(Language.English, {
-    UserActions_no_actions: 'No actions available for this user',
+    UserActions: 'User Actions',
+    UserActions_no_actions_title: 'No actions available for this user',
+    UserActions_no_actions_causes_title: 'Potential causes',
+    UserActions_no_actions_cause_not_enabled: 'User actions are not enabled for your organization',
+    UserActions_no_actions_cause_not_associated: 'There are no user actions associated with the user',
+    UserActions_no_actions_cause_case_too_old: 'The case is too old to detect related actions',
+    UserActions_no_actions_contact_admin: 'Contact your administrator for help',
     UserActions_enable_prompt: 'The User Action feature is not activated for your organization.\nTo activate it, contact Coveo Support.',
 
     QueryList_more: 'Show More',

diff --git a/src/components/UserActions/UserActions.scss b/src/components/UserActions/UserActions.scss
@@ -52,8 +52,24 @@ $clickable-blue: #004990;
     }
 
     .coveo-no-actions {
-        padding: 3em;
-        text-align: center;
+        padding: 1em;
+        border: 1px solid $heather;
+        border-radius: 2px;
+        background-color: $background-color-grey;
+        height: 15rem;
+        text-align: left;
+
+        .coveo-user-actions-title {
+            font-size: 1.2em;
+            font-weight: bold;
+            text-align: left;
+            width: auto;
+            margin-bottom: 1em;
+        }
+
+        .coveo-no-actions-causes {
+            margin: 0.5em 0;
+        }
     }
 
     .coveo-enable-prompt {

diff --git a/src/components/UserActions/UserActions.ts b/src/components/UserActions/UserActions.ts
@@ -175,7 +175,6 @@ export class UserActions extends Component {
             this.element.dispatchEvent(new CustomEvent(UserActions.Events.Show));
             this.bindings.usageAnalytics.logCustomEvent(UserActionEvents.open, {}, this.element);
             this.root.classList.add(UserActions.USER_ACTION_OPENED);
-
             try {
                 const userActions = await (get(this.root, UserProfileModel) as UserProfileModel).getActions(this.options.userId);
                 if (userActions.length > 0) {
@@ -316,21 +315,36 @@ export class UserActions extends Component {
     }
 
     private renderNoActions() {
-        const element = document.createElement('div');
-        element.classList.add('coveo-no-actions');
-        element.innerText = l(`${UserActions.ID}_no_actions`);
+        const messageContainer = document.createElement('div');
+        messageContainer.classList.add('coveo-no-actions');
+        messageContainer.innerHTML = `
+        <div class="coveo-user-actions-title">${l(UserActions.ID)}</div>
+        <p>${l(UserActions.ID + '_no_actions_title')}.</p>
+        <div>
+            <span>${l(UserActions.ID + '_no_actions_causes_title')}</span>
+            <ul class="coveo-no-actions-causes">
+                <li>${l(UserActions.ID + '_no_actions_cause_not_associated')}.</li>
+                <li>${l(UserActions.ID + '_no_actions_cause_case_too_old')}.</li>
+            </ul>
+        </div>
+        <p>${l(UserActions.ID + '_no_actions_contact_admin')}.</p>
+        `;
 
         this.element.innerHTML = '';
-        this.element.appendChild(element);
+        this.element.appendChild(messageContainer);
     }
 
     private renderEnablePrompt() {
-        const element = document.createElement('div');
-        element.classList.add('coveo-enable-prompt');
-        element.innerText = l(`${UserActions.ID}_enable_prompt`);
+        const messageContainer = document.createElement('div');
+        messageContainer.classList.add('coveo-no-actions');
+        messageContainer.innerHTML = `
+        <div class="coveo-user-actions-title">${l(UserActions.ID)}</div>
+        <p>${l(UserActions.ID + '_no_actions_cause_not_enabled')}.</p>
+        <p>${l(UserActions.ID + '_no_actions_contact_admin')}.</p>
+        `;
 
         this.element.innerHTML = '';
-        this.element.appendChild(element);
+        this.element.appendChild(messageContainer);
     }
 
     private showViewedByCustomer() {

diff --git a/tests/components/UserActions/UserActions.spec.ts b/tests/components/UserActions/UserActions.spec.ts
@@ -276,9 +276,9 @@ describe('UserActions', () => {
         );
         await mock.cmp.show();
 
-        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-enable-prompt')).not.toBeNull();
-        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-enable-prompt').innerText).toBe(
-            l(`${UserActions.ID}_enable_prompt`).replace('\n', '')
+        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions')).not.toBeNull();
+        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toContain(
+            l(`${UserActions.ID}_no_actions_cause_not_enabled`)
         );
     });
 
@@ -294,8 +294,12 @@ describe('UserActions', () => {
         );
         await mock.cmp.show();
 
-        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions')).not.toBeNull();
-        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toBe(l(`${UserActions.ID}_no_actions`));
+        const noActions = mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions');
+
+        expect(noActions).not.toBeNull();
+        expect(noActions.innerText).toContain(l(`${UserActions.ID}_no_actions_title`));
+        expect(noActions.innerText).toContain(l(`${UserActions.ID}_no_actions_cause_not_associated`));
+        expect(noActions.innerText).toContain(l(`${UserActions.ID}_no_actions_cause_case_too_old`));
     });
 
     it('should show a message when actions cannot be gathered', async () => {
@@ -310,7 +314,8 @@ describe('UserActions', () => {
         );
         await mock.cmp.show();
 
-        expect(mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions').innerText).toBe(l(`${UserActions.ID}_no_actions`));
+        const messageEl = mock.cmp.element.querySelector<HTMLElement>('.coveo-no-actions');
+        expect(messageEl.innerText).toContain(l(`${UserActions.ID}_no_actions_title`));
     });
 
     describe('when the accordion header is clicked', () => {