1 files changed, 55 insertions, 21 deletions
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"