diff options
| author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-19 15:19:34 +0000 |
|---|---|---|
| committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-19 15:19:34 +0000 |
| commit | b6d63c915a91aeb7a4437349c53e68be8c50cf4e (patch) | |
| tree | 8617959c1d6b9137e4cefad06aedbf574295cd6c /app | |
| parent | 2017bc90a671eac669f0114b6ef508e151409c4f (diff) | |
| download | gitlab-ce-b6d63c915a91aeb7a4437349c53e68be8c50cf4e.tar.gz | |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app')
49 files changed, 761 insertions, 190 deletions
diff --git a/app/assets/javascripts/entrypoints/super_sidebar.js b/app/assets/javascripts/entrypoints/super_sidebar.js index 308077f98b1..6e88a998096 100644 --- a/app/assets/javascripts/entrypoints/super_sidebar.js +++ b/app/assets/javascripts/entrypoints/super_sidebar.js @@ -1,5 +1,6 @@ import '~/webpack'; import '~/commons'; -import { initSuperSidebar } from '~/super_sidebar/super_sidebar_bundle'; +import { initSuperSidebar, initSuperSidebarToggle } from '~/super_sidebar/super_sidebar_bundle'; initSuperSidebar(); +initSuperSidebarToggle(); diff --git a/app/assets/javascripts/invite_members/components/invite_members_modal.vue b/app/assets/javascripts/invite_members/components/invite_members_modal.vue index a2d3b47d8f0..e99a61caf3f 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_modal.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_modal.vue @@ -14,18 +14,20 @@ import InviteModalBase from 'ee_else_ce/invite_members/components/invite_modal_b import Api from '~/api'; import Tracking from '~/tracking'; import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants'; -import { getParameterValues } from '~/lib/utils/url_utility'; import { n__, sprintf } from '~/locale'; import { + memberName, + triggerExternalAlert, + qualifiesForTasksToBeDone, +} from 'ee_else_ce/invite_members/utils/member_utils'; +import { USERS_FILTER_ALL, INVITE_MEMBERS_FOR_TASK, MEMBER_MODAL_LABELS, - LEARN_GITLAB, INVITE_MEMBER_MODAL_TRACKING_CATEGORY, } from '../constants'; import eventHub from '../event_hub'; import { responseFromSuccess } from '../utils/response_message_parser'; -import { memberName } from '../utils/member_utils'; import { getInvalidFeedbackMessage } from '../utils/get_invalid_feedback_message'; import { displaySuccessfulInvitationAlert, @@ -169,11 +171,7 @@ export default { ); }, tasksToBeDoneEnabled() { - return ( - (getParameterValues('open_modal')[0] === 'invite_members_for_task' || - this.isOnLearnGitlab) && - this.tasksToBeDoneOptions.length - ); + return qualifiesForTasksToBeDone(this.source) && this.tasksToBeDoneOptions.length; }, showTasksToBeDone() { return ( @@ -192,9 +190,6 @@ export default { ? this.selectedTaskProject.id : ''; }, - isOnLearnGitlab() { - return this.source === LEARN_GITLAB; - }, showUserLimitNotification() { return !isEmpty(this.usersLimitDataset.alertVariant); }, @@ -283,7 +278,24 @@ export default { this.shouldShowEmptyInvitesAlert = true; this.$refs.alerts.focus(); }, - sendInvite({ accessLevel, expiresAt }) { + getInvitePayload({ accessLevel, expiresAt }) { + const [usersToInviteByEmail, usersToAddById] = this.partitionNewUsersToInvite(); + + const email = usersToInviteByEmail !== '' ? { email: usersToInviteByEmail } : {}; + const userId = usersToAddById !== '' ? { user_id: usersToAddById } : {}; + + return { + format: 'json', + expires_at: expiresAt, + access_level: accessLevel, + invite_source: this.source, + tasks_to_be_done: this.tasksToBeDoneForPost, + tasks_project_id: this.tasksProjectForPost, + ...email, + ...userId, + }; + }, + async sendInvite({ accessLevel, expiresAt }) { this.isLoading = true; this.clearValidation(); @@ -292,40 +304,28 @@ export default { return; } - const [usersToInviteByEmail, usersToAddById] = this.partitionNewUsersToInvite(); + this.trackInviteMembersForTask(); const apiAddByInvite = this.isProject ? Api.inviteProjectMembers.bind(Api) : Api.inviteGroupMembers.bind(Api); - const email = usersToInviteByEmail !== '' ? { email: usersToInviteByEmail } : {}; - const userId = usersToAddById !== '' ? { user_id: usersToAddById } : {}; + try { + const payload = this.getInvitePayload({ accessLevel, expiresAt }); + const response = await apiAddByInvite(this.id, payload); - this.trackinviteMembersForTask(); + const { error, message } = responseFromSuccess(response); - apiAddByInvite(this.id, { - format: 'json', - expires_at: expiresAt, - access_level: accessLevel, - invite_source: this.source, - tasks_to_be_done: this.tasksToBeDoneForPost, - tasks_project_id: this.tasksProjectForPost, - ...email, - ...userId, - }) - .then((response) => { - const { error, message } = responseFromSuccess(response); - - if (error) { - this.showMemberErrors(message); - } else { - this.onInviteSuccess(); - } - }) - .catch((e) => this.showInvalidFeedbackMessage(e)) - .finally(() => { - this.isLoading = false; - }); + if (error) { + this.showMemberErrors(message); + } else { + this.onInviteSuccess(); + } + } catch (e) { + this.showInvalidFeedbackMessage(e); + } finally { + this.isLoading = false; + } }, showMemberErrors(message) { this.invalidMembers = message; @@ -335,7 +335,7 @@ export default { // initial token creation hits this and nothing is found... so safe navigation return this.newUsersToInvite.find((member) => memberName(member) === username)?.name; }, - trackinviteMembersForTask() { + trackInviteMembersForTask() { const label = 'selected_tasks_to_be_done'; const property = this.selectedTasksToBeDone.join(','); this.track(INVITE_MEMBERS_FOR_TASK.submit, { label, property }); @@ -367,9 +367,7 @@ export default { } }, showSuccessMessage() { - if (this.isOnLearnGitlab) { - eventHub.$emit('showSuccessfulInvitationsAlert'); - } else { + if (!triggerExternalAlert(this.source)) { this.$toast.show(this.$options.labels.toastMessageSuccessful); } @@ -421,7 +419,9 @@ export default { @access-level="onAccessLevelUpdate" > <template #intro-text-before> - <div v-if="isCelebration" class="gl-p-4 gl-font-size-h1"><gl-emoji data-name="tada" /></div> + <div v-if="isCelebration" class="gl-p-4 gl-font-size-h1"> + <gl-emoji data-name="tada" /> + </div> </template> <template #intro-text-after> <br /> diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index f373ef81e68..d5e9e498c6b 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -150,7 +150,6 @@ export const GROUP_MODAL_LABELS = { toastMessageSuccessful: TOAST_MESSAGE_SUCCESSFUL, }; -export const LEARN_GITLAB = 'learn_gitlab'; export const ON_SHOW_TRACK_LABEL = 'over_limit_modal_viewed'; export const ON_CELEBRATION_TRACK_LABEL = 'invite_celebration_modal'; diff --git a/app/assets/javascripts/invite_members/utils/member_utils.js b/app/assets/javascripts/invite_members/utils/member_utils.js index d85162626f1..240a3a89686 100644 --- a/app/assets/javascripts/invite_members/utils/member_utils.js +++ b/app/assets/javascripts/invite_members/utils/member_utils.js @@ -1,4 +1,14 @@ +import { getParameterValues } from '~/lib/utils/url_utility'; + export function memberName(member) { // user defined tokens(invites by email) will have email in `name` and will not contain `username` return member.username || member.name; } + +export function triggerExternalAlert() { + return false; +} + +export function qualifiesForTasksToBeDone() { + return getParameterValues('open_modal')[0] === 'invite_members_for_task'; +} diff --git a/app/assets/javascripts/issues/constants.js b/app/assets/javascripts/issues/constants.js index d35355a8f26..371db4eacc3 100644 --- a/app/assets/javascripts/issues/constants.js +++ b/app/assets/javascripts/issues/constants.js @@ -26,3 +26,8 @@ export const IssuableStatusText = { [STATUS_MERGED]: __('Merged'), [STATUS_LOCKED]: __('Open'), }; + +export const IssuableTypeText = { + [TYPE_ISSUE]: __('issue'), + [TYPE_MERGE_REQUEST]: __('merge request'), +}; diff --git a/app/assets/javascripts/issues/create_merge_request_dropdown.js b/app/assets/javascripts/issues/create_merge_request_dropdown.js index c821c18bcb9..de0334b4ffe 100644 --- a/app/assets/javascripts/issues/create_merge_request_dropdown.js +++ b/app/assets/javascripts/issues/create_merge_request_dropdown.js @@ -432,7 +432,7 @@ export default class CreateMergeRequestDropdown { let xhr = null; event.preventDefault(); - if (isConfidentialIssue() && !event.target.classList.contains('js-create-target')) { + if (isConfidentialIssue() && !event.currentTarget.classList.contains('js-create-target')) { this.droplab.hooks.forEach((hook) => hook.list.toggle()); return; @@ -442,9 +442,9 @@ export default class CreateMergeRequestDropdown { return; } - if (event.target.dataset.action === CREATE_MERGE_REQUEST) { + if (event.currentTarget.dataset.action === CREATE_MERGE_REQUEST) { xhr = this.createMergeRequest(); - } else if (event.target.dataset.action === CREATE_BRANCH) { + } else if (event.currentTarget.dataset.action === CREATE_BRANCH) { xhr = this.createBranch(); } diff --git a/app/assets/javascripts/issues/list/graphql.js b/app/assets/javascripts/issues/list/graphql.js index 96330f69965..e64870152bd 100644 --- a/app/assets/javascripts/issues/list/graphql.js +++ b/app/assets/javascripts/issues/list/graphql.js @@ -2,6 +2,8 @@ import produce from 'immer'; import createDefaultClient, { createApolloClientWithCaching } from '~/lib/graphql'; import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql'; +let client; + const resolvers = { Mutation: { reorderIssues: (_, { oldIndex, newIndex, namespace, serializedVariables }, { cache }) => { @@ -23,7 +25,8 @@ const resolvers = { }; export async function gqlClient() { - const client = gon.features?.frontendCaching + if (client) return client; + client = gon.features?.frontendCaching ? await createApolloClientWithCaching(resolvers, { localCacheKey: 'issues_list' }) : createDefaultClient(resolvers); return client; diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js index 720946ea330..a97b59c1e4f 100644 --- a/app/assets/javascripts/issues/list/index.js +++ b/app/assets/javascripts/issues/list/index.js @@ -6,7 +6,7 @@ import { parseBoolean } from '~/lib/utils/common_utils'; import JiraIssuesImportStatusApp from './components/jira_issues_import_status_app.vue'; import { gqlClient } from './graphql'; -export function mountJiraIssuesListApp() { +export async function mountJiraIssuesListApp() { const el = document.querySelector('.js-jira-issues-import-status-root'); if (!el) { @@ -27,7 +27,7 @@ export function mountJiraIssuesListApp() { el, name: 'JiraIssuesImportStatusRoot', apolloProvider: new VueApollo({ - defaultClient: gqlClient, + defaultClient: await gqlClient(), }), render(createComponent) { return createComponent(JiraIssuesImportStatusApp, { diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue index 84def374d13..b929c4dbae0 100644 --- a/app/assets/javascripts/issues/show/components/header_actions.vue +++ b/app/assets/javascripts/issues/show/components/header_actions.vue @@ -2,23 +2,36 @@ import { GlButton, GlDropdown, + GlDropdownDivider, GlDropdownItem, GlLink, GlModal, GlModalDirective, GlTooltipDirective, } from '@gitlab/ui'; +import * as Sentry from '@sentry/browser'; import { mapActions, mapGetters, mapState } from 'vuex'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants'; -import { STATUS_CLOSED, TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants'; -import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants'; +import { STATUS_CLOSED, TYPE_INCIDENT, TYPE_ISSUE, IssuableTypeText } from '~/issues/constants'; +import { + ISSUE_STATE_EVENT_CLOSE, + ISSUE_STATE_EVENT_REOPEN, + NEW_ACTIONS_POPOVER_KEY, +} from '~/issues/show/constants'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; +import { getCookie, parseBoolean, setCookie } from '~/lib/utils/common_utils'; import { visitUrl } from '~/lib/utils/url_utility'; import { s__, __, sprintf } from '~/locale'; import eventHub from '~/notes/event_hub'; import Tracking from '~/tracking'; +import toast from '~/vue_shared/plugins/global_toast'; import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue'; +import NewHeaderActionsPopover from '~/issues/show/components/new_header_actions_popover.vue'; +import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue'; +import IssuableLockForm from '~/sidebar/components/lock/issuable_lock_form.vue'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import issueReferenceQuery from '~/sidebar/queries/issue_reference.query.graphql'; import issuesEventHub from '../event_hub'; import promoteToEpicMutation from '../queries/promote_to_epic.mutation.graphql'; import updateIssueMutation from '../queries/update_issue.mutation.graphql'; @@ -44,21 +57,27 @@ export default { 'The issue was successfully promoted to an epic. Redirecting to epic...', ), reportAbuse: __('Report abuse to administrator'), + referenceFetchError: __('An error occurred while fetching reference'), + copyReferenceText: __('Copy reference'), }, components: { DeleteIssueModal, GlButton, GlDropdown, + GlDropdownDivider, GlDropdownItem, GlLink, GlModal, AbuseCategorySelector, + NewHeaderActionsPopover, + SidebarSubscriptionsWidget, + IssuableLockForm, }, directives: { GlModal: GlModalDirective, GlTooltip: GlTooltipDirective, }, - mixins: [trackingMixin], + mixins: [trackingMixin, glFeatureFlagMixin()], inject: { canCreateIssue: { default: false, @@ -105,15 +124,46 @@ export default { reportedFromUrl: { default: '', }, + issuableEmailAddress: { + default: '', + }, + fullPath: { + default: '', + }, }, data() { return { isReportAbuseDrawerOpen: false, }; }, + apollo: { + issuableReference: { + query: issueReferenceQuery, + variables() { + return { + fullPath: this.fullPath, + iid: this.iid, + }; + }, + update(data) { + return data.workspace?.issuable?.reference || ''; + }, + skip() { + return !this.isMrSidebarMoved; + }, + error(error) { + createAlert({ message: this.$options.i18n.referenceFetchError }); + Sentry.captureException(error); + }, + }, + }, computed: { ...mapState(['isToggleStateButtonLoading']), ...mapGetters(['openState', 'getBlockedByIssues']), + ...mapGetters(['getNoteableData']), + isLocked() { + return this.getNoteableData.discussion_locked; + }, isClosed() { return this.openState === STATUS_CLOSED; }, @@ -157,6 +207,17 @@ export default { hasMobileDropdown() { return this.hasDesktopDropdown || this.showToggleIssueStateButton; }, + copyMailAddressText() { + return sprintf(__('Copy %{issueType} email address'), { + issueType: IssuableTypeText[this.issueType], + }); + }, + isMrSidebarMoved() { + return this.glFeatures.movedMrSidebar; + }, + showLockIssueOption() { + return this.isMrSidebarMoved && this.issueType === TYPE_ISSUE; + }, }, created() { eventHub.$on('toggle.issuable.state', this.toggleIssueState); @@ -166,6 +227,7 @@ export default { }, methods: { ...mapActions(['toggleStateButtonLoading']), + ...mapActions(['updateLockedAttribute']), toggleIssueState() { if (!this.isClosed && this.getBlockedByIssues?.length) { this.$refs.blockedByIssuesModal.show(); @@ -244,7 +306,19 @@ export default { edit() { issuesEventHub.$emit('open.form'); }, + dismissPopover() { + if (this.isMrSidebarMoved && !parseBoolean(getCookie(`${NEW_ACTIONS_POPOVER_KEY}`))) { + setCookie(NEW_ACTIONS_POPOVER_KEY, true); + } + }, + copyReference() { + toast(__('Reference copied')); + }, + copyEmailAddress() { + toast(__('Email address copied')); + }, }, + TYPE_ISSUE, }; </script> @@ -259,6 +333,21 @@ export default { data-testid="mobile-dropdown" :loading="isToggleStateButtonLoading" > + <template v-if="isMrSidebarMoved"> + <sidebar-subscriptions-widget + :iid="String(iid)" + :full-path="fullPath" + :issuable-type="$options.TYPE_ISSUE" + data-testid="notification-toggle" + /> + + <gl-dropdown-divider /> + </template> + + <template v-if="showLockIssueOption"> + <issuable-lock-form :is-editable="false" data-testid="lock-issue-toggle" /> + </template> + <gl-dropdown-item v-if="canUpdateIssue" @click="edit"> {{ $options.i18n.edit }} </gl-dropdown-item> @@ -275,9 +364,21 @@ export default { <gl-dropdown-item v-if="canPromoteToEpic" @click="promoteToEpic"> {{ __('Promote to epic') }} </gl-dropdown-item> - <gl-dropdown-item v-if="!isIssueAuthor" @click="toggleReportAbuseDrawer(true)"> - {{ $options.i18n.reportAbuse }} - </gl-dropdown-item> + <template v-if="isMrSidebarMoved"> + <gl-dropdown-item + :data-clipboard-text="issuableReference" + data-testid="copy-reference" + @click="copyReference" + >{{ $options.i18n.copyReferenceText }}</gl-dropdown-item + > + <gl-dropdown-item + v-if="issuableEmailAddress" + :data-clipboard-text="issuableEmailAddress" + data-testid="copy-email" + @click="copyEmailAddress" + >{{ copyMailAddressText }}</gl-dropdown-item + > + </template> <gl-dropdown-item v-if="canReportSpam" :href="submitAsSpamPath" @@ -287,6 +388,7 @@ export default { {{ __('Submit as spam') }} </gl-dropdown-item> <template v-if="canDestroyIssue"> + <gl-dropdown-divider /> <gl-dropdown-item v-gl-modal="$options.deleteModalId" variant="danger" @@ -295,6 +397,13 @@ export default { {{ deleteButtonText }} </gl-dropdown-item> </template> + <gl-dropdown-item + v-if="!isIssueAuthor" + data-testid="report-abuse-item" + @click="toggleReportAbuseDrawer(true)" + > + {{ $options.i18n.reportAbuse }} + </gl-dropdown-item> </gl-dropdown> <gl-button @@ -322,6 +431,7 @@ export default { <gl-dropdown v-if="hasDesktopDropdown" + id="new-actions-header-dropdown" v-gl-tooltip.hover class="gl-display-none gl-sm-display-inline-flex! gl-sm-ml-3" icon="ellipsis_v" @@ -334,7 +444,19 @@ export default { data-testid="desktop-dropdown" no-caret right + @shown="dismissPopover" > + <template v-if="isMrSidebarMoved"> + <sidebar-subscriptions-widget + :iid="String(iid)" + :full-path="fullPath" + :issuable-type="$options.TYPE_ISSUE" + data-testid="notification-toggle" + /> + + <gl-dropdown-divider /> + </template> + <gl-dropdown-item v-if="canCreateIssue" :href="newIssuePath"> {{ newIssueTypeText }} </gl-dropdown-item> @@ -346,9 +468,24 @@ export default { > {{ __('Promote to epic') }} </gl-dropdown-item> - <gl-dropdown-item v-if="!isIssueAuthor" @click="toggleReportAbuseDrawer(true)"> - {{ $options.i18n.reportAbuse }} - </gl-dropdown-item> + <template v-if="showLockIssueOption"> + <issuable-lock-form :is-editable="false" data-testid="lock-issue-toggle" /> + </template> + <template v-if="isMrSidebarMoved"> + <gl-dropdown-item + :data-clipboard-text="issuableReference" + data-testid="copy-reference" + @click="copyReference" + >{{ $options.i18n.copyReferenceText }}</gl-dropdown-item + > + <gl-dropdown-item + v-if="issuableEmailAddress" + :data-clipboard-text="issuableEmailAddress" + data-testid="copy-email" + @click="copyEmailAddress" + >{{ copyMailAddressText }}</gl-dropdown-item + > + </template> <gl-dropdown-item v-if="canReportSpam" :href="submitAsSpamPath" @@ -357,8 +494,8 @@ export default { > {{ __('Submit as spam') }} </gl-dropdown-item> - <template v-if="canDestroyIssue"> + <gl-dropdown-divider /> <gl-dropdown-item v-gl-modal="$options.deleteModalId" variant="danger" @@ -368,8 +505,16 @@ export default { {{ deleteButtonText }} </gl-dropdown-item> </template> + <gl-dropdown-item + v-if="!isIssueAuthor" + data-testid="report-abuse-item" + @click="toggleReportAbuseDrawer(true)" + > + {{ $options.i18n.reportAbuse }} + </gl-dropdown-item> </gl-dropdown> + <new-header-actions-popover v-if="isMrSidebarMoved" :issue-type="issueType" /> <gl-modal ref="blockedByIssuesModal" modal-id="blocked-by-issues-modal" diff --git a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue new file mode 100644 index 00000000000..8262b3ac0ff --- /dev/null +++ b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue @@ -0,0 +1,82 @@ +<script> +import { GlPopover, GlButton } from '@gitlab/ui'; +import { s__, sprintf } from '~/locale'; +import { getCookie, parseBoolean, setCookie } from '~/lib/utils/common_utils'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { NEW_ACTIONS_POPOVER_KEY } from '~/issues/show/constants'; +import { IssuableTypeText } from '~/issues/constants'; + +export default { + name: 'NewHeaderActionsPopover', + i18n: { + popoverText: s__( + 'HeaderAction|Notifications and other %{issueType} actions have moved to this menu.', + ), + confirmButtonText: s__('HeaderAction|Okay!'), + }, + components: { + GlPopover, + GlButton, + }, + mixins: [glFeatureFlagMixin()], + props: { + issueType: { + type: String, + required: true, + }, + }, + data() { + return { + dismissKey: NEW_ACTIONS_POPOVER_KEY, + popoverDismissed: parseBoolean(getCookie(`${NEW_ACTIONS_POPOVER_KEY}`)), + }; + }, + computed: { + popoverText() { + return sprintf(this.$options.i18n.popoverText, { + issueType: IssuableTypeText[this.issueType], + }); + }, + showPopover() { + return !this.popoverDismissed && this.isMrSidebarMoved; + }, + isMrSidebarMoved() { + return this.glFeatures.movedMrSidebar; + }, + }, + methods: { + dismissPopover() { + this.popoverDismissed = true; + setCookie(this.dismissKey, this.popoverDismissed); + }, + }, +}; +</script> + +<template> + <div> + <gl-popover + v-if="showPopover" + target="new-actions-header-dropdown" + container="viewport" + placement="left" + :show="showPopover" + triggers="manual" + content="text" + :css-classes="['gl-p-2 new-header-popover']" + > + <template #title> + <div class="gl-font-base gl-font-weight-normal"> + {{ popoverText }} + </div> + </template> + <gl-button + data-testid="confirm-button" + variant="confirm" + type="submit" + @click="dismissPopover" + >{{ $options.i18n.confirmButtonText }}</gl-button + > + </gl-popover> + </div> +</template> diff --git a/app/assets/javascripts/issues/show/constants.js b/app/assets/javascripts/issues/show/constants.js index 4d8c11f9669..6320e4ef266 100644 --- a/app/assets/javascripts/issues/show/constants.js +++ b/app/assets/javascripts/issues/show/constants.js @@ -17,3 +17,5 @@ export const issueState = { issueType: undefined, isDirty: false, }; + +export const NEW_ACTIONS_POPOVER_KEY = 'new-actions-popover-viewed'; diff --git a/app/assets/javascripts/issues/show/index.js b/app/assets/javascripts/issues/show/index.js index e677328cd2e..100abcbe1e5 100644 --- a/app/assets/javascripts/issues/show/index.js +++ b/app/assets/javascripts/issues/show/index.js @@ -174,6 +174,8 @@ export function initHeaderActions(store, type = '') { reportedUserId: parseInt(el.dataset.reportedUserId, 10), reportedFromUrl: el.dataset.reportedFromUrl, submitAsSpamPath: el.dataset.submitAsSpamPath, + issuableEmailAddress: el.dataset.issuableEmailAddress, + fullPath: el.dataset.projectPath, }, render: (createElement) => createElement(HeaderActions), }); diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js index 297b8ae1fc2..58e4553d00d 100644 --- a/app/assets/javascripts/right_sidebar.js +++ b/app/assets/javascripts/right_sidebar.js @@ -56,8 +56,10 @@ Sidebar.prototype.addEventListeners = function () { const layoutPage = document.querySelector('.layout-page'); const rightSidebar = document.querySelector('.js-right-sidebar'); - updateSidebarClasses(layoutPage, rightSidebar); - window.addEventListener('resize', () => updateSidebarClasses(layoutPage, rightSidebar)); + if (rightSidebar.classList.contains('right-sidebar-merge-requests')) { + updateSidebarClasses(layoutPage, rightSidebar); + window.addEventListener('resize', () => updateSidebarClasses(layoutPage, rightSidebar)); + } } }; diff --git a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue index 1eff4db3970..06876546fa4 100644 --- a/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue +++ b/app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue @@ -1,8 +1,9 @@ <script> import { GlIcon, GlTooltipDirective, GlOutsideDirective as Outside } from '@gitlab/ui'; import { mapGetters, mapActions } from 'vuex'; -import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants'; +import { TYPE_ISSUE } from '~/issues/constants'; import { __, sprintf } from '~/locale'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { createAlert } from '~/alert'; import toast from '~/vue_shared/plugins/global_toast'; @@ -45,10 +46,8 @@ export default { }, computed: { ...mapGetters(['getNoteableData']), - isMergeRequest() { - return ( - this.getNoteableData.targetType === TYPE_MERGE_REQUEST && this.glFeatures.movedMrSidebar - ); + isMovedMrSidebar() { + return this.glFeatures.movedMrSidebar; }, issuableDisplayName() { const isInIssuePage = this.getNoteableData.targetType === TYPE_ISSUE; @@ -60,7 +59,6 @@ export default { lockStatus() { return this.isLocked ? this.$options.locked : this.$options.unlocked; }, - tooltipLabel() { return this.isLocked ? __('Locked') : __('Unlocked'); }, @@ -89,8 +87,13 @@ export default { fullPath: this.fullPath, }) .then(() => { - if (this.isMergeRequest) { - toast(this.isLocked ? __('Merge request locked.') : __('Merge request unlocked.')); + if (this.isMovedMrSidebar) { + toast( + sprintf(__('%{issuableDisplayName} %{lockStatus}.'), { + issuableDisplayName: capitalizeFirstCharacter(this.issuableDisplayName), + lockStatus: this.isLocked ? __('locked') : __('unlocked'), + }), + ); } }) .catch(() => { @@ -113,14 +116,14 @@ export default { </script> <template> - <li v-if="isMergeRequest" class="gl-dropdown-item"> - <button type="button" class="dropdown-item" @click="toggleLocked"> + <li v-if="isMovedMrSidebar" class="gl-dropdown-item"> + <button type="button" class="dropdown-item" data-testid="issuable-lock" @click="toggleLocked"> <span class="gl-dropdown-item-text-wrapper"> <template v-if="isLocked"> - {{ __('Unlock merge request') }} + {{ sprintf(__('Unlock %{issuableType}'), { issuableType: issuableDisplayName }) }} </template> <template v-else> - {{ __('Lock merge request') }} + {{ sprintf(__('Lock %{issuableType}'), { issuableType: issuableDisplayName }) }} </template> </span> </button> diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue index 344fa880131..f2b960ed02c 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue @@ -1,12 +1,7 @@ <script> import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui'; import { createAlert } from '~/alert'; -import { - TYPE_EPIC, - TYPE_MERGE_REQUEST, - WORKSPACE_GROUP, - WORKSPACE_PROJECT, -} from '~/issues/constants'; +import { TYPE_EPIC, WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { __, sprintf } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -91,8 +86,8 @@ export default { }, }, computed: { - isMergeRequest() { - return this.issuableType === TYPE_MERGE_REQUEST && this.glFeatures.movedMrSidebar; + isMovedMrSidebar() { + return this.glFeatures.movedMrSidebar; }, isLoading() { return this.$apollo.queries?.subscribed?.loading || this.loading; @@ -148,7 +143,7 @@ export default { }); } - if (this.isMergeRequest) { + if (this.isMovedMrSidebar) { toast(subscribed ? __('Notifications turned on.') : __('Notifications turned off.')); } }, @@ -187,7 +182,7 @@ export default { </script> <template> - <gl-dropdown-form v-if="isMergeRequest" class="gl-dropdown-item"> + <gl-dropdown-form v-if="isMovedMrSidebar" class="gl-dropdown-item"> <div class="gl-px-5 gl-pb-2 gl-pt-1"> <gl-toggle :value="subscribed" diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 2c56dc34701..0bf4105fdd6 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -17,6 +17,7 @@ import { __ } from '~/locale'; import { apolloProvider } from '~/graphql_shared/issuable_client'; import Translate from '~/vue_shared/translate'; import UserSelect from '~/vue_shared/components/user_select/user_select.vue'; +import NewHeaderActionsPopover from '~/issues/show/components/new_header_actions_popover.vue'; import CollapsedAssigneeList from './components/assignees/collapsed_assignee_list.vue'; import SidebarAssignees from './components/assignees/sidebar_assignees.vue'; import SidebarAssigneesWidget from './components/assignees/sidebar_assignees_widget.vue'; @@ -645,7 +646,7 @@ function mountCopyEmailToClipboard() { }); } -export function mountMoveIssuesButton() { +export async function mountMoveIssuesButton() { const el = document.querySelector('.js-move-issues'); if (!el) { @@ -658,7 +659,7 @@ export function mountMoveIssuesButton() { el, name: 'MoveIssuesRoot', apolloProvider: new VueApollo({ - defaultClient: gqlClient, + defaultClient: await gqlClient(), }), render: (createElement) => createElement(MoveIssuesButton, { @@ -787,6 +788,21 @@ export function mountAssigneesDropdown() { }); } +function mountNewIssuePopover() { + const el = document.querySelector('.js-sidebar-header-popover'); + + if (!el) { + return null; + } + + return new Vue({ + el, + name: 'NewHeaderActionsPopover', + render: (createElement) => + createElement(NewHeaderActionsPopover, { props: { issueType: TYPE_MERGE_REQUEST } }), + }); +} + const isAssigneesWidgetShown = (isInIssuePage() || isInDesignPage() || isInMRPage()) && gon.features.issueAssigneesWidget; @@ -814,6 +830,7 @@ export function mountSidebar(mediator, store) { mountSidebarSeverityWidget(); mountSidebarEscalationStatus(); mountMoveIssueButton(); + mountNewIssuePopover(); } export { getSidebarOptions }; diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue index e9198952382..4b54e317639 100644 --- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue +++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue @@ -1,8 +1,13 @@ <script> import { GlButton, GlCollapse } from '@gitlab/ui'; import { __ } from '~/locale'; -import { isCollapsed, toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager'; -import { SIDEBAR_VISIBILITY_CLASS } from '../constants'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { + sidebarState, + SUPER_SIDEBAR_PEEK_OPEN_DELAY, + SUPER_SIDEBAR_PEEK_CLOSE_DELAY, +} from '../constants'; +import { toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager'; import UserBar from './user_bar.vue'; import SidebarPortalTarget from './sidebar_portal_target.vue'; import ContextSwitcherToggle from './context_switcher_toggle.vue'; @@ -11,7 +16,6 @@ import HelpCenter from './help_center.vue'; import SidebarMenu from './sidebar_menu.vue'; export default { - SIDEBAR_VISIBILITY_CLASS, components: { GlButton, GlCollapse, @@ -22,6 +26,7 @@ export default { SidebarMenu, SidebarPortalTarget, }, + mixins: [glFeatureFlagsMixin()], i18n: { skipToMainContent: __('Skip to main content'), }, @@ -32,10 +37,7 @@ export default { }, }, data() { - return { - contextSwitcherOpen: false, - isCollapsed: isCollapsed(), - }; + return sidebarState; }, computed: { menuItems() { @@ -49,6 +51,34 @@ export default { onContextSwitcherShown() { this.$refs['context-switcher'].focusInput(); }, + onHoverAreaMouseEnter() { + this.openPeekTimer = setTimeout(this.openPeek, SUPER_SIDEBAR_PEEK_OPEN_DELAY); + }, + onHoverAreaMouseLeave() { + clearTimeout(this.openPeekTimer); + }, + onSidebarMouseEnter() { + clearTimeout(this.closePeekTimer); + }, + onSidebarMouseLeave() { + this.closePeekTimer = setTimeout(this.closePeek, SUPER_SIDEBAR_PEEK_CLOSE_DELAY); + }, + closePeek() { + if (this.isPeek) { + this.isPeek = false; + this.isCollapsed = true; + } + }, + openPeek() { + this.isPeek = true; + this.isCollapsed = false; + + // Cancel and start the timer to close sidebar, in case the user moves + // the cursor fast enough away to not trigger a mouseenter event. + // This is cancelled if the user moves the cursor into the sidebar. + this.onSidebarMouseEnter(); + this.onSidebarMouseLeave(); + }, }, }; </script> @@ -56,14 +86,22 @@ export default { <template> <div> <div class="super-sidebar-overlay" @click="collapseSidebar"></div> + <div + v-if="!isPeek && glFeatures.superSidebarPeek" + class="super-sidebar-hover-area gl-fixed gl-left-0 gl-top-0 gl-bottom-0 gl-w-3" + data-testid="super-sidebar-hover-area" + @mouseenter="onHoverAreaMouseEnter" + @mouseleave="onHoverAreaMouseLeave" + ></div> <aside id="super-sidebar" class="super-sidebar" - :class="{ [$options.SIDEBAR_VISIBILITY_CLASS]: isCollapsed }" + :class="{ 'super-sidebar-peek': isPeek }" data-testid="super-sidebar" data-qa-selector="navbar" :inert="isCollapsed" - tabindex="-1" + @mouseenter="onSidebarMouseEnter" + @mouseleave="onSidebarMouseLeave" > <gl-button class="super-sidebar-skip-to gl-sr-only-focusable gl-absolute gl-left-3 gl-right-3 gl-top-3" @@ -72,7 +110,7 @@ export default { > {{ $options.i18n.skipToMainContent }} </gl-button> - <user-bar :sidebar-data="sidebarData" /> + <user-bar :has-collapse-button="!isPeek" :sidebar-data="sidebarData" /> <div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-overflow-hidden"> <div class="gl-flex-grow-1 gl-overflow-auto"> <context-switcher-toggle diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue new file mode 100644 index 00000000000..3064b91ca7d --- /dev/null +++ b/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue @@ -0,0 +1,80 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { __ } from '~/locale'; +import { JS_TOGGLE_COLLAPSE_CLASS, JS_TOGGLE_EXPAND_CLASS, sidebarState } from '../constants'; +import { toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager'; + +export default { + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + tooltipContainer: { + type: String, + required: false, + default: null, + }, + tooltipPlacement: { + type: String, + required: false, + default: 'right', + }, + }, + i18n: { + collapseSidebar: __('Collapse sidebar'), + expandSidebar: __('Expand sidebar'), + navigationSidebar: __('Navigation sidebar'), + }, + data() { + return sidebarState; + }, + computed: { + tooltipTitle() { + if (this.isPeek) return ''; + + return this.isCollapsed + ? this.$options.i18n.expandSidebar + : this.$options.i18n.collapseSidebar; + }, + tooltip() { + return { + placement: this.tooltipPlacement, + container: this.tooltipContainer, + title: this.tooltipTitle, + }; + }, + ariaExpanded() { + return String(!this.isCollapsed); + }, + }, + methods: { + toggle() { + toggleSuperSidebarCollapsed(!this.isCollapsed, true); + this.focusOtherToggle(); + }, + focusOtherToggle() { + this.$nextTick(() => { + const classSelector = this.isCollapsed ? JS_TOGGLE_EXPAND_CLASS : JS_TOGGLE_COLLAPSE_CLASS; + const otherToggle = document.querySelector(`.${classSelector}`); + otherToggle?.focus(); + }); + }, + }, +}; +</script> + +<template> + <gl-button + v-gl-tooltip.hover="tooltip" + aria-controls="super-sidebar" + :aria-expanded="ariaExpanded" + :aria-label="$options.i18n.navigationSidebar" + icon="sidebar" + category="tertiary" + :disabled="isPeek" + @click="toggle" + /> +</template> diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue index e96b896825a..f311c5242f5 100644 --- a/app/assets/javascripts/super_sidebar/components/user_bar.vue +++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue @@ -4,11 +4,12 @@ import { __, s__, sprintf } from '~/locale'; import SafeHtml from '~/vue_shared/directives/safe_html'; import { highCountTrim } from '~/lib/utils/text_utility'; import logo from '../../../../views/shared/_logo.svg'; -import { toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager'; +import { JS_TOGGLE_COLLAPSE_CLASS } from '../constants'; import CreateMenu from './create_menu.vue'; import Counter from './counter.vue'; import MergeRequestMenu from './merge_request_menu.vue'; import UserMenu from './user_menu.vue'; +import SuperSidebarToggle from './super_sidebar_toggle.vue'; import { SEARCH_MODAL_ID } from './global_search/constants'; export default { @@ -16,6 +17,7 @@ export default { /* eslint-disable-next-line @gitlab/require-i18n-strings */ NEXT_LABEL: 'Next', logo, + JS_TOGGLE_COLLAPSE_CLASS, SEARCH_MODAL_ID, components: { Counter, @@ -28,14 +30,13 @@ export default { import( /* webpackChunkName: 'global_search_modal' */ './global_search/components/global_search.vue' ), + SuperSidebarToggle, }, i18n: { - collapseSidebar: __('Collapse sidebar'), createNew: __('Create new...'), homepage: __('Homepage'), issues: __('Issues'), mergeRequests: __('Merge requests'), - navigationSidebar: __('Navigation sidebar'), search: __('Search'), searchKbdHelp: sprintf( s__('GlobalSearch|Search GitLab %{kbdOpen}/%{kbdClose}'), @@ -52,6 +53,11 @@ export default { }, inject: ['rootPath', 'isImpersonating'], props: { + hasCollapseButton: { + default: true, + type: Boolean, + required: false, + }, sidebarData: { type: Object, required: true, @@ -75,9 +81,6 @@ export default { document.removeEventListener('todo:toggle', this.updateTodos); }, methods: { - collapseSidebar() { - toggleSuperSidebarCollapsed(true, true, true); - }, updateTodos(e) { this.todoCount = e.detail.count || 0; }, @@ -114,14 +117,12 @@ export default { {{ $options.NEXT_LABEL }} </gl-badge> <div class="gl-flex-grow-1"></div> - <gl-button - v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.collapseSidebar" - aria-controls="super-sidebar" - aria-expanded="true" - :aria-label="$options.i18n.navigationSidebar" - icon="sidebar" - category="tertiary" - @click="collapseSidebar" + <super-sidebar-toggle + v-if="hasCollapseButton" + :class="$options.JS_TOGGLE_COLLAPSE_CLASS" + tooltip-placement="bottom" + tooltip-container="super-sidebar" + data-testid="super-sidebar-collapse-button" /> <create-menu :groups="sidebarData.create_new_menu_groups" /> diff --git a/app/assets/javascripts/super_sidebar/constants.js b/app/assets/javascripts/super_sidebar/constants.js index 5c4a6a9dfc1..4f5b027c138 100644 --- a/app/assets/javascripts/super_sidebar/constants.js +++ b/app/assets/javascripts/super_sidebar/constants.js @@ -5,16 +5,27 @@ import Vue from 'vue'; export const SIDEBAR_PORTAL_ID = 'sidebar-portal-mount'; +export const JS_TOGGLE_COLLAPSE_CLASS = 'js-super-sidebar-toggle-collapse'; +export const JS_TOGGLE_EXPAND_CLASS = 'js-super-sidebar-toggle-expand'; export const portalState = Vue.observable({ ready: false, }); -export const SIDEBAR_VISIBILITY_CLASS = 'gl-visibility-hidden'; +export const sidebarState = Vue.observable({ + contextSwitcherOpen: false, + isCollapsed: false, + isPeek: false, + openPeekTimer: null, + closePeekTimer: null, +}); export const MAX_FREQUENT_PROJECTS_COUNT = 5; export const MAX_FREQUENT_GROUPS_COUNT = 3; +export const SUPER_SIDEBAR_PEEK_OPEN_DELAY = 200; +export const SUPER_SIDEBAR_PEEK_CLOSE_DELAY = 500; + export const TRACKING_UNKNOWN_ID = 'item_without_id'; export const TRACKING_UNKNOWN_PANEL = 'nav_panel_unknown'; export const CLICK_MENU_ITEM_ACTION = 'click_menu_item'; diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js index 58b49f218ad..fdd29a1719c 100644 --- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js +++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js @@ -3,12 +3,14 @@ import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils'; import { initStatusTriggers } from '../header'; +import { JS_TOGGLE_EXPAND_CLASS } from './constants'; import createStore from './components/global_search/store'; import { bindSuperSidebarCollapsedEvents, initSuperSidebarCollapsedState, } from './super_sidebar_collapsed_state_manager'; import SuperSidebar from './components/super_sidebar.vue'; +import SuperSidebarToggle from './components/super_sidebar_toggle.vue'; Vue.use(VueApollo); @@ -58,4 +60,28 @@ export const initSuperSidebar = () => { }); }; +/** + * Guard against multiple instantiations, since the js-* class is persisted + * in the Vue component. + */ +let toggleInstantiated = false; + +export const initSuperSidebarToggle = () => { + const el = document.querySelector(`.${JS_TOGGLE_EXPAND_CLASS}`); + + if (!el || toggleInstantiated) return false; + + toggleInstantiated = true; + + return new Vue({ + el, + name: 'SuperSidebarToggleRoot', + render(h) { + // Copy classes from HAML-defined button to ensure same positioning, + // including JS_TOGGLE_EXPAND_CLASS. + return h(SuperSidebarToggle, { class: el.className }); + }, + }); +}; + requestIdleCallback(initStatusTriggers); diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_collapsed_state_manager.js b/app/assets/javascripts/super_sidebar/super_sidebar_collapsed_state_manager.js index ba5495ba014..17e07146678 100644 --- a/app/assets/javascripts/super_sidebar/super_sidebar_collapsed_state_manager.js +++ b/app/assets/javascripts/super_sidebar/super_sidebar_collapsed_state_manager.js @@ -1,7 +1,7 @@ import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils'; import { debounce } from 'lodash'; import { setCookie, getCookie } from '~/lib/utils/common_utils'; -import { SIDEBAR_VISIBILITY_CLASS } from './constants'; +import { sidebarState } from './constants'; export const SIDEBAR_COLLAPSED_CLASS = 'page-with-super-sidebar-collapsed'; export const SIDEBAR_COLLAPSED_COOKIE = 'super_sidebar_collapsed'; @@ -10,7 +10,6 @@ export const SIDEBAR_TRANSITION_DURATION = 200; export const findPage = () => document.querySelector('.page-with-super-sidebar'); export const findSidebar = () => document.querySelector('.super-sidebar'); -export const findToggle = () => document.querySelector('.js-super-sidebar-toggle'); export const isCollapsed = () => findPage().classList.contains(SIDEBAR_COLLAPSED_CLASS); @@ -21,35 +20,14 @@ export const isDesktopBreakpoint = () => bp.windowWidth() >= breakpoints.xl; export const getCollapsedCookie = () => getCookie(SIDEBAR_COLLAPSED_COOKIE) === 'true'; -const show = (sidebar, isUserAction) => { - sidebar.classList.remove(SIDEBAR_VISIBILITY_CLASS); - if (isUserAction) { - sidebar.focus(); - } -}; - -const hide = (sidebar, toggle, isUserAction) => { - setTimeout(() => { - sidebar.classList.add(SIDEBAR_VISIBILITY_CLASS); - if (isUserAction) { - toggle?.focus(); - } - }, SIDEBAR_TRANSITION_DURATION); -}; +export const toggleSuperSidebarCollapsed = (collapsed, saveCookie) => { + clearTimeout(sidebarState.openPeekTimer); + clearTimeout(sidebarState.closePeekTimer); -export const toggleSuperSidebarCollapsed = (collapsed, saveCookie, isUserAction) => { - const page = findPage(); - const toggle = findToggle(); - const sidebar = findSidebar(); + findPage().classList.toggle(SIDEBAR_COLLAPSED_CLASS, collapsed); - page.classList.toggle(SIDEBAR_COLLAPSED_CLASS, collapsed); - sidebar.inert = collapsed; - - if (collapsed) { - hide(sidebar, toggle, isUserAction); - } else { - show(sidebar, isUserAction); - } + sidebarState.isPeek = false; + sidebarState.isCollapsed = collapsed; if (saveCookie && isDesktopBreakpoint()) { setCookie(SIDEBAR_COLLAPSED_COOKIE, collapsed, { @@ -64,9 +42,5 @@ export const initSuperSidebarCollapsedState = () => { }; export const bindSuperSidebarCollapsedEvents = () => { - findToggle()?.addEventListener('click', () => { - toggleSuperSidebarCollapsed(!isCollapsed(), true, true); - }); - window.addEventListener('resize', debounce(initSuperSidebarCollapsedState, 100)); }; diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue index 49eb11f8081..6d1cadf15be 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue @@ -176,6 +176,12 @@ export default { <template> <div> <div class="flash-container js-suggestions-flash"></div> - <div v-show="isRendered" ref="container" v-safe-html="noteHtml" class="md suggestions"></div> + <div + v-show="isRendered" + ref="container" + v-safe-html="noteHtml" + data-testid="suggestions-container" + class="md suggestions" + ></div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/security_reports/constants.js b/app/assets/javascripts/vue_shared/security_reports/constants.js index 597268a40d3..8b523645973 100644 --- a/app/assets/javascripts/vue_shared/security_reports/constants.js +++ b/app/assets/javascripts/vue_shared/security_reports/constants.js @@ -29,6 +29,7 @@ export const REPORT_TYPE_COVERAGE_FUZZING = 'coverage_fuzzing'; export const REPORT_TYPE_CORPUS_MANAGEMENT = 'corpus_management'; export const REPORT_TYPE_LICENSE_COMPLIANCE = 'license_scanning'; export const REPORT_TYPE_API_FUZZING = 'api_fuzzing'; +export const REPORT_TYPE_MANUALLY_ADDED = 'generic'; /** * SecurityReportTypeEnum values for use with GraphQL. diff --git a/app/assets/stylesheets/components/detail_page.scss b/app/assets/stylesheets/components/detail_page.scss index de8142924f9..74f61faa9ae 100644 --- a/app/assets/stylesheets/components/detail_page.scss +++ b/app/assets/stylesheets/components/detail_page.scss @@ -74,3 +74,7 @@ color: $gl-text-color; } } + +.new-header-popover { + z-index: 999; +} diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 045ad4a8298..14eec335169 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -36,10 +36,6 @@ width: $super-sidebar-width; z-index: $super-sidebar-z-index; - &:focus-visible { - @include gl-focus; - } - &.super-sidebar-loading { transform: translate3d(-100%, 0, 0); @@ -49,7 +45,9 @@ } &:not(.super-sidebar-loading) { - transition: transform $gl-transition-duration-medium; + @media (prefers-reduced-motion: no-preference) { + transition: transform $gl-transition-duration-medium; + } } .user-bar { @@ -178,9 +176,25 @@ display: none; } +.super-sidebar-peek { + @include gl-shadow; + border-right: 0; + + @media (prefers-reduced-motion: no-preference) { + transition: transform 100ms !important; + } +} + +.super-sidebar-hover-area { + z-index: $super-sidebar-z-index; +} + .page-with-super-sidebar { padding-left: 0; - transition: padding-left $gl-transition-duration-medium; + + @media (prefers-reduced-motion: no-preference) { + transition: padding-left $gl-transition-duration-medium; + } &:not(.page-with-super-sidebar-collapsed) { .super-sidebar-overlay { @@ -211,6 +225,10 @@ .page-with-super-sidebar-collapsed { .super-sidebar { transform: translate3d(-100%, 0, 0); + + &.super-sidebar-peek { + transform: translate3d(0, 0, 0); + } } @include media-breakpoint-up(xl) { diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss index e0fb95a1359..1b98fd4df07 100644 --- a/app/assets/stylesheets/page_bundles/issuable.scss +++ b/app/assets/stylesheets/page_bundles/issuable.scss @@ -165,3 +165,13 @@ border: 0; } } + +.merge-request-notification-toggle { + .gl-toggle { + @include gl-ml-auto; + } + + .gl-toggle-label { + @include gl-font-weight-normal; + } +} diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 34171aabd3f..ef75c650853 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1486,9 +1486,13 @@ kbd { transform: translate3d(0, 0, 0); } } +@media (prefers-reduced-motion: no-preference) { +} .page-with-super-sidebar { padding-left: 0; } +@media (prefers-reduced-motion: no-preference) { +} @media (min-width: 1200px) { .page-with-super-sidebar { padding-left: 256px; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index eb98f324c7e..0dfc6be356f 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1486,9 +1486,13 @@ kbd { transform: translate3d(0, 0, 0); } } +@media (prefers-reduced-motion: no-preference) { +} .page-with-super-sidebar { padding-left: 0; } +@media (prefers-reduced-motion: no-preference) { +} @media (min-width: 1200px) { .page-with-super-sidebar { padding-left: 256px; diff --git a/app/controllers/projects/incidents_controller.rb b/app/controllers/projects/incidents_controller.rb index 3842a88d15b..7121096bd77 100644 --- a/app/controllers/projects/incidents_controller.rb +++ b/app/controllers/projects/incidents_controller.rb @@ -10,6 +10,7 @@ class Projects::IncidentsController < Projects::ApplicationController push_force_frontend_feature_flag(:work_items, @project&.work_items_feature_flag_enabled?) push_force_frontend_feature_flag(:work_items_mvc, @project&.work_items_mvc_feature_flag_enabled?) push_force_frontend_feature_flag(:work_items_mvc_2, @project&.work_items_mvc_2_feature_flag_enabled?) + push_frontend_feature_flag(:moved_mr_sidebar, project) end feature_category :incident_management diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb index efe88d17cab..d50f681beec 100644 --- a/app/controllers/projects/issues_controller.rb +++ b/app/controllers/projects/issues_controller.rb @@ -67,6 +67,7 @@ class Projects::IssuesController < Projects::ApplicationController push_force_frontend_feature_flag(:work_items_mvc, project&.work_items_mvc_feature_flag_enabled?) push_force_frontend_feature_flag(:work_items_mvc_2, project&.work_items_mvc_2_feature_flag_enabled?) push_frontend_feature_flag(:epic_widget_edit_confirmation, project) + push_frontend_feature_flag(:moved_mr_sidebar, project) end around_action :allow_gitaly_ref_name_caching, only: [:discussions] diff --git a/app/graphql/resolvers/projects/branches_tipping_at_commit_resolver.rb b/app/graphql/resolvers/projects/branches_tipping_at_commit_resolver.rb new file mode 100644 index 00000000000..7e2661f3f77 --- /dev/null +++ b/app/graphql/resolvers/projects/branches_tipping_at_commit_resolver.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module Resolvers + module Projects + class BranchesTippingAtCommitResolver < RefTippingAtCommitResolver + MAX_LIMIT = 100 + + calls_gitaly! + + type ::Types::Projects::CommitParentNamesType, null: true + + # the methode ref_prefix is implemented + # because this class is prepending Resolver::CommitParentNamesResolver module + # through it's parent ::Resolvers::RefTippingAtCommitResolver + def ref_prefix + Gitlab::Git::BRANCH_REF_PREFIX + end + end + end +end diff --git a/app/graphql/resolvers/projects/commit_parent_names_resolver.rb b/app/graphql/resolvers/projects/commit_parent_names_resolver.rb new file mode 100644 index 00000000000..f52776d715a --- /dev/null +++ b/app/graphql/resolvers/projects/commit_parent_names_resolver.rb @@ -0,0 +1,33 @@ +# frozen_string_literal: true + +module Resolvers + module Projects + module CommitParentNamesResolver + extend ActiveSupport::Concern + + prepended do + argument :commit_sha, GraphQL::Types::String, + required: true, + description: 'Project commit SHA identifier. For example, `287774414568010855642518513f085491644061`.' + + argument :limit, GraphQL::Types::Int, + required: false, + description: 'Number of branch names to return.' + + alias_method :project, :object + end + + def compute_limit(limit) + max = self.class::MAX_LIMIT + + limit ? [limit, max].min : max + end + + def get_tipping_refs(project, sha, limit: 0) + # the methode ref_prefix needs to be implemented in all classes prepending this module + refs = project.repository.refs_by_oid(oid: sha, ref_patterns: [ref_prefix], limit: limit) + refs.map { |n| n.delete_prefix(ref_prefix) } + end + end + end +end diff --git a/app/graphql/resolvers/projects/ref_tipping_at_commit_resolver.rb b/app/graphql/resolvers/projects/ref_tipping_at_commit_resolver.rb new file mode 100644 index 00000000000..3259a29ac9c --- /dev/null +++ b/app/graphql/resolvers/projects/ref_tipping_at_commit_resolver.rb @@ -0,0 +1,25 @@ +# frozen_string_literal: true + +module Resolvers + module Projects + class RefTippingAtCommitResolver < BaseResolver + include Gitlab::Graphql::Authorize::AuthorizeResource + prepend CommitParentNamesResolver + + type ::Types::Projects::CommitParentNamesType, null: true + + authorize :read_code + + def resolve(commit_sha:, limit: nil) + final_limit = compute_limit(limit) + + names = get_tipping_refs(project, commit_sha, limit: final_limit) + + { + names: names, + total_count: nil + } + end + end + end +end diff --git a/app/graphql/resolvers/projects/tags_tipping_at_commit_resolver.rb b/app/graphql/resolvers/projects/tags_tipping_at_commit_resolver.rb new file mode 100644 index 00000000000..78ee9c997d5 --- /dev/null +++ b/app/graphql/resolvers/projects/tags_tipping_at_commit_resolver.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module Resolvers + module Projects + class TagsTippingAtCommitResolver < RefTippingAtCommitResolver + MAX_LIMIT = 100 + + calls_gitaly! + + type ::Types::Projects::CommitParentNamesType, null: true + + # the methode ref_prefix is implemented + # because this class is prepending Resolver::CommitParentNamesResolver module + # through it's parent ::Resolvers::RefTippingAtCommitResolver + def ref_prefix + Gitlab::Git::TAG_REF_PREFIX + end + end + end +end diff --git a/app/graphql/types/project_type.rb b/app/graphql/types/project_type.rb index 203c2568ce2..5ebc1cf7ddd 100644 --- a/app/graphql/types/project_type.rb +++ b/app/graphql/types/project_type.rb @@ -594,6 +594,16 @@ module Types authorize: :read_cycle_analytics, alpha: { milestone: '15.10' } + field :tags_tipping_at_commit, ::Types::Projects::CommitParentNamesType, + null: true, + resolver: Resolvers::Projects::TagsTippingAtCommitResolver, + description: "Get tag names tipping at a given commit." + + field :branches_tipping_at_commit, ::Types::Projects::CommitParentNamesType, + null: true, + resolver: Resolvers::Projects::BranchesTippingAtCommitResolver, + description: "Get branch names tipping at a given commit." + def timelog_categories object.project_namespace.timelog_categories if Feature.enabled?(:timelog_categories) end diff --git a/app/graphql/types/projects/commit_parent_names_type.rb b/app/graphql/types/projects/commit_parent_names_type.rb new file mode 100644 index 00000000000..0aa1ca768e9 --- /dev/null +++ b/app/graphql/types/projects/commit_parent_names_type.rb @@ -0,0 +1,14 @@ +# frozen_string_literal: true + +module Types + module Projects + # rubocop: disable Graphql/AuthorizeTypes + class CommitParentNamesType < BaseObject + graphql_name 'CommitParentNames' + + field :names, [GraphQL::Types::String], null: true, description: 'Names of the commit parent (branch or tag).' + field :total_count, GraphQL::Types::Int, null: true, description: 'Total of parent branches or tags.' + end + # rubocop: enable Graphql/AuthorizeTypes + end +end diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index 179ce01ae44..fc2c927a2b1 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -12,8 +12,8 @@ module IssuablesHelper end end - def sidebar_gutter_collapsed_class - return "right-sidebar-expanded" if moved_mr_sidebar_enabled? + def sidebar_gutter_collapsed_class(is_merge_request_with_flag) + return "right-sidebar-expanded" if is_merge_request_with_flag "right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}" end diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb index e82f09a0a97..98c378db7d3 100644 --- a/app/helpers/issues_helper.rb +++ b/app/helpers/issues_helper.rb @@ -153,7 +153,7 @@ module IssuesHelper issue.moved_from.project.service_desk_enabled? && !issue.project.service_desk_enabled? end - def issue_header_actions_data(project, issuable, current_user) + def issue_header_actions_data(project, issuable, current_user, issuable_sidebar) new_issuable_params = { issue: {}, add_related_issue: issuable.iid } if issuable.incident? new_issuable_params[:issuable_template] = 'incident' @@ -176,7 +176,8 @@ module IssuesHelper report_abuse_path: add_category_abuse_reports_path, reported_user_id: issuable.author.id, reported_from_url: issue_url(issuable), - submit_as_spam_path: mark_as_spam_project_issue_path(project, issuable) + submit_as_spam_path: mark_as_spam_project_issue_path(project, issuable), + issuable_email_address: issuable_sidebar.nil? ? '' : issuable_sidebar[:create_note_email] } end diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb index 9ed52df69f1..a897484853d 100644 --- a/app/helpers/merge_requests_helper.rb +++ b/app/helpers/merge_requests_helper.rb @@ -179,6 +179,10 @@ module MergeRequestsHelper end end + def moved_mr_sidebar_enabled? + Feature.enabled?(:moved_mr_sidebar, @project) + end + def diffs_tab_pane_data(project, merge_request, params) { "is-locked": merge_request.discussion_locked?, @@ -272,10 +276,6 @@ module MergeRequestsHelper _('%{author} requested to merge %{source_branch} %{copy_button} into %{target_branch} %{created_at}').html_safe % { author: link_to_author.html_safe, source_branch: merge_request_source_branch(merge_request).html_safe, copy_button: copy_button.html_safe, target_branch: target_branch.html_safe, created_at: time_ago_with_tooltip(merge_request.created_at, html_class: 'gl-display-inline-block').html_safe } end - def moved_mr_sidebar_enabled? - Feature.enabled?(:moved_mr_sidebar, @project) && defined?(@merge_request) - end - def single_file_file_by_file? Feature.enabled?(:single_file_file_by_file, @project) end diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb index b101f184ca6..1da84bf2660 100644 --- a/app/helpers/nav_helper.rb +++ b/app/helpers/nav_helper.rb @@ -38,7 +38,7 @@ module NavHelper end def page_gutter_class - moved_sidebar_enabled = current_controller?('merge_requests') && moved_mr_sidebar_enabled? + moved_sidebar_enabled = @is_merge_request_with_flag if (page_has_markdown? || current_path?('projects/merge_requests#diffs')) && !current_controller?('conflicts') if cookies[:collapsed_gutter] == 'true' diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb index c11cd0191df..52abacfe3e8 100644 --- a/app/models/application_setting.rb +++ b/app/models/application_setting.rb @@ -709,6 +709,7 @@ class ApplicationSetting < MainClusterwide::ApplicationRecord attr_encrypted :telesign_customer_xid, encryption_options_base_32_aes_256_gcm.merge(encode: false, encode_iv: false) attr_encrypted :telesign_api_key, encryption_options_base_32_aes_256_gcm.merge(encode: false, encode_iv: false) attr_encrypted :product_analytics_clickhouse_connection_string, encryption_options_base_32_aes_256_gcm.merge(encode: false, encode_iv: false) + attr_encrypted :product_analytics_configurator_connection_string, encryption_options_base_32_aes_256_gcm.merge(encode: false, encode_iv: false) attr_encrypted :openai_api_key, encryption_options_base_32_aes_256_gcm.merge(encode: false, encode_iv: false) validates :disable_feed_token, diff --git a/app/views/layouts/nav/_top_bar.html.haml b/app/views/layouts/nav/_top_bar.html.haml index 8968f60b106..a0e03c9c0cf 100644 --- a/app/views/layouts/nav/_top_bar.html.haml +++ b/app/views/layouts/nav/_top_bar.html.haml @@ -8,7 +8,7 @@ %div{ class: top_bar_class } .top-bar-container.gl-display-flex.gl-align-items-center{ :class => top_bar_container_class } - if show_super_sidebar? - = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'js-super-sidebar-toggle super-sidebar-toggle gl-ml-n3 gl-mr-2', title: _('Expand sidebar'), aria: { controls: 'super-sidebar', expanded: 'false', label: _('Navigation sidebar') }, data: {toggle: 'tooltip', placement: 'right' } }) + = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'js-super-sidebar-toggle-expand super-sidebar-toggle gl-ml-n3 gl-mr-2', title: _('Expand sidebar'), aria: { controls: 'super-sidebar', expanded: 'false', label: _('Navigation sidebar') } }) - elsif defined?(@left_sidebar) = render Pajamas::ButtonComponent.new(icon: 'sidebar', category: :tertiary, button_options: { class: 'toggle-mobile-nav gl-ml-n3 gl-mr-2', data: { qa_selector: 'toggle_mobile_nav_button' }, aria: { label: _('Open sidebar') } }) = render "layouts/nav/breadcrumbs/breadcrumbs" diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml index f9798d25b06..90d99d51d29 100644 --- a/app/views/projects/issues/_new_branch.html.haml +++ b/app/views/projects/issues/_new_branch.html.haml @@ -11,18 +11,18 @@ .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path(from: @issue.to_branch_name, source_project: @project, to: @project.default_branch, mr_params: { issue_iid: @issue.iid }), create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } } .btn-group.unavailable - %button.gl-button.btn{ type: 'button', disabled: 'disabled' } + = render Pajamas::ButtonComponent.new(button_options: { disabled: 'disabled' }) do = gl_loading_icon(inline: true, css_class: 'js-create-mr-spinner gl-button-icon gl-display-none') %span.text - Checking branch availability… + = _('Checking branch availability…') + .btn-group.available.hidden - %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } } - = gl_loading_icon(css_class: 'js-create-mr-spinner js-spinner gl-mr-2 gl-display-none') + = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { class: 'js-create-merge-request', data: { action: data_action } }) do + = gl_loading_icon(inline: true , css_class: 'js-create-mr-spinner js-spinner gl-display-none') = value - %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } } - = sprite_icon('chevron-down') + = render Pajamas::ButtonComponent.new(variant: :confirm, icon: 'chevron-down', button_options: { class: 'js-dropdown-toggle dropdown-toggle create-merge-request-dropdown-toggle', data: { 'dropdown-trigger': '#create-merge-request-dropdown', display: 'static' } }) .droplab-dropdown %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-right.gl-show-field-errors{ class: ("create-confidential-merge-request-dropdown-menu" if can_create_confidential_merge_request?), data: { dropdown: true } } @@ -57,7 +57,7 @@ %span.js-ref-message.form-text .form-group - %button.btn.gl-button.btn-confirm.js-create-target{ type: 'button', data: { action: 'create-mr' } } + = render Pajamas::ButtonComponent.new(variant: :confirm, button_options: { class: 'js-create-target', data: { action: 'create-mr' } }) do = create_mr_text - if can_create_confidential_merge_request? diff --git a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml index b8ee62055f0..9bfa0e7a309 100644 --- a/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml +++ b/app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml @@ -1,7 +1,8 @@ - display_issuable_type = issuable_display_type(@merge_request) .btn-group.gl-md-ml-3.gl-display-flex.dropdown.gl-dropdown.gl-md-w-auto.gl-w-full - = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret gl-display-none! gl-md-display-inline-flex!", title: _('Merge request actions'), 'aria-label': _('Merge request actions'), data: { toggle: 'dropdown', testid: 'merge-request-actions' } do + %span.js-sidebar-header-popover + = button_tag type: 'button', id: "new-actions-header-dropdown", class: "btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only dropdown-toggle-no-caret gl-display-none! gl-md-display-inline-flex!", title: _('Merge request actions'), 'aria-label': _('Merge request actions'), data: { toggle: 'dropdown', testid: 'merge-request-actions' } do = sprite_icon "ellipsis_v", size: 16, css_class: "dropdown-icon gl-icon" = button_tag type: 'button', class: "btn dropdown-toggle btn-default btn-md btn-block gl-button gl-dropdown-toggle gl-md-display-none!", data: { 'toggle' => 'dropdown' } do %span.gl-dropdown-button-text= _('Merge request actions') diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml index 547f12ac8fc..7f2511d3e28 100644 --- a/app/views/shared/_label.html.haml +++ b/app/views/shared/_label.html.haml @@ -44,10 +44,10 @@ = render Pajamas::ButtonComponent.new(button_options: { class: "js-unsubscribe-button #{'hidden' if status.unsubscribed?}", data: { url: toggle_subscription_path, toggle: 'tooltip', container: 'body' }, title: tooltip_title }) do = _('Unsubscribe') .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) } - = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-w-full', data: { toggle: 'dropdown' } }) do + = render Pajamas::ButtonComponent.new(button_options: { data: { toggle: 'dropdown' } }) do = _('Subscribe') = sprite_icon('chevron-down') - .dropdown-menu.dropdown-open-left + .dropdown-menu.dropdown-menu-right %ul %li = render Pajamas::ButtonComponent.new(category: :tertiary, button_options: { class: "js-subscribe-button #{'hidden' unless status.unsubscribed?}", data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }) do diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index f54354674e2..82e95a6a8e8 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -9,14 +9,15 @@ - reviewers = local_assigns.fetch(:reviewers, nil) - in_group_context_with_iterations = @project.group.present? && issuable_sidebar[:supports_iterations] - is_merge_request = issuable_type === 'merge_request' -- moved_sidebar_enabled = moved_mr_sidebar_enabled? && is_merge_request +- moved_sidebar_enabled = moved_mr_sidebar_enabled? +- is_merge_request_with_flag = is_merge_request && moved_sidebar_enabled -%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class} #{'right-sidebar-merge-requests' if moved_sidebar_enabled}", 'aria-live' => 'polite', 'aria-label': issuable_type } - .issuable-sidebar{ class: "#{'is-merge-request' if moved_sidebar_enabled}" } - .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if moved_sidebar_enabled}" } +%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in }, issuable_type: issuable_type }, class: "#{sidebar_gutter_collapsed_class(is_merge_request_with_flag)} #{'right-sidebar-merge-requests' if is_merge_request_with_flag}", 'aria-live' => 'polite', 'aria-label': issuable_type } + .issuable-sidebar{ class: "#{'is-merge-request' if is_merge_request_with_flag}" } + .issuable-sidebar-header{ class: "#{'gl-pb-2! gl-md-display-flex gl-justify-content-end gl-lg-display-none!' if is_merge_request_with_flag}" } %button.btn.gl-button.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ type: "reset", class: "gl-shadow-none! #{'gl-display-block' if moved_sidebar_enabled}", "aria-label" => _('Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } } = sidebar_gutter_toggle_icon - - if signed_in && !moved_sidebar_enabled + - if signed_in && !is_merge_request_with_flag .js-sidebar-todo-widget-root{ data: { project_path: issuable_sidebar[:project_full_path], iid: issuable_sidebar[:iid], id: issuable_sidebar[:id] } } = form_for issuable_type, url: issuable_sidebar[:issuable_json_path], remote: true, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f| @@ -81,17 +82,17 @@ .js-sidebar-participants-widget-root - .block.with-sub-blocks - - if !moved_sidebar_enabled + - if !moved_sidebar_enabled + .block.with-sub-blocks .js-sidebar-reference-widget-root - - if issuable_type == 'merge_request' && !moved_sidebar_enabled - .sub-block.js-sidebar-source-branch - .sidebar-collapsed-icon.js-dont-change-state - = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy') - .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed - %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap - = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<span class='gl-font-monospace' data-testid='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</span>".html_safe, source_branch: html_escape(source_branch) } - = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy') + - if is_merge_request && !moved_sidebar_enabled + .sub-block.js-sidebar-source-branch + .sidebar-collapsed-icon.js-dont-change-state + = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy') + .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed + %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap + = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<span class='gl-font-monospace' data-testid='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</span>".html_safe, source_branch: html_escape(source_branch) } + = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport', class: 'btn-clipboard gl-button btn-default-tertiary btn-icon btn-sm js-source-branch-copy') - if show_forwarding_email .block diff --git a/app/views/shared/issue_type/_details_header.html.haml b/app/views/shared/issue_type/_details_header.html.haml index 9f7ed6b17c3..b6c0b73a83d 100644 --- a/app/views/shared/issue_type/_details_header.html.haml +++ b/app/views/shared/issue_type/_details_header.html.haml @@ -19,4 +19,4 @@ %a.btn.gl-button.btn-default.btn-icon.float-right.gl-display-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } = sprite_icon('chevron-double-lg-left') - .js-issue-header-actions{ data: issue_header_actions_data(@project, issuable, current_user) } + .js-issue-header-actions{ data: issue_header_actions_data(@project, issuable, current_user, @issuable_sidebar) } diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml index cc1965945ac..5477b9395ea 100644 --- a/app/views/shared/milestones/_sidebar.html.haml +++ b/app/views/shared/milestones/_sidebar.html.haml @@ -1,7 +1,7 @@ - affix_offset = local_assigns.fetch(:affix_offset, "50") - project = local_assigns[:project] -%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite', 'aria-label': _('Milestone') } +%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class(false), 'aria-live' => 'polite', 'aria-label': _('Milestone') } .issuable-sidebar.milestone-sidebar .block.milestone-progress.issuable-sidebar-header %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => s_('MilestoneSidebar|Toggle sidebar'), title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } } |