From ca0bcfa71276556291709fff102486ff3e65080c Mon Sep 17 00:00:00 2001
From: Gabe Lyons <gabe.lyons@airbnb.com>
Date: Thu, 7 Jun 2018 16:16:46 -0700
Subject: [PATCH] [Explore][Adhoc Metrics/ Filters] disabled message for custom
 sql tab in druid (#5162)

* added disabled message for custom sql tab on druid datasources

* Update AdhocFilterEditPopover.jsx

Fixing indentation.

* Update AdhocMetricEditPopover.jsx

Fixing indent.

* Update AdhocFilterEditPopover.jsx

Fixing indentation.

* Update AdhocMetricEditPopover.jsx

Fixing indentation.

(cherry picked from commit b53b240710b3b1a9c4965a53bef1c0cd58a1a4e5)
---
 .../components/AdhocFilterEditPopover.jsx     | 33 +++++++-------
 .../components/AdhocMetricEditPopover.jsx     | 45 ++++++++++---------
 superset/assets/src/explore/main.css          |  7 +++
 3 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx b/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
index 103ce2272e77b..c8c0726cf980f 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
@@ -123,21 +123,24 @@ export default class AdhocFilterEditPopover extends React.Component {
               onHeightChange={this.adjustHeight}
             />
           </Tab>
-          {
-            (!this.props.datasource || this.props.datasource.type !== 'druid') &&
-            <Tab
-              className="adhoc-filter-edit-tab"
-              eventKey={EXPRESSION_TYPES.SQL}
-              title="Custom SQL"
-            >
-              <AdhocFilterEditPopoverSqlTabContent
-                adhocFilter={this.state.adhocFilter}
-                onChange={this.onAdhocFilterChange}
-                options={this.props.options}
-                height={this.state.height}
-              />
-            </Tab>
-          }
+          <Tab
+            className="adhoc-filter-edit-tab"
+            eventKey={EXPRESSION_TYPES.SQL}
+            title="Custom SQL"
+          >
+            {
+              (!this.props.datasource || this.props.datasource.type !== 'druid') ?
+                <AdhocFilterEditPopoverSqlTabContent
+                  adhocFilter={this.state.adhocFilter}
+                  onChange={this.onAdhocFilterChange}
+                  options={this.props.options}
+                  height={this.state.height}
+                /> :
+                <div className="custom-sql-disabled-message">
+                  Custom SQL Filters are not available on druid datasources
+                </div>
+            }
+          </Tab>
         </Tabs>
         <div>
           <Button
diff --git a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
index 5611a32c13660..344e22a49c2dc 100644
--- a/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocMetricEditPopover.jsx
@@ -225,27 +225,30 @@ export default class AdhocMetricEditPopover extends React.Component {
               <OnPasteSelect {...this.selectProps} {...aggregateSelectProps} />
             </FormGroup>
           </Tab>
-          {
-            this.props.datasourceType !== 'druid' &&
-            <Tab className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SQL} title="Custom SQL">
-              <FormGroup>
-                <AceEditor
-                  ref={this.handleAceEditorRef}
-                  mode="sql"
-                  theme="github"
-                  height={(this.state.height - 43) + 'px'}
-                  onChange={this.onSqlExpressionChange}
-                  width="100%"
-                  showGutter={false}
-                  value={adhocMetric.sqlExpression || adhocMetric.translateToSql()}
-                  editorProps={{ $blockScrolling: true }}
-                  enableLiveAutocompletion
-                  className="adhoc-filter-sql-editor"
-                  wrapEnabled
-                />
-              </FormGroup>
-            </Tab>
-          }
+          <Tab className="adhoc-metric-edit-tab" eventKey={EXPRESSION_TYPES.SQL} title="Custom SQL">
+            {
+              this.props.datasourceType !== 'druid' ?
+                <FormGroup>
+                  <AceEditor
+                    ref={this.handleAceEditorRef}
+                    mode="sql"
+                    theme="github"
+                    height={(this.state.height - 43) + 'px'}
+                    onChange={this.onSqlExpressionChange}
+                    width="100%"
+                    showGutter={false}
+                    value={adhocMetric.sqlExpression || adhocMetric.translateToSql()}
+                    editorProps={{ $blockScrolling: true }}
+                    enableLiveAutocompletion
+                    className="adhoc-filter-sql-editor"
+                    wrapEnabled
+                  />
+                </FormGroup> :
+                <div className="custom-sql-disabled-message">
+                  Custom SQL Metrics are not available on druid datasources
+                </div>
+            }
+          </Tab>
         </Tabs>
         <div>
           <Button
diff --git a/superset/assets/src/explore/main.css b/superset/assets/src/explore/main.css
index 40047fa9ccabd..9ab50882dc95a 100644
--- a/superset/assets/src/explore/main.css
+++ b/superset/assets/src/explore/main.css
@@ -210,3 +210,10 @@
   margin-left: 3px;
   position: static;
 }
+
+.custom-sql-disabled-message {
+  color: gray;
+  font-size: 11px;
+  text-align: center;
+  margin-top: 60px;
+}