feat: UI updates for the Alert Message pop-up when a user attempts to navigate to another page while a plan is in progress

[NirajC-Microsoft]

Purpose

This pull request introduces a user-friendly workflow for handling navigation away from an active plan, ensuring users are warned and can confirm cancellation before leaving. It also refactors several components for improved code clarity and maintainability, and adds new styles for a consistent UI. The most important changes are grouped below:

Plan Cancellation Workflow

• Added a reusable PlanCancellationDialog component to prompt users for confirmation before cancelling an active plan.
• Introduced the usePlanCancellationAlert hook to encapsulate logic for detecting active plans and handling cancellation with user confirmation, including API calls to cancel the plan if needed.
• Updated PlanPage.tsx to use the new dialog and hook, managing dialog state and integrating cancellation logic into navigation handlers. [1] [2] [3]

Component and Prop Refactoring

• Updated PlanPanelLeft.tsx and related models to support a new onNavigationWithAlert prop, ensuring navigation actions (like clicking the logo or selecting a task) trigger the cancellation workflow if needed. [1] [2] [3] [4] [5] [6] [7] [8]

UI and Style Improvements

• Refactored PanelLeftToolbar.tsx for better accessibility and maintainability, supporting both clickable and link-based title navigation, and using new CSS classes.
• Added and updated CSS styles in Panel.css, PlanPanelLeft.css, and PlanPage.css for consistent layout, dialog appearance, and improved accessibility. [1] [2] [3]
• ...

Does this introduce a breaking change?

• Yes
• No

How to Test

• Get the code

git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install

• Test the code

What to Check

Verify that the following are valid

• ...

Other Information