feat(metrics): Provide override for disabling ad-hoc metrics (#17202)

Co-authored-by: John Bodley <john.bodley@airbnb.com>
apache · Jan 10, 2022 · 2982bac · 2982bac
1 parent bbdae74
commit 2982bac
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 133 deletions.
diff --git a/superset-frontend/src/explore/components/ExploreContentPopover.tsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
@@ -29,10 +29,4 @@ export const ExplorePopoverContent = styled.div`
   .filter-sql-editor {
     border: ${({ theme }) => theme.colors.grayscale.light2} solid thin;
   }
-  .custom-sql-disabled-message {
-    color: ${({ theme }) => theme.colors.grayscale.light1};
-    font-size: ${({ theme }) => theme.typography.sizes.xs}px;
-    text-align: center;
-    margin-top: ${({ theme }) => theme.gridUnit * 15}px;
-  }
 `;
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
@@ -284,7 +284,7 @@ export const DndMetricSelect = (props: any) => {
         columns={props.columns}
         savedMetrics={props.savedMetrics}
         savedMetricsOptions={getSavedMetricOptionsForMetric(index)}
-        datasourceType={props.datasourceType}
+        datasource={props.datasource}
         onMoveLabel={moveLabel}
         onDropLabel={handleDropLabel}
         type={`${DndItemType.AdhocMetricOption}_${props.name}_${props.label}`}
@@ -299,7 +299,7 @@ export const DndMetricSelect = (props: any) => {
       onMetricEdit,
       onRemoveMetric,
       props.columns,
-      props.datasourceType,
+      props.datasource,
       props.label,
       props.name,
       props.savedMetrics,
@@ -396,7 +396,7 @@ export const DndMetricSelect = (props: any) => {
         columns={props.columns}
         savedMetricsOptions={newSavedMetricOptions}
         savedMetric={EMPTY_OBJECT as savedMetricType}
-        datasourceType={props.datasourceType}
+        datasource={props.datasource}
         isControlledComponent
         visible={newMetricPopoverVisible}
         togglePopover={togglePopover}

diff --git a/...t-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/...t-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from 'src/components/Button';
+import { Tooltip } from 'src/components/Tooltip';
 import { styled, t } from '@superset-ui/core';
 
 import ErrorBoundary from 'src/components/ErrorBoundary';
@@ -56,11 +57,6 @@ const ResizeIcon = styled.i`
 
 const startingWidth = 320;
 const startingHeight = 240;
-const SectionWrapper = styled.div`
-  .ant-select {
-    margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
-  }
-`;
 
 const FilterPopoverContentContainer = styled.div`
   .adhoc-filter-edit-tabs > .nav-tabs {
@@ -173,90 +169,78 @@ export default class AdhocFilterEditPopover extends React.Component {
       onResize,
       datasource,
       partitionColumn,
-      sections = ['SIMPLE', 'CUSTOM_SQL'],
       theme,
       operators,
       ...popoverProps
     } = this.props;
 
     const { adhocFilter } = this.state;
-
-    const resultSections =
-      datasource?.type === 'druid'
-        ? sections.filter(s => s !== 'CUSTOM_SQL')
-        : sections;
-
     const stateIsValid = adhocFilter.isValid();
     const hasUnsavedChanges = !adhocFilter.equals(propsAdhocFilter);
 
-    const sectionRenders = {};
-
-    sectionRenders.CUSTOM_SQL = (
-      <ErrorBoundary>
-        <AdhocFilterEditPopoverSqlTabContent
-          adhocFilter={this.state.adhocFilter}
-          onChange={this.onAdhocFilterChange}
-          options={this.props.options}
-          height={this.state.height}
-          activeKey={this.state.activeKey}
-        />
-      </ErrorBoundary>
-    );
-
-    sectionRenders.SIMPLE = (
-      <ErrorBoundary>
-        <AdhocFilterEditPopoverSimpleTabContent
-          operators={operators}
-          adhocFilter={this.state.adhocFilter}
-          onChange={this.onAdhocFilterChange}
-          options={options}
-          datasource={datasource}
-          onHeightChange={this.adjustHeight}
-          partitionColumn={partitionColumn}
-          popoverRef={this.popoverContentRef.current}
-        />
-      </ErrorBoundary>
-    );
-
     return (
       <FilterPopoverContentContainer
         id="filter-edit-popover"
         {...popoverProps}
         data-test="filter-edit-popover"
         ref={this.popoverContentRef}
       >
-        {resultSections.length > 1 ? (
-          <Tabs
-            id="adhoc-filter-edit-tabs"
-            defaultActiveKey={adhocFilter.expressionType}
-            className="adhoc-filter-edit-tabs"
-            data-test="adhoc-filter-edit-tabs"
-            style={{ minHeight: this.state.height, width: this.state.width }}
-            allowOverflow
-            onChange={this.onTabChange}
+        <Tabs
+          id="adhoc-filter-edit-tabs"
+          defaultActiveKey={adhocFilter.expressionType}
+          className="adhoc-filter-edit-tabs"
+          data-test="adhoc-filter-edit-tabs"
+          style={{ minHeight: this.state.height, width: this.state.width }}
+          allowOverflow
+          onChange={this.onTabChange}
+        >
+          <Tabs.TabPane
+            className="adhoc-filter-edit-tab"
+            key={EXPRESSION_TYPES.SIMPLE}
+            tab={t('Simple')}
+          >
+            <ErrorBoundary>
+              <AdhocFilterEditPopoverSimpleTabContent
+                operators={operators}
+                adhocFilter={this.state.adhocFilter}
+                onChange={this.onAdhocFilterChange}
+                options={options}
+                datasource={datasource}
+                onHeightChange={this.adjustHeight}
+                partitionColumn={partitionColumn}
+                popoverRef={this.popoverContentRef.current}
+              />
+            </ErrorBoundary>
+          </Tabs.TabPane>
+          <Tabs.TabPane
+            className="adhoc-filter-edit-tab"
+            key={EXPRESSION_TYPES.SQL}
+            tab={
+              datasource?.type === 'druid' ? (
+                <Tooltip
+                  title={t(
+                    'Custom SQL ad-hoc filters are not available for the native Druid connector',
+                  )}
+                >
+                  {t('Custom SQL')}
+                </Tooltip>
+              ) : (
+                t('Custom SQL')
+              )
+            }
+            disabled={datasource?.type === 'druid'}
           >
-            {resultSections.includes('SIMPLE') && (
-              <Tabs.TabPane
-                className="adhoc-filter-edit-tab"
-                key={EXPRESSION_TYPES.SIMPLE}
-                tab={t('Simple')}
-              >
-                {sectionRenders.SIMPLE}
-              </Tabs.TabPane>
-            )}
-            {resultSections.includes('CUSTOM_SQL') && (
-              <Tabs.TabPane
-                className="adhoc-filter-edit-tab"
-                key={EXPRESSION_TYPES.SQL}
-                tab={t('Custom SQL')}
-              >
-                {sectionRenders.CUSTOM_SQL}
-              </Tabs.TabPane>
-            )}
-          </Tabs>
-        ) : (
-          <SectionWrapper>{sectionRenders[resultSections[0]]}</SectionWrapper>
-        )}
+            <ErrorBoundary>
+              <AdhocFilterEditPopoverSqlTabContent
+                adhocFilter={this.state.adhocFilter}
+                onChange={this.onAdhocFilterChange}
+                options={this.props.options}
+                height={this.state.height}
+                activeKey={this.state.activeKey}
+              />
+            </ErrorBoundary>
+          </Tabs.TabPane>
+        </Tabs>
         <div>
           <Button buttonSize="small" onClick={this.props.onClose} cta>
             {t('Close')}

diff --git a/superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx b/superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx
@@ -178,6 +178,7 @@ export default class FixedOrMetricControl extends React.Component {
                   }}
                   onChange={this.setMetric}
                   value={this.state.metricValue}
+                  datasource={this.props.datasource}
                 />
               </PopoverSection>
             </div>

diff --git a/.../components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx b/.../components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.tsx
@@ -41,7 +41,10 @@ const createProps = () => ({
     },
   ],
   adhocMetric: new AdhocMetric({ isNew: true }),
-  datasourceType: 'table',
+  datasource: {
+    extra: '{}',
+    type: 'table',
+  },
   columns: [
     {
       id: 1342,
@@ -62,18 +65,61 @@ test('Should render', () => {
 test('Should render correct elements', () => {
   const props = createProps();
   render(<AdhocMetricEditPopover {...props} />);
-
   expect(screen.getByRole('tablist')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Resize' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Save' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Close' })).toBeVisible();
+});
 
+test('Should render correct elements for SQL', () => {
+  const props = createProps();
+  render(<AdhocMetricEditPopover {...props} />);
   expect(screen.getByRole('tab', { name: 'Custom SQL' })).toBeVisible();
   expect(screen.getByRole('tab', { name: 'Simple' })).toBeVisible();
   expect(screen.getByRole('tab', { name: 'Saved' })).toBeVisible();
+  expect(screen.getByRole('tabpanel', { name: 'Saved' })).toBeVisible();
+});
+
+test('Should render correct elements for native Druid', () => {
+  const props = { ...createProps(), datasource: { type: 'druid' } };
+  render(<AdhocMetricEditPopover {...props} />);
+  expect(screen.getByRole('tab', { name: 'Custom SQL' })).toHaveAttribute(
+    'aria-disabled',
+    'true',
+  );
+  expect(screen.getByRole('tab', { name: 'Simple' })).toBeEnabled();
+  expect(screen.getByRole('tab', { name: 'Saved' })).toBeEnabled();
+  expect(screen.getByRole('tabpanel', { name: 'Saved' })).toBeVisible();
+});
 
+test('Should render correct elements for allow ad-hoc metrics', () => {
+  const props = {
+    ...createProps(),
+    datasource: { extra: '{"disallow_adhoc_metrics": false}' },
+  };
+  render(<AdhocMetricEditPopover {...props} />);
+  expect(screen.getByRole('tab', { name: 'Custom SQL' })).toBeEnabled();
+  expect(screen.getByRole('tab', { name: 'Simple' })).toBeEnabled();
+  expect(screen.getByRole('tab', { name: 'Saved' })).toBeEnabled();
   expect(screen.getByRole('tabpanel', { name: 'Saved' })).toBeVisible();
+});
 
-  expect(screen.getByRole('button', { name: 'Resize' })).toBeVisible();
-  expect(screen.getByRole('button', { name: 'Save' })).toBeVisible();
-  expect(screen.getByRole('button', { name: 'Close' })).toBeVisible();
+test('Should render correct elements for disallow ad-hoc metrics', () => {
+  const props = {
+    ...createProps(),
+    datasource: { extra: '{"disallow_adhoc_metrics": true}' },
+  };
+  render(<AdhocMetricEditPopover {...props} />);
+  expect(screen.getByRole('tab', { name: 'Custom SQL' })).toHaveAttribute(
+    'aria-disabled',
+    'true',
+  );
+  expect(screen.getByRole('tab', { name: 'Simple' })).toHaveAttribute(
+    'aria-disabled',
+    'true',
+  );
+  expect(screen.getByRole('tab', { name: 'Saved' })).toBeEnabled();
+  expect(screen.getByRole('tabpanel', { name: 'Saved' })).toBeVisible();
 });
 
 test('Clicking on "Close" should call onClose', () => {