Fix admin setting bug

Fix admin setting bug where
user has enviroment variables
enabled by default.

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -46,6 +46,7 @@ export default {
       'isGroup',
       'maskableRegex',
       'selectedEnvironment',
+      'isProtectedByDefault',
     ]),
     canSubmit() {
       return (
@@ -123,6 +124,7 @@ export default {
       'addWildCardScope',
       'resetSelectedEnvironment',
       'setSelectedEnvironment',
+      'setVariableProtected',
     ]),
     deleteVarAndClose() {
       this.deleteVariable(this.variableBeingEdited);
@@ -147,6 +149,11 @@ export default {
       }
       this.hideModal();
     },
+    setVariableProtectedByDefault() {
+      if (this.isProtectedByDefault && !this.variableBeingEdited) {
+        this.setVariableProtected();
+      }
+    },
   },
 };
 </script>
@@ -159,6 +166,7 @@ export default {
     static
     lazy
     @hidden="resetModalHandler"
+    @shown="setVariableProtectedByDefault"
   >
     <form>
       <ci-key-field

app/assets/javascripts/ci_variable_list/index.js

@@ -5,14 +5,16 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default () => {
   const el = document.getElementById('js-ci-project-variables');
-  const { endpoint, projectId, group, maskableRegex } = el.dataset;
+  const { endpoint, projectId, group, maskableRegex, protectedByDefault } = el.dataset;
   const isGroup = parseBoolean(group);
+  const isProtectedByDefault = parseBoolean(protectedByDefault);
 
   const store = createStore({
     endpoint,
     projectId,
     isGroup,
     maskableRegex,
+    isProtectedByDefault,
   });
 
   return new Vue({

app/assets/javascripts/ci_variable_list/store/actions.js

@@ -20,6 +20,10 @@ export const resetEditing = ({ commit, dispatch }) => {
   commit(types.RESET_EDITING);
 };
 
+export const setVariableProtected = ({ commit }) => {
+  commit(types.SET_VARIABLE_PROTECTED);
+};
+
 export const requestAddVariable = ({ commit }) => {
   commit(types.REQUEST_ADD_VARIABLE);
 };

app/assets/javascripts/ci_variable_list/store/mutation_types.js

@@ -2,6 +2,7 @@ export const TOGGLE_VALUES = 'TOGGLE_VALUES';
 export const VARIABLE_BEING_EDITED = 'VARIABLE_BEING_EDITED';
 export const RESET_EDITING = 'RESET_EDITING';
 export const CLEAR_MODAL = 'CLEAR_MODAL';
+export const SET_VARIABLE_PROTECTED = 'SET_VARIABLE_PROTECTED';
 
 export const REQUEST_VARIABLES = 'REQUEST_VARIABLES';
 export const RECEIVE_VARIABLES_SUCCESS = 'RECEIVE_VARIABLES_SUCCESS';

app/assets/javascripts/ci_variable_list/store/mutations.js

@@ -104,4 +104,8 @@ export default {
   [types.SET_SELECTED_ENVIRONMENT](state, environment) {
     state.selectedEnvironment = environment;
   },
+
+  [types.SET_VARIABLE_PROTECTED](state) {
+    state.variable.protected = true;
+  },
 };

app/assets/javascripts/ci_variable_list/store/state.js

@@ -5,6 +5,7 @@ export default () => ({
   projectId: null,
   isGroup: null,
   maskableRegex: null,
+  isProtectedByDefault: null,
   isLoading: false,
   isDeleting: false,
   variable: {

app/views/ci/variables/_index.html.haml

@@ -8,7 +8,7 @@
 - if Feature.enabled?(:new_variables_ui, @project || @group, default_enabled: true)
   - is_group = !@group.nil?
 
-  #js-ci-project-variables{ data: { endpoint: save_endpoint, project_id: @project&.id || '', group: is_group.to_s, maskable_regex: ci_variable_maskable_regex} }
+  #js-ci-project-variables{ data: { endpoint: save_endpoint, project_id: @project&.id || '', group: is_group.to_s, maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
 
 - else
   .row

changelogs/unreleased/fix-protected-vars-by-default.yml

+---
+title: Fixes bug where variables were not protected by default when using the correct
+  CI/CD admin setting
+merge_request: 31655
+author:
+type: fixed

spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js

@@ -96,6 +96,13 @@ describe('Ci variable modal', () => {
       findModal().vm.$emit('hidden');
       expect(store.dispatch).toHaveBeenCalledWith('clearModal');
     });
+
+    it('should dispatch setVariableProtected when admin settings are configured to protect variables', () => {
+      store.state.isProtectedByDefault = true;
+      findModal().vm.$emit('shown');
+
+      expect(store.dispatch).toHaveBeenCalledWith('setVariableProtected');
+    });
   });
 
   describe('Editing a variable', () => {

spec/frontend/ci_variable_list/store/actions_spec.js

@@ -75,6 +75,16 @@ describe('CI variable list store actions', () => {
     });
   });
 
+  describe('setVariableProtected', () => {
+    it('commits SET_VARIABLE_PROTECTED mutation', () => {
+      testAction(actions.setVariableProtected, {}, {}, [
+        {
+          type: types.SET_VARIABLE_PROTECTED,
+        },
+      ]);
+    });
+  });
+
   describe('deleteVariable', () => {
     it('dispatch correct actions on successful deleted variable', done => {
       mock.onPatch(state.endpoint).reply(200);

spec/frontend/ci_variable_list/store/mutations_spec.js

@@ -97,4 +97,12 @@ describe('CI variable list mutations', () => {
       expect(stateCopy.environments).toEqual(['dev', 'production', 'staging']);
     });
   });
+
+  describe('SET_VARIABLE_PROTECTED', () => {
+    it('should set protected value to true', () => {
+      mutations[types.SET_VARIABLE_PROTECTED](stateCopy);
+
+      expect(stateCopy.variable.protected).toBe(true);
+    });
+  });
 });