diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-20 11:43:02 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-20 11:43:02 +0300 |
commit | d9ab72d6080f594d0b3cae15f14b3ef2c6c638cb (patch) | |
tree | 2341ef426af70ad1e289c38036737e04b0aa5007 /app/assets/javascripts/sidebar | |
parent | d6e514dd13db8947884cd58fe2a9c2a063400a9b (diff) |
Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/sidebar')
10 files changed, 73 insertions, 41 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue index b7080bb05b8..c2ca87af9ce 100644 --- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue @@ -82,8 +82,12 @@ export default { </div> </assignee-avatar-link> <div v-else> - <div class="user-list"> - <div v-for="user in uncollapsedUsers" :key="user.id" class="user-item"> + <div class="gl-display-flex gl-flex-wrap"> + <div + v-for="user in uncollapsedUsers" + :key="user.id" + class="user-item gl-display-inline-block" + > <assignee-avatar-link :user="user" :issuable-type="issuableType" /> </div> </div> diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue index 9fdf941579d..d5647619ea3 100644 --- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue +++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue @@ -36,6 +36,7 @@ export default { 'allowLabelEdit', 'allowScopedLabels', 'iid', + 'fullPath', 'initiallySelectedLabels', 'issuableType', 'labelsFetchPath', @@ -53,30 +54,32 @@ export default { handleDropdownClose() { $(this.$el).trigger('hidden.gl.dropdown'); }, - getUpdateVariables(dropdownLabels) { - const currentLabelIds = this.selectedLabels.map((label) => label.id); - const dropdownLabelIds = dropdownLabels.map((label) => label.id); - const userAddedLabelIds = this.glFeatures.labelsWidget - ? difference(dropdownLabelIds, currentLabelIds) - : dropdownLabels.filter((label) => label.set).map((label) => label.id); - const userRemovedLabelIds = this.glFeatures.labelsWidget - ? difference(currentLabelIds, dropdownLabelIds) - : dropdownLabels.filter((label) => !label.set).map((label) => label.id); + getUpdateVariables(labels) { + let labelIds = []; - const labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds); + if (this.glFeatures.labelsWidget) { + labelIds = labels.map(({ id }) => toLabelGid(id)); + } else { + const currentLabelIds = this.selectedLabels.map((label) => label.id); + const userAddedLabelIds = labels.filter((label) => label.set).map((label) => label.id); + const userRemovedLabelIds = labels.filter((label) => !label.set).map((label) => label.id); + + labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds).map( + toLabelGid, + ); + } switch (this.issuableType) { case IssuableType.Issue: return { - addLabelIds: userAddedLabelIds, iid: this.iid, projectPath: this.projectPath, - removeLabelIds: userRemovedLabelIds, + labelIds, }; case IssuableType.MergeRequest: return { iid: this.iid, - labelIds: labelIds.map(toLabelGid), + labelIds, operationMode: MutationOperationMode.Replace, projectPath: this.projectPath, }; @@ -143,6 +146,8 @@ export default { <labels-select-widget v-if="glFeatures.labelsWidget" class="block labels js-labels-block" + :iid="iid" + :full-path="fullPath" :allow-label-remove="allowLabelEdit" :allow-multiselect="true" :footer-create-label-title="__('Create project label')" @@ -152,8 +157,8 @@ export default { :labels-select-in-progress="isLabelsSelectInProgress" :selected-labels="selectedLabels" :variant="$options.variant" + :issuable-type="issuableType" data-qa-selector="labels_block" - @onDropdownClose="handleDropdownClose" @onLabelRemove="handleLabelRemove" @updateSelectedLabels="handleUpdateSelectedLabels" > diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue index ad4bfe5b665..4a255a3b916 100644 --- a/app/assets/javascripts/sidebar/components/participants/participants.vue +++ b/app/assets/javascripts/sidebar/components/participants/participants.vue @@ -104,11 +104,11 @@ export default { <gl-loading-icon v-if="loading" size="sm" :inline="true" /> {{ participantLabel }} </div> - <div class="participants-list hide-collapsed"> + <div class="hide-collapsed gl-display-flex gl-flex-wrap"> <div v-for="participant in visibleParticipants" :key="participant.id" - class="participants-author" + class="participants-author gl-display-inline-block gl-pr-3 gl-pb-3" > <a :href="participant.web_url || participant.webUrl" class="author-link"> <user-avatar-image diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue index 87780888c2f..361a082def6 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue @@ -77,7 +77,7 @@ export default { > <!-- use d-flex so that slot can be appropriately styled --> <span class="gl-display-flex gl-align-items-center"> - <reviewer-avatar :user="user" :img-size="24" :issuable-type="issuableType" /> + <reviewer-avatar :user="user" :img-size="32" :issuable-type="issuableType" /> <slot :user="user"></slot> </span> </gl-link> diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue index c6fef86c6ff..2922008cfb2 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue @@ -91,7 +91,10 @@ export default { data-testid="reviewer" > <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType"> - <div class="gl-ml-3">@{{ user.username }}</div> + <div class="gl-ml-3 gl-line-height-normal gl-display-grid"> + <span>{{ user.name }}</span> + <span>@{{ user.username }}</span> + </div> </reviewer-avatar-link> <gl-icon v-if="user.approved" diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue index 3705d725a15..7b4be659330 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue @@ -83,13 +83,15 @@ export default { :value="timeRemainingPercent" :variant="progressBarVariant" /> - <div class="compare-display-container"> - <div class="compare-display float-left"> - <span class="compare-label">{{ s__('TimeTracking|Spent') }}</span> + <div + class="compare-display-container gl-display-flex gl-justify-content-space-between gl-mt-2" + > + <div class="gl-float-left"> + <span class="gl-text-gray-400">{{ s__('TimeTracking|Spent') }}</span> <span class="compare-value spent">{{ timeSpentHumanReadable }}</span> </div> - <div class="compare-display estimated float-right"> - <span class="compare-label">{{ s__('TimeTrackingEstimated|Est') }}</span> + <div class="estimated gl-float-right"> + <span class="gl-text-gray-400">{{ s__('TimeTrackingEstimated|Est') }}</span> <span class="compare-value">{{ timeEstimateHumanReadable }}</span> </div> </div> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue index db2197ec65e..4564a48fa2d 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue @@ -1,30 +1,31 @@ <script> -import { sprintf, s__ } from '~/locale'; +import { GlSprintf } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +const timeSpent = s__('TimeTracking|%{spentStart}Spent: %{spentEnd}'); export default { name: 'TimeTrackingSpentOnlyPane', + timeSpent, + components: { + GlSprintf, + }, props: { timeSpentHumanReadable: { type: String, required: true, }, }, - computed: { - timeSpent() { - return sprintf( - s__('TimeTracking|%{startTag}Spent: %{endTag}%{timeSpentHumanReadable}'), - { - startTag: '<span class="gl-font-weight-bold">', - endTag: '</span>', - timeSpentHumanReadable: this.timeSpentHumanReadable, - }, - false, - ); - }, - }, }; </script> <template> - <div data-testid="spentOnlyPane" v-html="timeSpent /* eslint-disable-line vue/no-v-html */"></div> + <div data-testid="spentOnlyPane"> + <gl-sprintf :message="$options.timeSpent"> + <template #spent="{ content }"> + <span class="gl-font-weight-bold">{{ content }}</span + >{{ timeSpentHumanReadable }} + </template> + </gl-sprintf> + </div> </template> diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue index f7e76cc2b7f..d5782e4b371 100644 --- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue +++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue @@ -41,7 +41,7 @@ export default { computed: { buttonClasses() { return this.collapsed - ? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' + ? 'btn-blank btn-todo sidebar-collapsed-icon js-dont-change-state' : 'gl-button btn btn-default btn-todo issuable-header-btn float-right'; }, buttonLabel() { diff --git a/app/assets/javascripts/sidebar/constants.js b/app/assets/javascripts/sidebar/constants.js index fd43fb80b7f..e593973da82 100644 --- a/app/assets/javascripts/sidebar/constants.js +++ b/app/assets/javascripts/sidebar/constants.js @@ -31,6 +31,10 @@ import updateIssueSubscriptionMutation from '~/sidebar/queries/update_issue_subs import mergeRequestMilestoneMutation from '~/sidebar/queries/update_merge_request_milestone.mutation.graphql'; import updateMergeRequestSubscriptionMutation from '~/sidebar/queries/update_merge_request_subscription.mutation.graphql'; import updateAlertAssigneesMutation from '~/vue_shared/alert_details/graphql/mutations/alert_set_assignees.mutation.graphql'; +import epicLabelsQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/epic_labels.query.graphql'; +import groupLabelsQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/group_labels.query.graphql'; +import issueLabelsQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/issue_labels.query.graphql'; +import projectLabelsQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql'; import getAlertAssignees from '~/vue_shared/components/sidebar/queries/get_alert_assignees.query.graphql'; import getIssueAssignees from '~/vue_shared/components/sidebar/queries/get_issue_assignees.query.graphql'; import issueParticipantsQuery from '~/vue_shared/components/sidebar/queries/get_issue_participants.query.graphql'; @@ -105,6 +109,17 @@ export const referenceQueries = { }, }; +export const labelsQueries = { + [IssuableType.Issue]: { + issuableQuery: issueLabelsQuery, + workspaceQuery: projectLabelsQuery, + }, + [IssuableType.Epic]: { + issuableQuery: epicLabelsQuery, + workspaceQuery: groupLabelsQuery, + }, +}; + export const dateTypes = { start: 'startDate', due: 'dueDate', diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 10ab80f4ec2..9f5a2f4ebb0 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -241,6 +241,7 @@ function mountMilestoneSelect() { export function mountSidebarLabels() { const el = document.querySelector('.js-sidebar-labels'); + const { fullPath } = getSidebarOptions(); if (!el) { return false; @@ -251,6 +252,7 @@ export function mountSidebarLabels() { apolloProvider, provide: { ...el.dataset, + fullPath, allowLabelCreate: parseBoolean(el.dataset.allowLabelCreate), allowLabelEdit: parseBoolean(el.dataset.canEdit), allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels), |