From 983b5d89a94e3b54c62aae7b5432d6f98d84a145 Mon Sep 17 00:00:00 2001
From: Richard Westenra <rjwestenra@gmail.com>
Date: Thu, 7 Jan 2021 15:07:28 +0000
Subject: [PATCH] Update SVG-Crowbar to fix errors (#339)

We were originally using SVG-Crowbar v0.6.0, but started experiencing a critical CORS error with internal CSS in exported images, which was patched in #337. This PR updates the dependency version and reverts the patch.
---
 package-lock.json                           |  8 ++++----
 package.json                                |  4 ++--
 src/components/export-modal/export-graph.js | 20 +++++++++++++-------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1a3bf6f7ab..c0b0dba218 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26160,9 +26160,9 @@
       }
     },
     "svg-crowbar": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/svg-crowbar/-/svg-crowbar-0.6.0.tgz",
-      "integrity": "sha512-vkYwZbSUVZRqJ3KBQvzsDJaliMJL3fFmpdIUb2On1AV82qx9a6r4ZaHuAPa8wg2U+/9QhOGUXLpupj9D1n5koA=="
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/svg-crowbar/-/svg-crowbar-0.6.5.tgz",
+      "integrity": "sha512-3vQn7XoIxRa4cSCOgCiwlc3vEj17+ruc83FOO7QO2jPwbPwxOw1ynpMlgXmWUxBC0DKQMFgHFZyMsfMCIhY0Jw=="
     },
     "svg-parser": {
       "version": "2.0.4",
@@ -28704,4 +28704,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 2b3bf48bce..23a393e602 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "reselect": "^4.0.0",
     "seedrandom": "^3.0.5",
     "snyk": "^1.369.2",
-    "svg-crowbar": "^0.6.0",
+    "svg-crowbar": "^0.6.5",
     "what-input": "^5.2.10"
   },
   "peerDependencies": {
@@ -121,4 +121,4 @@
     "not op_mini all"
   ],
   "snyk": true
-}
\ No newline at end of file
+}
diff --git a/src/components/export-modal/export-graph.js b/src/components/export-modal/export-graph.js
index 29aa0bc4e6..27af177913 100644
--- a/src/components/export-modal/export-graph.js
+++ b/src/components/export-modal/export-graph.js
@@ -21,9 +21,13 @@ const exportGraph = ({ format, theme, graphSize, mockFn }) => {
   clone.classList.add('kedro', `kui-theme--${theme}`, 'pipeline-graph--export');
 
   // Reset zoom/translate
-  let width = graphSize.width + graphSize.marginx * 2;
-  let height = graphSize.height + graphSize.marginy * 2;
-  clone.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  let width, height;
+  const hasGraph = isFinite(graphSize.width) && isFinite(graphSize.height);
+  if (hasGraph) {
+    width = graphSize.width + graphSize.marginx * 2;
+    height = graphSize.height + graphSize.marginy * 2;
+    clone.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  }
   clone.querySelector('#zoom-wrapper').removeAttribute('transform');
 
   // Impose a maximum size on PNGs because otherwise they break when downloading
@@ -32,8 +36,10 @@ const exportGraph = ({ format, theme, graphSize, mockFn }) => {
     width = Math.min(width, maxWidth);
     height = Math.min(height, maxWidth * (height / width));
   }
-  clone.setAttribute('width', width);
-  clone.setAttribute('height', height);
+  if (hasGraph) {
+    clone.setAttribute('width', width);
+    clone.setAttribute('height', height);
+  }
 
   const style = document.createElement('style');
   if (format === 'svg') {
@@ -50,8 +56,8 @@ const exportGraph = ({ format, theme, graphSize, mockFn }) => {
   clone.prepend(style);
 
   // Download SVG/PNG
-  download(clone, 'kedro-pipeline');
-  // @TODO: Replace third { css: 'internal' } argument when CORS issue is fixed
+  const options = format === 'svg' ? { css: 'internal' } : undefined;
+  download(clone, 'kedro-pipeline', options);
 
   // Delete cloned SVG
   svg.parentNode.removeChild(clone);