From cb75ccf7074ac314e60795f1573e730d76370bfb Mon Sep 17 00:00:00 2001 From: Etienne Rocheleau Date: Fri, 4 Feb 2022 12:23:12 -0500 Subject: [PATCH] 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 --- src/components/UserActions/Strings.ts | 8 ++++- src/components/UserActions/UserActions.scss | 20 ++++++++++-- src/components/UserActions/UserActions.ts | 32 +++++++++++++------ .../UserActions/UserActions.spec.ts | 17 ++++++---- 4 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/components/UserActions/Strings.ts b/src/components/UserActions/Strings.ts index 1b4365c..a34990d 100644 --- 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 index d2f9a02..c052bbd 100644 --- 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 index f309357..6015315 100644 --- 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 = ` +
${l(UserActions.ID)}
+

${l(UserActions.ID + '_no_actions_title')}.

+
+ ${l(UserActions.ID + '_no_actions_causes_title')} + +
+

${l(UserActions.ID + '_no_actions_contact_admin')}.

+ `; 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 = ` +
${l(UserActions.ID)}
+

${l(UserActions.ID + '_no_actions_cause_not_enabled')}.

+

${l(UserActions.ID + '_no_actions_contact_admin')}.

+ `; 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 index 1a3486a..ae17fa8 100644 --- 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('.coveo-enable-prompt')).not.toBeNull(); - expect(mock.cmp.element.querySelector('.coveo-enable-prompt').innerText).toBe( - l(`${UserActions.ID}_enable_prompt`).replace('\n', '') + expect(mock.cmp.element.querySelector('.coveo-no-actions')).not.toBeNull(); + expect(mock.cmp.element.querySelector('.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('.coveo-no-actions')).not.toBeNull(); - expect(mock.cmp.element.querySelector('.coveo-no-actions').innerText).toBe(l(`${UserActions.ID}_no_actions`)); + const noActions = mock.cmp.element.querySelector('.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('.coveo-no-actions').innerText).toBe(l(`${UserActions.ID}_no_actions`)); + const messageEl = mock.cmp.element.querySelector('.coveo-no-actions'); + expect(messageEl.innerText).toContain(l(`${UserActions.ID}_no_actions_title`)); }); describe('when the accordion header is clicked', () => {