hackforla / hackforla/tdm-calculator
Bug: About page edit mode has inconsistent cancel UI and no warning for unsaved changes
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
#### Describe the bug
- Primary issue:
- When editing the About page as an Admin, navigating away with unsaved changes does not trigger a warning message. As a result, unsaved changes are lost.
- Secondary issue:
- The Cancel Changes button displays an extra "X" icon, which is inconsistent with the expected UI.
#### Steps to Reproduce
1. Log in as Admin
2. Navigate to the About page
3. Click Edit About Page
4. Observe the Cancel Changes button
5. Click the Edit icon for any content block
6. Make changes in the block content
7. Do not save the changes
8. Navigate to another page, for example, My Projects
9. Return to the About page
10. Observe the behavior
#### Actual Result
- Primary issue:
- No warning message appears when navigating away with unsaved changes
- Unsaved edits are lost after leaving the page
- Secondary issue:
- The Cancel Changes button displays an extra "X" icon
Cancel button with extra "X" icon
#### Expected Result
- Primary issue:
- A warning message should appear when the user attempts to leave the page with unsaved changes
- The warning should allow the user to either stay on the page and continue editing or leave without saving
- Example warning modal is attached below (content should be adapted for About page)
- Secondary issue:
- The Cancel Changes button should not display the extra "X" icon
Example warning modal
#### Device Configuration
- Device: Laptop
- OS: Windows 11
- Browser: Chrome
- Browser version:
#### Action Items
- [ ] Developer Actions
- [ ] Remove the X icon from the Cancel button.
- [ ] For the new dialog, it should follow the example of the WarningWizardLeave.jsx component, and be wired up like that dialog is on the TdmCalculationWizard.jsx component.
- [ ] Review with development lead.
- [ ] Review with product, development, and research teams. Update if needed based on feedback.
- [ ] Once finalized, add a slide to the staging deck (see resources)
- [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.
### Resources/Instructions
#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, 3083](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g396c9cb4a0b_0_157#slide=id.g396c9cb4a0b_0_157)
- Release Deck
- [2025-MM-DD Release deck, slide 3083]
Contributor guide
Research direction
Start by locating the About page edit components and compare the existing warning flow in WarningWizardLeave.jsx with how it is wired in TdmCalculationWizard.jsx. Reproduce the unsaved-edit navigation case and inspect the Cancel Changes button. Done means the extra X is removed and leaving with unsaved changes offers stay-or-leave choices without losing edits unexpectedly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100