diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-19 17:16:28 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-19 17:16:28 +0300 |
commit | e4384360a16dd9a19d4d2d25d0ef1f2b862ed2a6 (patch) | |
tree | 2fcdfa7dcdb9db8f5208b2562f4b4e803d671243 /app/assets/javascripts/work_items/components/work_item_award_emoji.vue | |
parent | ffda4e7bcac36987f936b4ba515995a6698698f0 (diff) |
Add latest changes from gitlab-org/gitlab@16-2-stable-eev16.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_award_emoji.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_award_emoji.vue | 90 |
1 files changed, 72 insertions, 18 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_award_emoji.vue b/app/assets/javascripts/work_items/components/work_item_award_emoji.vue index 144c29b8ec3..3dd3a072d0f 100644 --- a/app/assets/javascripts/work_items/components/work_item_award_emoji.vue +++ b/app/assets/javascripts/work_items/components/work_item_award_emoji.vue @@ -7,9 +7,15 @@ import AwardsList from '~/vue_shared/components/awards_list.vue'; import { isLoggedIn } from '~/lib/utils/common_utils'; import { TYPENAME_USER } from '~/graphql_shared/constants'; +import workItemAwardEmojiQuery from '../graphql/award_emoji.query.graphql'; import updateAwardEmojiMutation from '../graphql/update_award_emoji.mutation.graphql'; -import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql'; -import { EMOJI_THUMBSDOWN, EMOJI_THUMBSUP, WIDGET_TYPE_AWARD_EMOJI } from '../constants'; +import { + EMOJI_THUMBSDOWN, + EMOJI_THUMBSUP, + WIDGET_TYPE_AWARD_EMOJI, + DEFAULT_PAGE_SIZE_EMOJIS, + I18N_WORK_ITEM_FETCH_AWARD_EMOJI_ERROR, +} from '../constants'; export default { defaultAwards: [EMOJI_THUMBSUP, EMOJI_THUMBSDOWN], @@ -26,16 +32,17 @@ export default { type: String, required: true, }, - awardEmoji: { - type: Object, - required: true, - }, workItemIid: { type: String, required: false, default: null, }, }, + data() { + return { + isLoading: false, + }; + }, computed: { currentUserId() { return window.gon.current_user_id; @@ -47,6 +54,10 @@ export default { * Parse and convert award emoji list to a format that AwardsList can understand */ awards() { + if (!this.awardEmoji) { + return []; + } + return this.awardEmoji.nodes.map((emoji) => ({ name: emoji.name, user: { @@ -55,16 +66,56 @@ export default { }, })); }, + pageInfo() { + return this.awardEmoji?.pageInfo; + }, + hasNextPage() { + return this.pageInfo?.hasNextPage; + }, + }, + apollo: { + awardEmoji: { + query: workItemAwardEmojiQuery, + variables() { + return { + iid: this.workItemIid, + fullPath: this.workItemFullpath, + after: this.after, + pageSize: DEFAULT_PAGE_SIZE_EMOJIS, + }; + }, + update(data) { + const widgets = data.workspace?.workItems?.nodes[0].widgets; + return widgets?.find((widget) => widget.type === WIDGET_TYPE_AWARD_EMOJI).awardEmoji || {}; + }, + skip() { + return !this.workItemIid; + }, + result() { + if (this.hasNextPage) { + this.fetchAwardEmojis(); + } else { + this.isLoading = false; + } + }, + error() { + this.$emit('error', I18N_WORK_ITEM_FETCH_AWARD_EMOJI_ERROR); + }, + }, }, methods: { - getAwards() { - return this.awardEmoji.nodes.map((emoji) => ({ - name: emoji.name, - user: { - id: getIdFromGraphQLId(emoji.user.id), - name: emoji.user.name, - }, - })); + async fetchAwardEmojis() { + this.isLoading = true; + try { + await this.$apollo.queries.awardEmoji.fetchMore({ + variables: { + pageSize: DEFAULT_PAGE_SIZE_EMOJIS, + after: this.pageInfo?.endCursor, + }, + }); + } catch (error) { + this.$emit('error', I18N_WORK_ITEM_FETCH_AWARD_EMOJI_ERROR); + } }, isEmojiPresentForCurrentUser(name) { return ( @@ -108,8 +159,12 @@ export default { }, updateWorkItemAwardEmojiWidgetCache({ cache, name, toggledOn }) { const query = { - query: workItemByIidQuery, - variables: { fullPath: this.workItemFullpath, iid: this.workItemIid }, + query: workItemAwardEmojiQuery, + variables: { + fullPath: this.workItemFullpath, + iid: this.workItemIid, + pageSize: DEFAULT_PAGE_SIZE_EMOJIS, + }, }; const sourceData = cache.readQuery(query); @@ -117,7 +172,6 @@ export default { const newData = produce(sourceData, (draftState) => { const { widgets } = draftState.workspace.workItems.nodes[0]; const widgetAwardEmoji = widgets.find((widget) => widget.type === WIDGET_TYPE_AWARD_EMOJI); - widgetAwardEmoji.awardEmoji.nodes = this.getAwardEmojiNodes(name, toggledOn); }); @@ -175,7 +229,7 @@ export default { </script> <template> - <div class="gl-mt-3"> + <div v-if="!isLoading" class="gl-mt-3"> <awards-list data-testid="work-item-award-list" :awards="awards" |