Toggle for query editor autocomplete (re #282)

mozilla · Feb 28, 2018 · 570e117 · 570e117
1 parent e6006ad
commit 570e117
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/client/app/components/queries/query-editor.js b/client/app/components/queries/query-editor.js
@@ -84,10 +84,11 @@ function queryEditor(QuerySnippet, $timeout) {
                 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 {
@@ -100,6 +101,10 @@ function queryEditor(QuerySnippet, $timeout) {
             $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/data-sources/show.js b/client/app/pages/data-sources/show.js
@@ -8,7 +8,6 @@ function DataSourceCtrl(
   $scope, $route, $routeParams, $http, $location, toastr,
   currentUser, DataSource,
 ) {
-
   $scope.dataSource = $route.current.locals.dataSource;
   $scope.dataSourceId = $routeParams.dataSourceId;
   $scope.types = $route.current.locals.types;

diff --git a/client/app/pages/destinations/show.js b/client/app/pages/destinations/show.js
@@ -8,7 +8,6 @@ function DestinationCtrl(
   $scope, $route, $routeParams, $http, $location, toastr,
   currentUser, Destination,
 ) {
-
   $scope.destination = $route.current.locals.destination;
   $scope.destinationId = $routeParams.destinationId;
   $scope.types = $route.current.locals.types;

diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html
@@ -134,21 +134,18 @@ <h3>
                 <query-editor query="query"
                   schema="schema"
                   syntax="dataSource.syntax"></query-editor>
-
-                <button type="button" class="btn btn-default btn-s btn__format pull-right" ng-click="formatQuery()" title="Format">
-                  <span class="zmdi zmdi-format-indent-increase"></span>
-                </button>
+                <label class="btn__format pull-right">
+                  <button type="button" class="btn btn-default btn-s pull-right" ng-click="formatQuery()" title="Format">
+                    <span class="zmdi zmdi-format-indent-increase"></span>
+                  </button>
+                  <input type="checkbox" ng-model="autocompleteQuery">
+                  <span class="fa fa-magic"></span> Autocomplete
+                </label>
               </p>
-
               <div class="editor__control">
                 <div class="row form-inline">
                   <div class="col-xs-5 text-left">
-                    <select class="form-control datasource-small" ng-disabled="!isQueryOwner || !sourceMode" ng-model="query.data_source_id" ng-change="updateDataSource()"
-                            ng-options="ds.id as ds.name for ds in dataSources"></select>
-                    <a ng-if="dataSource.options.doc_url != ''" ng-href={{dataSource.options.doc_url}}>{{dataSource.type_name}} documentation</a>
-                    <span ng-if="dataSource.options.doc_url == ''">{{dataSource.type_name}}</span>
                   </div>
-
                   <div class="col-xs-7">
                     <div class="editor__control--right">
                       <button class="btn btn-default" ng-show="canEdit" ng-click="saveQuery()" title="Save">

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();