feat(atomic): Add insight result attach-to-case component

packages/atomic/src/components.d.ts

@@ -25,6 +25,7 @@ import { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedR
 import { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
 import { AtomicInsightStore } from "./components/insight/atomic-insight-interface/store";
 import { InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
+import { InsightResultAttachToCaseEvent } from "./components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action";
 import { Section } from "./components/common/atomic-layout-section/sections";
 import { AtomicCommonStore, AtomicCommonStoreData } from "./components/common/interface/store";
 import { SelectChildProductEventArgs } from "./components/commerce/product-template-components/atomic-product-children/atomic-product-children";
@@ -55,6 +56,7 @@ export { InsightEngine, FacetSortCriterion as InsightFacetSortCriterion, FoldedR
 export { InsightInitializationOptions } from "./components/insight/atomic-insight-interface/atomic-insight-interface";
 export { AtomicInsightStore } from "./components/insight/atomic-insight-interface/store";
 export { InsightResultActionClickedEvent } from "./components/insight/atomic-insight-result-action/atomic-insight-result-action";
+export { InsightResultAttachToCaseEvent } from "./components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action";
 export { Section } from "./components/common/atomic-layout-section/sections";
 export { AtomicCommonStore, AtomicCommonStoreData } from "./components/common/interface/store";
 export { SelectChildProductEventArgs } from "./components/commerce/product-template-components/atomic-product-children/atomic-product-children";
@@ -1413,6 +1415,10 @@ export namespace Components {
     }
     interface AtomicInsightResultActionBar {
     }
+    interface AtomicInsightResultAttachToCaseAction {
+    }
+    interface AtomicInsightResultAttachToCaseIndicator {
+    }
     interface AtomicInsightResultChildren {
         /**
           * The expected size of the image displayed in the children results.
@@ -3676,6 +3682,10 @@ export interface AtomicInsightResultActionCustomEvent<T> extends CustomEvent<T>
     detail: T;
     target: HTMLAtomicInsightResultActionElement;
 }
+export interface AtomicInsightResultAttachToCaseActionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAtomicInsightResultAttachToCaseActionElement;
+}
 export interface AtomicInsightSmartSnippetFeedbackModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicInsightSmartSnippetFeedbackModalElement;
@@ -4447,6 +4457,30 @@ declare global {
         prototype: HTMLAtomicInsightResultActionBarElement;
         new (): HTMLAtomicInsightResultActionBarElement;
     };
+    interface HTMLAtomicInsightResultAttachToCaseActionElementEventMap {
+        "atomic/insight/attachToCase/attach": InsightResultAttachToCaseEvent;
+        "atomic/insight/attachToCase/detach": InsightResultAttachToCaseEvent;
+    }
+    interface HTMLAtomicInsightResultAttachToCaseActionElement extends Components.AtomicInsightResultAttachToCaseAction, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAtomicInsightResultAttachToCaseActionElementEventMap>(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseActionElement, ev: AtomicInsightResultAttachToCaseActionCustomEvent<HTMLAtomicInsightResultAttachToCaseActionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAtomicInsightResultAttachToCaseActionElementEventMap>(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseActionElement, ev: AtomicInsightResultAttachToCaseActionCustomEvent<HTMLAtomicInsightResultAttachToCaseActionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAtomicInsightResultAttachToCaseActionElement: {
+        prototype: HTMLAtomicInsightResultAttachToCaseActionElement;
+        new (): HTMLAtomicInsightResultAttachToCaseActionElement;
+    };
+    interface HTMLAtomicInsightResultAttachToCaseIndicatorElement extends Components.AtomicInsightResultAttachToCaseIndicator, HTMLStencilElement {
+    }
+    var HTMLAtomicInsightResultAttachToCaseIndicatorElement: {
+        prototype: HTMLAtomicInsightResultAttachToCaseIndicatorElement;
+        new (): HTMLAtomicInsightResultAttachToCaseIndicatorElement;
+    };
     interface HTMLAtomicInsightResultChildrenElement extends Components.AtomicInsightResultChildren, HTMLStencilElement {
     }
     var HTMLAtomicInsightResultChildrenElement: {
@@ -5913,6 +5947,8 @@ declare global {
         "atomic-insight-result": HTMLAtomicInsightResultElement;
         "atomic-insight-result-action": HTMLAtomicInsightResultActionElement;
         "atomic-insight-result-action-bar": HTMLAtomicInsightResultActionBarElement;
+        "atomic-insight-result-attach-to-case-action": HTMLAtomicInsightResultAttachToCaseActionElement;
+        "atomic-insight-result-attach-to-case-indicator": HTMLAtomicInsightResultAttachToCaseIndicatorElement;
         "atomic-insight-result-children": HTMLAtomicInsightResultChildrenElement;
         "atomic-insight-result-children-template": HTMLAtomicInsightResultChildrenTemplateElement;
         "atomic-insight-result-list": HTMLAtomicInsightResultListElement;
@@ -7337,6 +7373,12 @@ declare namespace LocalJSX {
     }
     interface AtomicInsightResultActionBar {
     }
+    interface AtomicInsightResultAttachToCaseAction {
+        "onAtomic/insight/attachToCase/attach"?: (event: AtomicInsightResultAttachToCaseActionCustomEvent<InsightResultAttachToCaseEvent>) => void;
+        "onAtomic/insight/attachToCase/detach"?: (event: AtomicInsightResultAttachToCaseActionCustomEvent<InsightResultAttachToCaseEvent>) => void;
+    }
+    interface AtomicInsightResultAttachToCaseIndicator {
+    }
     interface AtomicInsightResultChildren {
         /**
           * The expected size of the image displayed in the children results.
@@ -9548,6 +9590,8 @@ declare namespace LocalJSX {
         "atomic-insight-result": AtomicInsightResult;
         "atomic-insight-result-action": AtomicInsightResultAction;
         "atomic-insight-result-action-bar": AtomicInsightResultActionBar;
+        "atomic-insight-result-attach-to-case-action": AtomicInsightResultAttachToCaseAction;
+        "atomic-insight-result-attach-to-case-indicator": AtomicInsightResultAttachToCaseIndicator;
         "atomic-insight-result-children": AtomicInsightResultChildren;
         "atomic-insight-result-children-template": AtomicInsightResultChildrenTemplate;
         "atomic-insight-result-list": AtomicInsightResultList;
@@ -9944,6 +9988,8 @@ declare module "@stencil/core" {
             "atomic-insight-result": LocalJSX.AtomicInsightResult & JSXBase.HTMLAttributes<HTMLAtomicInsightResultElement>;
             "atomic-insight-result-action": LocalJSX.AtomicInsightResultAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultActionElement>;
             "atomic-insight-result-action-bar": LocalJSX.AtomicInsightResultActionBar & JSXBase.HTMLAttributes<HTMLAtomicInsightResultActionBarElement>;
+            "atomic-insight-result-attach-to-case-action": LocalJSX.AtomicInsightResultAttachToCaseAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultAttachToCaseActionElement>;
+            "atomic-insight-result-attach-to-case-indicator": LocalJSX.AtomicInsightResultAttachToCaseIndicator & JSXBase.HTMLAttributes<HTMLAtomicInsightResultAttachToCaseIndicatorElement>;
             "atomic-insight-result-children": LocalJSX.AtomicInsightResultChildren & JSXBase.HTMLAttributes<HTMLAtomicInsightResultChildrenElement>;
             "atomic-insight-result-children-template": LocalJSX.AtomicInsightResultChildrenTemplate & JSXBase.HTMLAttributes<HTMLAtomicInsightResultChildrenTemplateElement>;
             "atomic-insight-result-list": LocalJSX.AtomicInsightResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightResultListElement>;

packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss

@@ -3,15 +3,15 @@
 atomic-insight-result-action-bar {
   @apply invisible absolute right-6 top-[-1rem] flex;
 
-  > atomic-insight-result-action:not(:last-child) {
+  > :not(:last-child) {
     button {
       @apply rounded-r-none border-r-0;
       &:hover {
         @apply border-r;
       }
     }
   }
-  > atomic-insight-result-action:not(:first-child) {
+  > :not(:first-child) {
     button {
       @apply rounded-bl-none rounded-tl-none;
     }

packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.pcss

@@ -0,0 +1 @@
+@import '../../../global/global.pcss';

packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.tsx

@@ -0,0 +1,101 @@
+import {AttachToCase, buildAttachToCase, Result} from '@coveo/headless/insight';
+import {Component, Event, State, h, Element, EventEmitter} from '@stencil/core';
+import AttachIcon from '../../../images/attach.svg';
+import DetachIcon from '../../../images/detach.svg';
+import {
+  BindStateToController,
+  InitializableComponent,
+  InitializeBindings,
+} from '../../../utils/initialization-utils';
+import {IconButton} from '../../common/iconButton';
+import {ResultContext} from '../../search/result-template-components/result-template-decorators';
+import {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface';
+
+export interface InsightResultAttachToCaseEvent {
+  controller: AttachToCase;
+  result: Result;
+}
+/**
+ * @internal
+ * The `atomic-insight-result-attach-to-case-action` component can be nested inside a `atomic-insight-result-actions` to render an interactive button that will emit an `atomic/insight/attachToCase/attach` or `atomic/insight/attachToCase/detach` JavaScript event, based on its current state, when clicked.
+ *
+ * @part result-action-container - The result action container
+ * @part result-action-button - The result action button
+ * @part result-action-icon - The result action icon
+ */
+@Component({
+  tag: 'atomic-insight-result-attach-to-case-action',
+  styleUrl: 'atomic-insight-result-attach-to-case-action.pcss',
+})
+export class AtomicInsightResultAttachToCaseAction
+  implements InitializableComponent<InsightBindings>
+{
+  @InitializeBindings() public bindings!: InsightBindings;
+  @ResultContext() private result!: Result;
+
+  @Element() host!: HTMLElement;
+  @State() public error!: Error;
+
+  public attachToCase!: AttachToCase;
+
+  @BindStateToController('attachToCase')
+  @State()
+  public attachToCaseState!: {};
+
+  @Event({
+    eventName: 'atomic/insight/attachToCase/attach',
+    composed: true,
+    cancelable: true,
+    bubbles: true,
+  })
+  private attach!: EventEmitter<InsightResultAttachToCaseEvent>;
+
+  @Event({
+    eventName: 'atomic/insight/attachToCase/detach',
+    composed: true,
+    cancelable: true,
+    bubbles: true,
+  })
+  private detach!: EventEmitter<InsightResultAttachToCaseEvent>;
+
+  public initialize() {
+    const caseId: string =
+      this.bindings.engine.state.insightCaseContext?.caseId || '';
+    this.attachToCase = buildAttachToCase(this.bindings.engine, {
+      options: {
+        result: this.result,
+        caseId: caseId,
+      },
+    });
+  }
+
+  private onClick() {
+    if (this.attachToCase.isAttached()) {
+      this.detach.emit({controller: this.attachToCase, result: this.result});
+    } else {
+      this.attach.emit({controller: this.attachToCase, result: this.result});
+    }
+  }
+
+  private getIcon() {
+    return this.attachToCase.isAttached() ? DetachIcon : AttachIcon;
+  }
+
+  private getTooltip() {
+    return this.attachToCase.isAttached()
+      ? this.bindings.i18n.t('detach-from-case')
+      : this.bindings.i18n.t('attach-to-case');
+  }
+
+  public render() {
+    return (
+      <IconButton
+        partPrefix="result-action"
+        style="outline-neutral"
+        icon={this.getIcon()}
+        title={this.getTooltip()}
+        onClick={() => this.onClick()}
+      />
+    );
+  }
+}

packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.pcss

@@ -0,0 +1 @@
+@import '../../../global/global.pcss';

packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.tsx

@@ -0,0 +1,60 @@
+import {AttachToCase, buildAttachToCase, Result} from '@coveo/headless/insight';
+import {Component, State, h, Element} from '@stencil/core';
+import AttachIcon from '../../../images/attach.svg';
+import {
+  BindStateToController,
+  InitializableComponent,
+  InitializeBindings,
+} from '../../../utils/initialization-utils';
+import {ResultContext} from '../../search/result-template-components/result-template-decorators';
+import {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface';
+
+/**
+ * @internal
+ * The `atomic-insight-result-attach-to-case-indicator` component can be included inside a result template to indicate whether a result is attached to the current case.
+ *
+ * @part icon The icon that indicates whether the result is attached to the case.
+ */
+@Component({
+  tag: 'atomic-insight-result-attach-to-case-indicator',
+  styleUrl: 'atomic-insight-result-attach-to-case-indicator.pcss',
+})
+export class AtomicInsightResultAttachToCaseIndicator
+  implements InitializableComponent<InsightBindings>
+{
+  @InitializeBindings() public bindings!: InsightBindings;
+  @ResultContext() private result!: Result;
+
+  @Element() host!: HTMLElement;
+  @State() public error!: Error;
+
+  public attachToCase!: AttachToCase;
+
+  @BindStateToController('attachToCase')
+  @State()
+  public attachToCaseState!: {};
+
+  public initialize() {
+    const caseId: string =
+      this.bindings.engine.state.insightCaseContext?.caseId || '';
+    this.attachToCase = buildAttachToCase(this.bindings.engine, {
+      options: {
+        result: this.result,
+        caseId: caseId,
+      },
+    });
+  }
+
+  public render() {
+    if (this.attachToCase.isAttached()) {
+      return (
+        <atomic-icon
+          part="icon"
+          class="flex w-5 justify-center"
+          icon={AttachIcon}
+          title={this.bindings.i18n.t('result-is-attached')}
+        ></atomic-icon>
+      );
+    }
+  }
+}