From 336edfc93f32b902adb505593bb3890465b446e0 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 31 Oct 2021 09:40:54 +0100
Subject: [PATCH] compare DB: diff view

---
 packages/web/package.json                    |  6 ++-
 packages/web/public/index.html               |  1 +
 packages/web/rollup.config.js                |  4 ++
 packages/web/src/elements/DiffView.svelte    | 37 +++++++++++++++
 packages/web/src/tabs/CompareModelTab.svelte | 22 +++++++--
 packages/web/src/utility/computeDiffRows.ts  |  7 +++
 yarn.lock                                    | 47 +++++++++++++++++---
 7 files changed, 112 insertions(+), 12 deletions(-)
 create mode 100644 packages/web/src/elements/DiffView.svelte

diff --git a/packages/web/package.json b/packages/web/package.json
index 6fb18471..3d94243f 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -49,5 +49,9 @@
     "tslib": "^2.3.1",
     "typescript": "^4.4.3",
     "uuid": "^3.4.0"
+  },
+  "dependencies": {
+    "diff": "^5.0.0",
+    "diff2html": "^3.4.13"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/web/public/index.html b/packages/web/public/index.html
index 1a4b3dfc..5d2c9c41 100644
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -19,6 +19,7 @@
 	<link rel='stylesheet' href='icon-colors.css'>
 	<link rel='stylesheet' href='build/bundle.css'>
 	<link rel='stylesheet' href='build/fonts/materialdesignicons.css'>
+	<link rel='stylesheet' href='build/diff2html.min.css'>
 
 	<script defer src='build/bundle.js'></script>
 
diff --git a/packages/web/rollup.config.js b/packages/web/rollup.config.js
index bd142e58..19ab3d99 100644
--- a/packages/web/rollup.config.js
+++ b/packages/web/rollup.config.js
@@ -51,6 +51,10 @@ export default {
           src: '../../node_modules/@mdi/font/fonts/*',
           dest: 'public/build/fonts/',
         },
+        {
+          src: '../../node_modules/diff2html/bundles/css/diff2html.min.css',
+          dest: 'public/build/',
+        },
       ],
     }),
 
diff --git a/packages/web/src/elements/DiffView.svelte b/packages/web/src/elements/DiffView.svelte
new file mode 100644
index 00000000..3a1cfa25
--- /dev/null
+++ b/packages/web/src/elements/DiffView.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { createTwoFilesPatch } from 'diff';
+  import { html, parse } from 'diff2html';
+
+  export let leftText;
+  export let rightText;
+  export let leftTitle;
+  export let rightTitle;
+
+  $: unifiedDiff = createTwoFilesPatch(leftTitle, rightTitle, leftText, rightText, '', '');
+  $: diffJson = parse(unifiedDiff);
+  // $: diffHtml = html(diffJson, { outputFormat: 'side-by-side', drawFileList: false });
+  $: diffHtml = html(diffJson, { drawFileList: false });
+</script>
+
+<div class="root">
+  {@html diffHtml}
+</div>
+
+<style>
+  .root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: scroll;
+  }
+  /* :global(.d2h-file-diff) {
+    overflow-y: scroll;
+    max-height: 300px;
+  }
+
+  :global(.d2h-code-wrapper) {
+    position: relative;
+  } */
+</style>
diff --git a/packages/web/src/tabs/CompareModelTab.svelte b/packages/web/src/tabs/CompareModelTab.svelte
index f8e9efac..7fc9308a 100644
--- a/packages/web/src/tabs/CompareModelTab.svelte
+++ b/packages/web/src/tabs/CompareModelTab.svelte
@@ -7,6 +7,7 @@
 
   import _ from 'lodash';
   import { derived, writable } from 'svelte/store';
+  import DiffView from '../elements/DiffView.svelte';
   import ScrollableTableControl from '../elements/ScrollableTableControl.svelte';
   import TabControl from '../elements/TabControl.svelte';
   import TableControl from '../elements/TableControl.svelte';
@@ -19,7 +20,7 @@
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
   import { extensions } from '../stores';
-  import { computeDbDiffRows, computeTableDiffColumns } from '../utility/computeDiffRows';
+  import { computeDbDiffRows, computeTableDiffColumns, getCreateTableScript } from '../utility/computeDiffRows';
   import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
 
   export let tabid;
@@ -144,20 +145,33 @@
       <TabControl
         tabs={[
           {
-            label: 'SQL script',
+            label: 'DDL',
             slot: 1,
           },
           {
-            label: 'Columns',
+            label: 'SQL script',
             slot: 2,
           },
+          {
+            label: 'Columns',
+            slot: 3,
+          },
         ]}
       >
         <svelte:fragment slot="1">
-          <SqlEditor readOnly value={sqlPreview} />
+          <DiffView
+            leftTitle={diffRows[pairIndex]?.source?.pureName}
+            rightTitle={diffRows[pairIndex]?.source?.pureName}
+            leftText={getCreateTableScript(diffRows[pairIndex]?.source, driver)}
+            rightText={getCreateTableScript(diffRows[pairIndex]?.target, driver)}
+          />
         </svelte:fragment>
 
         <svelte:fragment slot="2">
+          <SqlEditor readOnly value={sqlPreview} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="3">
           <ScrollableTableControl
             rows={diffColumns}
             disableFocusOutline
diff --git a/packages/web/src/utility/computeDiffRows.ts b/packages/web/src/utility/computeDiffRows.ts
index 73918e9b..0903242a 100644
--- a/packages/web/src/utility/computeDiffRows.ts
+++ b/packages/web/src/utility/computeDiffRows.ts
@@ -68,3 +68,10 @@ export function computeTableDiffColumns(
     targetNotNull: row?.target?.notNull,
   }));
 }
+
+export function getCreateTableScript(table: TableInfo, driver: EngineDriver) {
+  if (!table || !driver) return '';
+  const dmp = driver.createDumper();
+  dmp.createTable(table);
+  return dmp.s;
+}
diff --git a/yarn.lock b/yarn.lock
index 69e387b0..0489be31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3412,6 +3412,21 @@ diff-sequences@^27.0.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.1.tgz#9c9801d52ed5f576ff0a20e3022a13ee6e297e7c"
   integrity sha512-XPLijkfJUh/PIBnfkcSHgvD6tlYixmcMAn3osTk6jt+H0v/mgURto1XUiD9DKuGX5NDoVS6dSlA23gd9FUaCFg==
 
+diff2html@^3.4.13:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/diff2html/-/diff2html-3.4.13.tgz#a19fb9e47b05b7ed573590d57a45e7a132d3dd9c"
+  integrity sha512-IQb+P3aDVjjctcpRF089E9Uxjb6JInu/1SDklLaw2KapdwXKl3xd87mieweR2h6hNvdyAlylMHRrwK8M4oV1Sw==
+  dependencies:
+    diff "5.0.0"
+    hogan.js "3.0.2"
+  optionalDependencies:
+    highlight.js "11.2.0"
+
+diff@5.0.0, diff@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
+  integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -4862,6 +4877,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+highlight.js@11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.2.0.tgz#a7e3b8c1fdc4f0538b93b2dc2ddd53a40c6ab0f0"
+  integrity sha512-JOySjtOEcyG8s4MLR2MNbLUyaXqUunmSnL2kdV/KuGJOmHZuAR5xC54Ko7goAXBWNhf09Vy3B+U7vR62UZ/0iw==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4871,6 +4891,14 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hogan.js@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
+  integrity sha1-TNnhq9QpQUbnZ55B14mHMrAse/0=
+  dependencies:
+    mkdirp "0.3.0"
+    nopt "1.0.10"
+
 homedir-polyfill@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -7267,6 +7295,11 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
+mkdirp@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
+  integrity sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=
+
 mkdirp@0.x, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -7626,6 +7659,13 @@ noop-logger@^0.1.1:
   resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
   integrity sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=
 
+nopt@1.0.10, nopt@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
+  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  dependencies:
+    abbrev "1"
+
 nopt@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
@@ -7633,13 +7673,6 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
-nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"