Toggle for query editor autocomplete (re #282)

mozilla · Jan 18, 2018 · 08af871 · 08af871
1 parent 2868053
commit 08af871
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/client/app/components/queries/query-editor.js b/client/app/components/queries/query-editor.js
@@ -118,10 +118,11 @@ function queryEditor(QuerySnippet) {
                 if (newSchema === undefined) {
                   return;
                 }
-                const tokensCount = newSchema.reduce((totalLength, table) => totalLength + table.columns.length, 0);
-                // If there are too many tokens we disable live autocomplete,
-                // as it makes typing slower.
-                if (tokensCount > 5000) {
+                const tokensCount =
+                  newSchema.reduce((totalLength, table) => totalLength + table.columns.length, 0);
+                // If there are too many tokens or if it's requested via the UI
+                // we disable live autocomplete, as it makes typing slower.
+                if (tokensCount > 5000 || !$scope.$parent.autocompleteQuery) {
                   editor.setOption('enableLiveAutocompletion', false);
                   editor.setOption('enableBasicAutocompletion', false);
                 } else {
@@ -134,6 +135,10 @@ function queryEditor(QuerySnippet) {
             $scope.$parent.$on('angular-resizable.resizing', () => {
               editor.resize();
             });
+            $scope.$parent.$watch('autocompleteQuery', () => {
+              editor.setOption('enableLiveAutocompletion', $scope.$parent.autocompleteQuery);
+              editor.setOption('enableBasicAutocompletion', $scope.$parent.autocompleteQuery);
+            });
 
             editor.focus();
           },

diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html
@@ -95,6 +95,22 @@ <h3>
           </schema-browser>
         </div>
 
+        <div class="pull-right">
+          <div class="btn-group hidden-print visible-sm-inline-block visible-xs-inline-block visible-md-inline-block" role="group" uib-dropdown>
+            <button class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle>
+              <span class="zmdi zmdi-format-indent-increase"></span>
+            </button>
+            <ul class="dropdown-menu pull-right" uib-dropdown-menu>
+              <li ng-if="!autocompleteQuery"><a ng-click="toggleAutocompleteQuery()">Enable Autocomplete</a></li>
+              <li ng-if="autocompleteQuery"><a ng-click="toggleAutocompleteQuery()">Disable Autocomplete</a></li>
+              <li><a ng-click="formatQuery()">Format query</a></li>
+            </ul>
+          </div>
+          <label class="visible-lg-inline-block">
+            <input type="checkbox" ng-model="autocompleteQuery">
+            <span class="fa fa-magic"></span> Autocomplete
+          </label>
+          <button type="button" class="btn btn-default btn-s visible-lg-inline-block" ng-click="formatQuery()">
         <div class="col-md-9 p-r-0" style="height:100%;">
           <div class="editor__control">
             <div class="form-inline">

diff --git a/client/app/pages/queries/source-view.js b/client/app/pages/queries/source-view.js
@@ -71,6 +71,11 @@ function QuerySourceCtrl(
       .catch(error => toastr.error(error));
   };
 
+  $scope.autocompleteQuery = true;
+  $scope.toggleAutocompleteQuery = () => {
+    $scope.autocompleteQuery = !$scope.autocompleteQuery;
+  };
+
   $scope.duplicateQuery = () => {
     Query.fork({ id: $scope.query.id }, (newQuery) => {
       $location.url(newQuery.getSourceLink()).replace();