diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 11:17:02 +0300 |
commit | b39512ed755239198a9c294b6a45e65c05900235 (patch) | |
tree | d234a3efade1de67c46b9e5a38ce813627726aa7 /app/assets/javascripts/related_issues | |
parent | d31474cf3b17ece37939d20082b07f6657cc79a9 (diff) |
Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42
Diffstat (limited to 'app/assets/javascripts/related_issues')
6 files changed, 101 insertions, 54 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) { diff --git a/app/assets/javascripts/related_issues/constants.js b/app/assets/javascripts/related_issues/constants.js index 3516836952f..23ea93cd258 100644 --- a/app/assets/javascripts/related_issues/constants.js +++ b/app/assets/javascripts/related_issues/constants.js @@ -114,8 +114,8 @@ export const PathIdSeparator = { }; export const issuablesBlockHeaderTextMap = { - [issuableTypesMap.ISSUE]: __('Linked issues'), - [issuableTypesMap.INCIDENT]: __('Related incidents or issues'), + [issuableTypesMap.ISSUE]: __('Linked items'), + [issuableTypesMap.INCIDENT]: __('Linked incidents or issues'), [issuableTypesMap.EPIC]: __('Linked epics'), }; @@ -136,7 +136,7 @@ export const issuablesFormCategoryHeaderTextMap = { }; export const issuablesFormInputTextMap = { - [issuableTypesMap.ISSUE]: __('the following issue(s)'), - [issuableTypesMap.INCIDENT]: __('the following incident(s) or issue(s)'), - [issuableTypesMap.EPIC]: __('the following epic(s)'), + [issuableTypesMap.ISSUE]: __('the following issues'), + [issuableTypesMap.INCIDENT]: __('the following incidents or issues'), + [issuableTypesMap.EPIC]: __('the following epics'), }; diff --git a/app/assets/javascripts/related_issues/index.js b/app/assets/javascripts/related_issues/index.js index 655ec57bc3d..eb2f5d119b8 100644 --- a/app/assets/javascripts/related_issues/index.js +++ b/app/assets/javascripts/related_issues/index.js @@ -1,30 +1,33 @@ import Vue from 'vue'; +import apolloProvider from '~/issues/show/graphql'; import { parseBoolean } from '~/lib/utils/common_utils'; import RelatedIssuesRoot from './components/related_issues_root.vue'; -export default function initRelatedIssues(issueType = 'issue') { - const relatedIssuesRootElement = document.querySelector('.js-related-issues-root'); - if (relatedIssuesRootElement) { - // eslint-disable-next-line no-new - new Vue({ - el: relatedIssuesRootElement, - name: 'RelatedIssuesRoot', - components: { - relatedIssuesRoot: RelatedIssuesRoot, - }, - render: (createElement) => - createElement('related-issues-root', { - props: { - endpoint: relatedIssuesRootElement.dataset.endpoint, - canAdmin: parseBoolean(relatedIssuesRootElement.dataset.canAddRelatedIssues), - helpPath: relatedIssuesRootElement.dataset.helpPath, - showCategorizedIssues: parseBoolean( - relatedIssuesRootElement.dataset.showCategorizedIssues, - ), - issuableType: issueType, - autoCompleteEpics: false, - }, - }), - }); +export function initRelatedIssues(issueType = 'issue') { + const el = document.querySelector('.js-related-issues-root'); + + if (!el) { + return null; } + + return new Vue({ + el, + name: 'RelatedIssuesRoot', + apolloProvider, + provide: { + fullPath: el.dataset.fullPath, + hasIssueWeightsFeature: parseBoolean(el.dataset.hasIssueWeightsFeature), + }, + render: (createElement) => + createElement(RelatedIssuesRoot, { + props: { + endpoint: el.dataset.endpoint, + canAdmin: parseBoolean(el.dataset.canAddRelatedIssues), + helpPath: el.dataset.helpPath, + showCategorizedIssues: parseBoolean(el.dataset.showCategorizedIssues), + issuableType: issueType, + autoCompleteEpics: false, + }, + }), + }); } |