Add unit tests and run prettier and linter

* Add unit tests that factor in feature flag

ee/app/assets/javascripts/approvals/components/modal_rule_create.vue

@@ -33,9 +33,8 @@ export default {
            * otherwise populate with existing rule
            */
           return state.data?.initRuleField ? undefined : state.data;
-        } 
-          return state.data;
-        
+        }
+        return state.data;
       },
       originalData: 'data',
     }),

ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue

 <script>
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { mapState, mapActions } from 'vuex';
-import { __, n__, sprintf } from '~/locale';
+import { s__, n__, sprintf } from '~/locale';
 import { RULE_TYPE_ANY_APPROVER, RULE_TYPE_REGULAR } from '../../constants';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 import Rules from '../rules.vue';
@@ -67,21 +67,21 @@ export default {
       return [
         {
           name: 'Vulnerability-Check',
-          description: __(
-            'One or more of the security scanners must be enabled %{linkStart}more information%{linkEnd}',
+          description: s__(
+            'SecurityApprovals|One or more of the security scanners must be enabled %{linkStart}more information%{linkEnd}',
           ),
-          enableDescription: __(
-            'Requires approval for vulnerabilties of Critical, High, or Unknown severity %{linkStart}more information%{linkEnd}',
+          enableDescription: s__(
+            'SecurityApprovals|Requires approval for vulnerabilties of Critical, High, or Unknown severity %{linkStart}more information%{linkEnd}',
           ),
           docsPath: this.vulnerabilityCheckHelpPagePath,
         },
         {
           name: 'License-Check',
-          description: __(
-            'License Scanning must be enabled %{linkStart}more information%{linkEnd}',
+          description: s__(
+            'SecurityApprovals|License Scanning must be enabled %{linkStart}more information%{linkEnd}',
           ),
-          enableDescription: __(
-            'Requires license policy rules for licenses of Allowed, or Denied %{linkStart}more information%{linkEnd}',
+          enableDescription: s__(
+            'SecurityApprovals|Requires license policy rules for licenses of Allowed, or Denied %{linkStart}more information%{linkEnd}',
           ),
           docsPath: this.licenseCheckHelpPagePath,
         },

ee/app/assets/javascripts/approvals/components/rule_form.vue

@@ -55,21 +55,20 @@ export default {
         containsHiddenGroups: false,
         ...this.getInitialData(),
       };
-    } 
-      return {
-        name: '',
-        approvalsRequired: 1,
-        minApprovalsRequired: 0,
-        approvers: [],
-        approversToAdd: [],
-        branches: [],
-        branchesToAdd: [],
-        showValidation: false,
-        isFallback: false,
-        containsHiddenGroups: false,
-        ...this.getInitialData(),
-      };
-    
+    }
+    return {
+      name: '',
+      approvalsRequired: 1,
+      minApprovalsRequired: 0,
+      approvers: [],
+      approversToAdd: [],
+      branches: [],
+      branchesToAdd: [],
+      showValidation: false,
+      isFallback: false,
+      containsHiddenGroups: false,
+      ...this.getInitialData(),
+    };
   },
   computed: {
     ...mapState(['settings']),
@@ -168,9 +167,8 @@ export default {
         return (
           Boolean(this.isPersisted || this.initRuleFieldName) && READONLY_NAMES.includes(this.name)
         );
-      } 
-        return this.isPersisted && READONLY_NAMES.includes(this.name);
-      
+      }
+      return this.isPersisted && READONLY_NAMES.includes(this.name);
     },
     removeHiddenGroups() {
       return this.containsHiddenGroups && !this.approversByType[TYPE_HIDDEN_GROUPS];

ee/spec/frontend/approvals/components/modal_rule_create_spec.js

@@ -113,4 +113,41 @@ describe('Approvals ModalRuleCreate', () => {
       expect(form.props('initRule')).toEqual(TEST_RULE);
     });
   });
+
+  describe('with approvalSuggestions feature flag', () => {
+    beforeEach(() => {
+      createModalState.data = { ...TEST_RULE, initRuleField: true, name: 'Vulnerability-Check' };
+
+      factory({
+        provide: {
+          glFeatures: { approvalSuggestions: true },
+        },
+      });
+    });
+
+    it('renders add rule modal', () => {
+      const modal = wrapper.find(GlModalVuex);
+
+      expect(modal.exists()).toBe(true);
+
+      expect(modal.attributes('title')).toEqual('Add approval rule');
+      expect(modal.attributes('ok-title')).toEqual('Add approval rule');
+    });
+
+    it('renders form with initRuleFieldName', () => {
+      const modal = wrapper.find(GlModalVuex);
+      const form = modal.find(RuleForm);
+
+      expect(form.props().initRuleFieldName).toBe('Vulnerability-Check');
+      expect(form.exists()).toBe(true);
+    });
+
+    it('renders the form without passing in an existing rule', () => {
+      const modal = wrapper.find(GlModalVuex);
+      const form = modal.find(RuleForm);
+
+      expect(form.exists()).toBe(true);
+      expect(form.props('initRule')).toEqual(null);
+    });
+  });
 });

ee/spec/frontend/approvals/components/project_settings/project_rules_spec.js

@@ -5,6 +5,7 @@ import projectSettingsModule from 'ee/approvals/stores/modules/project_settings'
 import ProjectRules from 'ee/approvals/components/project_settings/project_rules.vue';
 import RuleInput from 'ee/approvals/components/mr_edit/rule_input.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
+import UnconfiguredSecurityRule from 'ee/approvals/components/security_configuration/unconfigured_security_rule.vue';
 import { createProjectRules } from '../../mocks';
 
 const TEST_RULES = createProjectRules();
@@ -29,11 +30,12 @@ describe('Approvals ProjectRules', () => {
   let wrapper;
   let store;
 
-  const factory = (props = {}) => {
+  const factory = (props = {}, options = {}) => {
     wrapper = mount(localVue.extend(ProjectRules), {
       propsData: props,
       store: new Vuex.Store(store),
       localVue,
+      ...options,
     });
   };
 
@@ -121,5 +123,35 @@ describe('Approvals ProjectRules', () => {
 
       expect(nameCell.find('.js-help').exists()).toBeFalsy();
     });
+
+    it('should not the unconfigured-security-rule component', () => {
+      const unconfiguredRules = wrapper.find(UnconfiguredSecurityRule);
+      expect(unconfiguredRules.exists()).toBe(false);
+    });
+  });
+
+  describe('when the approvalSuggestions feature flag is enabled', () => {
+    beforeEach(() => {
+      const rules = createProjectRules();
+      rules[0].name = 'Vulnerability-Check';
+      store.modules.approvals.state.rules = rules;
+      store.state.settings.allowMultiRule = true;
+    });
+
+    beforeEach(() => {
+      factory(
+        {},
+        {
+          provide: {
+            glFeatures: { approvalSuggestions: true },
+          },
+        },
+      );
+    });
+
+    it('should render the unconfigured-security-rule component', () => {
+      const unconfiguredRules = wrapper.find(UnconfiguredSecurityRule);
+      expect(unconfiguredRules.exists()).toBe(true);
+    });
   });
 });

ee/spec/frontend/approvals/components/rule_form_spec.js

@@ -39,13 +39,13 @@ describe('EE Approvals RuleForm', () => {
   let store;
   let actions;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, options = {}) => {
     wrapper = shallowMount(localVue.extend(RuleForm), {
       propsData: props,
       store: new Vuex.Store(store),
       localVue,
       provide: {
-        glFeatures: { scopedApprovalRules: true },
+        glFeatures: { scopedApprovalRules: true, ...options.provide?.glFeatures },
       },
     });
   };
@@ -482,6 +482,68 @@ describe('EE Approvals RuleForm', () => {
       });
     });
 
+    describe('with approvalSuggestions enabled', () => {
+      describe('with initRuleFieldName set to Vulnerability-Check', () => {
+        beforeEach(() => {
+          createComponent(
+            {
+              initRule: null,
+              initRuleFieldName: 'Vulnerability-Check',
+            },
+            {
+              provide: {
+                glFeatures: { approvalSuggestions: true },
+              },
+            },
+          );
+        });
+
+        it('it disables the name text field', () => {
+          expect(findNameInput().attributes('disabled')).toBe('disabled');
+        });
+      });
+
+      describe('with initRuleFieldName set to License-Check', () => {
+        beforeEach(() => {
+          createComponent(
+            {
+              initRule: null,
+              initRuleFieldName: 'License-Check',
+            },
+            {
+              provide: {
+                glFeatures: { approvalSuggestions: true },
+              },
+            },
+          );
+        });
+
+        it('it disables the name text field', () => {
+          expect(findNameInput().attributes('disabled')).toBe('disabled');
+        });
+      });
+
+      describe('with initRuleFieldName set to any other string', () => {
+        beforeEach(() => {
+          createComponent(
+            {
+              initRule: null,
+              initRuleFieldName: 'Foo Bar Baz',
+            },
+            {
+              provide: {
+                glFeatures: { approvalSuggestions: true },
+              },
+            },
+          );
+        });
+
+        it('does not disable the name text field', () => {
+          expect(findNameInput().attributes('disabled')).toBe(undefined);
+        });
+      });
+    });
+
     describe('with new License-Check rule', () => {
       beforeEach(() => {
         createComponent({
@@ -494,6 +556,18 @@ describe('EE Approvals RuleForm', () => {
       });
     });
 
+    describe('with new Vulnerability-Check rule', () => {
+      beforeEach(() => {
+        createComponent({
+          initRule: { ...TEST_RULE, id: null, name: 'Vulnerability-Check' },
+        });
+      });
+
+      it('does not disable the name text field', () => {
+        expect(findNameInput().attributes('disabled')).toBe(undefined);
+      });
+    });
+
     describe('with editing the License-Check rule', () => {
       beforeEach(() => {
         createComponent({
@@ -505,6 +579,18 @@ describe('EE Approvals RuleForm', () => {
         expect(findNameInput().attributes('disabled')).toBe('disabled');
       });
     });
+
+    describe('with editing the Vulnerability-Check rule', () => {
+      beforeEach(() => {
+        createComponent({
+          initRule: { ...TEST_RULE, name: 'Vulnerability-Check' },
+        });
+      });
+
+      it('disables the name text field', () => {
+        expect(findNameInput().attributes('disabled')).toBe('disabled');
+      });
+    });
   });
 
   describe('when allow only single rule', () => {