sumedh - bugfix: fixes bmdashboard equipment update functionality

[sumedhkumar96]

Description

Issues:

Bmdashboard equipment update bug

Related PRS (if any):

This frontend PR is related to the #1984 backend PR.

Main changes explained:

• Modified the UpdateEquipment.jsx to call the new backend API to update the equipment.
• Modified the DragAndDrop.jsx to preview the new images.
• Modified the CSS to update the styles for the same.
• Updated the equipmentAction.js

How to test:

0. Make sure the backend is running the respective PR locally.
1. Check into the current branch
2. Do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. Log in as Owner user
5. Go to /bmdashboard/tools/:equipmentId/update (use any equipment ID something like 6869da54b653924ff05eb471)

Screenshots or videos of changes:

UpdateEquipment.mp4

Note:

• If the above equipment ID is not working, use GET http://localhost:4500/api/bm/equipments to get all the equipments and use the "_id" field
• Dark mode is not working as of now because the dark mode is broken in the entire bmdashboard and it is out of scope of this PR
• The dragged and dropped image is just previewed and it is not sent to the backend as I currently do not have access to the APIs of the image hosting services.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	40abe87
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69578c3c5d489b0008eba39b
😎 Deploy Preview	https://deploy-preview-4656--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.

[sonarqubecloud]

Quality Gate failed

Failed conditions
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[Anusha-Gali]

Hi Sumedh,

I have reviewed your PR locally, though the Image upload and preview work correctly. On submit, a success toast appears but the page navigates back immediately before the toast completes. This can be confusing for users. Also, since the image is only stored in component state when backend saving fails it would be helpful if it navigates back to the bmdashboard page rather then any previous page as well as wait for the toast notification to end. You can see the above mentioned scenario in the video.

4656.mp4

Also when i try to submit by going offline i do not get a proper toast notification with respect to the point : If uploading fails on submission, show a user-friendly message (e.g., “Image selected but not saved”).