From 73732989ac5ef08c0695c34d4a2dde49a0517cce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Mon, 7 Oct 2024 09:21:57 -0400 Subject: [PATCH 1/8] feat(atomic): Add insight result attach-to-case component --- packages/atomic/src/components.d.ts | 41 ++++++ .../atomic-insight-result-action-bar.pcss | 14 ++ .../atomic-insight-result-attach-to-case.pcss | 1 + .../atomic-insight-result-attach-to-case.tsx | 127 ++++++++++++++++++ packages/atomic/src/images/detach.svg | 3 + .../atomic/src/pages/examples/insights.html | 32 +++++ 6 files changed, 218 insertions(+) create mode 100644 packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss create mode 100644 packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx create mode 100644 packages/atomic/src/images/detach.svg diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index 1ed53e7e6ed..04c8ffd4664 100644 --- a/packages/atomic/src/components.d.ts +++ b/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/atomic-insight-result-attach-to-case"; 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/atomic-insight-result-attach-to-case"; 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,12 @@ export namespace Components { } interface AtomicInsightResultActionBar { } + interface AtomicInsightResultAttachToCase { + /** + * Set to true so the AtomicInsightResultAttachToCase behaves only as a visual indicator when results are attached. + */ + "readOnly": boolean; + } interface AtomicInsightResultChildren { /** * The expected size of the image displayed in the children results. @@ -3663,6 +3671,10 @@ export interface AtomicInsightResultActionCustomEvent extends CustomEvent detail: T; target: HTMLAtomicInsightResultActionElement; } +export interface AtomicInsightResultAttachToCaseCustomEvent extends CustomEvent { + detail: T; + target: HTMLAtomicInsightResultAttachToCaseElement; +} export interface AtomicInsightSmartSnippetFeedbackModalCustomEvent extends CustomEvent { detail: T; target: HTMLAtomicInsightSmartSnippetFeedbackModalElement; @@ -4434,6 +4446,24 @@ declare global { prototype: HTMLAtomicInsightResultActionBarElement; new (): HTMLAtomicInsightResultActionBarElement; }; + interface HTMLAtomicInsightResultAttachToCaseElementEventMap { + "atomic/insight/attachToCase/attach": InsightResultAttachToCaseEvent; + "atomic/insight/attachToCase/detach": InsightResultAttachToCaseEvent; + } + interface HTMLAtomicInsightResultAttachToCaseElement extends Components.AtomicInsightResultAttachToCase, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseElement, ev: AtomicInsightResultAttachToCaseCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseElement, ev: AtomicInsightResultAttachToCaseCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLAtomicInsightResultAttachToCaseElement: { + prototype: HTMLAtomicInsightResultAttachToCaseElement; + new (): HTMLAtomicInsightResultAttachToCaseElement; + }; interface HTMLAtomicInsightResultChildrenElement extends Components.AtomicInsightResultChildren, HTMLStencilElement { } var HTMLAtomicInsightResultChildrenElement: { @@ -5900,6 +5930,7 @@ declare global { "atomic-insight-result": HTMLAtomicInsightResultElement; "atomic-insight-result-action": HTMLAtomicInsightResultActionElement; "atomic-insight-result-action-bar": HTMLAtomicInsightResultActionBarElement; + "atomic-insight-result-attach-to-case": HTMLAtomicInsightResultAttachToCaseElement; "atomic-insight-result-children": HTMLAtomicInsightResultChildrenElement; "atomic-insight-result-children-template": HTMLAtomicInsightResultChildrenTemplateElement; "atomic-insight-result-list": HTMLAtomicInsightResultListElement; @@ -7324,6 +7355,14 @@ declare namespace LocalJSX { } interface AtomicInsightResultActionBar { } + interface AtomicInsightResultAttachToCase { + "onAtomic/insight/attachToCase/attach"?: (event: AtomicInsightResultAttachToCaseCustomEvent) => void; + "onAtomic/insight/attachToCase/detach"?: (event: AtomicInsightResultAttachToCaseCustomEvent) => void; + /** + * Set to true so the AtomicInsightResultAttachToCase behaves only as a visual indicator when results are attached. + */ + "readOnly"?: boolean; + } interface AtomicInsightResultChildren { /** * The expected size of the image displayed in the children results. @@ -9522,6 +9561,7 @@ declare namespace LocalJSX { "atomic-insight-result": AtomicInsightResult; "atomic-insight-result-action": AtomicInsightResultAction; "atomic-insight-result-action-bar": AtomicInsightResultActionBar; + "atomic-insight-result-attach-to-case": AtomicInsightResultAttachToCase; "atomic-insight-result-children": AtomicInsightResultChildren; "atomic-insight-result-children-template": AtomicInsightResultChildrenTemplate; "atomic-insight-result-list": AtomicInsightResultList; @@ -9918,6 +9958,7 @@ declare module "@stencil/core" { "atomic-insight-result": LocalJSX.AtomicInsightResult & JSXBase.HTMLAttributes; "atomic-insight-result-action": LocalJSX.AtomicInsightResultAction & JSXBase.HTMLAttributes; "atomic-insight-result-action-bar": LocalJSX.AtomicInsightResultActionBar & JSXBase.HTMLAttributes; + "atomic-insight-result-attach-to-case": LocalJSX.AtomicInsightResultAttachToCase & JSXBase.HTMLAttributes; "atomic-insight-result-children": LocalJSX.AtomicInsightResultChildren & JSXBase.HTMLAttributes; "atomic-insight-result-children-template": LocalJSX.AtomicInsightResultChildrenTemplate & JSXBase.HTMLAttributes; "atomic-insight-result-list": LocalJSX.AtomicInsightResultList & JSXBase.HTMLAttributes; diff --git a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss index f2707d8b8e0..1351742e37f 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss +++ b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss @@ -16,4 +16,18 @@ atomic-insight-result-action-bar { @apply rounded-bl-none rounded-tl-none; } } + + > atomic-insight-result-attach-to-case:not(:last-child) { + button { + @apply rounded-r-none border-r-0; + &:hover { + @apply border-r; + } + } + } + > atomic-insight-result-attach-to-case:not(:first-child) { + button { + @apply rounded-bl-none rounded-tl-none; + } + } } diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss new file mode 100644 index 00000000000..c76e98dcfbd --- /dev/null +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss @@ -0,0 +1 @@ +@import '../../../global/global.pcss'; diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx new file mode 100644 index 00000000000..487d5e12506 --- /dev/null +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx @@ -0,0 +1,127 @@ +import {AttachToCase, buildAttachToCase, Result} from '@coveo/headless/insight'; +import { + Component, + Event, + Prop, + 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 + */ +@Component({ + tag: 'atomic-insight-result-attach-to-case', + styleUrl: 'atomic-insight-result-attach-to-case.pcss', +}) +export class AtomicInsightResultAttachToCase + implements InitializableComponent +{ + @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; + + @Event({ + eventName: 'atomic/insight/attachToCase/detach', + composed: true, + cancelable: true, + bubbles: true, + }) + private detach!: EventEmitter; + + /** + * Set to true so the AtomicInsightResultAttachToCase behaves only as a visual indicator when results are attached. + */ + @Prop() + public readOnly: boolean = false; + + 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() { + if (this.attachToCase.isAttached() && this.readOnly) { + return AttachIcon; + } + return this.attachToCase.isAttached() ? DetachIcon : AttachIcon; + } + + private getTooltip() { + if (this.attachToCase.isAttached() && this.readOnly) { + return 'result is attached to case'; + } + return this.attachToCase.isAttached() + ? 'Detach from case' + : 'Attach to case'; + } + + public render() { + if (!this.readOnly) { + return ( + this.onClick()} + /> + ); + } else if (this.attachToCase.isAttached() && this.readOnly) { + return ( + + ); + } + } +} diff --git a/packages/atomic/src/images/detach.svg b/packages/atomic/src/images/detach.svg new file mode 100644 index 00000000000..bafec1bae97 --- /dev/null +++ b/packages/atomic/src/images/detach.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/atomic/src/pages/examples/insights.html b/packages/atomic/src/pages/examples/insights.html index 24f9292fc3e..ca21ca99fd8 100644 --- a/packages/atomic/src/pages/examples/insights.html +++ b/packages/atomic/src/pages/examples/insights.html @@ -9,6 +9,7 @@ From dfc51d7dc18052878c455f7414880ca308c9113f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Mon, 7 Oct 2024 09:38:30 -0400 Subject: [PATCH 2/8] feat(atomic): Update tooltip text for attaching/detaching insight result to/from case --- .../atomic-insight-result-attach-to-case.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx index 487d5e12506..f1b61918839 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx @@ -95,11 +95,11 @@ export class AtomicInsightResultAttachToCase private getTooltip() { if (this.attachToCase.isAttached() && this.readOnly) { - return 'result is attached to case'; + return this.bindings.i18n.t('insight-result-is-attached'); } return this.attachToCase.isAttached() - ? 'Detach from case' - : 'Attach to case'; + ? this.bindings.i18n.t('insight-detach-from-case') + : this.bindings.i18n.t('insight-attach-to-case'); } public render() { From 8179955cdf43725ded3e25fc7f28b8c6b1d6099d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Mon, 7 Oct 2024 09:54:12 -0400 Subject: [PATCH 3/8] feat(atomic): Add missing translations for attach/detach to/from case --- .../atomic-insight-result-attach-to-case.tsx | 6 +- packages/atomic/src/locales.json | 81 +++++++++++++++++++ 2 files changed, 84 insertions(+), 3 deletions(-) diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx index f1b61918839..271ae51517d 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx @@ -95,11 +95,11 @@ export class AtomicInsightResultAttachToCase private getTooltip() { if (this.attachToCase.isAttached() && this.readOnly) { - return this.bindings.i18n.t('insight-result-is-attached'); + return this.bindings.i18n.t('result-is-attached'); } return this.attachToCase.isAttached() - ? this.bindings.i18n.t('insight-detach-from-case') - : this.bindings.i18n.t('insight-attach-to-case'); + ? this.bindings.i18n.t('detach-from-case') + : this.bindings.i18n.t('attach-to-case'); } public render() { diff --git a/packages/atomic/src/locales.json b/packages/atomic/src/locales.json index 35dc6aebbac..d4a1d6414c4 100644 --- a/packages/atomic/src/locales.json +++ b/packages/atomic/src/locales.json @@ -5265,6 +5265,87 @@ "zh-CN": "与本案有关的见解", "zh-TW": "與此案件相關的洞見" }, + "attach-to-case": { + "en": "Attach to case", + "fr": "Attacher au cas", + "cs": "Připojit k případu", + "da": "Tilføj til sag", + "de": "An den Fall anhängen", + "el": "Σύνδεση με υπόθεση", + "es": "Adjuntar al caso", + "fi": "Liitä tapaukseen", + "hu": "Csatolás az ügyhöz", + "id": "Lampirkan ke kasus", + "it": "Allega al caso", + "ja": " ケースに関連付ける", + "ko": "케이스에 첨부", + "nl": "Toevoegen aan zaak", + "no": "Legg til i sak", + "pl": "Dołącz do sprawy", + "pt": "Anexar ao caso", + "pt-BR": "Anexar ao caso", + "ru": "Присоединить к случаю", + "sv": "Bifoga till fall", + "th": "แนบไปที่เคส", + "tr": "Duruma ekle", + "zh": "附加到此案件", + "zh-CN": "附加到此案件", + "zh-TW": "附加到此案件" + }, + "detach-from-case": { + "en": "Detach from case", + "fr": "Détacher du cas", + "cs": "Odpojit od případu", + "da": "Fjern fra sag", + "de": "Vom Fall trennen", + "el": "Αποσύνδεση από την υπόθεση", + "es": "Desvincular del caso", + "fi": "Poista tapauksesta", + "hu": "Leválasztás az ügyről", + "id": "Lepaskan dari kasus", + "it": "Scollega dal caso", + "ja": "ケースから切り離す", + "ko": "케이스에서 분리", + "nl": "Verwijderen van zaak", + "no": "Fjern fra saken", + "pl": "Odłącz od sprawy", + "pt": "Desanexar do caso", + "pt-BR": "Desanexar do caso", + "ru": "Отсоединить от случая", + "sv": "Koppla bort från fall", + "th": "ถอดออกจากเคส", + "tr": "Durumdan çıkar", + "zh": "从案件中分离", + "zh-CN": "从案件中分离", + "zh-TW": "從案件中分離" + }, + "result-is-attached": { + "en": "Result is attached to case", + "fr": "Le résultat est attaché au cas", + "cs": "Výsledek je připojen k případu", + "da": "Resultatet er tilføjet sagen", + "de": "Ergebnis ist dem Fall angehängt", + "el": "Το αποτέλεσμα είναι συνδεδεμένο με την υπόθεση", + "es": "El resultado está adjunto al caso", + "fi": "Tulos on liitetty tapaukseen", + "hu": "Az eredmény az ügyhöz van csatolva", + "id": "Hasil telah dilampirkan ke kasus", + "it": "Il risultato è allegato al caso", + "ja": "結果がケースに関連付けられています", + "ko": "결과가 케이스에 첨부되었습니다", + "nl": "Resultaat is toegevoegd aan de zaak", + "no": "Resultatet er lagt til saken", + "pl": "Wynik został dołączony do sprawy", + "pt": "Resultado anexado ao caso", + "pt-BR": "Resultado anexado ao caso", + "ru": "Результат присоединен к случаю", + "sv": "Resultatet är bifogat till fallet", + "th": "ผลลัพธ์ถูกแนบไปที่เคส", + "tr": "Sonuç duruma eklendi", + "zh": "结果已附加到此案件", + "zh-CN": "结果已附加到此案件", + "zh-TW": "結果已附加到此案件" + }, "full-search": { "en": "Button to access full search", "fr": "Bouton pour accéder à la recherche complète", From 27fa99eefe4eda360f279104dad5d302518a9617 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Mon, 7 Oct 2024 16:26:26 -0400 Subject: [PATCH 4/8] refactor(atomic): Update CSS selectors in atomic-insight-result-action-bar and atomic-insight-result-attach-to-case components --- .../atomic-insight-result-action-bar.pcss | 18 ++---------------- .../atomic-insight-result-attach-to-case.tsx | 2 +- .../atomic/src/pages/examples/insights.html | 6 +----- 3 files changed, 4 insertions(+), 22 deletions(-) diff --git a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss index 1351742e37f..688b2b20384 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss +++ b/packages/atomic/src/components/insight/atomic-insight-result-action-bar/atomic-insight-result-action-bar.pcss @@ -3,7 +3,7 @@ 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 { @@ -11,21 +11,7 @@ atomic-insight-result-action-bar { } } } - > atomic-insight-result-action:not(:first-child) { - button { - @apply rounded-bl-none rounded-tl-none; - } - } - - > atomic-insight-result-attach-to-case:not(:last-child) { - button { - @apply rounded-r-none border-r-0; - &:hover { - @apply border-r; - } - } - } - > atomic-insight-result-attach-to-case:not(:first-child) { + > :not(:first-child) { button { @apply rounded-bl-none rounded-tl-none; } diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx index 271ae51517d..201bf20f875 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx @@ -62,7 +62,7 @@ export class AtomicInsightResultAttachToCase private detach!: EventEmitter; /** - * Set to true so the AtomicInsightResultAttachToCase behaves only as a visual indicator when results are attached. + * Whether the component should only behave as a visual indicator that a result is attached to the current case. Defaults to `false`, meaning that the component is interactive by default. */ @Prop() public readOnly: boolean = false; diff --git a/packages/atomic/src/pages/examples/insights.html b/packages/atomic/src/pages/examples/insights.html index ca21ca99fd8..3871538161f 100644 --- a/packages/atomic/src/pages/examples/insights.html +++ b/packages/atomic/src/pages/examples/insights.html @@ -461,11 +461,7 @@ document.addEventListener('atomic/insight/attachToCase/attach', (event) => { console.log('attach', event.detail); const {controller, result} = event.detail; - - new Promise(resolve => setTimeout(() => resolve(), 1000)).then(() => { - controller.attach(); - }); - + controller.attach(); }); document.addEventListener('atomic/insight/attachToCase/detach', (event) => { From f9bb10ea3b7fbc4d0bcd2d8ef344e8378f9e8fbc Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 7 Oct 2024 20:34:05 +0000 Subject: [PATCH 5/8] Add generated files --- packages/atomic/src/components.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index 04c8ffd4664..01a4abfc104 100644 --- a/packages/atomic/src/components.d.ts +++ b/packages/atomic/src/components.d.ts @@ -1417,7 +1417,7 @@ export namespace Components { } interface AtomicInsightResultAttachToCase { /** - * Set to true so the AtomicInsightResultAttachToCase behaves only as a visual indicator when results are attached. + * Whether the component should only behave as a visual indicator that a result is attached to the current case. Defaults to `false`, meaning that the component is interactive by default. */ "readOnly": boolean; } @@ -7359,7 +7359,7 @@ declare namespace LocalJSX { "onAtomic/insight/attachToCase/attach"?: (event: AtomicInsightResultAttachToCaseCustomEvent) => void; "onAtomic/insight/attachToCase/detach"?: (event: AtomicInsightResultAttachToCaseCustomEvent) => void; /** - * Set to true so the AtomicInsightResultAttachToCase behaves only as a visual indicator when results are attached. + * Whether the component should only behave as a visual indicator that a result is attached to the current case. Defaults to `false`, meaning that the component is interactive by default. */ "readOnly"?: boolean; } From c216f77fe53fbdb27aded528d5867a8ca1e67616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Mon, 7 Oct 2024 16:49:38 -0400 Subject: [PATCH 6/8] docs(atomic): document component --- .../atomic-insight-result-attach-to-case.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx index 201bf20f875..d848e7ae162 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx @@ -25,6 +25,14 @@ export interface InsightResultAttachToCaseEvent { } /** * @internal + * The `atomic-insight-result-attach-to-case` 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. + * + * The component can also be included inside a result template, typically with the `readOnly="true"` attribute, to indicate whether a result is attached to the current case. + * + * @part result-action-container - The result action container, when the `readOnly` prop is set to `false`. + * @part result-action-button - The result action button, when the `readOnly` prop is set to `false`. + * @part result-action-icon - The result action icon, when the `readOnly` prop is set to `false`. + * @part icon The icon, when the `readOnly` prop is set to `true`. */ @Component({ tag: 'atomic-insight-result-attach-to-case', From 30275210bc3109c384f1385f761b6dd172ae8052 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Fri, 11 Oct 2024 13:58:56 -0400 Subject: [PATCH 7/8] refactor(atomic): Rename atomic-insight-result-attach-to-case component to atomic-insight-result-attach-to-case-action and add new one for attach-to-case-indicator --- ...insight-result-attach-to-case-action.pcss} | 0 ...-insight-result-attach-to-case-action.tsx} | 68 +++++-------------- ...sight-result-attach-to-case-indicator.pcss | 1 + ...nsight-result-attach-to-case-indicator.tsx | 60 ++++++++++++++++ .../atomic/src/pages/examples/insights.html | 18 ++--- 5 files changed, 87 insertions(+), 60 deletions(-) rename packages/atomic/src/components/insight/{atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss => atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.pcss} (100%) rename packages/atomic/src/components/insight/{atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx => atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.tsx} (51%) create mode 100644 packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.pcss create mode 100644 packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.tsx diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.pcss similarity index 100% rename from packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.pcss rename to packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.pcss diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.tsx similarity index 51% rename from packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx rename to packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.tsx index d848e7ae162..0ab7567faad 100644 --- a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case/atomic-insight-result-attach-to-case.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-action/atomic-insight-result-attach-to-case-action.tsx @@ -1,13 +1,5 @@ import {AttachToCase, buildAttachToCase, Result} from '@coveo/headless/insight'; -import { - Component, - Event, - Prop, - State, - h, - Element, - EventEmitter, -} from '@stencil/core'; +import {Component, Event, State, h, Element, EventEmitter} from '@stencil/core'; import AttachIcon from '../../../images/attach.svg'; import DetachIcon from '../../../images/detach.svg'; import { @@ -25,20 +17,17 @@ export interface InsightResultAttachToCaseEvent { } /** * @internal - * The `atomic-insight-result-attach-to-case` 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. - * - * The component can also be included inside a result template, typically with the `readOnly="true"` attribute, to indicate whether a result is attached to the current case. + * 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, when the `readOnly` prop is set to `false`. - * @part result-action-button - The result action button, when the `readOnly` prop is set to `false`. - * @part result-action-icon - The result action icon, when the `readOnly` prop is set to `false`. - * @part icon The icon, when the `readOnly` prop is set to `true`. + * @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', - styleUrl: 'atomic-insight-result-attach-to-case.pcss', + tag: 'atomic-insight-result-attach-to-case-action', + styleUrl: 'atomic-insight-result-attach-to-case-action.pcss', }) -export class AtomicInsightResultAttachToCase +export class AtomicInsightResultAttachToCaseAction implements InitializableComponent { @InitializeBindings() public bindings!: InsightBindings; @@ -69,12 +58,6 @@ export class AtomicInsightResultAttachToCase }) private detach!: EventEmitter; - /** - * Whether the component should only behave as a visual indicator that a result is attached to the current case. Defaults to `false`, meaning that the component is interactive by default. - */ - @Prop() - public readOnly: boolean = false; - public initialize() { const caseId: string = this.bindings.engine.state.insightCaseContext?.caseId || ''; @@ -95,41 +78,24 @@ export class AtomicInsightResultAttachToCase } private getIcon() { - if (this.attachToCase.isAttached() && this.readOnly) { - return AttachIcon; - } return this.attachToCase.isAttached() ? DetachIcon : AttachIcon; } private getTooltip() { - if (this.attachToCase.isAttached() && this.readOnly) { - return this.bindings.i18n.t('result-is-attached'); - } return this.attachToCase.isAttached() ? this.bindings.i18n.t('detach-from-case') : this.bindings.i18n.t('attach-to-case'); } public render() { - if (!this.readOnly) { - return ( - this.onClick()} - /> - ); - } else if (this.attachToCase.isAttached() && this.readOnly) { - return ( - - ); - } + return ( + this.onClick()} + /> + ); } } diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.pcss b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.pcss new file mode 100644 index 00000000000..c76e98dcfbd --- /dev/null +++ b/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'; diff --git a/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.tsx b/packages/atomic/src/components/insight/atomic-insight-result-attach-to-case-indicator/atomic-insight-result-attach-to-case-indicator.tsx new file mode 100644 index 00000000000..d0443b9d90a --- /dev/null +++ b/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 +{ + @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 ( + + ); + } + } +} diff --git a/packages/atomic/src/pages/examples/insights.html b/packages/atomic/src/pages/examples/insights.html index 3871538161f..58ca08f2bbb 100644 --- a/packages/atomic/src/pages/examples/insights.html +++ b/packages/atomic/src/pages/examples/insights.html @@ -127,7 +127,7 @@ tooltip="post to feed" action="postToFeed" > - + @@ -136,7 +136,7 @@ @@ -204,7 +204,7 @@ tooltip="post to feed" action="postToFeed" > - + @@ -226,7 +226,7 @@ - + @@ -369,7 +369,7 @@ @@ -443,10 +443,10 @@ updateWrapper(widgetView); async function updateWrapper(widgetView) { - const interface = 'atomic-insight-interface'; + const insightInterface = 'atomic-insight-interface'; const layout = 'atomic-insight-layout'; - await Promise.all([customElements.whenDefined(interface), customElements.whenDefined(layout)]); - const insightElements = [document.querySelector(interface), document.querySelector(layout)]; + await Promise.all([customElements.whenDefined(insightInterface), customElements.whenDefined(layout)]); + const insightElements = [document.querySelector(insightInterface), document.querySelector(layout)]; if (widgetView) { insightElements.forEach((el) => el.setAttribute('widget', true)); } else { From b9f039da5337aa211ef0721927c94b799651260f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean-Fran=C3=A7ois=20Allaire?= Date: Fri, 11 Oct 2024 14:15:01 -0400 Subject: [PATCH 8/8] refactor(atomic): Update component names and CSS selectors in atomic-insight-result-attach-to-case-action component --- packages/atomic/src/components.d.ts | 57 ++++++++++++++++------------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index 01a4abfc104..c16d828056e 100644 --- a/packages/atomic/src/components.d.ts +++ b/packages/atomic/src/components.d.ts @@ -25,7 +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/atomic-insight-result-attach-to-case"; +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"; @@ -56,7 +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/atomic-insight-result-attach-to-case"; +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"; @@ -1415,11 +1415,9 @@ export namespace Components { } interface AtomicInsightResultActionBar { } - interface AtomicInsightResultAttachToCase { - /** - * Whether the component should only behave as a visual indicator that a result is attached to the current case. Defaults to `false`, meaning that the component is interactive by default. - */ - "readOnly": boolean; + interface AtomicInsightResultAttachToCaseAction { + } + interface AtomicInsightResultAttachToCaseIndicator { } interface AtomicInsightResultChildren { /** @@ -3671,9 +3669,9 @@ export interface AtomicInsightResultActionCustomEvent extends CustomEvent detail: T; target: HTMLAtomicInsightResultActionElement; } -export interface AtomicInsightResultAttachToCaseCustomEvent extends CustomEvent { +export interface AtomicInsightResultAttachToCaseActionCustomEvent extends CustomEvent { detail: T; - target: HTMLAtomicInsightResultAttachToCaseElement; + target: HTMLAtomicInsightResultAttachToCaseActionElement; } export interface AtomicInsightSmartSnippetFeedbackModalCustomEvent extends CustomEvent { detail: T; @@ -4446,23 +4444,29 @@ declare global { prototype: HTMLAtomicInsightResultActionBarElement; new (): HTMLAtomicInsightResultActionBarElement; }; - interface HTMLAtomicInsightResultAttachToCaseElementEventMap { + interface HTMLAtomicInsightResultAttachToCaseActionElementEventMap { "atomic/insight/attachToCase/attach": InsightResultAttachToCaseEvent; "atomic/insight/attachToCase/detach": InsightResultAttachToCaseEvent; } - interface HTMLAtomicInsightResultAttachToCaseElement extends Components.AtomicInsightResultAttachToCase, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseElement, ev: AtomicInsightResultAttachToCaseCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + interface HTMLAtomicInsightResultAttachToCaseActionElement extends Components.AtomicInsightResultAttachToCaseAction, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseActionElement, ev: AtomicInsightResultAttachToCaseActionCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseElement, ev: AtomicInsightResultAttachToCaseCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLAtomicInsightResultAttachToCaseActionElement, ev: AtomicInsightResultAttachToCaseActionCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } - var HTMLAtomicInsightResultAttachToCaseElement: { - prototype: HTMLAtomicInsightResultAttachToCaseElement; - new (): HTMLAtomicInsightResultAttachToCaseElement; + var HTMLAtomicInsightResultAttachToCaseActionElement: { + prototype: HTMLAtomicInsightResultAttachToCaseActionElement; + new (): HTMLAtomicInsightResultAttachToCaseActionElement; + }; + interface HTMLAtomicInsightResultAttachToCaseIndicatorElement extends Components.AtomicInsightResultAttachToCaseIndicator, HTMLStencilElement { + } + var HTMLAtomicInsightResultAttachToCaseIndicatorElement: { + prototype: HTMLAtomicInsightResultAttachToCaseIndicatorElement; + new (): HTMLAtomicInsightResultAttachToCaseIndicatorElement; }; interface HTMLAtomicInsightResultChildrenElement extends Components.AtomicInsightResultChildren, HTMLStencilElement { } @@ -5930,7 +5934,8 @@ declare global { "atomic-insight-result": HTMLAtomicInsightResultElement; "atomic-insight-result-action": HTMLAtomicInsightResultActionElement; "atomic-insight-result-action-bar": HTMLAtomicInsightResultActionBarElement; - "atomic-insight-result-attach-to-case": HTMLAtomicInsightResultAttachToCaseElement; + "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; @@ -7355,13 +7360,11 @@ declare namespace LocalJSX { } interface AtomicInsightResultActionBar { } - interface AtomicInsightResultAttachToCase { - "onAtomic/insight/attachToCase/attach"?: (event: AtomicInsightResultAttachToCaseCustomEvent) => void; - "onAtomic/insight/attachToCase/detach"?: (event: AtomicInsightResultAttachToCaseCustomEvent) => void; - /** - * Whether the component should only behave as a visual indicator that a result is attached to the current case. Defaults to `false`, meaning that the component is interactive by default. - */ - "readOnly"?: boolean; + interface AtomicInsightResultAttachToCaseAction { + "onAtomic/insight/attachToCase/attach"?: (event: AtomicInsightResultAttachToCaseActionCustomEvent) => void; + "onAtomic/insight/attachToCase/detach"?: (event: AtomicInsightResultAttachToCaseActionCustomEvent) => void; + } + interface AtomicInsightResultAttachToCaseIndicator { } interface AtomicInsightResultChildren { /** @@ -9561,7 +9564,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": AtomicInsightResultAttachToCase; + "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; @@ -9958,7 +9962,8 @@ declare module "@stencil/core" { "atomic-insight-result": LocalJSX.AtomicInsightResult & JSXBase.HTMLAttributes; "atomic-insight-result-action": LocalJSX.AtomicInsightResultAction & JSXBase.HTMLAttributes; "atomic-insight-result-action-bar": LocalJSX.AtomicInsightResultActionBar & JSXBase.HTMLAttributes; - "atomic-insight-result-attach-to-case": LocalJSX.AtomicInsightResultAttachToCase & JSXBase.HTMLAttributes; + "atomic-insight-result-attach-to-case-action": LocalJSX.AtomicInsightResultAttachToCaseAction & JSXBase.HTMLAttributes; + "atomic-insight-result-attach-to-case-indicator": LocalJSX.AtomicInsightResultAttachToCaseIndicator & JSXBase.HTMLAttributes; "atomic-insight-result-children": LocalJSX.AtomicInsightResultChildren & JSXBase.HTMLAttributes; "atomic-insight-result-children-template": LocalJSX.AtomicInsightResultChildrenTemplate & JSXBase.HTMLAttributes; "atomic-insight-result-list": LocalJSX.AtomicInsightResultList & JSXBase.HTMLAttributes;