diff options
Diffstat (limited to 'app/assets/javascripts/merge_requests')
7 files changed, 143 insertions, 170 deletions
diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue index c7c16e91e4c..538aa090aa8 100644 --- a/app/assets/javascripts/merge_requests/components/compare_app.vue +++ b/app/assets/javascripts/merge_requests/components/compare_app.vue @@ -32,6 +32,9 @@ export default { toggleClass: { default: () => ({}), }, + compareSide: { + default: null, + }, }, props: { currentBranch: { @@ -116,6 +119,7 @@ export default { :input-name="inputs.branch.name" :default="currentBranch" :toggle-class="toggleClass.branch" + :data-qa-compare-side="compareSide" data-testid="compare-dropdown" @selected="selectBranch" /> diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue index 2855d704507..20989206a51 100644 --- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue +++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue @@ -137,7 +137,6 @@ export default { 'gl-align-items-flex-start! gl-justify-content-start! mr-compare-dropdown', toggleClass, ]" - data-testid="source-branch-dropdown" @shown="fetchData" @search="searchData" @select="selectItem" diff --git a/app/assets/javascripts/merge_requests/components/header_metadata.vue b/app/assets/javascripts/merge_requests/components/header_metadata.vue deleted file mode 100644 index fce7ba385b4..00000000000 --- a/app/assets/javascripts/merge_requests/components/header_metadata.vue +++ /dev/null @@ -1,69 +0,0 @@ -<script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; -// eslint-disable-next-line no-restricted-imports -import { mapGetters } from 'vuex'; -import { __ } from '~/locale'; -import { TYPE_ISSUE, WORKSPACE_PROJECT } from '~/issues/constants'; -import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue'; - -export default { - TYPE_ISSUE, - WORKSPACE_PROJECT, - components: { - GlIcon, - ConfidentialityBadge, - }, - directives: { - GlTooltip: GlTooltipDirective, - }, - inject: ['hidden'], - computed: { - ...mapGetters(['getNoteableData']), - isLocked() { - return this.getNoteableData.discussion_locked; - }, - isConfidential() { - return this.getNoteableData.confidential; - }, - warningIconsMeta() { - return [ - { - iconName: 'lock', - visible: this.isLocked, - dataTestId: 'locked', - tooltip: __('This merge request is locked. Only project members can comment.'), - }, - { - iconName: 'spam', - visible: this.hidden, - dataTestId: 'hidden', - tooltip: __('This merge request is hidden because its author has been banned'), - }, - ]; - }, - }, -}; -</script> - -<template> - <div class="gl-display-inline-block"> - <confidentiality-badge - v-if="isConfidential" - class="gl-mr-3" - :issuable-type="$options.TYPE_ISSUE" - :workspace-type="$options.WORKSPACE_PROJECT" - /> - <template v-for="meta in warningIconsMeta"> - <div - v-if="meta.visible" - :key="meta.iconName" - v-gl-tooltip.bottom - :data-testid="meta.dataTestId" - :title="meta.tooltip || null" - class="issuable-warning-icon gl-mr-3 gl-mt-2 gl-display-flex gl-justify-content-center gl-align-items-center" - > - <gl-icon :name="meta.iconName" class="icon" /> - </div> - </template> - </div> -</template> diff --git a/app/assets/javascripts/merge_requests/components/merge_request_header.vue b/app/assets/javascripts/merge_requests/components/merge_request_header.vue new file mode 100644 index 00000000000..b2e7245bd88 --- /dev/null +++ b/app/assets/javascripts/merge_requests/components/merge_request_header.vue @@ -0,0 +1,113 @@ +<script> +import Vue from 'vue'; +// eslint-disable-next-line no-restricted-imports +import { mapGetters } from 'vuex'; +import HiddenBadge from '~/issuable/components/hidden_badge.vue'; +import LockedBadge from '~/issuable/components/locked_badge.vue'; +import StatusBadge from '~/issuable/components/status_badge.vue'; +import { TYPE_ISSUE, TYPE_MERGE_REQUEST, WORKSPACE_PROJECT } from '~/issues/constants'; +import { fetchPolicies } from '~/lib/graphql'; +import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue'; + +export const badgeState = Vue.observable({ + state: '', + updateStatus: null, +}); + +export default { + TYPE_ISSUE, + TYPE_MERGE_REQUEST, + WORKSPACE_PROJECT, + components: { + ConfidentialityBadge, + LockedBadge, + HiddenBadge, + StatusBadge, + }, + inject: { + query: { default: null }, + projectPath: { default: null }, + hidden: { default: false }, + iid: { default: null }, + }, + props: { + initialState: { + type: String, + required: false, + default: null, + }, + }, + data() { + if (!this.iid) { + return { + state: this.initialState, + }; + } + + if (!badgeState.state && this.initialState) { + badgeState.state = this.initialState; + } + + return badgeState; + }, + computed: { + ...mapGetters(['getNoteableData']), + isLocked() { + return this.getNoteableData.discussion_locked; + }, + isConfidential() { + return this.getNoteableData.confidential; + }, + }, + created() { + if (!badgeState.updateStatus) { + badgeState.updateStatus = this.fetchState; + } + }, + beforeDestroy() { + if (badgeState.updateStatus && this.query) { + badgeState.updateStatus = null; + } + }, + methods: { + async fetchState() { + const { data } = await this.$apollo.query({ + query: this.query, + variables: { + projectPath: this.projectPath, + iid: this.iid, + }, + fetchPolicy: fetchPolicies.NO_CACHE, + }); + + badgeState.state = data?.workspace?.issuable?.state; + }, + }, +}; +</script> + +<template> + <span class="gl-display-contents"> + <status-badge + class="gl-align-self-center gl-mr-2" + :issuable-type="$options.TYPE_MERGE_REQUEST" + :state="state" + /> + <confidentiality-badge + v-if="isConfidential" + class="gl-align-self-center gl-mr-2" + :issuable-type="$options.TYPE_ISSUE" + :workspace-type="$options.WORKSPACE_PROJECT" + /> + <locked-badge + v-if="isLocked" + class="gl-align-self-center gl-mr-2" + :issuable-type="$options.TYPE_MERGE_REQUEST" + /> + <hidden-badge + v-if="hidden" + class="gl-align-self-center gl-mr-2" + :issuable-type="$options.TYPE_MERGE_REQUEST" + /> + </span> +</template> diff --git a/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue b/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue deleted file mode 100644 index 3d5478757a8..00000000000 --- a/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script> -import Vue from 'vue'; -import { fetchPolicies } from '~/lib/graphql'; -import StatusBadge from '~/issuable/components/status_badge.vue'; - -export const badgeState = Vue.observable({ - state: '', - updateStatus: null, -}); - -export default { - components: { - StatusBadge, - }, - inject: { - query: { default: null }, - projectPath: { default: null }, - iid: { default: null }, - }, - props: { - initialState: { - type: String, - required: false, - default: null, - }, - issuableType: { - type: String, - required: false, - default: '', - }, - }, - data() { - if (!this.iid) { - return { - state: this.initialState, - }; - } - - if (!badgeState.state && this.initialState) { - badgeState.state = this.initialState; - } - - return badgeState; - }, - created() { - if (!badgeState.updateStatus) { - badgeState.updateStatus = this.fetchState; - } - }, - beforeDestroy() { - if (badgeState.updateStatus && this.query) { - badgeState.updateStatus = null; - } - }, - methods: { - async fetchState() { - const { data } = await this.$apollo.query({ - query: this.query, - variables: { - projectPath: this.projectPath, - iid: this.iid, - }, - fetchPolicy: fetchPolicies.NO_CACHE, - }); - - badgeState.state = data?.workspace?.issuable?.state; - }, - }, -}; -</script> - -<template> - <status-badge class="gl-align-self-center gl-mr-3" :issuable-type="issuableType" :state="state" /> -</template> diff --git a/app/assets/javascripts/merge_requests/components/sticky_header.vue b/app/assets/javascripts/merge_requests/components/sticky_header.vue index c1e88a901c4..e8bdb854334 100644 --- a/app/assets/javascripts/merge_requests/components/sticky_header.vue +++ b/app/assets/javascripts/merge_requests/components/sticky_header.vue @@ -11,8 +11,10 @@ import StatusBadge from '~/issuable/components/status_badge.vue'; import { TYPE_MERGE_REQUEST } from '~/issues/constants'; import DiscussionCounter from '~/notes/components/discussion_counter.vue'; import TodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue'; +import SubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import titleSubscription from '../queries/title.subscription.graphql'; +import { badgeState } from './merge_request_header.vue'; export default { TYPE_MERGE_REQUEST, @@ -46,6 +48,7 @@ export default { DiscussionCounter, StatusBadge, TodoWidget, + SubscriptionsWidget, ClipboardButton, }, directives: { @@ -71,6 +74,9 @@ export default { activeTab: (state) => state.page.activeTab, doneFetchingBatchDiscussions: (state) => state.notes.doneFetchingBatchDiscussions, }), + badgeState() { + return badgeState; + }, issuableId() { return convertToGraphQLId(TYPENAME_MERGE_REQUEST, this.getNoteableData.id); }, @@ -80,6 +86,9 @@ export default { isSignedIn() { return isLoggedIn(); }, + isNotificationsTodosButtons() { + return this.glFeatures.notificationsTodosButtons && this.glFeatures.movedMrSidebar; + }, }, watch: { discussionTabCounter(val) { @@ -120,7 +129,7 @@ export default { <status-badge class="gl-align-self-center gl-mr-3" :issuable-type="$options.TYPE_MERGE_REQUEST" - :state="getNoteableData.state" + :state="badgeState.state" /> <a v-safe-html:[$options.safeHtmlConfig]="titleHtml" @@ -189,13 +198,23 @@ export default { </ul> <div class="gl-display-none gl-lg-display-flex gl-align-items-center gl-ml-auto"> <discussion-counter blocks-merge hide-options /> - <todo-widget + <div v-if="isSignedIn" - :issuable-id="issuableId" - :issuable-iid="issuableIid" - :full-path="projectPath" - issuable-type="merge_request" - /> + :class="{ 'gl-display-flex gl-gap-3': isNotificationsTodosButtons }" + > + <todo-widget + :issuable-id="issuableId" + :issuable-iid="issuableIid" + :full-path="projectPath" + issuable-type="merge_request" + /> + <subscriptions-widget + v-if="isNotificationsTodosButtons" + :iid="issuableIid" + :full-path="projectPath" + issuable-type="merge_request" + /> + </div> </div> </div> </div> diff --git a/app/assets/javascripts/merge_requests/index.js b/app/assets/javascripts/merge_requests/index.js deleted file mode 100644 index 29218eb53e0..00000000000 --- a/app/assets/javascripts/merge_requests/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import Vue from 'vue'; -import { parseBoolean } from '~/lib/utils/common_utils'; -import HeaderMetadata from './components/header_metadata.vue'; - -export function mountHeaderMetadata(store) { - const el = document.querySelector('.js-header-metadata-root'); - - if (!el) { - return null; - } - - return new Vue({ - el, - name: 'HeaderMetadataRoot', - store, - provide: { hidden: parseBoolean(el.dataset.hidden) }, - render: (createElement) => createElement(HeaderMetadata), - }); -} |