Disable auto-fix settings toggle for unauthorized users

Added a boolean check to disable auto-fix settings toggle for users that
have sufficition permissions to see the settings status but aren't
allowed to toggle them.

ee/app/assets/javascripts/security_configuration/components/auto_fix_settings.vue

@@ -40,6 +40,10 @@ export default {
       type: String,
       required: true,
     },
+    canToggleAutoFixSettings: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     // In this first iteration, the auto-fix settings is toggled for all features at once via a
@@ -52,6 +56,11 @@ export default {
       autoFixStatusLoading: false,
     };
   },
+  computed: {
+    hasAutoFixDisabled() {
+      return !this.canToggleAutoFixSettings || this.autoFixStatusLoading;
+    },
+  },
   methods: {
     toggleAutoFix(enabled) {
       this.autoFixStatusLoading = true;
@@ -94,11 +103,7 @@ export default {
       </gl-link>
     </h4>
     <gl-card>
-      <gl-form-checkbox
-        v-model="isChecked"
-        :disabled="autoFixStatusLoading"
-        @change="toggleAutoFix"
-      >
+      <gl-form-checkbox v-model="isChecked" :disabled="hasAutoFixDisabled" @change="toggleAutoFix">
         {{
           __('Automatically create merge requests for vulnerabilities that have fixes available.')
         }}

ee/app/assets/javascripts/security_configuration/index.js

@@ -17,6 +17,11 @@ export default function init() {
     toggleAutofixSettingEndpoint,
   } = el.dataset;
 
+  // When canToggleAutoFixSettings is false in the backend, it is undefined in the frontend,
+  // and when it's true in the backend, it comes in as an empty string in the frontend. The next
+  // line ensures that we cast it to a boolean.
+  const canToggleAutoFixSettings = el.dataset.canToggleAutoFixSettings !== undefined;
+
   return new Vue({
     el,
     components: {
@@ -36,6 +41,7 @@ export default function init() {
             autoFixUserPath,
             containerScanningHelpPath,
             dependencyScanningHelpPath,
+            canToggleAutoFixSettings,
             toggleAutofixSettingEndpoint,
           },
         },

ee/app/presenters/projects/security/configuration_presenter.rb

@@ -52,6 +52,7 @@ module Projects
             dependency_scanning: true,
             container_scanning: true
           }.to_json,
+          can_toggle_auto_fix_settings: true, # To be replaced with the real value in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32783
           auto_fix_user_path: '/' # TODO: real link will be updated with https://gitlab.com/gitlab-org/gitlab/-/issues/215669
         }
       end

ee/spec/frontend/security_configuration/components/auto_fix_settings_spec.js

@@ -40,6 +40,7 @@ describe('Auto-fix Settings', () => {
         containerScanningHelpPath: CONTAINER_SCANNING_HELP_PATH,
         dependencyScanningHelpPath: DEPENDENCY_SCANNING_HELP_PATH,
         toggleAutofixSettingEndpoint: TOGGLE_AUTO_FIX_ENDPOINT,
+        canToggleAutoFixSettings: true,
         ...props,
       },
     });
@@ -59,6 +60,8 @@ describe('Auto-fix Settings', () => {
       .text()
       .trim();
 
+  const expectCheckboxDisabled = () => expect(findCheckbox().attributes().disabled).toBeTruthy();
+
   const toggleCheckbox = () => findCheckbox().setChecked(!wrapper.vm.autoFixEnabledLocal);
 
   const expectCorrectLinks = () => {
@@ -101,7 +104,7 @@ describe('Auto-fix Settings', () => {
   const itSendsPostRequest = () => {
     it('sends a post request and sets loading state', () => {
       expect(axiosMock.history.post).toHaveLength(1);
-      expect(findCheckbox().element.disabled).toBe(true);
+      expectCheckboxDisabled();
     });
   };
 
@@ -133,7 +136,7 @@ describe('Auto-fix Settings', () => {
             itShowsToggleSuccessState();
 
             it('resets loading state', () => {
-              expect(findCheckbox().element.disabled).toBe(false);
+              expect(findCheckbox().attributes().disabled).toBeFalsy();
             });
           });
         });
@@ -161,4 +164,17 @@ describe('Auto-fix Settings', () => {
       });
     },
   );
+
+  describe("when user isn't allowed to toggle auto-fix settings", () => {
+    beforeEach(() => {
+      createComponent({
+        canToggleAutoFixSettings: false,
+        autoFixEnabled: AUTO_FIX_ENABLED_PROPS,
+      });
+    });
+
+    it('disables the checkbox', () => {
+      expectCheckboxDisabled();
+    });
+  });
 });