diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-17 14:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-17 14:33:21 +0300 |
commit | 7021455bd1ed7b125c55eb1b33c5a01f2bc55ee0 (patch) | |
tree | 5bdc2229f5198d516781f8d24eace62fc7e589e9 /app/assets/javascripts/related_issues | |
parent | 185b095e93520f96e9cfc31d9c3e69b498cdab7c (diff) |
Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/related_issues')
4 files changed, 50 insertions, 22 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 1ab41ee2f0a..4a130ade631 100644 --- a/app/assets/javascripts/related_issues/components/related_issues_block.vue +++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue @@ -1,6 +1,6 @@ <script> import { GlLink, GlIcon, GlButton } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { __, sprintf } from '~/locale'; import { issuableIconMap, linkedIssueTypesMap, @@ -95,6 +95,16 @@ export default { required: false, default: true, }, + hasError: { + type: Boolean, + required: false, + default: false, + }, + itemAddFailureMessage: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -120,9 +130,6 @@ export default { shouldShowTokenBody() { return this.hasRelatedIssues || this.isFetching; }, - hasBody() { - return this.isFormVisible || this.shouldShowTokenBody; - }, headerText() { return issuablesBlockHeaderTextMap[this.issuableType]; }, @@ -147,6 +154,11 @@ export default { toggleLabel() { return this.isOpen ? __('Collapse') : __('Expand'); }, + emptyStateMessage() { + return this.showCategorizedIssues + ? sprintf(this.$options.i18n.emptyItemsPremium, { issuableType: this.issuableType }) + : sprintf(this.$options.i18n.emptyItemsFree, { issuableType: this.issuableType }); + }, }, methods: { handleToggle() { @@ -158,6 +170,12 @@ export default { }, }, linkedIssueTypesTextMap, + i18n: { + emptyItemsFree: __("Link %{issuableType}s together to show that they're related."), + emptyItemsPremium: __( + "Link %{issuableType}s together to show that they're related or that one is blocking others.", + ), + }, }; </script> @@ -166,7 +184,6 @@ export default { <div class="card card-slim gl-overflow-hidden gl-mt-5 gl-mb-0"> <div :class="{ - 'panel-empty-heading border-bottom-0': !hasBody, 'gl-border-b-1': isOpen, 'gl-border-b-0': !isOpen, }" @@ -180,16 +197,6 @@ export default { aria-hidden="true" /> <slot name="header-text">{{ headerText }}</slot> - <gl-link - v-if="hasHelpPath" - :href="helpPath" - target="_blank" - class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-500" - data-testid="help-link" - :aria-label="helpLinkText" - > - <gl-icon name="question" :size="12" /> - </gl-link> <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"> @@ -216,7 +223,6 @@ export default { size="small" :icon="toggleIcon" :aria-label="toggleLabel" - :disabled="!hasRelatedIssues" data-testid="toggle-links" @click="handleToggle" /> @@ -233,7 +239,7 @@ export default { <div v-if="isFormVisible" class="js-add-related-issues-form-area card-body bordered-box bg-white" - :class="{ 'gl-mb-5': shouldShowTokenBody }" + :class="{ 'gl-mb-5': shouldShowTokenBody, 'gl-show-field-errors': hasError }" > <add-issuable-form :show-categorized-issues="showCategorizedIssues" @@ -245,6 +251,8 @@ export default { :auto-complete-epics="autoCompleteEpics" :auto-complete-issues="autoCompleteIssues" :path-id-separator="pathIdSeparator" + :has-error="hasError" + :item-add-failure-message="itemAddFailureMessage" @pendingIssuableRemoveRequest="$emit('pendingIssuableRemoveRequest', $event)" @addIssuableFormInput="$emit('addIssuableFormInput', $event)" @addIssuableFormBlur="$emit('addIssuableFormBlur', $event)" @@ -269,6 +277,20 @@ export default { @saveReorder="$emit('saveReorder', $event)" /> </template> + <div v-if="!shouldShowTokenBody && !isFormVisible" data-testid="related-items-empty"> + <p class="gl-my-5 gl-px-5"> + {{ emptyStateMessage }} + <gl-link + v-if="hasHelpPath" + :href="helpPath" + target="_blank" + data-testid="help-link" + :aria-label="helpLinkText" + > + {{ __('Learn more.') }} + </gl-link> + </p> + </div> </div> </div> </div> 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 38e1d6e9d4f..795eb3b0083 100644 --- a/app/assets/javascripts/related_issues/components/related_issues_root.vue +++ b/app/assets/javascripts/related_issues/components/related_issues_root.vue @@ -107,6 +107,8 @@ export default { isSubmitting: false, isFormVisible: false, inputValue: '', + hasError: false, + errorMessage: null, }; }, computed: { @@ -170,11 +172,11 @@ export default { this.isFormVisible = false; }) .catch(({ response }) => { - let errorMessage = addRelatedIssueErrorMap[this.issuableType]; + this.hasError = true; + this.errorMessage = addRelatedIssueErrorMap[this.issuableType]; if (response && response.data && response.data.message) { - errorMessage = response.data.message; + this.errorMessage = response.data.message; } - createAlert({ message: errorMessage }); }) .finally(() => { this.isSubmitting = false; @@ -266,6 +268,8 @@ export default { :issuable-type="issuableType" :path-id-separator="pathIdSeparator" :show-categorized-issues="showCategorizedIssues" + :has-error="hasError" + :item-add-failure-message="errorMessage" @saveReorder="saveIssueOrder" @toggleAddRelatedIssuesForm="onToggleAddRelatedIssuesForm" @addIssuableFormInput="onInput" diff --git a/app/assets/javascripts/related_issues/constants.js b/app/assets/javascripts/related_issues/constants.js index 4eb054ccb5c..d1b2d41d7ae 100644 --- a/app/assets/javascripts/related_issues/constants.js +++ b/app/assets/javascripts/related_issues/constants.js @@ -111,8 +111,9 @@ export const issuablesBlockHeaderTextMap = { }; export const issuablesBlockHelpTextMap = { - [issuableTypesMap.ISSUE]: __('Read more about related issues'), - [issuableTypesMap.EPIC]: __('Read more about related epics'), + [issuableTypesMap.ISSUE]: __('Learn more about linking issues'), + [issuableTypesMap.INCIDENT]: __('Learn more about linking issues and incidents'), + [issuableTypesMap.EPIC]: __('Learn more about linking epics'), }; export const issuablesBlockAddButtonTextMap = { diff --git a/app/assets/javascripts/related_issues/index.js b/app/assets/javascripts/related_issues/index.js index eb2f5d119b8..c77a67c4287 100644 --- a/app/assets/javascripts/related_issues/index.js +++ b/app/assets/javascripts/related_issues/index.js @@ -17,6 +17,7 @@ export function initRelatedIssues(issueType = 'issue') { provide: { fullPath: el.dataset.fullPath, hasIssueWeightsFeature: parseBoolean(el.dataset.hasIssueWeightsFeature), + hasIterationsFeature: parseBoolean(el.dataset.hasIterationsFeature), }, render: (createElement) => createElement(RelatedIssuesRoot, { |