Add icons to User Actions Summary SFINT-2374 (#35)

* Added icons to recent actions list items SFINT-2374

* Added tests for summary list item icons SFINT-2374

* Added coveo-list-row style class with attributes passed down to direct children SFINT-2374

* Removed overflow css that wasn't being applied SFINT-2374

src/components/UserActions/ClickedDocumentList.ts

@@ -13,6 +13,7 @@ import {
 import { UserProfileModel, UserAction } from '../../models/UserProfileModel';
 import { ExpandableList } from './ExpandableList';
 import { UserActionType } from '../../rest/UserProfilingEndpoint';
+import { duplicate } from '../../utils/icons';
 import './Strings';
 
 /**
@@ -70,7 +71,11 @@ export class ClickedDocumentList extends Component {
         }),
         userId: ComponentOptions.buildStringOption({ required: true }),
         template: ComponentOptions.buildTemplateOption({
-            defaultValue: HtmlTemplate.fromString('<a class="CoveoResultLink"></a>', {
+            defaultValue: HtmlTemplate.fromString(
+                `<div class="coveo-list-row">
+                    <div>${duplicate}</div>
+                    <a class="CoveoResultLink" /a>
+                </div>`, {
                 layout: 'list'
             })
         })

src/components/UserActions/QueryList.ts

@@ -1,14 +1,24 @@
 import { Component, IComponentBindings, Initialization, ComponentOptions, get, Omnibox, l } from 'coveo-search-ui';
 import { UserProfileModel } from '../../models/UserProfileModel';
 import { ExpandableList } from './ExpandableList';
+import { search } from '../../utils/icons';
 import './Strings';
 
 const DEFAULT_TRANSFORMATION = () => (query: string) => {
+    const container = document.createElement('div');
+    container.classList.add('coveo-list-row');
+
+    const icon = document.createElement('div');
+    icon.innerHTML = search;
+
     const span = document.createElement('span');
     span.classList.add('coveo-content');
     span.innerHTML = query;
 
-    return Promise.resolve(span);
+    container.appendChild(icon);
+    container.appendChild(span);
+
+    return Promise.resolve(container);
 };
 
 /**

src/components/UserActions/UserActions.scss

@@ -84,6 +84,10 @@ $search-ui-dropdown-header-color: #1d4f76;
 
         li {
             margin: 0.25em 0;
+
+            .coveo-list-row > * {
+                display: inline;
+            }
         }
     }
 

tests/components/UserActions/ClickedDocumentList.spec.ts

@@ -101,6 +101,27 @@ describe('ClickedDocumentList', () => {
         });
     });
 
+    it('should display an icon beside every list item', () => {
+        sandbox.stub(Initialization, 'automaticallyCreateComponentsInsideResult');
+
+        const mock = Mock.advancedComponentSetup<ClickedDocumentList>(
+            ClickedDocumentList,
+            new Mock.AdvancedComponentSetupOptions(null, { userId: 'testuserId', numberOfItems: 10 }, env => {
+                fakeUserProfileModel(env.root, sandbox).getActions.returns(Promise.resolve(TEST_CLICKS));
+                return env;
+            })
+        );
+
+        return delay(() => {
+            const list = mock.env.element.querySelector<HTMLOListElement>('.coveo-list');
+
+            for(let i=0; i<4; i++){
+                const icon = list.children.item(i).querySelector<HTMLElement>('svg');
+                expect(icon).toBeDefined;
+            };
+        });
+    });
+
     it('should show all documents when expanded', () => {
         sandbox.stub(Initialization, 'automaticallyCreateComponentsInsideResult');
 

tests/components/UserActions/QueryList.spec.ts

@@ -94,6 +94,25 @@ describe('QueryList', () => {
         });
     });
 
+    it('should display a search icon on every list item', () => {
+        const mock = Mock.advancedComponentSetup<QueryList>(
+            QueryList,
+            new Mock.AdvancedComponentSetupOptions(null, { userId: 'testuserId', numberOfItems: 10 }, env => {
+                fakeUserProfileModel(env.root, sandbox).getActions.returns(Promise.resolve(TEST_QUERIES));
+                return env;
+            })
+        );
+
+        return delay(() => {
+            const list = mock.env.element.querySelector<HTMLOListElement>('.coveo-list');
+
+            for(let i=0; i<4; i++){
+                const icon = list.children.item(i).querySelector<HTMLElement>('svg');
+                expect(icon).toBeDefined;
+            };
+        })
+    })
+
     it('should show all queries when expanded', () => {
         const mock = Mock.advancedComponentSetup<QueryList>(
             QueryList,
@@ -145,7 +164,8 @@ describe('QueryList', () => {
 
             // Check that the order is respected.
             SORTED_AND_TRIMMED_SEARCH_EVENT.forEach((query, i) => {
-                expect(list.children.item(i).textContent).toBe(query);
+                const span = list.children.item(i).querySelector<HTMLElement>('.coveo-content');
+                expect(span.innerText).toBe(query);
             });
         });
     });