diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /app/assets/javascripts/issuable | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/issuable')
4 files changed, 86 insertions, 37 deletions
diff --git a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue index 82223ab9ef4..06d1a2ee233 100644 --- a/app/assets/javascripts/issuable/components/issuable_header_warnings.vue +++ b/app/assets/javascripts/issuable/components/issuable_header_warnings.vue @@ -2,14 +2,21 @@ import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { mapGetters } from 'vuex'; import { __ } from '~/locale'; +import { IssuableType, WorkspaceType } from '~/issues/constants'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue'; export default { + WorkspaceType, + IssuableType, components: { GlIcon, + ConfidentialityBadge, }, directives: { GlTooltip: GlTooltipDirective, }, + mixins: [glFeatureFlagMixin()], inject: ['hidden'], computed: { ...mapGetters(['getNoteableData']), @@ -19,6 +26,9 @@ export default { isConfidential() { return this.getNoteableData.confidential; }, + isMergeRequest() { + return this.getNoteableData.targetType === 'merge_request' && this.glFeatures.updatedMrHeader; + }, warningIconsMeta() { return [ { @@ -27,11 +37,6 @@ export default { dataTestId: 'locked', }, { - iconName: 'eye-slash', - visible: this.isConfidential, - dataTestId: 'confidential', - }, - { iconName: 'spam', visible: this.hidden, dataTestId: 'hidden', @@ -45,6 +50,12 @@ export default { <template> <div class="gl-display-inline-block"> + <confidentiality-badge + v-if="isConfidential" + data-testid="confidential" + :workspace-type="$options.WorkspaceType.project" + :issuable-type="$options.IssuableType.Issue" + /> <template v-for="meta in warningIconsMeta"> <div v-if="meta.visible" @@ -52,7 +63,11 @@ export default { v-gl-tooltip :data-testid="meta.dataTestId" :title="meta.tooltip || null" - class="issuable-warning-icon inline" + :class="{ + 'gl-mr-3 gl-mt-2 gl-display-flex gl-justify-content-center gl-align-items-center': isMergeRequest, + 'gl-display-inline-block': !isMergeRequest, + }" + class="issuable-warning-icon" > <gl-icon :name="meta.iconName" class="icon" /> </div> diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue index 2bb0e3c80f9..dfe18567608 100644 --- a/app/assets/javascripts/issuable/components/related_issuable_item.vue +++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue @@ -116,7 +116,7 @@ export default { <div class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2" > - <gl-tooltip :target="() => this.$refs.iconElement"> + <gl-tooltip :target="() => $refs.iconElement"> <span v-safe-html="stateTitle"></span> </gl-tooltip> <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{ diff --git a/app/assets/javascripts/issuable/components/status_box.vue b/app/assets/javascripts/issuable/components/status_box.vue index bd6fdc131cb..498dc859186 100644 --- a/app/assets/javascripts/issuable/components/status_box.vue +++ b/app/assets/javascripts/issuable/components/status_box.vue @@ -1,32 +1,50 @@ <script> -import { GlIcon } from '@gitlab/ui'; +import { GlBadge, GlIcon } from '@gitlab/ui'; import Vue from 'vue'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { fetchPolicies } from '~/lib/graphql'; import { __ } from '~/locale'; +import { IssuableType } from '~/issues/constants'; +import { IssuableStates } from '~/vue_shared/issuable/list/constants'; -export const statusBoxState = Vue.observable({ +export const badgeState = Vue.observable({ state: '', updateStatus: null, }); const CLASSES = { - opened: 'status-box-open', - locked: 'status-box-open', - closed: 'status-box-mr-closed', - merged: 'status-box-mr-merged', + opened: 'issuable-status-badge-open', + locked: 'issuable-status-badge-open', + closed: 'issuable-status-badge-closed', + merged: 'issuable-status-badge-merged', +}; + +const ISSUE_ICONS = { + opened: 'issues', + locked: 'issues', + closed: 'issue-closed', +}; + +const MERGE_REQUEST_ICONS = { + opened: 'merge-request-open', + locked: 'merge-request-open', + closed: 'merge-request-close', + merged: 'merge', }; const STATUS = { - opened: [__('Open'), 'issue-open-m'], - locked: [__('Open'), 'issue-open-m'], - closed: [__('Closed'), 'issue-close'], - merged: [__('Merged'), 'git-merge'], + opened: __('Open'), + locked: __('Open'), + closed: __('Closed'), + merged: __('Merged'), }; export default { components: { + GlBadge, GlIcon, }, + mixins: [glFeatureFlagMixin()], inject: { query: { default: null }, projectPath: { default: null }, @@ -46,30 +64,47 @@ export default { }, data() { if (this.initialState) { - statusBoxState.state = this.initialState; + badgeState.state = this.initialState; } - return statusBoxState; + return badgeState; }, computed: { - statusBoxClass() { - return CLASSES[`${this.issuableType}_${this.state}`] || CLASSES[this.state]; + badgeClass() { + return [ + CLASSES[this.state], + { + 'gl-vertical-align-bottom': + this.issuableType === IssuableType.MergeRequest && this.glFeatures.updatedMrHeader, + }, + ]; + }, + badgeVariant() { + if (this.state === IssuableStates.Opened) { + return 'success'; + } else if (this.state === IssuableStates.Closed) { + return this.issuableType === IssuableType.MergeRequest ? 'danger' : 'info'; + } + return 'info'; }, - statusHumanName() { - return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[0]; + badgeText() { + return STATUS[this.state]; }, - statusIconName() { - return (STATUS[`${this.issuableType}_${this.state}`] || STATUS[this.state])[1]; + badgeIcon() { + if (this.issuableType === IssuableType.Issue) { + return ISSUE_ICONS[this.state]; + } + return MERGE_REQUEST_ICONS[this.state]; }, }, created() { - if (!statusBoxState.updateStatus) { - statusBoxState.updateStatus = this.fetchState; + if (!badgeState.updateStatus) { + badgeState.updateStatus = this.fetchState; } }, beforeDestroy() { - if (statusBoxState.updateStatus && this.query) { - statusBoxState.updateStatus = null; + if (badgeState.updateStatus && this.query) { + badgeState.updateStatus = null; } }, methods: { @@ -83,17 +118,15 @@ export default { fetchPolicy: fetchPolicies.NO_CACHE, }); - statusBoxState.state = data?.workspace?.issuable?.state; + badgeState.state = data?.workspace?.issuable?.state; }, }, }; </script> <template> - <div :class="statusBoxClass" class="issuable-status-box status-box"> - <gl-icon :name="statusIconName" class="gl-display-block gl-sm-display-none!" /> - <span class="gl-display-none gl-sm-display-block"> - {{ statusHumanName }} - </span> - </div> + <gl-badge class="issuable-status-badge gl-mr-3" :class="badgeClass" :variant="badgeVariant"> + <gl-icon :name="badgeIcon" /> + <span class="gl-display-none gl-sm-display-block gl-ml-2">{{ badgeText }}</span> + </gl-badge> </template> diff --git a/app/assets/javascripts/issuable/issuable_form.js b/app/assets/javascripts/issuable/issuable_form.js index 018cadad50f..8e76a33c7dd 100644 --- a/app/assets/javascripts/issuable/issuable_form.js +++ b/app/assets/javascripts/issuable/issuable_form.js @@ -65,7 +65,8 @@ export default class IssuableForm { this.gfmAutoComplete = new GfmAutoComplete( gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources, ).setup(); - this.usersSelect = new UsersSelect(); + const autoAssignToMe = form.get(0).id === 'new_merge_request'; + this.usersSelect = new UsersSelect(undefined, undefined, { autoAssignToMe }); this.reviewersSelect = new UsersSelect(undefined, '.js-reviewer-search'); this.zenMode = new ZenMode(); |