diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-12 12:11:48 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-12 12:11:48 +0300 |
commit | 94a5041917eb74f9636a4c2a73b055cf2928a585 (patch) | |
tree | 25d999c0620ba1a733b94dba848047a8501aac3f /app/assets/javascripts/work_items | |
parent | ea44b3870dbb591f737877a288067ce60248acf6 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/work_items')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_links/index.js | 10 | ||||
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue | 62 |
2 files changed, 43 insertions, 29 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_links/index.js b/app/assets/javascripts/work_items/components/work_item_links/index.js index 6c8af8dc74c..86f03583ea3 100644 --- a/app/assets/javascripts/work_items/components/work_item_links/index.js +++ b/app/assets/javascripts/work_items/components/work_item_links/index.js @@ -1,16 +1,10 @@ import Vue from 'vue'; -import VueApollo from 'vue-apollo'; import { GlToast } from '@gitlab/ui'; -import createDefaultClient from '~/lib/graphql'; +import { createApolloProvider } from '../../graphql/provider'; import WorkItemLinks from './work_item_links.vue'; -Vue.use(VueApollo); Vue.use(GlToast); -const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), -}); - export default function initWorkItemLinks() { if (!window.gon.features.workItemsHierarchy) { return; @@ -28,7 +22,7 @@ export default function initWorkItemLinks() { new Vue({ el: workItemLinksRoot, name: 'WorkItemLinksRoot', - apolloProvider, + apolloProvider: createApolloProvider(), components: { workItemLinks: WorkItemLinks, }, diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue index 23264a12465..7483bef6e23 100644 --- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue +++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue @@ -3,6 +3,7 @@ import { GlButton, GlBadge, GlIcon, GlLoadingIcon } from '@gitlab/ui'; import { produce } from 'immer'; import { s__ } from '~/locale'; import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import { TYPE_WORK_ITEM } from '~/graphql_shared/constants'; import { isMetaKey } from '~/lib/utils/common_utils'; import { setUrlParams, updateHistory } from '~/lib/utils/url_utility'; @@ -13,7 +14,8 @@ import { WIDGET_TYPE_HIERARCHY, } from '../../constants'; import getWorkItemLinksQuery from '../../graphql/work_item_links.query.graphql'; -import updateWorkItem from '../../graphql/update_work_item.mutation.graphql'; +import updateWorkItemMutation from '../../graphql/update_work_item.mutation.graphql'; +import workItemQuery from '../../graphql/work_item.query.graphql'; import WorkItemDetailModal from '../work_item_detail_modal.vue'; import WorkItemLinksForm from './work_item_links_form.vue'; import WorkItemLinksMenu from './work_item_links_menu.vue'; @@ -42,40 +44,40 @@ export default { }, }, apollo: { - children: { + workItem: { query: getWorkItemLinksQuery, variables() { return { id: this.issuableGid, }; }, - update(data) { - return ( - data.workItem.widgets.find((widget) => widget.type === WIDGET_TYPE_HIERARCHY)?.children - .nodes ?? [] - ); - }, skip() { return !this.issuableId; }, - result({ data }) { - this.canUpdate = data.workItem.userPermissions.updateWorkItem; - this.confidential = data.workItem.confidential; - }, }, }, data() { return { isShownAddForm: false, isOpen: true, - children: [], - canUpdate: false, - confidential: false, activeChildId: null, activeToast: null, + prefetchedWorkItem: null, }; }, computed: { + children() { + return ( + this.workItem?.widgets.find((widget) => widget.type === WIDGET_TYPE_HIERARCHY)?.children + .nodes ?? [] + ); + }, + canUpdate() { + return this.workItem?.userPermissions.updateWorkItem || false; + }, + confidential() { + return this.workItem?.confidential || false; + }, // Only used for children for now but should be extended later to support parents and siblings isChildrenEmpty() { return this.children?.length === 0; @@ -92,7 +94,7 @@ export default { return this.issuableId ? convertToGraphQLId(TYPE_WORK_ITEM, this.issuableId) : null; }, isLoading() { - return this.$apollo.queries.children.loading; + return this.$apollo.queries.workItem.loading; }, childrenIds() { return this.children.map((c) => c.id); @@ -171,22 +173,22 @@ export default { data: newData, }); }, - async updateWorkItemMutation(workItem, childId, parentId) { + async updateWorkItem(workItem, childId, parentId) { return this.$apollo.mutate({ - mutation: updateWorkItem, + mutation: updateWorkItemMutation, variables: { input: { id: childId, hierarchyWidget: { parentId } } }, - update: this.toggleChildFromCache.bind(this, workItem, childId), + update: (store) => this.toggleChildFromCache(workItem, childId, store), }); }, async undoChildRemoval(workItem, childId) { - const { data } = await this.updateWorkItemMutation(workItem, childId, this.issuableGid); + const { data } = await this.updateWorkItem(workItem, childId, this.issuableGid); if (data.workItemUpdate.errors.length === 0) { this.activeToast?.hide(); } }, async removeChild(childId) { - const { data } = await this.updateWorkItemMutation(null, childId, null); + const { data } = await this.updateWorkItem(null, childId, null); if (data.workItemUpdate.errors.length === 0) { this.activeToast = this.$toast.show(s__('WorkItem|Child removed'), { @@ -197,6 +199,22 @@ export default { }); } }, + prefetchWorkItem(id) { + this.prefetch = setTimeout( + () => + this.$apollo.addSmartQuery('prefetchedWorkItem', { + query: workItemQuery, + variables: { + id, + }, + update: (data) => data.workItem, + }), + DEFAULT_DEBOUNCE_AND_THROTTLE_MS, + ); + }, + clearPrefetching() { + clearTimeout(this.prefetch); + }, }, i18n: { title: s__('WorkItem|Child items'), @@ -274,6 +292,8 @@ export default { variant="link" class="gl-text-truncate gl-max-w-80 gl-text-black-normal!" @click="openChild(child.id, $event)" + @mouseover="prefetchWorkItem(child.id)" + @mouseout="clearPrefetching" > {{ child.title }} </gl-button> |