Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

4 files changed, 69 insertions, 25 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 d765033d00b..102f1228355 100644
--- a/app/assets/javascripts/related_issues/components/add_issuable_form.vue
+++ b/app/assets/javascripts/related_issues/components/add_issuable_form.vue
@@ -208,7 +208,7 @@ export default {
     <p v-if="hasError" class="gl-field-error">
       {{ addRelatedErrorMessage }}
     </p>
-    <div class="gl-mt-5 gl-clearfix">
+    <div class="gl-mt-5">
       <gl-button
         ref="addButton"
         category="primary"
@@ -216,12 +216,13 @@ export default {
         :disabled="isSubmitButtonDisabled"
         :loading="isSubmitting"
         type="submit"
-        class="gl-float-left"
+        size="small"
+        class="gl-mr-2"
         data-qa-selector="add_issue_button"
       >
         {{ __('Add') }}
       </gl-button>
-      <gl-button class="gl-float-right" @click="onFormCancel">
+      <gl-button size="small" @click="onFormCancel">
         {{ __('Cancel') }}
       </gl-button>
     </div>
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 eeb4c254a1b..5b4a6d1fe0d 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,6 @@
 <script>
 import { GlLink, GlIcon, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 import {
   issuableIconMap,
   issuableQaClassMap,
@@ -96,6 +97,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      isOpen: true,
+    };
+  },
   computed: {
     hasRelatedIssues() {
       return this.relatedIssues.length > 0;
@@ -139,6 +145,21 @@ export default {
     qaClass() {
       return issuableQaClassMap[this.issuableType];
     },
+    toggleIcon() {
+      return this.isOpen ? 'chevron-lg-up' : 'chevron-lg-down';
+    },
+    toggleLabel() {
+      return this.isOpen ? __('Collapse') : __('Expand');
+    },
+  },
+  methods: {
+    handleToggle() {
+      this.isOpen = !this.isOpen;
+    },
+    addButtonClick(event) {
+      this.isOpen = true;
+      this.$emit('toggleAddRelatedIssuesForm', event);
+    },
   },
   linkedIssueTypesTextMap,
 };
@@ -148,12 +169,10 @@ export default {
   <div id="related-issues" class="related-issues-block gl-mt-5">
     <div class="card card-slim gl-overflow-hidden">
       <div
-        :class="{ 'panel-empty-heading border-bottom-0': !hasBody }"
-        class="card-header gl-display-flex gl-justify-content-space-between"
+        :class="{ 'panel-empty-heading border-bottom-0': !hasBody, '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-1 gl-border-b-solid gl-border-b-gray-100"
       >
-        <h3
-          class="card-title h5 position-relative gl-my-0 gl-display-flex gl-align-items-center gl-h-7"
-        >
+        <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"
@@ -172,30 +191,45 @@ export default {
             <gl-icon name="question" :size="12" />
           </gl-link>
 
-          <div class="gl-display-inline-flex">
-            <div class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-5">
-              <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>
-            <gl-button
-              v-if="canAdmin"
-              data-qa-selector="related_issues_plus_button"
-              icon="plus"
-              :aria-label="addIssuableButtonText"
-              :class="qaClass"
-              @click="$emit('toggleAddRelatedIssuesForm', $event)"
-            />
+          <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="qaClass"
+          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"
+            :disabled="!hasRelatedIssues"
+            data-testid="toggle-links"
+            @click="handleToggle"
+          />
+        </div>
       </div>
       <div
-        class="linked-issues-card-body bg-gray-light"
+        v-if="isOpen"
+        class="linked-issues-card-body gl-bg-gray-10"
         :class="{
           'gl-p-5': isFormVisible || shouldShowTokenBody,
         }"
+        data-testid="related-issues-body"
       >
         <div
           v-if="isFormVisible"
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 9ed895e90fb..11de734f5d4 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_list.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue
@@ -5,7 +5,6 @@ import RelatedIssuableItem from '~/issuable/components/related_issuable_item.vue
 import { defaultSortableOptions } from '~/sortable/constants';
 
 export default {
-  name: 'RelatedIssuesList',
   components: {
     GlLoadingIcon,
     RelatedIssuableItem,
@@ -141,6 +140,7 @@ export default {
             :path-id-separator="pathIdSeparator"
             :is-locked="issue.lockIssueRemoval"
             :locked-message="issue.lockedMessage"
+            :work-item-type="issue.type"
             event-namespace="relatedIssue"
             data-qa-selector="related_issuable_content"
             @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)"
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 da049d68467..cad5037d7e4 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_root.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_root.vue
@@ -24,6 +24,7 @@ Your caret can stop touching a `rawReference` can happen in a variety of ways:
 
 */
 import createFlash from '~/flash';
+import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import {
   relatedIssuesRemoveErrorMap,
@@ -123,6 +124,14 @@ export default {
       return this.state.relatedIssues.find((issue) => issue.id === id);
     },
     onRelatedIssueRemoveRequest(idToRemove) {
+      if (isGid(idToRemove)) {
+        const deletedId = getIdFromGraphQLId(idToRemove);
+        this.state.relatedIssues = this.state.relatedIssues.filter(
+          (issue) => issue.id !== deletedId,
+        );
+        return;
+      }
+
       const issueToRemove = this.findRelatedIssueById(idToRemove);
 
       if (issueToRemove) {