From 33b046dc9f72e65a4afc7739026468313687a726 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 8 Sep 2020 17:30:03 +0200 Subject: [PATCH] fix: patch rgl with fix (#1046) There is a bug in react-grid-layout that only occurs when there are static items in the layout, which there are when we use page breaks for the print view. For now, I've locked RGL to 1.1.0 so that dependabot doesn't bump the version and invalidate the patch. This fix applies a patch to the react-grid-layout node module. The fix will be turned into a PR in the source repo. What this patch does: The function where this change is made is responsible for detecting collisions between items and increasing the y value on an item if it collides with one above it. It goes through the sorted item list (sorted by increasing y,x) and recursively compares the item with items below it. When there are no statics, then it can break out of the list when the item below it doesn't collide. But with the static items, a lot of the dashboard items are going to get pushed down and the code cannot assume that just because the item below didn't collide, that other items aren't going to get pushed down. --- package.json | 9 +++-- patches/react-grid-layout+1.1.0.patch | 21 ++++++++++ yarn.lock | 55 ++++++++++++++++++++++++--- 3 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 patches/react-grid-layout+1.1.0.patch diff --git a/package.json b/package.json index b2b053572..8b873014d 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "moment": "^2.27.0", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-grid-layout": "^1.0.0", + "react-grid-layout": "1.1.0", "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "redux": "^4.0.5", @@ -45,7 +45,8 @@ "build": "d2-app-scripts build", "build:netlify": "yarn build --standalone", "test": "d2-app-scripts test", - "validate-push": "CI=true yarn test" + "validate-push": "CI=true yarn test", + "postinstall": "patch-package" }, "devDependencies": { "@dhis2/cli-app-scripts": "^5", @@ -54,7 +55,9 @@ "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "^3.5.0", - "immutability-helper": "^3.1.1" + "immutability-helper": "^3.1.1", + "patch-package": "^6.2.2", + "postinstall-postinstall": "^2.1.0" }, "jest": { "setupFilesAfterEnv": [ diff --git a/patches/react-grid-layout+1.1.0.patch b/patches/react-grid-layout+1.1.0.patch new file mode 100644 index 000000000..db414508c --- /dev/null +++ b/patches/react-grid-layout+1.1.0.patch @@ -0,0 +1,21 @@ +diff --git a/node_modules/react-grid-layout/build/utils.js b/node_modules/react-grid-layout/build/utils.js +index 78190fa..505f06b 100644 +--- a/node_modules/react-grid-layout/build/utils.js ++++ b/node_modules/react-grid-layout/build/utils.js +@@ -245,6 +245,7 @@ function resolveCompactionCollision(layout + var itemIndex = layout.map(function (layoutItem) { + return layoutItem.i; + }).indexOf(item.i); // Go through each item we collide with. ++ var layoutHasStatics = getStatics(layout).length > 0; + + for (var i = itemIndex + 1; i < layout.length; i++) { + var otherItem = layout[i]; // Ignore static items +@@ -252,7 +253,7 @@ function resolveCompactionCollision(layout + if (otherItem.static) continue; // Optimization: we can break early if we know we're past this el + // We can do this b/c it's a sorted layout + +- if (otherItem.y > item.y + item.h) break; ++ if (!layoutHasStatics && otherItem.y > item.y + item.h) break; + + if (collides(item, otherItem)) { + resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis); diff --git a/yarn.lock b/yarn.lock index 264ab5f72..74d937721 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2475,6 +2475,11 @@ resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d" integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== +"@yarnpkg/lockfile@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31" + integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ== + JSONStream@^1.0.4: version "1.3.5" resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0" @@ -6223,6 +6228,14 @@ find-versions@^3.2.0: dependencies: semver-regex "^2.0.0" +find-yarn-workspace-root@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz#40eb8e6e7c2502ddfaa2577c176f221422f860db" + integrity sha512-dVtfb0WuQG+8Ag2uWkbG79hOUzEsRrhBzgfn86g2sJPkzmcpGdghbNTfUKGTxymFrY/tLIodDzLoW9nOJ4FY8Q== + dependencies: + fs-extra "^4.0.3" + micromatch "^3.1.4" + findup@^0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/findup/-/findup-0.1.5.tgz#8ad929a3393bac627957a7e5de4623b06b0e2ceb" @@ -6347,7 +6360,7 @@ fs-constants@^1.0.0: resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow== -fs-extra@^4.0.2: +fs-extra@^4.0.2, fs-extra@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94" integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg== @@ -6356,7 +6369,7 @@ fs-extra@^4.0.2: jsonfile "^4.0.0" universalify "^0.1.0" -fs-extra@^7.0.0: +fs-extra@^7.0.0, fs-extra@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw== @@ -8559,6 +8572,13 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3: resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== +klaw-sync@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c" + integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ== + dependencies: + graceful-fs "^4.1.11" + kleur@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" @@ -10063,6 +10083,24 @@ pascalcase@^0.1.1: resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14" integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ= +patch-package@^6.2.2: + version "6.2.2" + resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.2.2.tgz#71d170d650c65c26556f0d0fbbb48d92b6cc5f39" + integrity sha512-YqScVYkVcClUY0v8fF0kWOjDYopzIM8e3bj/RU1DPeEF14+dCGm6UeOYm4jvCyxqIEQ5/eJzmbWfDWnUleFNMg== + dependencies: + "@yarnpkg/lockfile" "^1.1.0" + chalk "^2.4.2" + cross-spawn "^6.0.5" + find-yarn-workspace-root "^1.2.1" + fs-extra "^7.0.1" + is-ci "^2.0.0" + klaw-sync "^6.0.0" + minimist "^1.2.0" + rimraf "^2.6.3" + semver "^5.6.0" + slash "^2.0.0" + tmp "^0.0.33" + path-browserify@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a" @@ -11012,6 +11050,11 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po source-map "^0.6.1" supports-color "^6.1.0" +postinstall-postinstall@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3" + integrity sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ== + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -11422,10 +11465,10 @@ react-final-form@^6.5.1: dependencies: "@babel/runtime" "^7.10.0" -react-grid-layout@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.0.0.tgz#85495f1e9da2e5b9dad5ece82b3052d624be709d" - integrity sha512-0gSnLQL9dYZtAlZCjIPYIqZtswnzMhIT1uip78vs3J432FLOF6LD5PmYaRm34V/s6bEpS9cMZNMcsOanwZXBEw== +react-grid-layout@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.1.0.tgz#b71d8e94fd3f433c973121f5465a288bef3042e6" + integrity sha512-jdMsHjxOsrwdpEhCu3ghKP03M/QjR56KhgH9uCIWGd1qqAITYobAksDPk9ppERvkNaGTH+mcSuL0pmQjTcQfeg== dependencies: classnames "2.x" lodash.isequal "^4.0.0"