Merge branch '354454-polish-jira-issue-fields-ui' into 'master'

Polish Jira issue fields UI

See merge request gitlab-org/gitlab!84353

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

@@ -167,6 +167,9 @@ export default {
       this.integrationActive = integrationActive;
     },
   },
+  descriptionHtmlConfig: {
+    ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented
+  },
   helpHtmlConfig: {
     ADD_ATTR: ['target'], // allow external links, can be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427 is implemented
     ADD_TAGS: ['use'], // to support icon SVGs
@@ -212,7 +215,7 @@ export default {
         <div class="row">
           <div class="col-lg-4">
             <h4 class="gl-mt-0">{{ section.title }}</h4>
-            <p v-safe-html="section.description"></p>
+            <p v-safe-html:[$options.descriptionHtmlConfig]="section.description"></p>
           </div>
 
           <div class="col-lg-8">

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

 <script>
-import { GlFormGroup, GlFormCheckbox, GlFormInput, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { s__, __ } from '~/locale';
 import JiraUpgradeCta from './jira_upgrade_cta.vue';
@@ -10,8 +10,6 @@ export default {
     GlFormGroup,
     GlFormCheckbox,
     GlFormInput,
-    GlSprintf,
-    GlLink,
     JiraUpgradeCta,
     JiraIssueCreationVulnerabilities: () =>
       import('ee_component/integrations/edit/components/jira_issue_creation_vulnerabilities.vue'),
@@ -47,21 +45,11 @@ export default {
       required: false,
       default: null,
     },
-    gitlabIssuesEnabled: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     upgradePlanPath: {
       type: String,
       required: false,
       default: '',
     },
-    editProjectPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     isValidated: {
       type: Boolean,
       required: false,
@@ -91,9 +79,6 @@ export default {
     projectKeyLabel: s__('JiraService|Jira project key'),
     projectKeyPlaceholder: s__('JiraService|For example, AB'),
     requiredFieldFeedback: __('This field is required.'),
-    issueTrackerConflictWarning: s__(
-      'JiraService|Displaying Jira issues while leaving GitLab issues also enabled might be confusing. Consider %{linkStart}disabling GitLab issues%{linkEnd} if they won’t otherwise be used.',
-    ),
   },
 };
 </script>
@@ -112,12 +97,34 @@ export default {
           {{ $options.i18n.enableCheckboxHelp }}
         </template>
       </gl-form-checkbox>
-      <template v-if="enableJiraIssues">
+
+      <div v-if="enableJiraIssues" class="gl-pl-6 gl-mt-3">
+        <gl-form-group
+          :label="$options.i18n.projectKeyLabel"
+          label-for="service_project_key"
+          :invalid-feedback="$options.i18n.requiredFieldFeedback"
+          :state="validProjectKey"
+          class="gl-max-w-26"
+          data-testid="project-key-form-group"
+        >
+          <gl-form-input
+            id="service_project_key"
+            v-model="projectKey"
+            name="service[project_key]"
+            data-qa-selector="service_jira_project_key_field"
+            :placeholder="$options.i18n.projectKeyPlaceholder"
+            :required="enableJiraIssues"
+            :state="validProjectKey"
+            :readonly="isInheriting"
+          />
+        </gl-form-group>
+
         <jira-issue-creation-vulnerabilities
           :project-key="projectKey"
           :initial-is-enabled="initialEnableJiraVulnerabilities"
           :initial-issue-type-id="initialVulnerabilitiesIssuetype"
           :show-full-feature="showJiraVulnerabilitiesIntegration"
+          class="gl-mt-6"
           data-testid="jira-for-vulnerabilities"
           @request-jira-issue-types="$emit('request-jira-issue-types')"
         />
@@ -128,43 +135,14 @@ export default {
           show-ultimate-message
           :upgrade-plan-path="upgradePlanPath"
         />
-      </template>
+      </div>
     </template>
+
     <jira-upgrade-cta
       v-else
-      class="gl-mt-2"
       data-testid="premium-upgrade-cta"
       show-premium-message
       :upgrade-plan-path="upgradePlanPath"
     />
-
-    <template v-if="showJiraIssuesIntegration">
-      <gl-form-group
-        :label="$options.i18n.projectKeyLabel"
-        label-for="service_project_key"
-        :invalid-feedback="$options.i18n.requiredFieldFeedback"
-        :state="validProjectKey"
-        data-testid="project-key-form-group"
-      >
-        <gl-form-input
-          id="service_project_key"
-          v-model="projectKey"
-          name="service[project_key]"
-          data-qa-selector="service_jira_project_key_field"
-          :placeholder="$options.i18n.projectKeyPlaceholder"
-          :required="enableJiraIssues"
-          :state="validProjectKey"
-          :disabled="!enableJiraIssues"
-          :readonly="isInheriting"
-        />
-      </gl-form-group>
-      <p v-if="gitlabIssuesEnabled" data-testid="conflict-warning-text">
-        <gl-sprintf :message="$options.i18n.issueTrackerConflictWarning">
-          <template #link="{ content }">
-            <gl-link :href="editProjectPath" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </template>
   </div>
 </template>

app/assets/javascripts/integrations/edit/index.js

@@ -22,7 +22,6 @@ function parseDatasetToProps(data) {
     commentDetail,
     projectKey,
     upgradePlanPath,
-    editProjectPath,
     learnMorePath,
     triggerEvents,
     sections,
@@ -52,7 +51,6 @@ function parseDatasetToProps(data) {
     showJiraVulnerabilitiesIntegration,
     enableJiraIssues,
     enableJiraVulnerabilities,
-    gitlabIssuesEnabled,
   } = parseBooleanInData(booleanAttributes);
 
   return {
@@ -81,9 +79,7 @@ function parseDatasetToProps(data) {
       initialEnableJiraVulnerabilities: enableJiraVulnerabilities,
       initialVulnerabilitiesIssuetype: vulnerabilitiesIssuetype,
       initialProjectKey: projectKey,
-      gitlabIssuesEnabled,
       upgradePlanPath,
-      editProjectPath,
     },
     learnMorePath,
     triggerEvents: JSON.parse(triggerEvents),

app/models/integrations/jira.rb

@@ -143,7 +143,7 @@ module Integrations
     end
 
     def help
-      jira_doc_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('integration/jira/index.html') }
+      jira_doc_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('integration/jira/index') }
       s_("JiraService|You must configure Jira before enabling this integration. %{jira_doc_link_start}Learn more.%{link_end}") % { jira_doc_link_start: jira_doc_link_start, link_end: '</a>'.html_safe }
     end
 
@@ -160,8 +160,6 @@ module Integrations
     end
 
     def sections
-      jira_issues_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('integration/jira/issues.html') }
-
       sections = [
         {
           type: SECTION_TYPE_CONNECTION,
@@ -180,7 +178,7 @@ module Integrations
         sections.push({
           type: SECTION_TYPE_JIRA_ISSUES,
           title: _('Issues'),
-          description: s_('JiraService|Work on Jira issues without leaving GitLab. Add a Jira menu to access a read-only list of your Jira issues. %{jira_issues_link_start}Learn more.%{link_end}') % { jira_issues_link_start: jira_issues_link_start, link_end: '</a>'.html_safe }
+          description: jira_issues_section_description
         })
       end
 
@@ -610,6 +608,19 @@ module Integrations
         data_fields.deployment_server!
       end
     end
+
+    def jira_issues_section_description
+      jira_issues_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('integration/jira/issues') }
+      description = s_('JiraService|Work on Jira issues without leaving GitLab. Add a Jira menu to access a read-only list of your Jira issues. %{jira_issues_link_start}Learn more.%{link_end}') % { jira_issues_link_start: jira_issues_link_start, link_end: '</a>'.html_safe }
+
+      if project&.issues_enabled?
+        gitlab_issues_link_start = '<a href="%{url}">'.html_safe % { url: edit_project_path(project, anchor: 'js-shared-permissions') }
+        description += '<br><br>'.html_safe
+        description += s_("JiraService|Displaying Jira issues while leaving GitLab issues also enabled might be confusing. Consider %{gitlab_issues_link_start}disabling GitLab issues%{link_end} if they won't otherwise be used.") % { gitlab_issues_link_start: gitlab_issues_link_start, link_end: '</a>'.html_safe }
+      end
+
+      description
+    end
   end
 end
 

app/views/projects/services/_form.html.haml

@@ -11,7 +11,7 @@
     .gl-alert-body
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 
-%h3.page-title
+%h2.gl-mb-4
   = integration.title
   - if integration.operating?
     = sprite_icon('check', css_class: 'gl-text-green-500')

app/views/shared/integrations/edit.html.haml

@@ -3,7 +3,7 @@
 - page_title @integration.title, _('Integrations')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-%h3.page-title
+%h2.gl-mb-4
   = @integration.title
 
 = render 'shared/integrations/tabs', integration: @integration, active_tab: 'edit' do

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

@@ -6,7 +6,6 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlFormCheckbox,
-  GlFormGroup,
   GlIcon,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -22,7 +21,6 @@ export const i18n = {
     ),
   },
   issueTypeSelect: {
-    label: s__('JiraService|Jira issue type'),
     description: s__('JiraService|Define the type of Jira issue to create from a vulnerability.'),
     defaultText: s__('JiraService|Select issue type'),
   },
@@ -43,7 +41,6 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlFormCheckbox,
-    GlFormGroup,
     GlIcon,
   },
   directives: {
@@ -143,19 +140,19 @@ export default {
         {{ $options.i18n.checkbox.description }}
       </template>
     </gl-form-checkbox>
+
     <template v-if="showFullFeature">
       <input
         name="service[vulnerabilities_enabled]"
         type="hidden"
         :value="isJiraVulnerabilitiesEnabled"
       />
-      <gl-form-group
+      <div
         v-if="isJiraVulnerabilitiesEnabled"
-        :label="$options.i18n.issueTypeSelect.label"
-        class="gl-mt-4 gl-pl-1 gl-ml-5"
+        class="gl-mt-3 gl-ml-6"
         data-testid="issue-type-section"
       >
-        <p>{{ $options.i18n.issueTypeSelect.description }}</p>
+        <p class="gl-mb-3">{{ $options.i18n.issueTypeSelect.description }}</p>
         <gl-alert
           v-if="shouldShowLoadingErrorAlert"
           class="gl-mb-5"
@@ -166,7 +163,7 @@ export default {
           {{ loadingJiraIssueTypesErrorMessage }}
         </gl-alert>
         <div class="row gl-display-flex gl-align-items-center">
-          <gl-button-group class="col-md-5 gl-mr-3">
+          <gl-button-group class="col-md-5">
             <input
               name="service[vulnerabilities_issuetype]"
               type="hidden"
@@ -203,7 +200,7 @@ export default {
             {{ projectKeyWarning }}
           </p>
         </div>
-      </gl-form-group>
+      </div>
     </template>
   </div>
 </template>

ee/app/helpers/ee/integrations_helper.rb

@@ -21,9 +21,7 @@ module EE
           enable_jira_vulnerabilities: integration.jira_vulnerabilities_integration_enabled?.to_s,
           project_key: integration.project_key,
           vulnerabilities_issuetype: integration.vulnerabilities_issuetype,
-          gitlab_issues_enabled: @project&.issues_enabled?.to_s,
-          upgrade_plan_path: @project && ::Gitlab::CurrentSettings.should_check_namespace_plan? ? upgrade_plan_path(@project.group) : nil,
-          edit_project_path: @project ? edit_project_path(@project, anchor: 'js-shared-permissions') : nil
+          upgrade_plan_path: @project && ::Gitlab::CurrentSettings.should_check_namespace_plan? ? upgrade_plan_path(@project.group) : nil
         )
       end
 

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

@@ -71,10 +71,6 @@ describe('JiraIssuesFields', () => {
         await findEnableJiraVulnerabilities().setChecked();
       });
 
-      it('shows a label for the issue-type selector', () => {
-        expect(withinComponent().getByText(i18n.issueTypeSelect.label)).not.toBe(null);
-      });
-
       it('shows a reason why the issue type is needed', () => {
         expect(withinComponent().getByText(i18n.issueTypeSelect.description)).not.toBe(null);
       });

ee/spec/helpers/ee/integrations_helper_spec.rb

@@ -31,9 +31,7 @@ RSpec.describe EE::IntegrationsHelper do
         enable_jira_vulnerabilities: 'false',
         project_key: 'FE',
         vulnerabilities_issuetype: '10001',
-        gitlab_issues_enabled: 'true',
-        upgrade_plan_path: nil,
-        edit_project_path: edit_project_path(project, anchor: 'js-shared-permissions')
+        upgrade_plan_path: nil
       }
     end
 

locale/gitlab.pot

@@ -21400,7 +21400,7 @@ msgstr ""
 msgid "JiraService|Define the type of Jira issue to create from a vulnerability."
 msgstr ""
 
-msgid "JiraService|Displaying Jira issues while leaving GitLab issues also enabled might be confusing. Consider %{linkStart}disabling GitLab issues%{linkEnd} if they won’t otherwise be used."
+msgid "JiraService|Displaying Jira issues while leaving GitLab issues also enabled might be confusing. Consider %{gitlab_issues_link_start}disabling GitLab issues%{link_end} if they won't otherwise be used."
 msgstr ""
 
 msgid "JiraService|Enable Jira issue creation from vulnerabilities"
@@ -21451,9 +21451,6 @@ msgstr ""
 msgid "JiraService|Jira comments are created when an issue is referenced in a merge request."
 msgstr ""
 
-msgid "JiraService|Jira issue type"
-msgstr ""
-
 msgid "JiraService|Jira issues"
 msgstr ""
 

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

@@ -10,7 +10,6 @@ describe('JiraIssuesFields', () => {
   let wrapper;
 
   const defaultProps = {
-    editProjectPath: '/edit',
     showJiraIssuesIntegration: true,
     showJiraVulnerabilitiesIntegration: true,
     upgradePlanPath: 'https://gitlab.com',
@@ -46,7 +45,6 @@ describe('JiraIssuesFields', () => {
   const findPremiumUpgradeCTA = () => wrapper.findByTestId('premium-upgrade-cta');
   const findUltimateUpgradeCTA = () => wrapper.findByTestId('ultimate-upgrade-cta');
   const findJiraForVulnerabilities = () => wrapper.findByTestId('jira-for-vulnerabilities');
-  const findConflictWarning = () => wrapper.findByTestId('conflict-warning-text');
   const setEnableCheckbox = async (isEnabled = true) =>
     findEnableCheckbox().vm.$emit('input', isEnabled);
 
@@ -75,10 +73,9 @@ describe('JiraIssuesFields', () => {
         });
 
         if (showJiraIssuesIntegration) {
-          it('renders checkbox and input field', () => {
+          it('renders enable checkbox', () => {
             expect(findEnableCheckbox().exists()).toBe(true);
             expect(findEnableCheckboxDisabled()).toBeUndefined();
-            expect(findProjectKey().exists()).toBe(true);
           });
 
           it('does not render the Premium CTA', () => {
@@ -98,9 +95,8 @@ describe('JiraIssuesFields', () => {
             });
           }
         } else {
-          it('does not render checkbox and input field', () => {
+          it('does not render enable checkbox', () => {
             expect(findEnableCheckbox().exists()).toBe(false);
-            expect(findProjectKey().exists()).toBe(false);
           });
 
           it('renders the Premium CTA', () => {
@@ -122,12 +118,8 @@ describe('JiraIssuesFields', () => {
         createComponent({ props: { initialProjectKey: '' } });
       });
 
-      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 render project_key input', () => {
+        expect(findProjectKey().exists()).toBe(false);
       });
 
       // As per https://vuejs.org/v2/guide/forms.html#Checkbox-1,
@@ -137,45 +129,23 @@ describe('JiraIssuesFields', () => {
       });
 
       describe('when isInheriting = true', () => {
-        it('disables checkbox and sets input as readonly', () => {
+        it('disables checkbox', () => {
           createComponent({ isInheriting: true });
 
           expect(findEnableCheckboxDisabled()).toBe('disabled');
-          expect(findProjectKey().attributes('readonly')).toBe('readonly');
         });
       });
 
       describe('on enable issues', () => {
-        it('enables project_key input as required', async () => {
+        it('renders project_key input as required', async () => {
           await setEnableCheckbox(true);
 
-          expect(findProjectKey().attributes('disabled')).toBeUndefined();
+          expect(findProjectKey().exists()).toBe(true);
           expect(findProjectKey().attributes('required')).toBe('required');
         });
       });
     });
 
-    it('contains link to editProjectPath', () => {
-      createComponent();
-
-      expect(wrapper.find(`a[href="${defaultProps.editProjectPath}"]`).exists()).toBe(true);
-    });
-
-    describe('GitLab issues warning', () => {
-      it.each`
-        gitlabIssuesEnabled | scenario
-        ${true}             | ${'displays conflict warning'}
-        ${false}            | ${'does not display conflict warning'}
-      `(
-        '$scenario when `gitlabIssuesEnabled` is `$gitlabIssuesEnabled`',
-        ({ gitlabIssuesEnabled }) => {
-          createComponent({ props: { gitlabIssuesEnabled } });
-
-          expect(findConflictWarning().exists()).toBe(gitlabIssuesEnabled);
-        },
-      );
-    });
-
     describe('Vulnerabilities creation', () => {
       beforeEach(() => {
         createComponent();