Improve FuxNotification component [PART 2]

[romanowska]

📝 Description

Improved FuxNotification to with more complex features like next/previous step, header, dismiss all.
Changed implementation of Annotate Interactively Notification to use FuxNotification instead of CoachMark.

✨ Type of Change

Select the type of change your PR introduces:

• 🐞 Bug fix – Non-breaking change which fixes an issue
• 🚀 New feature – Non-breaking change which adds functionality
• 🔨 Refactor – Non-breaking change which refactors the code base
• 💥 Breaking change – Changes that break existing functionality
• 📚 Documentation update
• 🔒 Security update
• 🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

• ✅ Tested manually
• 🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

• 🔍 PR title is clear and descriptive
• 📝 For internal contributors: If applicable, include the JIRA ticket number (e.g., ITEP-123456) in the PR title. Do not include full URLs
• 💬 I have commented my code, especially in hard-to-understand areas
• 📄 I have made corresponding changes to the documentation
• ✅ I have added tests that prove my fix is effective or my feature works

[Copilot]

Pull Request Overview

Implements enhanced notification features by refactoring the FuxNotification component, introducing step navigation and dismiss-all functionality, and migrating existing coach marks to use the new component.

• Changed getFuxNotificationData to use a strong enum type and added getStepInfo to drive step indicators.
• Introduced onFirstSuccessfulAutoTrainingJob helper for auto-training notifications and updated corresponding imports and components.
• Updated UI components (fux-notification.component.tsx, annotate-interactively-notification.component.tsx, dataset-tab-panel.component.tsx) to use the new notification logic and features.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
web_ui/src/shared/components/fux-notification/utils.ts	Switched ID type for notifications and added getStepInfo helper for step counts.
web_ui/src/shared/components/fux-notification/notifications/utils.ts	Added onFirstSuccessfulAutoTrainingJob to emit a callback on first finished job.
web_ui/src/shared/components/fux-notification/notifications/utils.test.ts	Updated import paths after directory refactor.
web_ui/src/shared/components/fux-notification/notifications/annotate-interactively-notification.component.tsx	Refactored to wrap the old coach mark in the new FuxNotification component.
web_ui/src/shared/components/fux-notification/fux-notification.component.tsx	Enhanced popover UI: header, step navigation, learn-more links, and dismiss-all menu.
web_ui/src/shared/components/coach-mark/utils.ts	Removed duplicate notification helpers and cleaned up imports.
web_ui/src/shared/components/coach-mark/fux-notifications/successfully-auto-trained-notification.component.tsx	Switched to using the refactored auto-training helper import.
web_ui/src/pages/project-details/components/project-dataset/dataset-tab-panel.component.tsx	Replaced old CoachMark usage with the new AnnotateInteractivelyNotification.

Comments suppressed due to low confidence (3)

web_ui/src/shared/components/fux-notification/fux-notification.component.tsx:115

• The close function is not defined in this scope; this will cause a reference error. You should call state.close() and invoke onClose if provided, similar to the earlier implementation.

        <CustomPopover

web_ui/src/shared/components/fux-notification/fux-notification.component.tsx:109

• [nitpick] Static IDs like 'next-button-id' and 'dismiss-button-id' may collide across different notifications. Consider prefixing them with settingsKey (e.g., ${settingsKey}-next-button-id) for uniqueness.

        previousStepId && changeTutorial(settingsKey, previousStepId);

web_ui/src/shared/components/fux-notification/utils.ts:117

• The new getStepInfo function is not covered by tests. Consider adding unit tests to verify that the correct stepNumber and totalCount are returned for each notification key.

export const getStepInfo = (fuxNotificationId: FUX_NOTIFICATION_KEYS) => {

[camiloHimura]

Suggested change

	if (isFuxNotificationEnabled && prevFuxEnabled !== isFuxNotificationEnabled) {
	if (prevFuxEnabled !== isFuxNotificationEnabled) {
	isFuxNotificationEnabled? state.open(): state.close()
	}

[camiloHimura]

Suggested change

	if (!pages[0]) {
	if (isEmpty(pages[0])) {

[camiloHimura]

@romanowska Will unit or component tests be added later, or will they be handled in a separate issue?