add 'refresh schema' button to schema-browser

client/app/assets/css/redash.css

@@ -415,6 +415,16 @@ counter-renderer counter-name {
   background-color: white;
 }
 
+.schema-control {
+  display: flex;
+  padding: 5px 0;
+}
+
+.schema-control .form-control {
+  height: 30px;
+  margin-right: 5px;
+}
+
 .schema-browser {
   height: calc(100% - 45px);
   overflow-y: auto;

client/app/pages/queries/query.html

@@ -85,6 +85,7 @@
       <div class="row bg-white p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
         <schema-browser class="col-md-3 hidden-sm hidden-xs schema-container"
                         schema="schema"
+                        on-refresh="refreshSchema()"
                         ng-show="hasSchema">
         </schema-browser>
 

client/app/pages/queries/schema-browser.html

@@ -1,6 +1,11 @@
 <div class="schema-container">
-  <div class="p-t-5 p-b-5">
+  <div class="schema-control">
     <input type="text" placeholder="Search schema..." class="form-control" ng-model="$ctrl.schemaFilter">
+    <button class="btn btn-default"
+            title="Refresh Schema"
+            ng-click="$ctrl.onRefresh()">
+      <span class="zmdi zmdi-refresh"></span>
+    </button>
   </div>
 
   <div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">

client/app/pages/queries/schema-browser.js

@@ -20,6 +20,7 @@ function SchemaBrowserCtrl($scope) {
 const SchemaBrowser = {
   bindings: {
     schema: '<',
+    onRefresh: '&',
   },
   controller: SchemaBrowserCtrl,
   template,

client/app/pages/queries/view.js

@@ -43,26 +43,31 @@ function QueryViewCtrl($scope, Events, $route, $routeParams, $http, $location, $
     return dataSourceId;
   }
 
-  function updateSchema() {
+  function toggleSchemaBrowser(hasSchema) {
-    $scope.hasSchema = false;
+    $scope.hasSchema = hasSchema;
-    $scope.editorSize = 'col-md-12';
+    $scope.editorSize = hasSchema ? 'col-md-9' : 'col-md-12';
-    DataSource.getSchema({ id: $scope.query.data_source_id }, (data) => {
+  }
-      if (data && data.length > 0) {
+
+  function getSchema(refresh = undefined) {
+    DataSource.getSchema({ id: $scope.query.data_source_id, refresh }, (data) => {
+      const hasSchema = data && (data.length > 0);
+      if (hasSchema) {
         $scope.schema = data;
         data.forEach((table) => {
           table.collapsed = true;
         });
-
-        $scope.editorSize = 'col-md-9';
-        $scope.hasSchema = true;
-      } else {
-        $scope.schema = undefined;
-        $scope.hasSchema = false;
-        $scope.editorSize = 'col-md-12';
       }
+      toggleSchemaBrowser(hasSchema);
     });
   }
 
+  function updateSchema() {
+    toggleSchemaBrowser(false);
+    getSchema();
+  }
+
+  $scope.refreshSchema = () => getSchema(true);
+
   function updateDataSources(dataSources) {
     // Filter out data sources the user can't query (or used by current query):
     $scope.dataSources = dataSources.filter(dataSource =>

client/app/services/data-source.js

@@ -3,7 +3,7 @@ function DataSource($resource) {
     get: { method: 'GET', cache: false, isArray: false },
     query: { method: 'GET', cache: false, isArray: true },
     test: { method: 'POST', cache: false, isArray: false, url: 'api/data_sources/:id/test' },
-    getSchema: { method: 'GET', cache: true, isArray: true, url: 'api/data_sources/:id/schema' },
+    getSchema: { method: 'GET', cache: false, isArray: true, url: 'api/data_sources/:id/schema' },
   };
 
   const DataSourceResource = $resource('api/data_sources/:id', { id: '@id' }, actions);