Skip to content

G
gitlab-ce
Commit add62e65 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera
Browse files
Options

Merge branch... 

Merge branch '217715-refactor-design-management-queries-and-mutations-to-stop-using-edges' into 'master'

Refactor Design Management queries and mutations to stop using 'edges'

Closes #217715

See merge request gitlab-org/gitlab!38166
parents 5a4e89c3 349d5202
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 144 deletions
app/assets/javascripts/design_management/components/design_sidebar.vue
View file @ add62e65
......@@ -48,7 +48,7 @@ export default {
};
},
discussionParticipants() {
return extractParticipants(this.issue.participants);
return extractParticipants(this.issue.participants.nodes);
},
resolvedDiscussions() {
return this.discussions.filter(discussion => discussion.resolved);
......
app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
View file @ add62e65
......@@ -18,7 +18,7 @@ export default {
if (!this.queryVersion) return 0;
const idx = this.allVersions.findIndex(
version => this.findVersionId(version.node.id) === this.queryVersion,
version => this.findVersionId(version.id) === this.queryVersion,
);
// if the currentVersionId isn't a valid version (i.e. not in allVersions)
......@@ -29,7 +29,7 @@ export default {
if (this.queryVersion) return this.queryVersion;
const currentVersion = this.allVersions[this.currentVersionIdx];
return this.findVersionId(currentVersion.node.id);
return this.findVersionId(currentVersion.id);
},
dropdownText() {
if (this.isLatestVersion) {
......@@ -51,23 +51,21 @@ export default {
<template>
<gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown">
<gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
<gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.id">
<router-link
class="d-flex js-version-link"
:to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
:to="{ path: $route.path, query: { version: findVersionId(version.id) } }"
>
<div class="flex-grow-1 ml-2">
<div>
<strong
>{{ __('Version') }} {{ allVersions.length - index }}
<span v-if="findVersionId(version.node.id) === latestVersionId"
>({{ __('latest') }})</span
>
<span v-if="findVersionId(version.id) === latestVersionId">({{ __('latest') }})</span>
</strong>
</div>
</div>
<i
v-if="findVersionId(version.node.id) === currentVersionId"
v-if="findVersionId(version.id) === currentVersionId"
class="fa fa-check float-right gl-mr-2"
></i>
</router-link>
......
app/assets/javascripts/design_management/graphql/mutations/create_image_diff_note.mutation.graphql
View file @ add62e65
......@@ -8,10 +8,8 @@ mutation createImageDiffNote($input: CreateImageDiffNoteInput!) {
id
replyId
notes {
edges {
node {
...DesignNote
}
nodes {
...DesignNote
}
}
}
......
app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql
View file @ add62e65
......@@ -5,11 +5,9 @@ mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
designs {
...DesignItem
versions {
edges {
node {
id
sha
}
nodes {
id
sha
}
}
}
......
app/assets/javascripts/design_management/graphql/queries/get_design.query.graphql
View file @ add62e65
......@@ -7,19 +7,15 @@ query getDesign($fullPath: ID!, $iid: String!, $atVersion: ID, $filenames: [Stri
issue(iid: $iid) {
designCollection {
designs(atVersion: $atVersion, filenames: $filenames) {
edges {
node {
...DesignItem
issue {
title
webPath
webUrl
participants {
edges {
node {
...Author
}
}
nodes {
...DesignItem
issue {
title
webPath
webUrl
participants {
nodes {
...Author
}
}
}
......
app/assets/javascripts/design_management/graphql/queries/get_design_list.query.graphql
View file @ add62e65
......@@ -7,17 +7,13 @@ query getDesignList($fullPath: ID!, $iid: String!, $atVersion: ID) {
issue(iid: $iid) {
designCollection {
designs(atVersion: $atVersion) {
edges {
node {
...DesignListItem
}
nodes {
...DesignListItem
}
}
versions {
edges {
node {
...VersionListItem
}
nodes {
...VersionListItem
}
}
}
......
app/assets/javascripts/design_management/mixins/all_designs.js
View file @ add62e65
......@@ -2,7 +2,6 @@ import { propertyOf } from 'lodash';
import createFlash from '~/flash';
import { s__ } from '~/locale';
import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
import { extractNodes } from '../utils/design_management_utils';
import allVersionsMixin from './all_versions';
import { DESIGNS_ROUTE_NAME } from '../router/constants';
......@@ -19,9 +18,15 @@ export default {
};
},
update: data => {
const designEdges = propertyOf(data)(['project', 'issue', 'designCollection', 'designs']);
if (designEdges) {
return extractNodes(designEdges);
const designNodes = propertyOf(data)([
'project',
'issue',
'designCollection',
'designs',
'nodes',
]);
if (designNodes) {
return designNodes;
}
return [];
},
......
app/assets/javascripts/design_management/mixins/all_versions.js
View file @ add62e65
......@@ -12,7 +12,7 @@ export default {
atVersion: null,
};
},
update: data => data.project.issue.designCollection.versions.edges,
update: data => data.project.issue.designCollection.versions.nodes,
},
},
inject: {
......@@ -28,7 +28,7 @@ export default {
return (
this.$route.query.version &&
this.allVersions &&
this.allVersions.some(version => version.node.id.endsWith(this.$route.query.version))
this.allVersions.some(version => version.id.endsWith(this.$route.query.version))
);
},
designsVersion() {
......@@ -38,7 +38,7 @@ export default {
},
latestVersionId() {
const latestVersion = this.allVersions[0];
return latestVersion && findVersionId(latestVersion.node.id);
return latestVersion && findVersionId(latestVersion.id);
},
isLatestVersion() {
if (this.allVersions.length > 0) {
......
app/assets/javascripts/design_management/utils/cache_update.js
View file @ add62e65
......@@ -12,10 +12,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 +34,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 +58,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 +104,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,9 +159,9 @@ 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);
const newDesigns = data.project.issue.designCollection.designs.nodes.reduce((acc, design) => {
if (!acc.find(d => d.filename === design.filename)) {
acc.push(design);
}
return acc;
......@@ -178,30 +171,27 @@ const addNewDesignToStore = (store, designManagementUpload, query) => {
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,
},
};
......
app/assets/javascripts/design_management/utils/design_management_utils.js
View file @ add62e65
......@@ -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(),
},
},
}));
......@@ -123,6 +110,6 @@ const normalizeAuthor = author => ({
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');
spec/frontend/design_management/components/upload/mock_data/all_versions.js
View file @ add62e65
export default [
{
node: {
id: 'gid://gitlab/DesignManagement::Version/3',
sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55',
},
id: 'gid://gitlab/DesignManagement::Version/3',
sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55',
},
{
node: {
id: 'gid://gitlab/DesignManagement::Version/2',
sha: '5b063fef0cd7213b312db65b30e24f057df21b20',
},
id: 'gid://gitlab/DesignManagement::Version/2',
sha: '5b063fef0cd7213b312db65b30e24f057df21b20',
},
];
spec/frontend/design_management/mock_data/all_versions.js
View file @ add62e65
export default [
{
node: {
id: 'gid://gitlab/DesignManagement::Version/1',
sha: 'b389071a06c153509e11da1f582005b316667001',
},
id: 'gid://gitlab/DesignManagement::Version/1',
sha: 'b389071a06c153509e11da1f582005b316667001',
},
];
spec/frontend/design_management/mock_data/design.js
View file @ add62e65
......@@ -12,14 +12,12 @@ export default {
webPath: 'full-issue-path',
webUrl: 'full-issue-url',
participants: {
edges: [
nodes: [
{
node: {
name: 'Administrator',
username: 'root',
webUrl: 'link-to-author',
avatarUrl: 'link-to-avatar',
},
name: 'Administrator',
username: 'root',
webUrl: 'link-to-author',
avatarUrl: 'link-to-avatar',
},
],
},
......
spec/frontend/design_management/mock_data/designs.js
View file @ add62e65
......@@ -5,11 +5,7 @@ export default {
issue: {
designCollection: {
designs: {
edges: [
{
node: design,
},
],
nodes: [design],
},
},
},
......
spec/frontend/design_management/mock_data/no_designs.js
View file @ add62e65
......@@ -3,7 +3,7 @@ export default {
issue: {
designCollection: {
designs: {
edges: [],
nodes: [],
},
},
},
......
spec/frontend/design_management/pages/index_spec.js
View file @ add62e65
......@@ -57,9 +57,7 @@ const mockDesigns = [
];
const mockVersion = {
node: {
id: 'gid://gitlab/DesignManagement::Version/1',
},
id: 'gid://gitlab/DesignManagement::Version/1',
};
describe('Design management index page', () => {
......@@ -240,13 +238,10 @@ describe('Design management index page', () => {
},
versions: {
__typename: 'DesignVersionConnection',
edges: {
__typename: 'DesignVersionEdge',
node: {
__typename: 'DesignVersion',
id: expect.anything(),
sha: expect.anything(),
},
nodes: {
__typename: 'DesignVersion',
id: expect.anything(),
sha: expect.anything(),
},
},
},
......
spec/frontend/design_management/utils/design_management_utils_spec.js
View file @ add62e65
......@@ -51,7 +51,7 @@ describe('extractDiscussions', () => {
};
});
it('discards the edges.node artifacts of GraphQL', () => {
it('discards the node artifacts of GraphQL', () => {
expect(extractDiscussions(discussions)).toEqual([
{ id: 1, notes: ['a'], index: 1 },
{ id: 2, notes: ['b'], index: 2 },
......@@ -96,10 +96,7 @@ describe('optimistic responses', () => {
discussions: { __typename: 'DesignDiscussion', nodes: [] },
versions: {
__typename: 'DesignVersionConnection',
edges: {
__typename: 'DesignVersionEdge',
node: { __typename: 'DesignVersion', id: -1, sha: -1 },
},
nodes: { __typename: 'DesignVersion', id: -1, sha: -1 },
},
},
],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7