Neeraj - Added Unsaved Changes for Refresh And Navigation Events

[Neeraj-Kondaveeti]

Description

Related PRS (if any):

This frontend PR is related to the development backend PR.
To test this frontend PR you need to checkout the development backend PR.
…

Main changes explained:

• Updated JobFormbuilder.jsx to include an unsaved changes detection system.
• Added page-refresh and internal navigation warnings using beforeunload and prompt tag
• Performed small code clean ups and stability fixes while keeping all original behaviour intact.
  …

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. Navigate to : http://localhost:5173/jobformbuilder
6. Perform the following checks:
   • Type into Field Label, Template Name -> Try refreshing the page -> Warning dialog should appear.
   • Type into Field Label, Template Name -> Try navigating to another page -> Warning should appear.

Screenshots or videos of changes:

This should appear when trying to navigating to another page internally such as clicking on Dashboard or Other Links:

Note:

This PR adds safety checks to prevent accidental loss of form configuration changes. No existing form behaviour,styles or backend integrations were modified outside this task's scope.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	844e268
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69253356652ba60008ab650f
😎 Deploy Preview	https://deploy-preview-4414--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Prem203]

Reviewed the PR with an admin account. The page gives a warning when trying to change or refresh page after changes are made to field label and template name.

Although, once I made the changes and removed them from template name, the dialog box still pops up. This should not happen as the state of the textbox has changed. The change in job title does not show a warning when refreshing as mentioned in the description.

[Anusha-Gali]

Hi Neeraj,

I have reviewed your PR locally and it works as expected in both the modes for the text boxes, by showing warnings for both reload and navigate

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Neeraj-Kondaveeti]

Reviewed the PR with an admin account. The page gives a warning when trying to change or refresh page after changes are made to field label and template name.

Although, once I made the changes and removed them from template name, the dialog box still pops up. This should not happen as the state of the textbox has changed. The change in job title does not show a warning when refreshing as mentioned in the description.

Hi Prem , I hope you are doing well. Thank You for the detailed review.

I have implemented the requested changes:

• The warning dialog no longer appears after clearing the Template Name field (or any other field under Form Creation.
• The Job Title textbox is not part of the form state and is intentionally excluded from unsaved-changes detection. I have updated the PR description to clarify this so reviewers don’t expect the Job Title field to trigger a warning.
  All other form fields now correctly trigger or dismiss the unsaved-changes prompt exactly as expected.
  Could you please re-test when you get a chance and let me know if everything looks good ?
  Thank you!

[IndraAnuraag9]

I have reviewed this PR locally using an Admin account. Everything works as intended. Warnings are correctly shown for unsaved changes when reloading or navigating to a different page.

[one-community]

Thank you all, merging!