Allow expanding/collapsing the schema view

assets/javascripts/discourse/components/explorer-schema.js.es6

@@ -1,5 +1,14 @@
 export default Ember.Component.extend({
 
+  actions: {
+    expandSchema() {
+      this.set('hideSchema', false);
+    },
+    collapseSchema() {
+      this.set('hideSchema', true);
+    }
+  },
+
   transformedSchema: function() {
     const schema = this.get('schema');
 

assets/javascripts/discourse/controllers/admin-plugins-explorer.js.es6

@@ -8,6 +8,7 @@ export default Ember.ArrayController.extend({
   queryParams: { selectedQueryId: "id" },
   selectedQueryId: null,
   showResults: false,
+  hideSchema: false,
   loading: false,
 
   explain: false,

assets/javascripts/discourse/templates/admin/plugins-explorer.hbs

@@ -44,10 +44,10 @@
       </div>
 
 
-      <div class="query-editor">
+      <div class="query-editor {{if hideSchema "no-schema"}}">
         <div class="right-panel">
           <div class="schema grippie-target">
-            {{explorer-schema schema=schema}}
+            {{explorer-schema schema=schema hideSchema=hideSchema}}
           </div>
         </div>
         <div class="editor-panel">

assets/javascripts/discourse/templates/components/explorer-schema.hbs

@@ -1,9 +1,15 @@
-{{text-field value=filter placeholderKey="explorer.schema.filter"}}
-{{conditional-loading-spinner condition=loading}}
-<div class="schema-container">
-  <ul>
-    {{#each tables as |table|}}
-      {{explorer-schema-onetable table=table}}
-    {{/each}}
-  </ul>
+{{#if hideSchema}}
+  {{d-button action="expandSchema" icon="chevron-left" class="no-text unhide"}}
+{{/if}}
+<div class="{{if hideSchema "hidden"}}">
+  {{text-field value=filter placeholderKey="explorer.schema.filter"}}
+  {{d-button action="collapseSchema" icon="chevron-right" class="no-text btn-small"}}
+  {{conditional-loading-spinner condition=loading}}
+  <div class="schema-container">
+    <ul>
+      {{#each tables as |table|}}
+        {{explorer-schema-onetable table=table}}
+      {{/each}}
+    </ul>
+  </div>
 </div>

assets/javascripts/discourse/views/admin-plugins-explorer.js.es6

@@ -1,5 +1,11 @@
 
 export default Ember.View.extend({
+
+  _onHideSchema: function() {
+    Em.Logger.log('resizing');
+    this.appEvents.trigger('ace:resize');
+  }.observes('controller.hideSchema'),
+
   _bindGrippie: function() {
     const $editPane = this.$().find('.query-editor');
     if (!$editPane.length) {

assets/stylesheets/explorer.scss

@@ -6,8 +6,28 @@
   border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
   margin-bottom: 15px;
   .editor-panel {
-    float: left;
     width: 65%;
+  }
+  .right-panel {
+    width: 35%;
+  }
+  &.no-schema {
+    .editor-panel {
+      width: 100%;
+    }
+    .right-panel {
+      width: 0;
+      button.unhide {
+        position: absolute;
+        margin-left: -31px;
+        z-index: 1;
+      }
+    }
+  }
+
+
+  .editor-panel {
+    float: left;
     .ace-wrapper {
       position: relative;
       height: 400px;
@@ -23,7 +43,6 @@
   }
   .right-panel {
     float: right;
-    width: calc(35% - 0px);
     .schema {
       border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
       height: 400px;
@@ -32,6 +51,12 @@
       color: dark-light-diff($primary, $secondary, 20%, -20%);
       font-size: 11px;
 
+      input {
+        padding: 4px;
+        margin: 3px;
+        // 100% - padding + margin * 2 - border - button - buttonborder
+        width: calc(100% - 14px - 1px - 22px - 2px);
+      }
       .schema-table-name {
         font-weight: bold;
         border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
@@ -127,11 +152,6 @@
   display: block;
   margin: auto;
 }
-.schema input {
-  padding: 4px;
-  margin: 3px;
-  width: calc(100% - 7px - 7px - 1px);
-}
 
 .query-params {
   border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);