diff options
Diffstat (limited to 'app/assets/javascripts/related_issues/components/related_issues_block.vue')
-rw-r--r-- | app/assets/javascripts/related_issues/components/related_issues_block.vue | 76 |
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" |