diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-25 15:04:30 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-25 15:04:30 +0300 |
commit | 67370c8b72013a75705265605517a40daf69fc33 (patch) | |
tree | 5a54d854073bd1e413f21d76141e09a0a41f7630 /app/assets/javascripts/design_management | |
parent | 185d9acf520cc806840e8ba6c83deb1ec4817e0f (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/design_management')
3 files changed, 135 insertions, 122 deletions
diff --git a/app/assets/javascripts/design_management/graphql.js b/app/assets/javascripts/design_management/graphql.js index fae337aa75b..1dcb8deb249 100644 --- a/app/assets/javascripts/design_management/graphql.js +++ b/app/assets/javascripts/design_management/graphql.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import { uniqueId } from 'lodash'; +import produce from 'immer'; import { defaultDataIdFromObject } from 'apollo-cache-inmemory'; import createDefaultClient from '~/lib/graphql'; import activeDiscussionQuery from './graphql/queries/active_discussion.query.graphql'; @@ -11,12 +12,17 @@ Vue.use(VueApollo); const resolvers = { Mutation: { updateActiveDiscussion: (_, { id = null, source }, { cache }) => { - const data = cache.readQuery({ query: activeDiscussionQuery }); - data.activeDiscussion = { - __typename: 'ActiveDiscussion', - id, - source, - }; + const sourceData = cache.readQuery({ query: activeDiscussionQuery }); + + const data = produce(sourceData, draftData => { + // eslint-disable-next-line no-param-reassign + draftData.activeDiscussion = { + __typename: 'ActiveDiscussion', + id, + source, + }; + }); + cache.writeQuery({ query: activeDiscussionQuery, data }); }, }, @@ -37,6 +43,7 @@ const defaultClient = createDefaultClient( }, }, typeDefs, + assumeImmutableResults: true, }, ); diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index cd68e9d6c5b..6c4c8c75054 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -281,13 +281,8 @@ export default { .mutate({ mutation: moveDesignMutation, variables: this.designMoveVariables(newIndex, element), - update: (store, { data: { designManagementMove } }) => { - return updateDesignsOnStoreAfterReorder( - store, - designManagementMove, - this.projectQueryBody, - ); - }, + update: (store, { data: { designManagementMove } }) => + updateDesignsOnStoreAfterReorder(store, designManagementMove, this.projectQueryBody), optimisticResponse: moveDesignOptimisticResponse(this.reorderedDesigns), }) .catch(() => { @@ -327,7 +322,7 @@ export default { v-if="isLatestVersion" variant="link" size="small" - class="gl-mr-3 js-select-all" + class="gl-mr-4 js-select-all" @click="toggleDesignsSelection" >{{ selectAllButtonText }} </gl-button> diff --git a/app/assets/javascripts/design_management/utils/cache_update.js b/app/assets/javascripts/design_management/utils/cache_update.js index b79df9d01d5..7f41b7da369 100644 --- a/app/assets/javascripts/design_management/utils/cache_update.js +++ b/app/assets/javascripts/design_management/utils/cache_update.js @@ -1,8 +1,9 @@ /* eslint-disable @gitlab/require-i18n-strings */ import { groupBy } from 'lodash'; +import produce from 'immer'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import { extractCurrentDiscussion, extractDesign } from './design_management_utils'; +import { extractCurrentDiscussion, extractDesign, extractDesigns } from './design_management_utils'; import { ADD_IMAGE_DIFF_NOTE_ERROR, UPDATE_IMAGE_DIFF_NOTE_ERROR, @@ -10,13 +11,20 @@ import { designDeletionError, } from './error_messages'; +const designsOf = data => data.project.issue.designCollection.designs; + +const isParticipating = (design, username) => + design.issue.participants.nodes.some(participant => participant.username === username); + const deleteDesignsFromStore = (store, query, selectedDesigns) => { - const data = store.readQuery(query); + const sourceData = store.readQuery(query); - const changedDesigns = data.project.issue.designCollection.designs.nodes.filter( - node => !selectedDesigns.includes(node.filename), - ); - data.project.issue.designCollection.designs.nodes = [...changedDesigns]; + const data = produce(sourceData, draftData => { + const changedDesigns = designsOf(sourceData).nodes.filter( + design => !selectedDesigns.includes(design.filename), + ); + designsOf(draftData).nodes = [...changedDesigns]; + }); store.writeQuery({ ...query, @@ -33,13 +41,15 @@ const deleteDesignsFromStore = (store, query, selectedDesigns) => { */ const addNewVersionToStore = (store, query, version) => { if (!version) return; + const sourceData = store.readQuery(query); - const data = store.readQuery(query); - - data.project.issue.designCollection.versions.nodes = [ - version, - ...data.project.issue.designCollection.versions.nodes, - ]; + const data = produce(sourceData, draftData => { + // eslint-disable-next-line no-param-reassign + draftData.project.issue.designCollection.versions.nodes = [ + version, + ...draftData.project.issue.designCollection.versions.nodes, + ]; + }); store.writeQuery({ ...query, @@ -48,46 +58,41 @@ const addNewVersionToStore = (store, query, version) => { }; const addDiscussionCommentToStore = (store, createNote, query, queryVariables, discussionId) => { - const data = store.readQuery({ + const sourceData = store.readQuery({ query, variables: queryVariables, }); - const design = extractDesign(data); - const currentDiscussion = extractCurrentDiscussion(design.discussions, discussionId); - currentDiscussion.notes.nodes = [...currentDiscussion.notes.nodes, createNote.note]; - - design.notesCount += 1; - if ( - !design.issue.participants.nodes.some( - participant => participant.username === createNote.note.author.username, - ) - ) { - design.issue.participants.nodes = [ - ...design.issue.participants.nodes, - { - __typename: 'User', - ...createNote.note.author, - }, - ]; - } + const newParticipant = { + __typename: 'User', + ...createNote.note.author, + }; + + const data = produce(sourceData, draftData => { + const design = extractDesign(draftData); + const currentDiscussion = extractCurrentDiscussion(design.discussions, discussionId); + currentDiscussion.notes.nodes = [...currentDiscussion.notes.nodes, createNote.note]; + + if (!isParticipating(design, createNote.note.author.username)) { + design.issue.participants.nodes = [...design.issue.participants.nodes, newParticipant]; + } + + design.notesCount += 1; + }); + store.writeQuery({ query, variables: queryVariables, - data: { - ...data, - design: { - ...design, - }, - }, + data, }); }; const addImageDiffNoteToStore = (store, createImageDiffNote, query, variables) => { - const data = store.readQuery({ + const sourceData = store.readQuery({ query, variables, }); + const newDiscussion = { __typename: 'Discussion', id: createImageDiffNote.note.discussion.id, @@ -101,100 +106,100 @@ const addImageDiffNoteToStore = (store, createImageDiffNote, query, variables) = nodes: [createImageDiffNote.note], }, }; - const design = extractDesign(data); - const notesCount = design.notesCount + 1; - design.discussions.nodes = [...design.discussions.nodes, newDiscussion]; - if ( - !design.issue.participants.nodes.some( - participant => participant.username === createImageDiffNote.note.author.username, - ) - ) { - design.issue.participants.nodes = [ - ...design.issue.participants.nodes, - { - __typename: 'User', - ...createImageDiffNote.note.author, - }, - ]; - } + + const data = produce(sourceData, draftData => { + const design = extractDesign(draftData); + design.notesCount += 1; + design.discussions.nodes = [...design.discussions.nodes, newDiscussion]; + + if ( + !design.issue.participants.nodes.some( + participant => participant.username === createImageDiffNote.note.author.username, + ) + ) { + design.issue.participants.nodes = [ + ...design.issue.participants.nodes, + { + __typename: 'User', + ...createImageDiffNote.note.author, + }, + ]; + } + }); + store.writeQuery({ query, variables, - data: { - ...data, - design: { - ...design, - notesCount, - }, - }, + data, }); }; const updateImageDiffNoteInStore = (store, updateImageDiffNote, query, variables) => { - const data = store.readQuery({ + const sourceData = store.readQuery({ query, variables, }); - const design = extractDesign(data); - const discussion = extractCurrentDiscussion( - design.discussions, - updateImageDiffNote.note.discussion.id, - ); - - discussion.notes = { - ...discussion.notes, - nodes: [updateImageDiffNote.note, ...discussion.notes.nodes.slice(1)], - }; + const data = produce(sourceData, draftData => { + const design = extractDesign(draftData); + const discussion = extractCurrentDiscussion( + design.discussions, + updateImageDiffNote.note.discussion.id, + ); + + discussion.notes = { + ...discussion.notes, + nodes: [updateImageDiffNote.note, ...discussion.notes.nodes.slice(1)], + }; + }); store.writeQuery({ query, variables, - data: { - ...data, - design, - }, + data, }); }; const addNewDesignToStore = (store, designManagementUpload, query) => { - const data = store.readQuery(query); + const sourceData = store.readQuery(query); - const currentDesigns = data.project.issue.designCollection.designs.nodes; - const existingDesigns = groupBy(currentDesigns, 'filename'); - const newDesigns = currentDesigns.concat( - designManagementUpload.designs.filter(d => !existingDesigns[d.filename]), - ); + const data = produce(sourceData, draftData => { + const currentDesigns = extractDesigns(draftData); + const existingDesigns = groupBy(currentDesigns, 'filename'); + const newDesigns = currentDesigns.concat( + designManagementUpload.designs.filter(d => !existingDesigns[d.filename]), + ); - let newVersionNode; - const findNewVersions = designManagementUpload.designs.find(design => design.versions); + let newVersionNode; + const findNewVersions = designManagementUpload.designs.find(design => design.versions); - if (findNewVersions) { - const findNewVersionsNodes = findNewVersions.versions.nodes; + if (findNewVersions) { + const findNewVersionsNodes = findNewVersions.versions.nodes; - if (findNewVersionsNodes && findNewVersionsNodes.length) { - newVersionNode = [findNewVersionsNodes[0]]; + if (findNewVersionsNodes && findNewVersionsNodes.length) { + newVersionNode = [findNewVersionsNodes[0]]; + } } - } - const newVersions = [ - ...(newVersionNode || []), - ...data.project.issue.designCollection.versions.nodes, - ]; - - const updatedDesigns = { - __typename: 'DesignCollection', - designs: { - __typename: 'DesignConnection', - nodes: newDesigns, - }, - versions: { - __typename: 'DesignVersionConnection', - nodes: newVersions, - }, - }; + const newVersions = [ + ...(newVersionNode || []), + ...draftData.project.issue.designCollection.versions.nodes, + ]; - data.project.issue.designCollection = updatedDesigns; + const updatedDesigns = { + __typename: 'DesignCollection', + designs: { + __typename: 'DesignConnection', + nodes: newDesigns, + }, + versions: { + __typename: 'DesignVersionConnection', + nodes: newVersions, + }, + }; + // eslint-disable-next-line no-param-reassign + draftData.project.issue.designCollection = updatedDesigns; + }); store.writeQuery({ ...query, @@ -203,8 +208,14 @@ const addNewDesignToStore = (store, designManagementUpload, query) => { }; const moveDesignInStore = (store, designManagementMove, query) => { - const data = store.readQuery(query); - data.project.issue.designCollection.designs = designManagementMove.designCollection.designs; + const sourceData = store.readQuery(query); + + const data = produce(sourceData, draftData => { + // eslint-disable-next-line no-param-reassign + draftData.project.issue.designCollection.designs = + designManagementMove.designCollection.designs; + }); + store.writeQuery({ ...query, data, |