Merge branch...

Merge branch '327113-jira-integration-inherited-instance-config-do-not-allow-enabling-issues-list-at-project-level' into 'master'

Fix Jira issue fields not disabled when inheriting

See merge request gitlab-org/gitlab!62364

app/assets/javascripts/integrations/edit/components/jira_issues_fields.vue

 <script>
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui';
+import { mapGetters } from 'vuex';
 import eventHub from '../event_hub';
 import JiraUpgradeCta from './jira_upgrade_cta.vue';
 
@@ -70,6 +71,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['isInheriting']),
     validProjectKey() {
       return !this.enableJiraIssues || Boolean(this.projectKey) || !this.validated;
     },
@@ -116,7 +118,7 @@ export default {
         </p>
         <template v-if="showJiraIssuesIntegration">
           <input name="service[issues_enabled]" type="hidden" :value="enableJiraIssues || false" />
-          <gl-form-checkbox v-model="enableJiraIssues">
+          <gl-form-checkbox v-model="enableJiraIssues" :disabled="isInheriting">
             {{ s__('JiraService|Enable Jira issues') }}
             <template #help>
               {{
@@ -161,6 +163,7 @@ export default {
           :required="enableJiraIssues"
           :state="validProjectKey"
           :disabled="!enableJiraIssues"
+          :readonly="isInheriting"
         />
       </gl-form-group>
       <p v-if="gitlabIssuesEnabled">

ee/app/assets/javascripts/integrations/edit/components/jira_issue_creation_vulnerabilities.vue

@@ -10,7 +10,7 @@ import {
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import { s__ } from '~/locale';
 import { defaultJiraIssueTypeId } from '../constants';
 
@@ -80,12 +80,16 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['isInheriting']),
     ...mapState([
       'isTesting',
       'jiraIssueTypes',
       'isLoadingJiraIssueTypes',
       'loadingJiraIssueTypesErrorMessage',
     ]),
+    checkboxDisabled() {
+      return !this.showFullFeature || this.isInheriting;
+    },
     initialJiraIssueType() {
       return this.jiraIssueTypes?.find(({ id }) => id === this.initialIssueTypeId) || {};
     },
@@ -134,7 +138,7 @@ export default {
     <gl-form-checkbox
       v-model="isJiraVulnerabilitiesEnabled"
       data-testid="enable-jira-vulnerabilities"
-      :disabled="!showFullFeature"
+      :disabled="checkboxDisabled"
     >
       {{ $options.i18n.checkbox.label }}
       <template #help>

ee/spec/frontend/integrations/edit/components/jira_issue_creation_vulnerabilities_spec.js

@@ -22,7 +22,11 @@ describe('JiraIssuesFields', () => {
     { id: '3', name: 'epic', description: 'epic' },
   ];
 
-  const createComponent = (mountFn) => ({ props } = {}) => {
+  const createComponent = (mountFn) => ({ isInheriting = false, props } = {}) => {
+    store = createStore({
+      defaultState: isInheriting ? {} : undefined,
+    });
+
     return extendedWrapper(
       mountFn(JiraIssueCreationVulnerabilities, {
         store,
@@ -45,10 +49,6 @@ describe('JiraIssuesFields', () => {
   const setEnableJiraVulnerabilitiesChecked = (isChecked) =>
     findEnableJiraVulnerabilities().vm.$emit('input', isChecked);
 
-  beforeEach(() => {
-    store = createStore();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
@@ -98,6 +98,16 @@ describe('JiraIssuesFields', () => {
       await setEnableJiraVulnerabilitiesChecked(isChecked);
       expect(findIssueTypeSection().exists()).toBe(isChecked);
     });
+
+    describe('when isInheriting = true', () => {
+      beforeEach(() => {
+        wrapper = createShallowComponent({ isInheriting: true });
+      });
+
+      it('disables the checkbox', () => {
+        expect(findEnableJiraVulnerabilities().attributes('disabled')).toBe('true');
+      });
+    });
   });
 
   describe('when showFullFeature is off', () => {
@@ -132,8 +142,8 @@ describe('JiraIssuesFields', () => {
 
     describe('with Jira issues fetching in progress', () => {
       beforeEach(async () => {
-        store.state.isLoadingJiraIssueTypes = true;
         wrapper = createShallowComponent();
+        store.state.isLoadingJiraIssueTypes = true;
         await setEnableJiraVulnerabilitiesChecked(true);
       });
 
@@ -147,8 +157,8 @@ describe('JiraIssuesFields', () => {
 
     describe('with Jira issues fetched', () => {
       beforeEach(async () => {
-        store.state.jiraIssueTypes = TEST_JIRA_ISSUE_TYPES;
         wrapper = createShallowComponent({ props: { projectKey: 'TES' } });
+        store.state.jiraIssueTypes = TEST_JIRA_ISSUE_TYPES;
         await setEnableJiraVulnerabilitiesChecked(true);
       });
 
@@ -173,8 +183,8 @@ describe('JiraIssuesFields', () => {
 
     describe('with Jira issue fetch failure', () => {
       beforeEach(async () => {
-        store.state.loadingJiraIssueTypesErrorMessage = 'something went wrong';
         wrapper = createShallowComponent();
+        store.state.loadingJiraIssueTypesErrorMessage = 'something went wrong';
         await setEnableJiraVulnerabilitiesChecked(true);
       });
 

spec/frontend/integrations/edit/components/jira_issues_fields_spec.js

@@ -3,8 +3,10 @@ import { mount } from '@vue/test-utils';
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
 import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue';
 import eventHub from '~/integrations/edit/event_hub';
+import { createStore } from '~/integrations/edit/store';
 
 describe('JiraIssuesFields', () => {
+  let store;
   let wrapper;
 
   const defaultProps = {
@@ -13,22 +15,26 @@ describe('JiraIssuesFields', () => {
     showJiraVulnerabilitiesIntegration: true,
   };
 
-  const createComponent = ({ props, ...options } = {}) => {
+  const createComponent = ({ isInheriting = false, props, ...options } = {}) => {
+    store = createStore({
+      defaultState: isInheriting ? {} : undefined,
+    });
+
     wrapper = mount(JiraIssuesFields, {
       propsData: { ...defaultProps, ...props },
+      store,
       stubs: ['jira-issue-creation-vulnerabilities'],
       ...options,
     });
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
   const findEnableCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findEnableCheckboxDisabled = () =>
+    findEnableCheckbox().find('[type=checkbox]').attributes('disabled');
   const findProjectKey = () => wrapper.findComponent(GlFormInput);
   const findJiraUpgradeCta = () => wrapper.findComponent(JiraUpgradeCta);
   const findJiraForVulnerabilities = () => wrapper.find('[data-testid="jira-for-vulnerabilities"]');
@@ -79,6 +85,19 @@ describe('JiraIssuesFields', () => {
         createComponent({ props: { initialProjectKey: '' } });
       });
 
+      it('renders enabled checkbox', () => {
+        expect(findEnableCheckbox().exists()).toBe(true);
+        expect(findEnableCheckboxDisabled()).toBeUndefined();
+      });
+
+      it('renders disabled project_key input', () => {
+        const projectKey = findProjectKey();
+
+        expect(projectKey.exists()).toBe(true);
+        expect(projectKey.attributes('disabled')).toBe('disabled');
+        expect(projectKey.attributes('required')).toBeUndefined();
+      });
+
       it('does not show upgrade banner', () => {
         expect(findJiraUpgradeCta().exists()).toBe(false);
       });
@@ -89,24 +108,20 @@ describe('JiraIssuesFields', () => {
         expect(wrapper.find('input[name="service[issues_enabled]"]').exists()).toBe(true);
       });
 
-      it('disables project_key input', () => {
-        expect(findProjectKey().attributes('disabled')).toBe('disabled');
-      });
+      describe('when isInheriting = true', () => {
+        it('disables checkbox and sets input as readonly', () => {
+          createComponent({ isInheriting: true });
 
-      it('does not require project_key', () => {
-        expect(findProjectKey().attributes('required')).toBeUndefined();
+          expect(findEnableCheckboxDisabled()).toBe('disabled');
+          expect(findProjectKey().attributes('readonly')).toBe('readonly');
+        });
       });
 
       describe('on enable issues', () => {
-        it('enables project_key input', async () => {
+        it('enables project_key input as required', async () => {
           await setEnableCheckbox(true);
 
           expect(findProjectKey().attributes('disabled')).toBeUndefined();
-        });
-
-        it('requires project_key input', async () => {
-          await setEnableCheckbox(true);
-
           expect(findProjectKey().attributes('required')).toBe('required');
         });
       });