add compare query version support (re getredash#7)

client/app/pages/queries/compare-query-dialog.css

@@ -0,0 +1,54 @@
+/* Compare Query Version container */
+/* Offers slight visual improvement (alignment) to modern UAs */
+.compare-query-version {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.diff-removed {
+  background-color: rgba(208, 2, 27, 0.3);
+}
+
+.diff-added {
+  background-color: rgba(65, 117, 5, 0.3);
+}
+
+.query-diff-container span {
+  display: inline-block;
+  border-radius: 3px;
+  line-height: 20px;
+  vertical-align: middle;
+  margin: 0 5px 0 0;
+}
+
+.query-diff-container > div:not(.compare-query-version-controls) {
+  float: left;
+  width: calc(50% - 5px);
+  margin: 0 10px 0 0;
+}
+
+.compare-query-version {
+  background-color: #f5f5f5;
+  padding: 5px;
+  border: 1px solid #ccc;
+  margin-right: 15px;
+  border-radius: 3px;
+}
+
+.diff-content {
+  border: 1px solid #ccc;
+  background-color: #f5f5f5;
+  border-radius: 3px;
+  padding: 15px;
+}
+
+.query-diff-container > div:last-child {
+  margin: 0;
+}
+
+.compare-query-version-controls {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+}

client/app/pages/queries/compare-query-dialog.html

@@ -0,0 +1,33 @@
+<div class="modal-header">
+    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.close()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+    <h4 class="modal-title">Compare Query</h4>
+</div>
+<div class="modal-body query-diff-container">
+    <div class="compare-query-version-controls">
+        <div class="compare-query-version">
+            <span>Compare current version to</span>
+            <select id="version-choice" ng-model="compareQueryVersion" ng-change="$ctrl.compareQueries()">
+                <option ng-repeat="version in $ctrl.versions.slice(0, $ctrl.versions.length-1)" value="{{version.object_version}}">Version {{version.object_version}}</option>
+            </select>
+        </div>
+        <div class="compare-query-revert-wrapper hidden"><a ng-click="$ctrl.revertQuery()" class="btn btn-default">Revert to version {{$ctrl.previousQueryVersion + 1}}</a></div>
+    </div>
+    <div>
+        <h5>Current Version {{$ctrl.currentQuery.version}}</h5>
+        <div class="diff-content">
+            <p id="current-query-diff">
+                <span ng-class="{'diff-added': part.added, 'diff-removed': part.removed}" ng-repeat="part in $ctrl.currentDiff">
+                    {{part.value}}
+                </span>
+            </p>
+        </div>
+    </div>
+    <div>
+        <h5>Previous Version {{$ctrl.previousQueryVersion + 1}}</h5>
+        <div class="diff-content">
+            <p>{{$ctrl.previousQuery}}</p>
+        </div>
+    </div>
+</div>

client/app/pages/queries/compare-query-dialog.js

@@ -0,0 +1,52 @@
+import * as jsDiff from 'diff';
+import template from './compare-query-dialog.html';
+import './compare-query-dialog.css';
+
+const CompareQueryDialog = {
+  controller: ['clientConfig', '$http', function doCompare(clientConfig, $http) {
+    this.currentQuery = this.resolve.query;
+
+    this.previousQuery = '';
+    this.currentDiff = [];
+    this.previousDiff = [];
+    this.versions = [];
+    this.previousQueryVersion = this.currentQuery.version - 2; // due to 0-indexed versions[]
+
+    this.compareQueries = (isInitialLoad) => {
+      if (!isInitialLoad) {
+        this.previousQueryVersion = document.getElementById('version-choice').value - 1; // due to 0-indexed versions[]
+      }
+
+      this.previousQuery = this.versions[this.previousQueryVersion].change.query.current;
+      this.currentDiff = jsDiff.diffChars(this.previousQuery, this.currentQuery.query);
+      document.querySelector('.compare-query-revert-wrapper').classList.remove('hidden');
+    };
+
+    this.revertQuery = () => {
+      this.resolve.query.query = this.previousQuery;
+      this.resolve.saveQuery();
+
+      // Close modal.
+      this.dismiss();
+    };
+
+    $http.get(`/api/queries/${this.currentQuery.id}/version`).then((response) => {
+      this.versions = response.data;
+      this.compareQueries(true);
+    });
+  }],
+  scope: {
+    query: '=',
+    saveQuery: '<',
+  },
+  bindings: {
+    resolve: '<',
+    close: '&',
+    dismiss: '&',
+  },
+  template,
+};
+
+export default function (ngModule) {
+  ngModule.component('compareQueryDialog', CompareQueryDialog);
+}

client/app/pages/queries/query.html

@@ -125,12 +125,16 @@ <h3>
                     <li ng-if="!query.is_archived && query.id != undefined && (isQueryOwner || currentUser.hasPermission('admin')) && showPermissionsControl"><a ng-click="showManagePermissionsModal()">Manage Permissions</a></li>
                     <li ng-if="!query.is_draft && query.id != undefined && (isQueryOwner || currentUser.hasPermission('admin'))"><a ng-click="togglePublished()">Unpublish Query</a></li>
                     <li ng-if="query.id != undefined"><a ng-click="showApiKey()">Show API Key</a></li>
+                    <li ng-if="query.id && (isQueryOwner || currentUser.hasPermission('admin'))">
+                      <a ng-click="compareQueryVersion()">Query Versions</a>
+                    </li>
                   </ul>
                 </div>
               </div>
             </div>
             <p style="height:calc(100% - 40px);">
               <query-editor query="query"
+                            id="query-source"
                             schema="schema"
                             syntax="dataSource.syntax"></query-editor>
             </p>

client/app/pages/queries/view.js

@@ -267,6 +267,21 @@ function QueryViewCtrl(
     $location.hash(visualization.id);
   };
 
+  $scope.compareQueryVersion = () => {
+    if (!$scope.query.query) {
+      return;
+    }
+
+    $uibModal.open({
+      windowClass: 'modal-xl',
+      component: 'compareQueryDialog',
+      resolve: {
+        query: $scope.query,
+        saveQuery: () => $scope.saveQuery,
+      },
+    });
+  };
+
   $scope.$watch('query.name', () => {
     Title.set($scope.query.name);
   });