From e7b31f3f200f17a5bb4957d4a72ad7c6c4355f33 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 15:52:36 -0700 Subject: [PATCH 1/6] fix(alert): update alert queue when an alert is removed from the DOM. #6616 --- .../src/components/alert/alert.tsx | 22 ++++++++++++++++++- .../src/components/alert/interfaces.ts | 3 +++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index d748079d228..0f9ddbc4da9 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -46,7 +46,7 @@ import { import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; import { AlertMessages } from "./assets/alert/t9n"; -import { AlertDuration, Sync } from "./interfaces"; +import { AlertDuration, Sync, Unregister } from "./interfaces"; import { CSS, DURATIONS, SLOTS } from "./resources"; /** @@ -203,6 +203,12 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen } disconnectedCallback(): void { + window.dispatchEvent( + new CustomEvent("calciteInternalAlertUnregister", { + cancelable: false, + detail: { alert: this.el } + }) + ); window.clearTimeout(this.autoCloseTimeoutId); window.clearTimeout(this.queueTimeout); disconnectOpenCloseComponent(this); @@ -353,6 +359,20 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen this.determineActiveAlert(); } + // when an alert is unregistered, trigger a queue sync + @Listen("calciteInternalAlertUnregister", { target: "window" }) + alertUnregister(event: CustomEvent): void { + const queue = this.queue.filter((el) => el !== event.detail.alert); + this.queue = queue; + + window.dispatchEvent( + new CustomEvent("calciteInternalAlertSync", { + cancelable: false, + detail: { queue } + }) + ); + } + //-------------------------------------------------------------------------- // // Public Methods diff --git a/packages/calcite-components/src/components/alert/interfaces.ts b/packages/calcite-components/src/components/alert/interfaces.ts index 0ffe0b27966..13cb8782011 100644 --- a/packages/calcite-components/src/components/alert/interfaces.ts +++ b/packages/calcite-components/src/components/alert/interfaces.ts @@ -2,3 +2,6 @@ export type AlertDuration = "fast" | "medium" | "slow"; export interface Sync { queue: HTMLCalciteAlertElement[]; } +export interface Unregister { + alert: HTMLCalciteAlertElement; +} From 3de0d42d73c64fcc3ffef6a4ce734c403c18898c Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 16:04:02 -0700 Subject: [PATCH 2/6] cleanup --- .../calcite-components/src/components/alert/alert.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 0f9ddbc4da9..67759a00c2a 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -362,7 +362,13 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen // when an alert is unregistered, trigger a queue sync @Listen("calciteInternalAlertUnregister", { target: "window" }) alertUnregister(event: CustomEvent): void { - const queue = this.queue.filter((el) => el !== event.detail.alert); + const alert = event.detail?.alert; + + if (!alert) { + return; + } + + const queue = this.queue.filter((el) => el !== alert); this.queue = queue; window.dispatchEvent( From f65c3b6af2223cfe7bb52f6815ceaee0f9df6fab Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 16:05:45 -0700 Subject: [PATCH 3/6] cleanup --- .../calcite-components/src/components/alert/alert.tsx | 8 +------- .../calcite-components/src/components/alert/interfaces.ts | 2 ++ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 67759a00c2a..0f9ddbc4da9 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -362,13 +362,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen // when an alert is unregistered, trigger a queue sync @Listen("calciteInternalAlertUnregister", { target: "window" }) alertUnregister(event: CustomEvent): void { - const alert = event.detail?.alert; - - if (!alert) { - return; - } - - const queue = this.queue.filter((el) => el !== alert); + const queue = this.queue.filter((el) => el !== event.detail.alert); this.queue = queue; window.dispatchEvent( diff --git a/packages/calcite-components/src/components/alert/interfaces.ts b/packages/calcite-components/src/components/alert/interfaces.ts index 13cb8782011..f3ac1d8bb90 100644 --- a/packages/calcite-components/src/components/alert/interfaces.ts +++ b/packages/calcite-components/src/components/alert/interfaces.ts @@ -1,7 +1,9 @@ export type AlertDuration = "fast" | "medium" | "slow"; + export interface Sync { queue: HTMLCalciteAlertElement[]; } + export interface Unregister { alert: HTMLCalciteAlertElement; } From d764ab3b9459a8c0fdc75956c0b346dbb944d7dd Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 16 Jun 2023 16:26:56 -0700 Subject: [PATCH 4/6] add test --- .../src/components/alert/alert.e2e.ts | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index 1c266cf3a89..cfa66b4bd81 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -319,6 +319,77 @@ describe("calcite-alert", () => { expect(await container.isVisible()).toBe(false); }); + it("should update number of queued alerts with a calcite-chip when removing an alert", async () => { + const page = await newE2EPage(); + await page.setContent(html` + open alert + open alert + + open alert + + +
Title of alert Uno
+
Message text of the alert Uno
+ Retry + + + +
Title of alert Dos
+
Message text of the alert Dos
+ Retry + + + +
Title of alert Dos
+
Message text of the alert Dos
+ Retry + + `); + const buttonOne = await page.find("#buttonOne"); + const buttonTwo = await page.find("#buttonTwo"); + const buttonThree = await page.find("#buttonThree"); + const alertOne = await page.find("#first-open"); + const alertTwo = await page.find("#second-open"); + const alertThree = await page.find("#third-open"); + + await buttonOne.click(); + await page.waitForTimeout(animationDurationInMs); + expect(await alertOne.isVisible()).toBe(true); + + await buttonTwo.click(); + expect(await alertTwo.isVisible()).toBe(true); + + await buttonThree.click(); + expect(await alertThree.isVisible()).toBe(true); + + const chip = await page.find("calcite-alert[id='first-open'] >>> calcite-chip"); + const chipQueueCount2 = "+2"; + expect(await chip.getProperty("value")).toEqual(chipQueueCount2); + expect(chip.textContent).toEqual(chipQueueCount2); + + await page.$eval("#third-open", (alert: HTMLCalciteAlertElement) => { + alert.remove(); + }); + await page.waitForChanges(); + + const chipQueueCount1 = "+1"; + expect(await chip.getProperty("value")).toEqual(chipQueueCount1); + expect(chip.textContent).toEqual(chipQueueCount1); + + await page.$eval("#second-open", (alert: HTMLCalciteAlertElement) => { + alert.remove(); + }); + await page.waitForChanges(); + + expect(await page.find("calcite-alert[id='first-open'] >>> calcite-chip")).toBeNull(); + }); + describe("auto-close behavior on queued items", () => { it("should display number of queued alerts with a calcite-chip", async () => { const page = await newE2EPage(); From 29c95ae1fd768ce69b4091f51f545b5917bba85d Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Jun 2023 16:02:33 -0700 Subject: [PATCH 5/6] review fixes --- packages/calcite-components/src/components/alert/alert.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index 0f9ddbc4da9..bc049c866a7 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -205,7 +205,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen disconnectedCallback(): void { window.dispatchEvent( new CustomEvent("calciteInternalAlertUnregister", { - cancelable: false, detail: { alert: this.el } }) ); @@ -359,7 +358,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen this.determineActiveAlert(); } - // when an alert is unregistered, trigger a queue sync + // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur. @Listen("calciteInternalAlertUnregister", { target: "window" }) alertUnregister(event: CustomEvent): void { const queue = this.queue.filter((el) => el !== event.detail.alert); From 05e7382acb6125b462be2e7556dae8756b4b691c Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 20 Jun 2023 16:06:00 -0700 Subject: [PATCH 6/6] review fixes --- packages/calcite-components/src/components/alert/alert.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index bc049c866a7..8608dbef0f1 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -366,7 +366,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen window.dispatchEvent( new CustomEvent("calciteInternalAlertSync", { - cancelable: false, detail: { queue } }) );