Fix Jira issue fields not disabled when inheriting

When there are group / instance level integrations
setup, the project level integration of Jira should
disable the Jira issue fields when "Use default options"
is selected.

Changelog: fixed

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,6 +80,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['isInheriting']),
     ...mapState([
       'isTesting',
       'jiraIssueTypes',
@@ -134,7 +135,7 @@ export default {
     <gl-form-checkbox
       v-model="isJiraVulnerabilitiesEnabled"
       data-testid="enable-jira-vulnerabilities"
-      :disabled="!showFullFeature"
+      :disabled="!showFullFeature || isInheriting"
     >
       {{ $options.i18n.checkbox.label }}
       <template #help>

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

@@ -13,22 +13,24 @@ describe('JiraIssuesFields', () => {
     showJiraVulnerabilitiesIntegration: true,
   };
 
-  const createComponent = ({ props, ...options } = {}) => {
+  const createComponent = ({ isInheriting = false, props, ...options } = {}) => {
     wrapper = mount(JiraIssuesFields, {
       propsData: { ...defaultProps, ...props },
       stubs: ['jira-issue-creation-vulnerabilities'],
+      computed: {
+        isInheriting: () => isInheriting,
+      },
       ...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 +81,17 @@ describe('JiraIssuesFields', () => {
         createComponent({ props: { initialProjectKey: '' } });
       });
 
+      it('renders enabled checkbox', () => {
+        expect(findEnableCheckbox().exists()).toBe(true);
+        expect(findEnableCheckboxDisabled()).toBeUndefined();
+      });
+
+      it('renders disabled project_key input', () => {
+        expect(findProjectKey().exists()).toBe(true);
+        expect(findProjectKey().attributes('disabled')).toBe('disabled');
+        expect(findProjectKey().attributes('required')).toBeUndefined();
+      });
+
       it('does not show upgrade banner', () => {
         expect(findJiraUpgradeCta().exists()).toBe(false);
       });
@@ -89,24 +102,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');
         });
       });