feat(quantic): make quantic notifications component dismissible

[SimonMilord]

SFINT-5767

IN THIS PR:

• Fixed a styling issue we had with the notifications where the width would look weird.
• Made the quantic notifications component dismissible, thus following best practices by Salesforce and offering a better user experience.
• Made sure: that if you dismiss notifications and re-trigger the same query, that they would re-appear
• Made sure: that if you dismiss notifications and trigger a new search, the previous notifications would not "flash" before updating the state

More about the solution:

The QuanticNotifications component was rendering the notifications based on the notifications array it was getting from the notify trigger state from headless. We are therefore adding a button to close the notification in the template, which will call the handleNotificationClose handler function.

DEMO STYLING:

Before:

After:

DEMO FUNCTIONALITY:

Screen.Recording.2024-11-29.at.2.46.13.PM.mov

BONUS:

Resized the default icon for x close button to 16px instead of 24px which looks nicer:

TESTS:

[github-actions]

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	242.8	242.8	0
commerce	347.7	347.7	0
search	413.9	413.9	0
insight	405	405	0
recommendation	255.1	255.1	0
ssr	407.4	407.4	0
ssr-commerce	362.7	362.7	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[mmitiche]

Visual review:

Nice work 👍
I think the dismiss button a bit huge, it will look much better in my opinion if we make it smaller, like the size of the button to clear the query in the search box for example.

[SimonMilord]

Visual review:

Nice work 👍 I think the dismiss button a bit huge, it will look much better in my opinion if we make it smaller, like the size of the button to clear the query in the search box for example.

Set the height of the icon to 16px which looks nicer! thanks

[erocheleau]

Some small improvements that I think can help clarity

[erocheleau]

I would do that, that way on each "new query" the notifications are actually cleared so for example they don't display while the rest of the UI is in "loading" mode, aka showing placeholders.

Suggested change

	if (!this.searchStatus.state.isLoading) {
	this.notifications =
	this.notifyTrigger?.state?.notifications.map((notification, index) => ({
	value: notification,
	id: index.toString(),
	visible: true,
	})) ?? [];
	}
	if (this.searchStatus?.state?.isLoading) {
	this.notifications = [];
	} else {
	this.notifications =
	this.notifyTrigger?.state?.notifications.map((notification, index) => ({
	value: notification,
	id: index.toString(),
	visible: true,
	})) ?? [];
	}

Also why did you add the toString() ?

[SimonMilord]

I will test the first point you bring up, seems to make sense

for the second question, it is because in the handleNotificationClose when we do: if (notification.id === currentNotificationId), the currentNotificationId is of type string, so it was so that they could do the comparison, but when I think about it, I could probably just do if (notification.id.toString() === currentNotificationId)

[erocheleau]

Why is this necessary?

[SimonMilord]

I documented that in the PR description, it is to fix the width issue of the notifications

[erocheleau]

I personally would put this at like 10?
So at least there can be content in between 0 and the notifications?

[SimonMilord]

modal is 40 so we could do steps of 20 and set it at 20, but I didnt think there would be content between 0 and 1