diff options
Diffstat (limited to 'app/assets/javascripts/sidebar')
20 files changed, 117 insertions, 101 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees.vue b/app/assets/javascripts/sidebar/components/assignees/assignees.vue index 3baf4bf0742..84e7110e2b2 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees.vue @@ -34,8 +34,8 @@ export default { return !this.users.length; }, sortedAssigness() { - const canMergeUsers = this.users.filter(user => user.can_merge); - const canNotMergeUsers = this.users.filter(user => !user.can_merge); + const canMergeUsers = this.users.filter((user) => user.can_merge); + const canNotMergeUsers = this.users.filter((user) => !user.can_merge); return [...canMergeUsers, ...canNotMergeUsers]; }, diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue index bf0c52b2341..0eee287e0c2 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue @@ -59,7 +59,7 @@ export default { handleFetchResult({ data }) { const { nodes } = data.project.issue.assignees; - const assignees = nodes.map(n => ({ + const assignees = nodes.map((n) => ({ ...n, avatar_url: n.avatarUrl, id: getIdFromGraphQLId(n.id), diff --git a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue index 362ca4ab917..b713b0f960c 100644 --- a/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/collapsed_assignee_list.vue @@ -39,7 +39,7 @@ export default { return this.users.length > 2; }, allAssigneesCanMerge() { - return this.users.every(user => user.can_merge); + return this.users.every((user) => user.can_merge); }, sidebarAvatarCounter() { if (this.users.length > DEFAULT_MAX_COUNTER) { @@ -58,7 +58,7 @@ export default { return ''; } - const mergeLength = this.users.filter(u => u.can_merge).length; + const mergeLength = this.users.filter((u) => u.can_merge).length; if (mergeLength === this.users.length) { return ''; @@ -74,7 +74,7 @@ export default { tooltipTitle() { const maxRender = Math.min(DEFAULT_RENDER_COUNT, this.users.length); const renderUsers = this.users.slice(0, maxRender); - const names = renderUsers.map(u => u.name); + const names = renderUsers.map((u) => u.name); if (!this.users.length) { return __('Assignee(s)'); diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue index 46d51138ccf..d210f9efcb3 100644 --- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue +++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue @@ -48,7 +48,7 @@ export default { .then(() => { eventHub.$emit('updateIssuableConfidentiality', confidential); }) - .catch(err => { + .catch((err) => { Flash( err || __('Something went wrong trying to change the confidentiality of this issue'), ); diff --git a/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue new file mode 100644 index 00000000000..8c8241cf6a4 --- /dev/null +++ b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue @@ -0,0 +1,43 @@ +<script> +import { s__, __, sprintf } from '~/locale'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; + +export default { + i18n: { + copyEmail: __('Copy email address'), + }, + components: { + ClipboardButton, + }, + props: { + copyText: { + type: String, + required: true, + }, + }, + computed: { + emailText() { + return sprintf(s__('RightSidebar|Issue email: %{copyText}'), { copyText: this.copyText }); + }, + }, +}; +</script> + +<template> + <div + data-qa-selector="copy-forward-email" + class="copy-email-address gl-display-flex gl-align-items-center gl-justify-content-space-between" + > + <span + class="gl-overflow-hidden gl-text-overflow-ellipsis gl-white-space-nowrap hide-collapsed gl-w-85p" + >{{ emailText }}</span + > + <clipboard-button + class="copy-email-button gl-bg-none!" + category="tertiary" + :title="$options.i18n.copyEmail" + :text="copyText" + tooltip-placement="left" + /> + </div> +</template> diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue index 07abfa8d103..e01e1f032e3 100644 --- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue +++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue @@ -50,9 +50,13 @@ export default { $(this.$el).trigger('hidden.gl.dropdown'); }, getUpdateVariables(dropdownLabels) { - const currentLabelIds = this.selectedLabels.map(label => label.id); - const userAddedLabelIds = dropdownLabels.filter(label => label.set).map(label => label.id); - const userRemovedLabelIds = dropdownLabels.filter(label => !label.set).map(label => label.id); + const currentLabelIds = this.selectedLabels.map((label) => label.id); + const userAddedLabelIds = dropdownLabels + .filter((label) => label.set) + .map((label) => label.id); + const userRemovedLabelIds = dropdownLabels + .filter((label) => !label.set) + .map((label) => label.id); const labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds); @@ -116,7 +120,7 @@ export default { } const issuableType = camelCase(this.issuableType); - this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map(label => ({ + this.selectedLabels = data[mutationName]?.[issuableType]?.labels?.nodes?.map((label) => ({ ...label, id: getIdFromGraphQLId(label.id), })); diff --git a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue index 10b16a44261..9554a98121f 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/collapsed_reviewer_list.vue @@ -33,7 +33,7 @@ export default { return this.users.length > 2; }, allReviewersCanMerge() { - return this.users.every(user => user.can_merge); + return this.users.every((user) => user.can_merge); }, sidebarAvatarCounter() { if (this.users.length > DEFAULT_MAX_COUNTER) { @@ -48,7 +48,7 @@ export default { return this.users.slice(0, collapsedLength); }, tooltipTitleMergeStatus() { - const mergeLength = this.users.filter(u => u.can_merge).length; + const mergeLength = this.users.filter((u) => u.can_merge).length; if (mergeLength === this.users.length) { return ''; @@ -64,7 +64,7 @@ export default { tooltipTitle() { const maxRender = Math.min(DEFAULT_RENDER_COUNT, this.users.length); const renderUsers = this.users.slice(0, maxRender); - const names = renderUsers.map(u => u.name); + const names = renderUsers.map((u) => u.name); if (!this.users.length) { return __('Reviewer(s)'); diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue index d64b483acb1..a461d992222 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue @@ -1,14 +1,13 @@ <script> // NOTE! For the first iteration, we are simply copying the implementation of Assignees // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736 -import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import { n__ } from '~/locale'; export default { name: 'ReviewerTitle', components: { GlLoadingIcon, - GlIcon, }, props: { loading: { @@ -24,11 +23,6 @@ export default { type: Boolean, required: true, }, - showToggle: { - type: Boolean, - required: false, - default: false, - }, }, computed: { reviewerTitle() { @@ -52,14 +46,5 @@ export default { > {{ __('Edit') }} </a> - <a - v-if="showToggle" - :aria-label="__('Toggle sidebar')" - class="gutter-toggle float-right js-sidebar-toggle" - href="#" - role="button" - > - <gl-icon data-hidden="true" name="chevron-double-lg-right" :size="12" /> - </a> </div> </template> diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue index 6a3d88f6385..cd62fe5be0f 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue @@ -36,8 +36,8 @@ export default { return !this.users.length; }, sortedReviewers() { - const canMergeUsers = this.users.filter(user => user.can_merge); - const canNotMergeUsers = this.users.filter(user => !user.can_merge); + const canMergeUsers = this.users.filter((user) => user.can_merge); + const canNotMergeUsers = this.users.filter((user) => !user.can_merge); return [...canMergeUsers, ...canNotMergeUsers]; }, diff --git a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue index aee94a55134..1a2473e5f6c 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue @@ -2,6 +2,7 @@ // NOTE! For the first iteration, we are simply copying the implementation of Assignees // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736 import { deprecatedCreateFlash as Flash } from '~/flash'; +import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests'; import eventHub from '~/sidebar/event_hub'; import Store from '~/sidebar/stores/sidebar_store'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -25,11 +26,6 @@ export default { type: String, required: true, }, - signedIn: { - type: Boolean, - required: false, - default: false, - }, issuableType: { type: String, required: false, @@ -80,8 +76,7 @@ export default { .saveReviewers(this.field) .then(() => { this.loading = false; - // Uncomment once this issue has been addressed > https://gitlab.com/gitlab-org/gitlab/-/issues/237922 - // refreshUserMergeRequestCounts(); + refreshUserMergeRequestCounts(); }) .catch(() => { this.loading = false; @@ -98,7 +93,6 @@ export default { :number-of-reviewers="store.reviewers.length" :loading="loading || store.isFetching.reviewers" :editable="store.editable" - :show-toggle="!signedIn" /> <reviewers v-if="!store.isFetching.reviewers" diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue index 8f3610b912a..0cf11e83349 100644 --- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue +++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity.vue @@ -41,7 +41,7 @@ export default { type: String, required: false, default: ISSUABLE_TYPES.INCIDENT, - validator: value => { + validator: (value) => { // currently severity is supported only for incidents, but this list might be extended return [ISSUABLE_TYPES.INCIDENT].includes(value); }, @@ -67,7 +67,7 @@ export default { return this.isDropdownShowing ? 'show' : 'gl-display-none'; }, selectedItem() { - return this.severitiesList.find(severity => severity.value === this.severity); + return this.severitiesList.find((severity) => severity.value === this.severity); }, }, mounted() { @@ -106,7 +106,7 @@ export default { projectPath: this.projectPath, }, }) - .then(resp => { + .then((resp) => { const { data: { issueSetSeverity: { diff --git a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue deleted file mode 100644 index 8a80b1bf13f..00000000000 --- a/app/assets/javascripts/sidebar/components/time_tracking/estimate_only_pane.vue +++ /dev/null @@ -1,18 +0,0 @@ -<script> -export default { - name: 'TimeTrackingEstimateOnlyPane', - props: { - timeEstimateHumanReadable: { - type: String, - required: true, - }, - }, -}; -</script> - -<template> - <div data-testid="estimateOnlyPane"> - <span class="gl-font-weight-bold">{{ s__('TimeTracking|Estimated:') }} </span - >{{ timeEstimateHumanReadable }} - </div> -</template> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue deleted file mode 100644 index 2d3d0ce8dc5..00000000000 --- a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue +++ /dev/null @@ -1,11 +0,0 @@ -<script> -export default { - name: 'TimeTrackingNoTrackingPane', -}; -</script> - -<template> - <div data-testid="noTrackingPane"> - <span class="no-value">{{ __('No estimate or time spent') }}</span> - </div> -</template> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue index 6bef5ed67a4..26e0a0da860 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue @@ -27,7 +27,7 @@ export default { listenForQuickActions() { $(document).on('ajax:success', '.gfm-form', this.quickActionListened); - eventHub.$on('timeTrackingUpdated', data => { + eventHub.$on('timeTrackingUpdated', (data) => { this.quickActionListened({ detail: [data] }); }); }, diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 3199ed1e615..26b8e087512 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -1,22 +1,23 @@ <script> import { GlIcon } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; import TimeTrackingHelpState from './help_state.vue'; import TimeTrackingCollapsedState from './collapsed_state.vue'; import TimeTrackingSpentOnlyPane from './spent_only_pane.vue'; -import TimeTrackingNoTrackingPane from './no_tracking_pane.vue'; -import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue'; import TimeTrackingComparisonPane from './comparison_pane.vue'; import eventHub from '../../event_hub'; export default { name: 'IssuableTimeTracker', + i18n: { + noTimeTrackingText: __('No estimate or time spent'), + estimatedOnlyText: s__('TimeTracking|Estimated:'), + }, components: { GlIcon, TimeTrackingCollapsedState, - TimeTrackingEstimateOnlyPane, TimeTrackingSpentOnlyPane, - TimeTrackingNoTrackingPane, TimeTrackingComparisonPane, TimeTrackingHelpState, }, @@ -139,15 +140,17 @@ export default { </div> </div> <div class="time-tracking-content hide-collapsed"> - <time-tracking-estimate-only-pane - v-if="showEstimateOnlyState" - :time-estimate-human-readable="humanTimeEstimate" - /> + <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane"> + <span class="gl-font-weight-bold">{{ $options.i18n.estimatedOnlyText }} </span + >{{ humanTimeEstimate }} + </div> <time-tracking-spent-only-pane v-if="showSpentOnlyState" :time-spent-human-readable="humanTimeSpent" /> - <time-tracking-no-tracking-pane v-if="showNoTimeTrackingState" /> + <div v-if="showNoTimeTrackingState" data-testid="noTrackingPane"> + <span class="gl-text-gray-500">{{ $options.i18n.noTimeTrackingText }}</span> + </div> <time-tracking-comparison-pane v-if="showComparisonState" :time-estimate="timeEstimate" diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js index edeb1bba020..55847fc43f0 100644 --- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js +++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js @@ -46,14 +46,14 @@ class SidebarMoveIssue { () => new window.Flash(__('An error occurred while fetching projects autocomplete.')), ); }, - renderRow: project => ` + renderRow: (project) => ` <li> <a href="#" class="js-move-issue-dropdown-item"> ${escape(project.name_with_namespace)} </a> </li> `, - clicked: options => { + clicked: (options) => { const project = options.selectedObj; const selectedProjectId = options.isMarking ? project.id : 0; this.mediator.setMoveToProjectId(selectedProjectId); diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js index 0f5f8f2b53b..4d9e99941d1 100644 --- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js @@ -16,7 +16,7 @@ export default class SidebarMilestone { components: { timeTracker, }, - render: createElement => + render: (createElement) => createElement('timeTracker', { props: { timeEstimate: parseInt(timeEstimate, 10), diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 984cd8a3b1d..2760bf431ea 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -12,6 +12,7 @@ import sidebarParticipants from './components/participants/sidebar_participants. import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue'; import SidebarSeverity from './components/severity/sidebar_severity.vue'; import Translate from '../vue_shared/translate'; +import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue'; import createDefaultClient from '~/lib/graphql'; import { isInIssuePage, isInIncidentPage, parseBoolean } from '~/lib/utils/common_utils'; import createFlash from '~/flash'; @@ -40,7 +41,7 @@ function mountAssigneesComponent(mediator) { components: { SidebarAssignees, }, - render: createElement => + render: (createElement) => createElement('sidebar-assignees', { props: { mediator, @@ -70,14 +71,13 @@ function mountReviewersComponent(mediator) { components: { SidebarReviewers, }, - render: createElement => + render: (createElement) => createElement('sidebar-reviewers', { props: { mediator, issuableIid: String(iid), projectPath: fullPath, field: el.dataset.field, - signedIn: el.hasAttribute('data-signed-in'), issuableType: isInIssuePage() ? 'issue' : 'merge_request', }, }), @@ -105,7 +105,7 @@ export function mountSidebarLabels() { allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels), initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels), }, - render: createElement => createElement(SidebarLabels), + render: (createElement) => createElement(SidebarLabels), }); } @@ -128,7 +128,7 @@ function mountConfidentialComponent(mediator) { components: { ConfidentialIssueSidebar, }, - render: createElement => + render: (createElement) => createElement('confidential-issue-sidebar', { props: { iid: String(iid), @@ -163,20 +163,20 @@ function mountLockComponent() { ); } else { importStore = import(/* webpackChunkName: 'mrNotesStore' */ '~/mr_notes/stores').then( - store => store.default, + (store) => store.default, ); } importStore .then( - store => + (store) => new Vue({ el, store, provide: { fullPath, }, - render: createElement => + render: (createElement) => createElement(IssuableLockForm, { props: { isEditable: initialData.is_editable, @@ -200,7 +200,7 @@ function mountParticipantsComponent(mediator) { components: { sidebarParticipants, }, - render: createElement => + render: (createElement) => createElement('sidebar-participants', { props: { mediator, @@ -220,7 +220,7 @@ function mountSubscriptionsComponent(mediator) { components: { sidebarSubscriptions, }, - render: createElement => + render: (createElement) => createElement('sidebar-subscriptions', { props: { mediator, @@ -240,7 +240,7 @@ function mountTimeTrackingComponent() { components: { SidebarTimeTracking, }, - render: createElement => createElement('sidebar-time-tracking', {}), + render: (createElement) => createElement('sidebar-time-tracking', {}), }); } @@ -262,7 +262,7 @@ function mountSeverityComponent() { components: { SidebarSeverity, }, - render: createElement => + render: (createElement) => createElement('sidebar-severity', { props: { projectPath: fullPath, @@ -273,6 +273,21 @@ function mountSeverityComponent() { }); } +function mountCopyEmailComponent() { + const el = document.getElementById('issuable-copy-email'); + + if (!el) return; + + const { createNoteEmail } = getSidebarOptions(); + + // eslint-disable-next-line no-new + new Vue({ + el, + render: (createElement) => + createElement(CopyEmailToClipboard, { props: { copyText: createNoteEmail } }), + }); +} + export function mountSidebar(mediator) { mountAssigneesComponent(mediator); mountReviewersComponent(mediator); @@ -280,6 +295,7 @@ export function mountSidebar(mediator) { mountLockComponent(); mountParticipantsComponent(mediator); mountSubscriptionsComponent(mediator); + mountCopyEmailComponent(); new SidebarMoveIssue( mediator, diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js index 2146fb83b13..d143283653b 100644 --- a/app/assets/javascripts/sidebar/sidebar_mediator.js +++ b/app/assets/javascripts/sidebar/sidebar_mediator.js @@ -30,7 +30,7 @@ export default class SidebarMediator { } saveAssignees(field) { - const selected = this.store.assignees.map(u => u.id); + const selected = this.store.assignees.map((u) => u.id); // If there are no ids, that means we have to unassign (which is id = 0) // And it only accepts an array, hence [0] @@ -41,7 +41,7 @@ export default class SidebarMediator { } saveReviewers(field) { - const selected = this.store.reviewers.map(u => u.id); + const selected = this.store.reviewers.map((u) => u.id); // If there are no ids, that means we have to unassign (which is id = 0) // And it only accepts an array, hence [0] @@ -80,7 +80,7 @@ export default class SidebarMediator { this.store.setSubscribedState(!this.store.subscribed); this.store.setFetchingState('subscriptions', false); }) - .catch(err => { + .catch((err) => { this.store.setFetchingState('subscriptions', false); throw err; }); diff --git a/app/assets/javascripts/sidebar/utils.js b/app/assets/javascripts/sidebar/utils.js index 23730508b56..20cd4ce9d99 100644 --- a/app/assets/javascripts/sidebar/utils.js +++ b/app/assets/javascripts/sidebar/utils.js @@ -1 +1 @@ -export const toLabelGid = id => `gid://gitlab/Label/${id}`; +export const toLabelGid = (id) => `gid://gitlab/Label/${id}`; |