Polish Jira issue fields UI

- Move project key to be right below "Enable Jira issues"
checkbox.
- Indent project key and content below to show proper
hierarchy.
- Adjust spacing between elements to match designs

Changelog: changed
EE: true

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

@@ -112,38 +112,14 @@ export default {
           {{ $options.i18n.enableCheckboxHelp }}
         </template>
       </gl-form-checkbox>
-      <template v-if="enableJiraIssues">
-        <jira-issue-creation-vulnerabilities
-          :project-key="projectKey"
-          :initial-is-enabled="initialEnableJiraVulnerabilities"
-          :initial-issue-type-id="initialVulnerabilitiesIssuetype"
-          :show-full-feature="showJiraVulnerabilitiesIntegration"
-          data-testid="jira-for-vulnerabilities"
-          @request-jira-issue-types="$emit('request-jira-issue-types')"
-        />
-        <jira-upgrade-cta
-          v-if="!showJiraVulnerabilitiesIntegration"
-          class="gl-mt-2 gl-ml-6"
-          data-testid="ultimate-upgrade-cta"
-          show-ultimate-message
-          :upgrade-plan-path="upgradePlanPath"
-        />
-      </template>
-    </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">
+      <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
@@ -158,6 +134,7 @@ export default {
             :readonly="isInheriting"
           />
         </gl-form-group>
+
         <p v-if="gitlabIssuesEnabled" data-testid="conflict-warning-text">
           <gl-sprintf :message="$options.i18n.issueTrackerConflictWarning">
             <template #link="{ content }">
@@ -165,6 +142,30 @@ export default {
             </template>
           </gl-sprintf>
         </p>
+
+        <jira-issue-creation-vulnerabilities
+          :project-key="projectKey"
+          :initial-is-enabled="initialEnableJiraVulnerabilities"
+          :initial-issue-type-id="initialVulnerabilitiesIssuetype"
+          :show-full-feature="showJiraVulnerabilitiesIntegration"
+          data-testid="jira-for-vulnerabilities"
+          @request-jira-issue-types="$emit('request-jira-issue-types')"
+        />
+        <jira-upgrade-cta
+          v-if="!showJiraVulnerabilitiesIntegration"
+          class="gl-mt-2 gl-ml-6"
+          data-testid="ultimate-upgrade-cta"
+          show-ultimate-message
+          :upgrade-plan-path="upgradePlanPath"
+        />
+      </div>
     </template>
+
+    <jira-upgrade-cta
+      v-else
+      data-testid="premium-upgrade-cta"
+      show-premium-message
+      :upgrade-plan-path="upgradePlanPath"
+    />
   </div>
 </template>

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: {
@@ -132,7 +129,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-mt-6">
     <gl-form-checkbox
       v-model="isJiraVulnerabilitiesEnabled"
       data-testid="enable-jira-vulnerabilities"
@@ -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/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);
       });