diff --git a/ee/app/assets/javascripts/compliance_violations/components/compliance_violation_details_app.vue b/ee/app/assets/javascripts/compliance_violations/components/compliance_violation_details_app.vue
index fae6ad9fbeb14dd14623bf0534655983f4e1982c..784dab48961faddd66d2c052fe135d9d09a49b0a 100644
--- a/ee/app/assets/javascripts/compliance_violations/components/compliance_violation_details_app.vue
+++ b/ee/app/assets/javascripts/compliance_violations/components/compliance_violation_details_app.vue
@@ -159,7 +159,7 @@ export default {
     />
     <fix-suggestion-section
       class="gl-mt-5"
-      :control-id="projectComplianceViolation.complianceControl.id"
+      :control-name="projectComplianceViolation.complianceControl.name"
       :project-path="projectComplianceViolation.project.webUrl"
     />
   </div>
diff --git a/ee/app/assets/javascripts/compliance_violations/components/fix_suggestion_section.vue b/ee/app/assets/javascripts/compliance_violations/components/fix_suggestion_section.vue
index 0cbf749f6e5c82de2d3d22ef8e8ba760f93a3d9e..05a19d4f9ce05142ca87e50c8c5effb90d7b4e38 100644
--- a/ee/app/assets/javascripts/compliance_violations/components/fix_suggestion_section.vue
+++ b/ee/app/assets/javascripts/compliance_violations/components/fix_suggestion_section.vue
@@ -10,7 +10,7 @@ export default {
     GlButton,
   },
   props: {
-    controlId: {
+    controlName: {
       type: String,
       required: true,
     },
@@ -21,7 +21,7 @@ export default {
   },
   computed: {
     fixSuggestions() {
-      return statusesInfo[this.controlId]?.fixes || [];
+      return statusesInfo[this.controlName]?.fixes || [];
     },
     newIssueUrl() {
       return `${this.projectPath}/-/issues/new`;
diff --git a/ee/spec/frontend/compliance_violations/components/compliance_violation_details_app_spec.js b/ee/spec/frontend/compliance_violations/components/compliance_violation_details_app_spec.js
index e6bf0fe516caf1f152c48a866001da944e05b9ef..2408d880bec9cf4297d40d11907cba8a1770315b 100644
--- a/ee/spec/frontend/compliance_violations/components/compliance_violation_details_app_spec.js
+++ b/ee/spec/frontend/compliance_violations/components/compliance_violation_details_app_spec.js
@@ -232,8 +232,8 @@ describe('ComplianceViolationDetailsApp', () => {
     it('renders the fix suggestion section', () => {
       const fixSuggestionSectionComponent = findFixSuggestionSection();
       expect(fixSuggestionSectionComponent.exists()).toBe(true);
-      expect(fixSuggestionSectionComponent.props('controlId')).toBe(
-        mockComplianceViolation.complianceControl.id,
+      expect(fixSuggestionSectionComponent.props('controlName')).toBe(
+        mockComplianceViolation.complianceControl.name,
       );
       expect(fixSuggestionSectionComponent.props('projectPath')).toBe(
         mockComplianceViolation.project.webUrl,
diff --git a/ee/spec/frontend/compliance_violations/components/fix_suggestion_section_spec.js b/ee/spec/frontend/compliance_violations/components/fix_suggestion_section_spec.js
index e55b5d5bbfa7ce365d41cea42610a82a0f572eb1..f13c8b906b39652c146445452584e5d5590c9c8c 100644
--- a/ee/spec/frontend/compliance_violations/components/fix_suggestion_section_spec.js
+++ b/ee/spec/frontend/compliance_violations/components/fix_suggestion_section_spec.js
@@ -6,13 +6,13 @@ import { statusesInfo } from 'ee/compliance_dashboard/components/standards_adher
 describe('FixSuggestionSection', () => {
   let wrapper;
 
-  const mockControlId = 'minimum_approvals_required_2';
+  const mockControlName = 'minimum_approvals_required_2';
   const mockProjectPath = 'https://localhost:3000/project/path';
 
   const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(FixSuggestionSection, {
       propsData: {
-        controlId: mockControlId,
+        controlName: mockControlName,
         projectPath: mockProjectPath,
         ...props,
       },
@@ -47,14 +47,14 @@ describe('FixSuggestionSection', () => {
     it('renders correct description', () => {
       const description = findDescription(0);
       expect(description.exists()).toBe(true);
-      expect(description.text()).toContain(statusesInfo[mockControlId].fixes[0].description);
+      expect(description.text()).toContain(statusesInfo[mockControlName].fixes[0].description);
     });
 
     it('renders correct learn more link', () => {
       const learnMoreLink = findLearnMoreLink(0);
       expect(learnMoreLink.exists()).toBe(true);
       expect(learnMoreLink.text()).toBe('Learn more');
-      expect(learnMoreLink.attributes('href')).toBe(statusesInfo[mockControlId].fixes[0].link);
+      expect(learnMoreLink.attributes('href')).toBe(statusesInfo[mockControlName].fixes[0].link);
     });
 
     it('renders project settings link', () => {