diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/assignees')
3 files changed, 38 insertions, 26 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"> |