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,7 +112,37 @@ 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"
+            :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>
+
         <jira-issue-creation-vulnerabilities
           :project-key="projectKey"
           :initial-is-enabled="initialEnableJiraVulnerabilities"
@@ -128,43 +158,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>

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);
       });