new Events and localization for AttachResult and ResultsFilter components

src/components/AttachResult/AttachResult.ts

@@ -8,9 +8,12 @@ import {
     IAnalyticsCaseAttachMeta,
     IAnalyticsCaseDetachMeta,
     analyticsActionCauseList,
-    IAnalyticsActionCause
+    IAnalyticsActionCause,
+    l
 } from 'coveo-search-ui';
 import { paperclipIcon } from '../../utils/icons';
+import { AttachResultEvents, IAttachResultEventArgs } from './Events';
+import './Strings';
 
 export interface IAttachResultOptions {
     /** Specifies the tooltip displayed when the result is not attached. */
@@ -37,12 +40,12 @@ export class AttachResult extends Component {
     private buttonElement: HTMLElement;
     private tooltipElement: HTMLElement;
 
-    static options: IAttachResultOptions = {
+    public static readonly options: IAttachResultOptions = {
         attachCaption: ComponentOptions.buildStringOption({
-            defaultValue: 'Attach Result'
+            defaultValue: l(`${AttachResult.ID}_DefaultAttachCaption`)
         }),
         detachCaption: ComponentOptions.buildStringOption({
-            defaultValue: 'Detach Result'
+            defaultValue: l(`${AttachResult.ID}_DefaultDetachCaption`)
         }),
         attach: ComponentOptions.buildCustomOption(
             name => (result: IQueryResult) =>
@@ -111,6 +114,7 @@ export class AttachResult extends Component {
             .then(() => {
                 this.attached = true;
                 this.logAnalyticsCaseEvent(analyticsActionCauseList.caseAttach);
+                Coveo.$$(this.root).trigger(AttachResultEvents.Attach, { queryResult: this.queryResult } as IAttachResultEventArgs);
             })
             .finally(() => {
                 this.setLoading(false);
@@ -131,6 +135,7 @@ export class AttachResult extends Component {
             .then(() => {
                 this.attached = false;
                 this.logAnalyticsCaseEvent(analyticsActionCauseList.caseDetach);
+                Coveo.$$(this.root).trigger(AttachResultEvents.Detach, { queryResult: this.queryResult } as IAttachResultEventArgs);
             })
             .finally(() => {
                 this.setLoading(false);

src/components/AttachResult/Events.ts

@@ -0,0 +1,10 @@
+import { IQueryResult } from 'coveo-search-ui';
+
+export enum AttachResultEvents {
+    Attach = 'attach',
+    Detach = 'detach'
+}
+
+export interface IAttachResultEventArgs {
+    queryResult: IQueryResult;
+}

src/components/AttachResult/Strings.ts

@@ -0,0 +1,6 @@
+import { Translation, Language } from '../../utils/translation';
+
+Translation.register(Language.English, {
+    AttachResult_DefaultAttachCaption: 'Attach Result',
+    AttachResult_DefaultDetachCaption: 'Detach Result'
+});

src/components/ResultsFilter/Events.ts

@@ -0,0 +1,7 @@
+export enum ResultsFilterEvents {
+    Click = 'click'
+}
+
+export interface IResultsFilterEventArgs {
+    checked: boolean;
+}

src/components/ResultsFilter/ResultsFilter.ts

@@ -9,8 +9,11 @@ import {
     IBuildingQueryEventArgs,
     QueryStateModel,
     load,
-    IAttributesChangedEventArg
+    IAttributesChangedEventArg,
+    l
 } from 'coveo-search-ui';
+import { ResultsFilterEvents, IResultsFilterEventArgs } from './Events';
+import './Strings';
 
 export interface IAnalyticsFilteredResultsMeta {
     filteredResults: boolean;
@@ -36,7 +39,7 @@ export class ResultsFilter extends Component {
 
     static options: IResultsFilterOptions = {
         text: ComponentOptions.buildStringOption({
-            defaultValue: 'Filter Results'
+            defaultValue: l(`${ResultsFilter.ID}_DefaultText`)
         }),
         field: ComponentOptions.buildStringOption({
             defaultValue: 'urihash'
@@ -97,6 +100,7 @@ export class ResultsFilter extends Component {
     private handleCheckboxChange(checkbox: Checkbox) {
         this.queryStateModel.set(QueryStateModel.getFacetId(ResultsFilter.ID), this.checkbox.isSelected());
         this.triggerQuery();
+        Coveo.$$(this.root).trigger(ResultsFilterEvents.Click, { checked: this.checkbox.isSelected() } as IResultsFilterEventArgs);
     }
 
     private triggerQuery() {

src/components/ResultsFilter/Strings.ts

@@ -0,0 +1,5 @@
+import { Translation, Language } from '../../utils/translation';
+
+Translation.register(Language.English, {
+    ResultsFilter_DefaultText: 'Filter Results'
+});

tests/components/AttachResult/AttachResult.spec.ts

@@ -1,6 +1,7 @@
 import { AttachResult, IAttachResultOptions } from '../../../src/components/AttachResult/AttachResult';
 import { Mock, Fake } from 'coveo-search-ui-tests';
 import { IQueryResult, Logger } from 'coveo-search-ui';
+import { AttachResultEvents, IAttachResultEventArgs } from '../../../src/components/AttachResult/Events';
 
 describe('AttachResult', () => {
     let attachResult: Mock.IBasicComponentSetup<AttachResult>;
@@ -129,6 +130,14 @@ describe('AttachResult', () => {
             await attachResult.cmp.attach();
             expect(attachResult.cmp.element.querySelector('.coveo-caption-for-icon').innerHTML).toBe('detach me');
         });
+
+        it('should trigger the attach event', done => {
+            Coveo.$$(attachResult.env.root).on(AttachResultEvents.Attach, (evt: Event, args: IAttachResultEventArgs) => {
+                expect(args.queryResult).not.toBeNull();
+                done();
+            });
+            attachResult.cmp.attach();
+        });
     });
 
     describe('detach', () => {
@@ -186,6 +195,14 @@ describe('AttachResult', () => {
             await attachResult.cmp.detach();
             expect(attachResult.cmp.element.querySelector('.coveo-caption-for-icon').innerHTML).toBe('attach me');
         });
+
+        it('should trigger the detach event', done => {
+            Coveo.$$(attachResult.env.root).on(AttachResultEvents.Detach, (evt: Event, args: IAttachResultEventArgs) => {
+                expect(args.queryResult).not.toBeNull();
+                done();
+            });
+            attachResult.cmp.detach();
+        });
     });
 
     describe('click', () => {

tests/components/ResultsFilter/ResultsFilter.spec.ts

@@ -1,6 +1,7 @@
 import { ResultsFilter, IResultsFilterOptions } from '../../../src/components/ResultsFilter/ResultsFilter';
 import { Mock, Simulate } from 'coveo-search-ui-tests';
-import { QueryStateModel } from 'coveo-search-ui';
+import { QueryStateModel, Assert } from 'coveo-search-ui';
+import { ResultsFilterEvents, IResultsFilterEventArgs } from '../../../src/components/ResultsFilter/Events';
 
 describe('ResultsFilter', () => {
     let filter: Mock.IBasicComponentSetup<ResultsFilter>;
@@ -42,6 +43,23 @@ describe('ResultsFilter', () => {
         expect(filter.cmp.isSelected()).toBeFalsy();
     });
 
+    it('should trigger events on toggling', done => {
+        let cpt = 0;
+        Coveo.$$(filter.env.root).on(ResultsFilterEvents.Click, (evt: Event, args: IResultsFilterEventArgs) => {
+            expect(evt.type).toBe(ResultsFilterEvents.Click);
+            if (args.checked) {
+                cpt++;
+            } else {
+                cpt++;
+            }
+            if (cpt == 2) {
+                done();
+            }
+        });
+        filter.cmp.toggle();
+        filter.cmp.toggle();
+    });
+
     describe('when setting options', () => {
         beforeEach(() => {
             filter = Mock.optionsComponentSetup<ResultsFilter, IResultsFilterOptions>(ResultsFilter, {