Compliance center > Edit Framework > Requirements Modal updates

What does this MR do and why?

1. Move the trash icon to a top-aligned position.
2. Add consistency to the order of requirements

3. Fix control form when editing external controls

4. Add pre-close requirement modal form validation
5. Update add control button styling

References

Comment in MR requests changing the alignment on this.

• Custom Compliance Framework UI fixes (#526947 - closed)
• Add external control to add/edit requirement UI (#513435 - closed)
• Add controls to add/edit requirement UI (#510160 - closed)

Screenshots and screen recordings

Move the trash icon to a top-aligned position.

Before	After

Add consistency to the order of requirements

Before	After
Screen_Recording_2025-03-27_at_10.22.44_PM	Screen_Recording_2025-03-27_at_10.21.36_PM

### Fix control form when editing external controls

Add pre-close requirement modal form validation

Before	After
Screen_Recording_2025-03-27_at_10.33.46_PM	Screen_Recording_2025-03-27_at_10.31.43_PM

Update add control button styling

Before	After

How to set up and validate locally

1. Enable the feature flag

Feature.enable(:enable_standards_adherence_dashboard_v2)

2. Head to the Compliance center
3. Click on New framework and create a new framework
4. Head to the Compliance center
5. Edit your new framework

Move the trash icon to a top-aligned position.

1. Click on New requirement
2. Click on the Add an external control button and see the top alignment

Add consistency to the order of requirements

1. Create 2+ new requirements
2. Refresh the edit frameworks page and verify that they're in the same order as before the refresh

### Fix control form when editing external controls 1. Create a new requirement with an external control 2. Refresh the page 3. Edit your requirement with the external control and verify that saving the requirement without any changes works

Add pre-close requirement modal form validation

1. Click on New requirement
2. Click on Add an external control
3. Add a requirement name and description and click on the Save changes to the framework button
4. Verify the modal doesn't close and the fields' error messages are shown
5. Add valid data to the fields and click the Save changes to the framework button
6. Verify the requirement was saved correctly

Update add control button styling

1. Click on New requirement
2. Verify the add control buttons are the correct size and color (see after screenshot)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.