diff options
Diffstat (limited to 'app/assets/javascripts/sidebar')
18 files changed, 126 insertions, 65 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue index 2387fe64b8f..78d12ac113b 100644 --- a/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue +++ b/app/assets/javascripts/sidebar/components/assignees/assignees_realtime.vue @@ -1,6 +1,5 @@ <script> -import produce from 'immer'; -import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { IssuableType } from '~/issues/constants'; import { assigneesQueries } from '~/sidebar/constants'; @@ -17,10 +16,6 @@ export default { type: String, required: true, }, - issuableId: { - type: Number, - required: true, - }, queryVariables: { type: Object, required: true, @@ -30,6 +25,9 @@ export default { issuableClass() { return Object.keys(IssuableType).find((key) => IssuableType[key] === this.issuableType); }, + issuableId() { + return this.issuable?.id; + }, }, apollo: { issuable: { @@ -48,29 +46,36 @@ export default { }, variables() { return { - issuableId: convertToGraphQLId(this.issuableClass, this.issuableId), + issuableId: this.issuableId, }; }, - updateQuery(prev, { subscriptionData }) { - if (prev && subscriptionData?.data?.issuableAssigneesUpdated) { - const data = produce(prev, (draftData) => { - draftData.workspace.issuable.assignees.nodes = - subscriptionData.data.issuableAssigneesUpdated.assignees.nodes; - }); + skip() { + return !this.issuableId; + }, + updateQuery( + _, + { + subscriptionData: { + data: { issuableAssigneesUpdated }, + }, + }, + ) { + if (issuableAssigneesUpdated) { + const { + id, + assignees: { nodes }, + } = issuableAssigneesUpdated; if (this.mediator) { - this.handleFetchResult(data); + this.handleFetchResult(nodes); } - return data; + this.$emit('assigneesUpdated', { id, assignees: nodes }); } - return prev; }, }, }, }, methods: { - handleFetchResult(data) { - const { nodes } = data.workspace.issuable.assignees; - + handleFetchResult(nodes) { const assignees = nodes.map((n) => ({ ...n, avatar_url: n.avatarUrl, diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue index 7743004a293..14f6c9d3a15 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue @@ -232,6 +232,7 @@ export default { :issuable-type="issuableType" :issuable-id="issuableId" :query-variables="queryVariables" + @assigneesUpdated="$emit('assignees-updated', $event)" /> <sidebar-editable-item ref="toggle" 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 558fe8ca2aa..8717d205dcb 100644 --- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue +++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue @@ -109,20 +109,18 @@ export default { :key="user.id" :class="{ 'user-item': !showVerticalList, + 'gl-display-inline-block': !showVerticalList, + 'gl-display-grid gl-align-items-center': showVerticalList, 'gl-mb-3': index !== users.length - 1 && showVerticalList, }" - class="gl-display-inline-block" + class="assignee-grid" > - <attention-requested-toggle - v-if="showVerticalList" - :user="user" - type="assignee" - @toggle-attention-requested="toggleAttentionRequested" - /> <assignee-avatar-link :user="user" :issuable-type="issuableType" :tooltip-has-name="!showVerticalList" + class="gl-word-break-word" + data-css-area="user" > <div v-if="showVerticalList" @@ -133,6 +131,14 @@ export default { <span>@{{ user.username }}</span> </div> </assignee-avatar-link> + <attention-requested-toggle + v-if="showVerticalList" + :user="user" + type="assignee" + class="gl-mr-2" + data-css-area="attention" + @toggle-attention-requested="toggleAttentionRequested" + /> </div> </div> <div v-if="renderShowMoreSection" class="user-list-more gl-hover-text-blue-800"> diff --git a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue index 6ba88939373..cdc1c65a516 100644 --- a/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue +++ b/app/assets/javascripts/sidebar/components/attention_requested_toggle.vue @@ -70,19 +70,21 @@ export default { </script> <template> - <span - v-gl-tooltip.left.viewport="tooltipTitle" - class="gl-display-inline-block js-attention-request-toggle" - > - <gl-button - :loading="loading" - :variant="user.attention_requested ? 'warning' : 'default'" - :icon="user.attention_requested ? 'attention-solid' : 'attention'" - :aria-label="tooltipTitle" - :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }" - size="small" - category="tertiary" - @click="toggleAttentionRequired" - /> - </span> + <div> + <span + v-gl-tooltip.left.viewport="tooltipTitle" + class="gl-display-inline-block js-attention-request-toggle" + > + <gl-button + :loading="loading" + :variant="user.attention_requested ? 'warning' : 'default'" + :icon="user.attention_requested ? 'attention-solid' : 'attention'" + :aria-label="tooltipTitle" + :class="{ 'gl-pointer-events-none': !user.can_update_merge_request }" + size="small" + category="tertiary" + @click="toggleAttentionRequired" + /> + </span> + </div> </template> diff --git a/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue index 0d8cb8cb2b6..8528ad56ddb 100644 --- a/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue +++ b/app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue @@ -1,5 +1,5 @@ <script> -import CopyableField from '../../vue_shared/components/sidebar/copyable_field.vue'; +import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue'; export default { components: { diff --git a/app/assets/javascripts/sidebar/components/incidents/escalation_status.vue b/app/assets/javascripts/sidebar/components/incidents/escalation_status.vue index 2c32cf89387..aeaac76cff4 100644 --- a/app/assets/javascripts/sidebar/components/incidents/escalation_status.vue +++ b/app/assets/javascripts/sidebar/components/incidents/escalation_status.vue @@ -21,6 +21,11 @@ export default { return [...STATUS_LIST, null].includes(value); }, }, + preventDropdownClose: { + type: Boolean, + required: false, + default: false, + }, }, computed: { currentStatusLabel() { @@ -35,6 +40,11 @@ export default { this.$refs.dropdown.hide(); }, getStatusLabel, + hideDropdown(event) { + if (this.preventDropdownClose) { + event.preventDefault(); + } + }, }, }; </script> @@ -45,6 +55,7 @@ export default { block :text="currentStatusLabel" toggle-class="dropdown-menu-toggle gl-mb-2" + @hide="hideDropdown" > <slot name="header"> </slot> <gl-dropdown-item diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue index 42d2e456a07..2ab46a7a655 100644 --- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue +++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue @@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui'; import $ from 'jquery'; import { mapActions } from 'vuex'; import createFlash from '~/flash'; -import { __, sprintf } from '../../../locale'; +import { __, sprintf } from '~/locale'; import eventHub from '../../event_hub'; export default { diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue index 4a255a3b916..3fd35de2132 100644 --- a/app/assets/javascripts/sidebar/components/participants/participants.vue +++ b/app/assets/javascripts/sidebar/components/participants/participants.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { __, n__, sprintf } from '~/locale'; import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; @@ -8,9 +8,10 @@ export default { GlTooltip: GlTooltipDirective, }, components: { - userAvatarImage, + GlButton, GlIcon, GlLoadingIcon, + userAvatarImage, }, props: { loading: { @@ -124,9 +125,13 @@ export default { </div> </div> <div v-if="hasMoreParticipants" class="participants-more hide-collapsed"> - <button type="button" class="btn-transparent btn-link" @click="toggleMoreParticipants"> - {{ toggleLabel }} - </button> + <gl-button + variant="link" + button-text-classes="gl-text-secondary" + data-testid="more-participants" + @click="toggleMoreParticipants" + >{{ toggleLabel }}</gl-button + > </div> </div> </template> 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 361a082def6..a11468c8761 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar_link.vue @@ -73,10 +73,10 @@ export default { v-gl-tooltip="tooltipOption" :href="reviewerUrl" :title="tooltipTitle" - class="d-inline-block" + class="gl-display-inline-block" > <!-- use d-flex so that slot can be appropriately styled --> - <span class="gl-display-flex gl-align-items-center"> + <span class="gl-display-flex"> <reviewer-avatar :user="user" :img-size="32" :issuable-type="issuableType" /> <slot :user="user"></slot> </span> 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 9485802d3da..3e6be3487b1 100644 --- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue +++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue @@ -94,28 +94,40 @@ export default { <div v-for="(user, index) in users" :key="user.id" - :class="{ 'gl-mb-3': index !== users.length - 1 }" + :class="{ + 'gl-mb-3': index !== users.length - 1, + 'attention-requests': glFeatures.mrAttentionRequests, + }" + class="gl-display-grid gl-align-items-center reviewer-grid" data-testid="reviewer" > - <attention-requested-toggle - v-if="glFeatures.mrAttentionRequests" + <reviewer-avatar-link :user="user" - type="reviewer" - @toggle-attention-requested="toggleAttentionRequested" - /> - <reviewer-avatar-link :user="user" :root-path="rootPath" :issuable-type="issuableType"> + :root-path="rootPath" + :issuable-type="issuableType" + class="gl-word-break-word gl-mr-2" + data-css-area="user" + > <div class="gl-ml-3 gl-line-height-normal gl-display-grid"> <span>{{ user.name }}</span> <span>@{{ user.username }}</span> </div> </reviewer-avatar-link> + <attention-requested-toggle + v-if="glFeatures.mrAttentionRequests" + :user="user" + type="reviewer" + class="gl-mr-2" + data-css-area="attention" + @toggle-attention-requested="toggleAttentionRequested" + /> <gl-icon v-if="user.approved" v-gl-tooltip.left :size="16" :title="approvedByTooltipTitle(user)" name="status-success" - class="float-right gl-my-2 gl-ml-2 gl-text-green-500" + class="float-right gl-my-2 gl-ml-auto gl-text-green-500 gl-flex-shrink-0" data-testid="re-approved" /> <gl-icon diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue index bb90ef8e444..91c15061fb9 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue @@ -1,7 +1,7 @@ <script> import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui'; import { joinPaths } from '~/lib/utils/url_utility'; -import { sprintf, s__ } from '../../../locale'; +import { sprintf, s__ } from '~/locale'; export default { name: 'TimeTrackingHelpState', 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 d222a2af382..fdbcef22bba 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -207,7 +207,7 @@ export default { class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center" > {{ __('Time tracking') }} - <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline /> + <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" class="gl-ml-2" inline /> <gl-button :data-testid="showHelpState ? 'closeHelpButton' : 'helpButton'" category="tertiary" diff --git a/app/assets/javascripts/sidebar/graphql.js b/app/assets/javascripts/sidebar/graphql.js index fc757922f09..034bdc71122 100644 --- a/app/assets/javascripts/sidebar/graphql.js +++ b/app/assets/javascripts/sidebar/graphql.js @@ -1,11 +1,9 @@ import produce from 'immer'; import VueApollo from 'vue-apollo'; import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql'; -import { resolvers as workItemResolvers } from '~/work_items/graphql/resolvers'; import createDefaultClient from '~/lib/graphql'; const resolvers = { - ...workItemResolvers, Mutation: { updateIssueState: (_, { issueType = undefined, isDirty = false }, { cache }) => { const sourceData = cache.readQuery({ query: getIssueStateQuery }); @@ -14,7 +12,6 @@ const resolvers = { }); cache.writeQuery({ query: getIssueStateQuery, data }); }, - ...workItemResolvers.Mutation, }, }; diff --git a/app/assets/javascripts/sidebar/queries/issuable_labels.subscription.graphql b/app/assets/javascripts/sidebar/queries/issuable_labels.subscription.graphql new file mode 100644 index 00000000000..edd713baddf --- /dev/null +++ b/app/assets/javascripts/sidebar/queries/issuable_labels.subscription.graphql @@ -0,0 +1,22 @@ +#import "~/graphql_shared/fragments/label.fragment.graphql" + +subscription issuableLabelsUpdated($issuableId: IssuableID!) { + issuableLabelsUpdated(issuableId: $issuableId) { + ... on Issue { + id + labels { + nodes { + ...Label + } + } + } + ... on MergeRequest { + id + labels { + nodes { + ...Label + } + } + } + } +} diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql b/app/assets/javascripts/sidebar/queries/sidebar_details.query.graphql index 90d1a7794ea..90d1a7794ea 100644 --- a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql +++ b/app/assets/javascripts/sidebar/queries/sidebar_details.query.graphql diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetailsMR.query.graphql b/app/assets/javascripts/sidebar/queries/sidebar_details_mr.query.graphql index 0505f88773d..0505f88773d 100644 --- a/app/assets/javascripts/sidebar/queries/sidebarDetailsMR.query.graphql +++ b/app/assets/javascripts/sidebar/queries/sidebar_details_mr.query.graphql diff --git a/app/assets/javascripts/sidebar/queries/updateStatus.mutation.graphql b/app/assets/javascripts/sidebar/queries/update_status.mutation.graphql index 2c6f379744e..2c6f379744e 100644 --- a/app/assets/javascripts/sidebar/queries/updateStatus.mutation.graphql +++ b/app/assets/javascripts/sidebar/queries/update_status.mutation.graphql diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js index d8ab8f1c65b..90d8f2098bb 100644 --- a/app/assets/javascripts/sidebar/services/sidebar_service.js +++ b/app/assets/javascripts/sidebar/services/sidebar_service.js @@ -1,10 +1,10 @@ -import sidebarDetailsIssueQuery from 'ee_else_ce/sidebar/queries/sidebarDetails.query.graphql'; +import sidebarDetailsIssueQuery from 'ee_else_ce/sidebar/queries/sidebar_details.query.graphql'; import { TYPE_USER } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import createGqClient, { fetchPolicies } from '~/lib/graphql'; import axios from '~/lib/utils/axios_utils'; import reviewerRereviewMutation from '../queries/reviewer_rereview.mutation.graphql'; -import sidebarDetailsMRQuery from '../queries/sidebarDetailsMR.query.graphql'; +import sidebarDetailsMRQuery from '../queries/sidebar_details_mr.query.graphql'; import toggleAttentionRequestedMutation from '../queries/toggle_attention_requested.mutation.graphql'; const queries = { |