Restyling of data explorer

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

@@ -1,5 +1,6 @@
 export default Ember.Component.extend({
   classNameBindings: [':schema-table', 'open'],
+  tagName: 'li',
 
   open: Em.computed.alias('table.open'),
 

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

@@ -47,7 +47,7 @@ export default Ember.Component.extend({
         tables.push({
           name: key,
           columns: schema[key],
-          open: haveFilter
+          open: false
         });
         continue;
       }

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

@@ -10,7 +10,7 @@ export default Ember.ArrayController.extend({
   showResults: false,
   loading: false,
 
-  explain: true,
+  explain: false,
 
   saveDisabled: Ember.computed.not('selectedItem.dirty'),
   runDisabled: Ember.computed.alias('selectedItem.dirty'),
@@ -42,6 +42,21 @@ export default Ember.ArrayController.extend({
     );
   }.property(),
 
+  save() {
+    const self = this;
+    this.set('loading', true);
+    return this.get('selectedItem').save().then(function() {
+      const query = self.get('selectedItem');
+      query.markNotDirty();
+      self.set('editName', false);
+    }).catch(function(x) {
+      popupAjaxError(x);
+      throw x;
+    }).finally(function() {
+      self.set('loading', false);
+    });
+  },
+
   actions: {
     dummy() {},
 
@@ -70,6 +85,14 @@ export default Ember.ArrayController.extend({
       this.get('selectedItem').saveDefaults();
     },
 
+    save() {
+      this.save();
+    },
+
+    saverun() {
+      this.save().then(() => this.send('run'));
+    },
+
     create() {
       const self = this;
       this.set('loading', true);
@@ -82,18 +105,6 @@ export default Ember.ArrayController.extend({
       });
     },
 
-    save() {
-      const self = this;
-      this.set('loading', true);
-      this.get('selectedItem').save().then(function() {
-        const query = self.get('selectedItem');
-        query.markNotDirty();
-        self.set('editName', false);
-      }).catch(popupAjaxError).finally(function() {
-        self.set('loading', false);
-      });
-    },
-
     discard() {
       const self = this;
       this.set('loading', true);

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

@@ -1,36 +1,39 @@
 {{#if selectedItem}}
-  <div class="pull-right">
+  <div class="name">
-    <span class="schema-title">
+    {{#if editName}}
-      {{i18n "explorer.schema.title"}}<br>
+      {{text-field value=selectedItem.name}}
-      {{{i18n "explorer.schema.type_help"}}}
+    {{else}}
-    </span>
+      <h2>{{selectedItem.name}}</h2>
-    <div class="schema">
+      {{d-button action="editName" icon="pencil" class="no-text btn-small"}}
-      {{explorer-schema schema=schema}}
+    {{/if}}
-    </div>
   </div>
-  <div class="pull-left">
+  <div class="desc">
-    <div class="name">
+    {{#if controller.editName}}
-      {{#if editName}}
+      {{textarea value=selectedItem.description}}
-        {{text-field value=selectedItem.name}}
+    {{else}}
-      {{else}}
+      {{selectedItem.description}}
-        <h2>{{selectedItem.name}}</h2>
+    {{/if}}
-        {{d-button action="editName" icon="pencil" class="no-text btn-small"}}
-      {{/if}}
-    </div>
-    <div class="desc">
-      {{#if controller.editName}}
-        {{textarea value=selectedItem.description}}
-      {{else}}
-        {{selectedItem.description}}
-      {{/if}}
-    </div>
-    <div class="sql">
-      {{textarea value=selectedItem.sql}}
-    </div>
   </div>
+
+
+  <div class="query-editor">
+    <div class="editor-panel">
+      <div class="sql">
+        {{textarea value=selectedItem.sql class="grippie-target"}}
+      </div>
+    </div>
+    <div class="right-panel">
+      <div class="schema grippie-target">
+        {{explorer-schema schema=schema}}
+      </div>
+    </div>
+    <div class="grippie"></div>
+    <div class="clear"></div>
+  </div>
+
   <div class="clear"></div>
   <div class="pull-left">
-    {{d-button action="save" label="explorer.save" disabled=saveDisabled}}
+    {{d-button action="save" label="explorer.save" disabled=saveDisabled class="btn-primary"}}
     {{d-button action="download" label="explorer.export" disabled=runDisabled icon="download"}}
   </div>
   <div class="pull-right">

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

@@ -47,7 +47,15 @@
     <div class="bool-options">
       <label>{{input type="checkbox" checked=explain name="explain"}} {{i18n "explorer.explain_label"}}</label>
     </div>
-    {{d-button action="run" label="explorer.run" disabled=runDisabled}}
+    {{#if runDisabled}}
+      {{#if saveDisabled}}
+        {{d-button label="explorer.run" disabled="true" class="btn-primary"}}
+      {{else}}
+        {{d-button action="saverun" label="explorer.saverun"}}
+      {{/if}}
+    {{else}}
+      {{d-button action="run" label="explorer.run" disabled=runDisabled class="btn-primary"}}
+    {{/if}}
   </div>
 
   <hr>

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

@@ -8,28 +8,26 @@
 </div>
 <div class="schema-table-cols">
   {{#if table.open}}
+    <dl>
     {{#each table.columns as |col|}}
-      <div class="schema-table-col">
+      <div>
+      <dt class="{{if col.sensitive "sensitive"}}" title="{{if col.sensitive (i18n "explorer.schema.sensitive")}}">
         {{#if col.sensitive}}
-          <span class="schema-colname sensitive" title="{{i18n "explorer.schema.sensitive"}}">
+          <i class="fa fa-warning"></i>
-            <i class="fa fa-warning"></i>
+        {{/if}}
-            {{col.column_name}}
+        {{col.column_name}}
-          </span>
+      </dt>
-        {{else}}
+      <dd>
-          <span class="schema-colname" >
+        {{col.data_type}}
-            {{col.column_name}}
+        {{#if col.notes}}
+          <br>
+          <span class="schema-typenotes">
+            {{col.notes}}
           </span>
         {{/if}}
-        <span class="schema-type">
+      </dd>
-          {{col.data_type}}
-
-          {{#if col.notes}}
-            <span class="schema-typenotes">
-              {{col.notes}}
-            </span>
-          {{/if}}
-        </span>
       </div>
     {{/each}}
+    </dl>
   {{/if}}
 </div>

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

@@ -1,7 +1,12 @@
+<span class="schema-title">
+  {{i18n "explorer.schema.title"}} - {{{i18n "explorer.schema.type_help"}}}
+</span>
 {{text-field value=filter placeholderKey="explorer.schema.filter"}}
 {{conditional-loading-spinner condition=loading}}
 <div class="schema-container">
-  {{#each tables as |table|}}
+  <ul>
-    {{explorer-schema-onetable table=table}}
+    {{#each tables as |table|}}
-  {{/each}}
+      {{explorer-schema-onetable table=table}}
+    {{/each}}
+  </ul>
 </div>

assets/stylesheets/explorer.scss

@@ -2,6 +2,89 @@
   color: $danger;
 }
 
+.query-editor {
+  border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+  margin-bottom: 15px;
+  .editor-panel {
+    float: left;
+    width: 65%;
+
+    .sql textarea {
+      padding: 4px;
+      height: calc(400px - 8px - 2px);
+      width: 100%;
+      font-family: monospace;
+      box-shadow: none;
+      border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+      margin: 0;
+      border-radius: 0;
+      transition: initial;
+    }
+  }
+  .right-panel {
+    float: right;
+    width: calc(35% - 10px);
+    .schema {
+      border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+      height: 400px;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      color: dark-light-diff($primary, $secondary, 20%, -20%);
+      font-size: 11px;
+
+      .schema-table-name {
+        font-weight: bold;
+        border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+        padding-left: 5px;
+        .fa {
+          width: 6px;
+        }
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+      }
+      dl {
+        margin: 0;
+      }
+      dl > div > * {
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+      dl > div {
+        clear:both;
+      }
+      dt {
+        display: inline-block;
+        vertical-align: text-top;
+        overflow-wrap: break-word;
+        width: 110px;
+        margin-left: 5px;
+        &.sensitive {
+          color: $danger;
+        }
+      }
+      dd {
+        display: inline-block;
+        vertical-align: text-top;
+        width: 70px;
+        color: $tertiary;
+        margin: 0;
+        padding-left: 7px;
+        border-left: 1px dotted dark-light-diff($primary, $secondary, 80%, -20%);
+
+        .schema-typenotes {
+          color: dark-light-diff($primary, $secondary, 50%, -20%);
+          font-style: italic;
+        }
+      }
+    }
+  }
+  .grippie {
+    clear: both;
+  }
+}
+
 .query-edit {
   .name h2 {
     display: inline-block;
@@ -12,76 +95,19 @@
   &:not(.editing) .desc {
     margin: 10px 0;
   }
-  .sql textarea {
-    width: 500px;
-    height: 350px;
-    font-family: monospace;
-    border-color: $tertiary;
-  }
-  .clear { clear: both; }
 }
 
-.schema {
+.clear { clear: both; }
-  border: 1px solid black;
-  overflow-y: scroll;
-  > div {
-    width: 306px;
-  }
-  max-height: 400px;
 
-  margin-bottom: 10px;
-}
 .schema-title {
   display: block;
   margin: auto;
-  text-align: center;
 }
 .schema input {
   padding: 4px;
   margin: 3px;
   width: calc(100% - 7px - 7px - 1px);
 }
-.schema .schema-table:first-child {
-  border-top: 1px solid;
-}
-.schema-table-name {
-  background: dark-light-diff($primary, $secondary, 80%, -20%);
-  border-color: dark-light-diff($primary, $secondary, 60%, -20%);
-  font-weight: bold;
-  border-bottom: 1px solid;
-  padding-left: 5px;
-}
-.schema-table-cols {
-
-}
-.schema-table-col {
-  background: $secondary;
-  border-color: dark-light-diff($primary, $secondary, 60%, -20%);
-  border-bottom: 1px solid;
-  padding-left: 10px;
-}
-.schema-colname {
-  font-weight: bold;
-
-  display: inline-block;
-  width: 150px;
-  word-wrap: break-word;
-  vertical-align: text-top;
-  background: dark-light-diff($primary, $secondary, 98%, -20%);
-
-  &.sensitive {
-    color: $danger;
-  }
-}
-.schema-type {
-  display: inline-block;
-  max-width: 140px;
-  vertical-align: text-top;
-}
-.schema-typenotes {
-  color: dark-light-diff($primary, $secondary, 50%, -20%);
-  font-style: italic;
-}
 
 .query-params {
   border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);

config/locales/client.en.yml

@@ -32,14 +32,15 @@ en:
         title: "Database Schema"
         filter: "Search..."
         sensitive: "The contents of this column may contain particularly sensitive or private information."
-        type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html' target='_blank'>Types explanation</a>"
+        type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html#DATATYPE-TABLE' target='_blank'>Types</a>"
       export: "Export"
       save: "Save Changes"
+      saverun: "Save Changes and Run Query"
       run: "Run Query"
       undo: "Revert"
       delete: "Delete"
       recover: "Undelete Query"
-      download_json: "Save Query Results"
+      download_json: "Download Results"
       run_time: "Query completed in {{value}} ms."
       column: "Column {{number}}"
       explain_label: "Include query plan?"