[sqllab] add support for Jinja templating (#1426)

* [sqllab] add support for Jinja templating

* Adressing comments

* Presto macros

* Progress

* Addressing coments

caravel/assets/javascripts/SqlLab/components/HighlightedSql.jsx

@@ -1,17 +1,39 @@
 import React from 'react';
+import { Well } from 'react-bootstrap';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { github } from 'react-syntax-highlighter/dist/styles';
+import ModalTrigger from '../../components/ModalTrigger';
 
-const HighlightedSql = (props) => {
-  const sql = props.sql || '';
-  let lines = sql.split('\n');
-  if (lines.length >= props.maxLines) {
-    lines = lines.slice(0, props.maxLines);
-    lines.push('{...}');
+const defaultProps = {
+  maxWidth: 50,
+  maxLines: 5,
+  shrink: false,
+};
+
+const propTypes = {
+  sql: React.PropTypes.string.isRequired,
+  rawSql: React.PropTypes.string,
+  maxWidth: React.PropTypes.number,
+  maxLines: React.PropTypes.number,
+  shrink: React.PropTypes.bool,
+};
+
+class HighlightedSql extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalBody: null,
+    };
   }
-  let shownSql = sql;
-  if (props.shrink) {
-    shownSql = lines.map((line) => {
+  shrinkSql() {
+    const props = this.props;
+    const sql = props.sql || '';
+    let lines = sql.split('\n');
+    if (lines.length >= props.maxLines) {
+      lines = lines.slice(0, props.maxLines);
+      lines.push('{...}');
+    }
+    return lines.map((line) => {
       if (line.length > props.maxWidth) {
         return line.slice(0, props.maxWidth) + '{...}';
       }
@@ -19,26 +41,53 @@ const HighlightedSql = (props) => {
     })
     .join('\n');
   }
-  return (
-    <div>
-      <SyntaxHighlighter language="sql" style={github}>
-        {shownSql}
-      </SyntaxHighlighter>
-    </div>
-  );
-};
-
-HighlightedSql.defaultProps = {
-  maxWidth: 60,
-  maxLines: 6,
-  shrink: false,
-};
-
-HighlightedSql.propTypes = {
-  sql: React.PropTypes.string,
-  maxWidth: React.PropTypes.number,
-  maxLines: React.PropTypes.number,
-  shrink: React.PropTypes.bool,
-};
+  triggerNode() {
+    const props = this.props;
+    let shownSql = props.shrink ? this.shrinkSql(props.sql) : props.sql;
+    return (
+      <Well>
+        <SyntaxHighlighter language="sql" style={github}>
+          {shownSql}
+        </SyntaxHighlighter>
+      </Well>);
+  }
+  generateModal() {
+    const props = this.props;
+    let rawSql;
+    if (props.rawSql && props.rawSql !== this.props.sql) {
+      rawSql = (
+        <div>
+          <h4>Raw SQL</h4>
+          <SyntaxHighlighter language="sql" style={github}>
+            {props.rawSql}
+          </SyntaxHighlighter>
+        </div>
+      );
+    }
+    this.setState({
+      modalBody: (
+        <div>
+          <h4>Source SQL</h4>
+          <SyntaxHighlighter language="sql" style={github}>
+            {this.props.sql}
+          </SyntaxHighlighter>
+          {rawSql}
+        </div>
+      ),
+    });
+  }
+  render() {
+    return (
+      <ModalTrigger
+        modalTitle="SQL"
+        triggerNode={this.triggerNode()}
+        modalBody={this.state.modalBody}
+        beforeOpen={this.generateModal.bind(this)}
+      />
+    );
+  }
+}
+HighlightedSql.propTypes = propTypes;
+HighlightedSql.defaultProps = defaultProps;
 
 export default HighlightedSql;

caravel/assets/javascripts/SqlLab/components/QueryTable.jsx

@@ -90,9 +90,8 @@ class QueryTable extends React.Component {
         </button>
       );
       q.started = moment(q.startDttm).format('HH:mm:ss');
-      const source = (q.ctas) ? q.executedSql : q.sql;
       q.sql = (
-        <HighlightedSql sql={source} shrink maxWidth={100} />
+        <HighlightedSql sql={q.sql} rawSql={q.executedSql} shrink maxWidth={60} />
       );
       if (q.resultsKey) {
         q.output = (
@@ -169,7 +168,7 @@ class QueryTable extends React.Component {
       q.querylink = (
         <div style={{ width: '100px' }}>
           <a
-            href={this.getQueryLink(q.dbId, source)}
+            href={this.getQueryLink(q.dbId, q.sql)}
             className="btn btn-primary btn-xs"
           >
             <i className="fa fa-external-link" />Open in SQL Editor

caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -69,6 +69,7 @@ class SqlEditor extends React.Component {
       sql: this.props.queryEditor.sql,
       sqlEditorId: this.props.queryEditor.id,
       tab: this.props.queryEditor.title,
+      schema: this.props.queryEditor.schema,
       tempTableName: this.state.ctas,
       runAsync,
       ctas,

caravel/assets/javascripts/SqlLab/main.css

@@ -254,3 +254,7 @@ div.tablePopover:hover {
 a.Link {
     cursor: pointer;
 }
+.QueryTable .well {
+    padding: 3px 5px;
+    margin: 3px 5px;
+}