[Explore][Adhoc Metrics/ Filters] disabled message for custom sql tab…

… in druid (apache#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.
michellethomas · Jun 7, 2018 · b53b240 · b53b240
1 parent 1b4406d
commit b53b240
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 36 deletions.
diff --git 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
@@ -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
@@ -210,3 +210,10 @@
   margin-left: 3px;
   position: static;
 }
+
+.custom-sql-disabled-message {
+  color: gray;
+  font-size: 11px;
+  text-align: center;
+  margin-top: 60px;
+}