diff options
Diffstat (limited to 'app/assets/javascripts/design_management/utils')
3 files changed, 84 insertions, 65 deletions
diff --git a/app/assets/javascripts/design_management/utils/cache_update.js b/app/assets/javascripts/design_management/utils/cache_update.js index 24b374b79fd..b79df9d01d5 100644 --- a/app/assets/javascripts/design_management/utils/cache_update.js +++ b/app/assets/javascripts/design_management/utils/cache_update.js @@ -1,6 +1,7 @@ /* eslint-disable @gitlab/require-i18n-strings */ -import createFlash from '~/flash'; +import { groupBy } from 'lodash'; +import { deprecatedCreateFlash as createFlash } from '~/flash'; import { extractCurrentDiscussion, extractDesign } from './design_management_utils'; import { ADD_IMAGE_DIFF_NOTE_ERROR, @@ -12,10 +13,10 @@ import { const deleteDesignsFromStore = (store, query, selectedDesigns) => { const data = store.readQuery(query); - const changedDesigns = data.project.issue.designCollection.designs.edges.filter( - ({ node }) => !selectedDesigns.includes(node.filename), + const changedDesigns = data.project.issue.designCollection.designs.nodes.filter( + node => !selectedDesigns.includes(node.filename), ); - data.project.issue.designCollection.designs.edges = [...changedDesigns]; + data.project.issue.designCollection.designs.nodes = [...changedDesigns]; store.writeQuery({ ...query, @@ -34,11 +35,10 @@ const addNewVersionToStore = (store, query, version) => { if (!version) return; const data = store.readQuery(query); - const newEdge = { node: version, __typename: 'DesignVersionEdge' }; - data.project.issue.designCollection.versions.edges = [ - newEdge, - ...data.project.issue.designCollection.versions.edges, + data.project.issue.designCollection.versions.nodes = [ + version, + ...data.project.issue.designCollection.versions.nodes, ]; store.writeQuery({ @@ -59,18 +59,15 @@ const addDiscussionCommentToStore = (store, createNote, query, queryVariables, d design.notesCount += 1; if ( - !design.issue.participants.edges.some( - participant => participant.node.username === createNote.note.author.username, + !design.issue.participants.nodes.some( + participant => participant.username === createNote.note.author.username, ) ) { - design.issue.participants.edges = [ - ...design.issue.participants.edges, + design.issue.participants.nodes = [ + ...design.issue.participants.nodes, { - __typename: 'UserEdge', - node: { - __typename: 'User', - ...createNote.note.author, - }, + __typename: 'User', + ...createNote.note.author, }, ]; } @@ -108,18 +105,15 @@ const addImageDiffNoteToStore = (store, createImageDiffNote, query, variables) = const notesCount = design.notesCount + 1; design.discussions.nodes = [...design.discussions.nodes, newDiscussion]; if ( - !design.issue.participants.edges.some( - participant => participant.node.username === createImageDiffNote.note.author.username, + !design.issue.participants.nodes.some( + participant => participant.username === createImageDiffNote.note.author.username, ) ) { - design.issue.participants.edges = [ - ...design.issue.participants.edges, + design.issue.participants.nodes = [ + ...design.issue.participants.nodes, { - __typename: 'UserEdge', - node: { - __typename: 'User', - ...createImageDiffNote.note.author, - }, + __typename: 'User', + ...createImageDiffNote.note.author, }, ]; } @@ -166,42 +160,37 @@ const updateImageDiffNoteInStore = (store, updateImageDiffNote, query, variables const addNewDesignToStore = (store, designManagementUpload, query) => { const data = store.readQuery(query); - const newDesigns = data.project.issue.designCollection.designs.edges.reduce((acc, design) => { - if (!acc.find(d => d.filename === design.node.filename)) { - acc.push(design.node); - } - - return acc; - }, designManagementUpload.designs); + const currentDesigns = data.project.issue.designCollection.designs.nodes; + 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); if (findNewVersions) { - const findNewVersionsEdges = findNewVersions.versions.edges; + const findNewVersionsNodes = findNewVersions.versions.nodes; - if (findNewVersionsEdges && findNewVersionsEdges.length) { - newVersionNode = [findNewVersionsEdges[0]]; + if (findNewVersionsNodes && findNewVersionsNodes.length) { + newVersionNode = [findNewVersionsNodes[0]]; } } const newVersions = [ ...(newVersionNode || []), - ...data.project.issue.designCollection.versions.edges, + ...data.project.issue.designCollection.versions.nodes, ]; const updatedDesigns = { __typename: 'DesignCollection', designs: { __typename: 'DesignConnection', - edges: newDesigns.map(design => ({ - __typename: 'DesignEdge', - node: design, - })), + nodes: newDesigns, }, versions: { __typename: 'DesignVersionConnection', - edges: newVersions, + nodes: newVersions, }, }; @@ -213,6 +202,15 @@ const addNewDesignToStore = (store, designManagementUpload, query) => { }); }; +const moveDesignInStore = (store, designManagementMove, query) => { + const data = store.readQuery(query); + data.project.issue.designCollection.designs = designManagementMove.designCollection.designs; + store.writeQuery({ + ...query, + data, + }); +}; + const onError = (data, message) => { createFlash(message); throw new Error(data.errors); @@ -274,3 +272,11 @@ export const updateStoreAfterUploadDesign = (store, data, query) => { addNewDesignToStore(store, data, query); } }; + +export const updateDesignsOnStoreAfterReorder = (store, data, query) => { + if (hasErrors(data)) { + createFlash(data.errors[0]); + } else { + moveDesignInStore(store, data, query); + } +}; diff --git a/app/assets/javascripts/design_management/utils/design_management_utils.js b/app/assets/javascripts/design_management/utils/design_management_utils.js index 22705cf67a1..da8f89ff960 100644 --- a/app/assets/javascripts/design_management/utils/design_management_utils.js +++ b/app/assets/javascripts/design_management/utils/design_management_utils.js @@ -5,17 +5,7 @@ export const isValidDesignFile = ({ type }) => (type.match(VALID_DESIGN_FILE_MIMETYPE.regex) || []).length > 0; /** - * Returns formatted array that doesn't contain - * `edges`->`node` nesting - * - * @param {Array} elements - */ - -export const extractNodes = elements => elements.edges.map(({ node }) => node); - -/** - * Returns formatted array of discussions that doesn't contain - * `edges`->`node` nesting for child notes + * Returns formatted array of discussions * * @param {Array} discussions */ @@ -40,9 +30,9 @@ export const findVersionId = id => (id.match('::Version/(.+$)') || [])[1]; export const findNoteId = id => (id.match('DiffNote/(.+$)') || [])[1]; -export const extractDesigns = data => data.project.issue.designCollection.designs.edges; +export const extractDesigns = data => data.project.issue.designCollection.designs.nodes; -export const extractDesign = data => (extractDesigns(data) || [])[0]?.node; +export const extractDesign = data => (extractDesigns(data) || [])[0]; /** * Generates optimistic response for a design upload mutation @@ -72,13 +62,10 @@ export const designUploadOptimisticResponse = files => { }, versions: { __typename: 'DesignVersionConnection', - edges: { - __typename: 'DesignVersionEdge', - node: { - __typename: 'DesignVersion', - id: -uniqueId(), - sha: -uniqueId(), - }, + nodes: { + __typename: 'DesignVersion', + id: -uniqueId(), + sha: -uniqueId(), }, }, })); @@ -98,7 +85,8 @@ export const designUploadOptimisticResponse = files => { /** * Generates optimistic response for a design upload mutation - * @param {Array<File>} files + * @param {Object} note + * @param {Object} position */ export const updateImageDiffNoteOptimisticResponse = (note, { position }) => ({ // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26 @@ -117,12 +105,33 @@ export const updateImageDiffNoteOptimisticResponse = (note, { position }) => ({ }, }); +/** + * Generates optimistic response for a design upload mutation + * @param {Array} designs + */ +export const moveDesignOptimisticResponse = designs => ({ + // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26 + // eslint-disable-next-line @gitlab/require-i18n-strings + __typename: 'Mutation', + designManagementMove: { + __typename: 'DesignManagementMovePayload', + designCollection: { + __typename: 'DesignCollection', + designs: { + __typename: 'DesignConnection', + nodes: designs, + }, + }, + errors: [], + }, +}); + const normalizeAuthor = author => ({ ...author, web_url: author.webUrl, avatar_url: author.avatarUrl, }); -export const extractParticipants = users => users.edges.map(({ node }) => normalizeAuthor(node)); +export const extractParticipants = users => users.map(node => normalizeAuthor(node)); export const getPageLayoutElement = () => document.querySelector('.layout-page'); diff --git a/app/assets/javascripts/design_management/utils/error_messages.js b/app/assets/javascripts/design_management/utils/error_messages.js index 7666c726c2f..c815b11737d 100644 --- a/app/assets/javascripts/design_management/utils/error_messages.js +++ b/app/assets/javascripts/design_management/utils/error_messages.js @@ -40,6 +40,10 @@ export const EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE = __( 'You must upload a file with the same file name when dropping onto an existing design.', ); +export const MOVE_DESIGN_ERROR = __( + 'Something went wrong when reordering designs. Please try again', +); + const MAX_SKIPPED_FILES_LISTINGS = 5; const oneDesignSkippedMessage = filename => @@ -69,7 +73,7 @@ const someDesignsSkippedMessage = skippedFiles => { export const designDeletionError = ({ singular = true } = {}) => { const design = singular ? __('a design') : __('designs'); - return sprintf(s__('Could not delete %{design}. Please try again.'), { + return sprintf(s__('Could not archive %{design}. Please try again.'), { design, }); }; |