Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

7 files changed, 91 insertions, 80 deletions

diff --git a/app/assets/javascripts/related_issues/components/add_issuable_form.vue b/app/assets/javascripts/related_issues/components/add_issuable_form.vue
index adae92a92e9..7ecc39a56e7 100644
--- a/app/assets/javascripts/related_issues/components/add_issuable_form.vue
+++ b/app/assets/javascripts/related_issues/components/add_issuable_form.vue
@@ -182,7 +182,7 @@ export default {
           :checked="linkedIssueType"
         />
       </gl-form-group>
-      <p class="bold">
+      <p class="bold gl-mb-2">
         {{ issuableInputText }}
       </p>
     </template>
diff --git a/app/assets/javascripts/related_issues/components/related_issuable_input.vue b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
index 8d6a3110f35..1846b9cf8f4 100644
--- a/app/assets/javascripts/related_issues/components/related_issuable_input.vue
+++ b/app/assets/javascripts/related_issues/components/related_issuable_input.vue
@@ -182,7 +182,7 @@ export default {
   <div
     ref="issuableFormWrapper"
     :class="{ focus: isInputFocused }"
-    class="add-issuable-form-input-wrapper form-control gl-field-error-outline gl-h-auto gl-p-3 gl-pb-2"
+    class="add-issuable-form-input-wrapper form-control gl-field-error-outline gl-h-auto gl-px-3 gl-pt-2 gl-pb-0"
     role="button"
     @click="onIssuableFormWrapperClick"
   >
diff --git a/app/assets/javascripts/related_issues/components/related_issues_block.vue b/app/assets/javascripts/related_issues/components/related_issues_block.vue
index 4a130ade631..24b350c7f18 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_block.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlIcon, GlButton } from '@gitlab/ui';
+import { GlLink, GlIcon, GlLoadingIcon, GlButton, GlCard } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import {
   issuableIconMap,
@@ -16,8 +16,10 @@ export default {
   name: 'RelatedIssuesBlock',
   components: {
     GlLink,
-    GlButton,
     GlIcon,
+    GlLoadingIcon,
+    GlButton,
+    GlCard,
     AddIssuableForm,
     RelatedIssuesList,
   },
@@ -181,64 +183,71 @@ export default {
 
 <template>
   <div id="related-issues" class="related-issues-block">
-    <div class="card card-slim gl-overflow-hidden gl-mt-5 gl-mb-0">
-      <div
-        :class="{
-          'gl-border-b-1': isOpen,
-          'gl-border-b-0': !isOpen,
-        }"
-        class="gl-display-flex gl-justify-content-space-between gl-line-height-24 gl-py-3 gl-px-5 gl-bg-gray-10 gl-border-b-solid gl-border-b-gray-100"
-      >
-        <h3 class="card-title h5 gl-my-0 gl-display-flex gl-align-items-center gl-flex-grow-1">
-          <gl-link
-            id="user-content-related-issues"
-            class="anchor position-absolute gl-text-decoration-none"
-            href="#related-issues"
-            aria-hidden="true"
-          />
-          <slot name="header-text">{{ headerText }}</slot>
-
-          <div class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-3">
-            <span class="gl-display-inline-flex gl-align-items-center">
-              <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-500" />
-              {{ badgeLabel }}
-            </span>
-          </div>
-        </h3>
-        <slot name="header-actions"></slot>
-        <gl-button
-          v-if="canAdmin"
-          size="small"
-          data-qa-selector="related_issues_plus_button"
-          data-testid="related-issues-plus-button"
-          :aria-label="addIssuableButtonText"
-          class="gl-ml-3"
-          @click="addButtonClick"
+    <gl-card
+      class="gl-overflow-hidden gl-mt-5 gl-mb-0"
+      header-class="gl-p-0 gl-border-0"
+      body-class="gl-p-0 gl-bg-gray-10"
+    >
+      <template #header>
+        <div
+          :class="{
+            'gl-border-b-1': isOpen,
+            'gl-border-b-0': !isOpen,
+          }"
+          class="gl-display-flex gl-justify-content-space-between gl-pl-5 gl-pr-4 gl-py-4 gl-bg-white gl-border-b-solid gl-border-b-gray-100"
         >
-          <slot name="add-button-text">{{ __('Add') }}</slot>
-        </gl-button>
-        <div class="gl-pl-3 gl-ml-3 gl-border-l-1 gl-border-l-solid gl-border-l-gray-100">
+          <h3
+            class="card-title h5 gl-relative gl-my-0 gl-display-flex gl-align-items-center gl-flex-grow-1 gl-line-height-24"
+          >
+            <gl-link
+              id="user-content-related-issues"
+              class="anchor position-absolute gl-text-decoration-none"
+              href="#related-issues"
+              aria-hidden="true"
+            />
+            <slot name="header-text">{{ headerText }}</slot>
+
+            <div
+              class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-3 gl-text-gray-500"
+            >
+              <span class="gl-display-inline-flex gl-align-items-center">
+                <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-500" />
+                {{ badgeLabel }}
+              </span>
+            </div>
+          </h3>
+          <slot name="header-actions"></slot>
           <gl-button
-            category="tertiary"
+            v-if="canAdmin"
             size="small"
-            :icon="toggleIcon"
-            :aria-label="toggleLabel"
-            data-testid="toggle-links"
-            @click="handleToggle"
-          />
+            data-qa-selector="related_issues_plus_button"
+            data-testid="related-issues-plus-button"
+            :aria-label="addIssuableButtonText"
+            class="gl-ml-3"
+            @click="addButtonClick"
+          >
+            <slot name="add-button-text">{{ __('Add') }}</slot>
+          </gl-button>
+          <div class="gl-pl-3 gl-ml-3 gl-border-l-1 gl-border-l-solid gl-border-l-gray-100">
+            <gl-button
+              category="tertiary"
+              size="small"
+              :icon="toggleIcon"
+              :aria-label="toggleLabel"
+              data-testid="toggle-links"
+              @click="handleToggle"
+            />
+          </div>
         </div>
-      </div>
+      </template>
       <div
         v-if="isOpen"
-        class="linked-issues-card-body gl-bg-gray-10"
-        :class="{
-          'gl-p-5': isFormVisible || shouldShowTokenBody,
-        }"
+        class="linked-issues-card-body gl-py-3 gl-px-4 gl-bg-gray-10"
         data-testid="related-issues-body"
       >
         <div
           v-if="isFormVisible"
-          class="js-add-related-issues-form-area card-body bordered-box bg-white"
+          class="js-add-related-issues-form-area card-body bg-white gl-mt-2 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base"
           :class="{ 'gl-mb-5': shouldShowTokenBody, 'gl-show-field-errors': hasError }"
         >
           <add-issuable-form
@@ -261,6 +270,7 @@ export default {
           />
         </div>
         <template v-if="shouldShowTokenBody">
+          <gl-loading-icon v-if="isFetching" size="sm" class="gl-py-2" />
           <related-issues-list
             v-for="(category, index) in categorisedIssues"
             :key="category.linkType"
@@ -272,13 +282,16 @@ export default {
             :issuable-type="issuableType"
             :path-id-separator="pathIdSeparator"
             :related-issues="category.issues"
-            :class="{ 'gl-mt-5': index > 0 }"
+            :class="{
+              'gl-pb-3 gl-mb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100':
+                index !== categorisedIssues.length - 1,
+            }"
             @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
             @saveReorder="$emit('saveReorder', $event)"
           />
         </template>
         <div v-if="!shouldShowTokenBody && !isFormVisible" data-testid="related-items-empty">
-          <p class="gl-my-5 gl-px-5">
+          <p class="gl-p-2 gl-mb-0 gl-text-gray-500">
             {{ emptyStateMessage }}
             <gl-link
               v-if="hasHelpPath"
@@ -292,6 +305,6 @@ export default {
           </p>
         </div>
       </div>
-    </div>
+    </gl-card>
   </div>
 </template>
diff --git a/app/assets/javascripts/related_issues/components/related_issues_list.vue b/app/assets/javascripts/related_issues/components/related_issues_list.vue
index 7387b9ab87c..63452f3eace 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_list.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue
@@ -97,11 +97,13 @@ export default {
 
 <template>
   <div :data-link-type="listLinkType">
-    <h4 v-if="heading" class="gl-font-base mt-0">{{ heading }}</h4>
-    <div
-      class="related-issues-token-body bordered-box bg-white"
-      :class="{ 'sortable-container': canReorder }"
+    <h4
+      v-if="heading"
+      class="gl-font-sm gl-font-weight-semibold gl-text-gray-700 gl-mx-2 gl-mt-3 gl-mb-2"
     >
+      {{ heading }}
+    </h4>
+    <div class="related-issues-token-body" :class="{ 'sortable-container': canReorder }">
       <div v-if="isFetching" class="gl-mb-2" data-qa-selector="related_issues_loading_placeholder">
         <gl-loading-icon
           ref="loadingIcon"
@@ -121,10 +123,11 @@ export default {
           }"
           :data-key="issue.id"
           :data-ordering-id="issuableOrderingId(issue)"
-          class="js-related-issues-token-list-item list-item pt-0 pb-0"
+          class="js-related-issues-token-list-item list-item pt-0 pb-0 gl-border-b-0!"
         >
           <related-issuable-item
             :id-key="issue.id"
+            :iid="issue.iid"
             :display-reference="issue.reference"
             :confidential="issue.confidential"
             :title="issue.title"
@@ -144,6 +147,7 @@ export default {
             :work-item-type="issue.type"
             event-namespace="relatedIssue"
             data-qa-selector="related_issuable_content"
+            class="gl-mx-n2"
             @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
           />
         </li>
diff --git a/app/assets/javascripts/related_issues/components/related_issues_root.vue b/app/assets/javascripts/related_issues/components/related_issues_root.vue
index ed70e1ce8a8..51f4e4f7d7b 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_root.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_root.vue
@@ -23,7 +23,7 @@ Your caret can stop touching a `rawReference` can happen in a variety of ways:
    and hide the `AddIssuableForm` area.
 
 */
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils';
 import { TYPE_ISSUE } from '~/issues/constants';
 import { HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
diff --git a/app/assets/javascripts/related_issues/constants.js b/app/assets/javascripts/related_issues/constants.js
index 2a4ce70511b..25fc875db65 100644
--- a/app/assets/javascripts/related_issues/constants.js
+++ b/app/assets/javascripts/related_issues/constants.js
@@ -1,12 +1,5 @@
 import { __, sprintf } from '~/locale';
-import { TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
-
-export const issuableTypesMap = {
-  ISSUE: 'issue',
-  INCIDENT: 'incident',
-  EPIC: 'epic',
-  MERGE_REQUEST: 'merge_request',
-};
+import { TYPE_EPIC, TYPE_INCIDENT, TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 
 export const linkedIssueTypesMap = {
   BLOCKS: 'blocks',
@@ -27,7 +20,7 @@ export const autoCompleteTextMap = {
       { emphasisStart: '<', emphasisEnd: '>' },
       false,
     ),
-    [issuableTypesMap.INCIDENT]: sprintf(
+    [TYPE_INCIDENT]: sprintf(
       __(' or %{emphasisStart}#id%{emphasisEnd}'),
       { emphasisStart: '<', emphasisEnd: '>' },
       false,
@@ -37,7 +30,7 @@ export const autoCompleteTextMap = {
       { emphasisStart: '<', emphasisEnd: '>' },
       false,
     ),
-    [issuableTypesMap.MERGE_REQUEST]: sprintf(
+    [TYPE_MERGE_REQUEST]: sprintf(
       __(' or %{emphasisStart}!merge request id%{emphasisEnd}'),
       { emphasisStart: '<', emphasisEnd: '>' },
       false,
@@ -46,21 +39,21 @@ export const autoCompleteTextMap = {
   false: {
     [TYPE_ISSUE]: '',
     [TYPE_EPIC]: '',
-    [issuableTypesMap.MERGE_REQUEST]: __(' or references'),
+    [TYPE_MERGE_REQUEST]: __(' or references'),
   },
 };
 
 export const inputPlaceholderTextMap = {
   [TYPE_ISSUE]: __('Paste issue link'),
-  [issuableTypesMap.INCIDENT]: __('Paste link'),
+  [TYPE_INCIDENT]: __('Paste link'),
   [TYPE_EPIC]: __('Paste epic link'),
-  [issuableTypesMap.MERGE_REQUEST]: __('Enter merge request URLs'),
+  [TYPE_MERGE_REQUEST]: __('Enter merge request URLs'),
 };
 
 export const inputPlaceholderConfidentialTextMap = {
   [TYPE_ISSUE]: __('Paste confidential issue link'),
   [TYPE_EPIC]: __('Paste confidential epic link'),
-  [issuableTypesMap.MERGE_REQUEST]: __('Enter merge request URLs'),
+  [TYPE_MERGE_REQUEST]: __('Enter merge request URLs'),
 };
 
 export const relatedIssuesRemoveErrorMap = {
@@ -96,7 +89,7 @@ export const addRelatedItemErrorMap = {
  */
 export const issuableIconMap = {
   [TYPE_ISSUE]: 'issues',
-  [issuableTypesMap.INCIDENT]: 'issues',
+  [TYPE_INCIDENT]: 'issues',
   [TYPE_EPIC]: 'epic',
 };
 
@@ -107,13 +100,13 @@ export const PathIdSeparator = {
 
 export const issuablesBlockHeaderTextMap = {
   [TYPE_ISSUE]: __('Linked items'),
-  [issuableTypesMap.INCIDENT]: __('Linked incidents or issues'),
+  [TYPE_INCIDENT]: __('Linked incidents or issues'),
   [TYPE_EPIC]: __('Linked epics'),
 };
 
 export const issuablesBlockHelpTextMap = {
   [TYPE_ISSUE]: __('Learn more about linking issues'),
-  [issuableTypesMap.INCIDENT]: __('Learn more about linking issues and incidents'),
+  [TYPE_INCIDENT]: __('Learn more about linking issues and incidents'),
   [TYPE_EPIC]: __('Learn more about linking epics'),
 };
 
@@ -124,12 +117,12 @@ export const issuablesBlockAddButtonTextMap = {
 
 export const issuablesFormCategoryHeaderTextMap = {
   [TYPE_ISSUE]: __('The current issue'),
-  [issuableTypesMap.INCIDENT]: __('The current incident'),
+  [TYPE_INCIDENT]: __('The current incident'),
   [TYPE_EPIC]: __('The current epic'),
 };
 
 export const issuablesFormInputTextMap = {
   [TYPE_ISSUE]: __('the following issues'),
-  [issuableTypesMap.INCIDENT]: __('the following incidents or issues'),
+  [TYPE_INCIDENT]: __('the following incidents or issues'),
   [TYPE_EPIC]: __('the following epics'),
 };
diff --git a/app/assets/javascripts/related_issues/index.js b/app/assets/javascripts/related_issues/index.js
index cc00ef10dda..23620432feb 100644
--- a/app/assets/javascripts/related_issues/index.js
+++ b/app/assets/javascripts/related_issues/index.js
@@ -19,6 +19,7 @@ export function initRelatedIssues(issueType = TYPE_ISSUE) {
       fullPath: el.dataset.fullPath,
       hasIssueWeightsFeature: parseBoolean(el.dataset.hasIssueWeightsFeature),
       hasIterationsFeature: parseBoolean(el.dataset.hasIterationsFeature),
+      reportAbusePath: el.dataset.reportAbusePath,
     },
     render: (createElement) =>
       createElement(RelatedIssuesRoot, {