SaiKrishna - Editable And Selectable Fields In Equipment

[saikrishnaraoyadagiri]

Related PRS (if any):

This frontend PR is related to the 2054backend PR.
…

Main changes explained:

Update src/constants/bmdashboard/equipmentConstants.js for adding UPDATE_EQUIPMENT_START, SUCCESS and ERROR action types
Update src/actions/bmdashboard/equipmentActions.js for adding updateEquipmentById action with PUT request and toast notifications
Update src/reducers/bmdashboard/equipmentReducer.js for handling update loading/success/error states in Redux store
Update src/components/BMDashboard/Equipment/Detail/EquipmentDetail.jsx for converting static fields into editable dropdowns/radio buttons with edit mode toggle, form validation, Save/Cancel buttons and reading equipmentClass from both top-level and legacy nested paths
Update src/components/BMDashboard/Equipment/Detail/EquipmentDetailPage.module.css for styling editable section, dropdowns, radio groups, action buttons and dark mode support
Update src/components/BMDashboard/Equipment/List/EquipmentsTable.jsx for adding fallback text to equipment name link so it's always visible and clickable

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. go to http://localhost:5173/bmdashboard/equipment/
6. click on the hyperlink in the name column
7. then in the new page you will get to see edit button, click on that and edit the fields as per the requirement and click on save, it should be saved and new changes should be shown in the screen

Screenshots or videos of changes:

editableAndSelectableFieldsInEquipment.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	131992c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6997fb06e27c5500080f01c2
😎 Deploy Preview	https://deploy-preview-4857--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.

[Anusha-Gali]

Hi Sai Krishna,

I have reviewed your PR locally and even though the functionality works as per requirement. There are few UI issues which you can find in the below screenshots.

As you can see even though the application is in light mode, the editable feature is in dark mode

As you can see when the application is in dark mode, the dropdown options are in double

[HemanthNidamanuru]

Hi Sai Krishna,

The core functionalities are working as expected. The editable fields, dropdowns, and save integration are functioning correctly.

However, there is a UI issue in dark mode. When the page is in dark mode and Edit is clicked, the edit view switches to light mode, so the UI is not consistent with the selected theme.

Requesting changes to ensure UI consistency in dark mode.

UI Inconsistencies in Dark Mode:

[sonarqubecloud]

Quality Gate passed

Issues
15 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

[saikrishnaraoyadagiri]

@Anusha-Gali @HemanthNidamanuru Dark mode issue is fixed, please review

[Anusha-Gali]

Hi Sai krishna,

Thanks for the quick fix, the application works as per requirement.

[HemanthNidamanuru]

Hi Krishna,

Thank you for the fix. I have reviewed the changes and everything is working as expected.

[one-community]

Thank you all, merging!