Merge branch 'pexdax/db-connection-ui' into ch6732_editDBModal

.pylintrc

@@ -81,7 +81,7 @@ confidence=
 # --enable=similarities". If you want to run only the classes checker, but have
 # no Warning level messages displayed, use"--disable=all --enable=classes
 # --disable=W"
-disable=long-builtin,dict-view-method,intern-builtin,suppressed-message,no-absolute-import,unpacking-in-except,apply-builtin,delslice-method,indexing-exception,old-raise-syntax,print-statement,cmp-builtin,reduce-builtin,useless-suppression,coerce-method,input-builtin,cmp-method,raw_input-builtin,nonzero-method,backtick,basestring-builtin,setslice-method,reload-builtin,oct-method,map-builtin-not-iterating,execfile-builtin,old-octal-literal,zip-builtin-not-iterating,buffer-builtin,getslice-method,metaclass-assignment,xrange-builtin,long-suffix,round-builtin,range-builtin-not-iterating,next-method-called,parameter-unpacking,unicode-builtin,unichr-builtin,import-star-module-level,raising-string,filter-builtin-not-iterating,using-cmp-argument,coerce-builtin,file-builtin,old-division,hex-method,missing-docstring,too-many-lines,ungrouped-imports,import-outside-toplevel,raise-missing-from,super-with-arguments,bad-option-value,too-few-public-methods
+disable=long-builtin,dict-view-method,intern-builtin,suppressed-message,no-absolute-import,unpacking-in-except,apply-builtin,delslice-method,indexing-exception,old-raise-syntax,print-statement,cmp-builtin,reduce-builtin,useless-suppression,coerce-method,input-builtin,cmp-method,raw_input-builtin,nonzero-method,backtick,basestring-builtin,setslice-method,reload-builtin,oct-method,map-builtin-not-iterating,execfile-builtin,old-octal-literal,zip-builtin-not-iterating,buffer-builtin,getslice-method,metaclass-assignment,xrange-builtin,long-suffix,round-builtin,range-builtin-not-iterating,next-method-called,parameter-unpacking,unicode-builtin,unichr-builtin,import-star-module-level,raising-string,filter-builtin-not-iterating,using-cmp-argument,coerce-builtin,file-builtin,old-division,hex-method,missing-docstring,too-many-lines,ungrouped-imports,import-outside-toplevel,raise-missing-from,super-with-arguments,bad-option-value,too-few-public-methods,too-many-locals
 
 
 [REPORTS]

superset-frontend/cypress-base/cypress/integration/dashboard_list/filter.test.ts

@@ -61,7 +61,6 @@ describe('dashboard filters card view', () => {
     cy.get('.Select__menu').contains('Published').click({ timeout: 5000 });
     cy.get('[data-test="styled-card"]').should('have.length', 2);
     cy.get('[data-test="styled-card"]')
-      .first()
       .contains('USA Births Names')
       .should('be.visible');
     cy.get('.Select__control').eq(1).click();
@@ -107,13 +106,12 @@ describe('dashboard filters list view', () => {
     cy.get('[data-test="table-row"]').should('not.exist');
   });
 
-  xit('should filter by published correctly', () => {
+  it('should filter by published correctly', () => {
     // filter by published
     cy.get('.Select__control').eq(2).click();
     cy.get('.Select__menu').contains('Published').click();
     cy.get('[data-test="table-row"]').should('have.length', 2);
     cy.get('[data-test="table-row"]')
-      .first()
       .contains('USA Births Names')
       .should('be.visible');
     cy.get('.Select__control').eq(2).click();

superset-frontend/package.json

@@ -67,35 +67,35 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.1.3",
     "@emotion/react": "^11.1.5",
-    "@superset-ui/chart-controls": "^0.17.52",
-    "@superset-ui/core": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-chord": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-partition": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-rose": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.52",
-    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.52",
-    "@superset-ui/legacy-preset-chart-big-number": "^0.17.52",
+    "@superset-ui/chart-controls": "^0.17.53",
+    "@superset-ui/core": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-partition": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-rose": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.53",
+    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.53",
+    "@superset-ui/legacy-preset-chart-big-number": "^0.17.53",
     "@superset-ui/legacy-preset-chart-deckgl": "^0.4.7",
-    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.52",
-    "@superset-ui/plugin-chart-echarts": "^0.17.52",
-    "@superset-ui/plugin-chart-pivot-table": "^0.17.52",
-    "@superset-ui/plugin-chart-table": "^0.17.52",
-    "@superset-ui/plugin-chart-word-cloud": "^0.17.52",
-    "@superset-ui/preset-chart-xy": "^0.17.52",
+    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.53",
+    "@superset-ui/plugin-chart-echarts": "^0.17.53",
+    "@superset-ui/plugin-chart-pivot-table": "^0.17.53",
+    "@superset-ui/plugin-chart-table": "^0.17.53",
+    "@superset-ui/plugin-chart-word-cloud": "^0.17.53",
+    "@superset-ui/preset-chart-xy": "^0.17.53",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",
     "antd": "^4.9.4",
@@ -154,6 +154,7 @@
     "react-markdown": "^4.3.1",
     "react-redux": "^7.2.0",
     "react-resize-detector": "^6.0.1-rc.1",
+    "react-reverse-portal": "^2.0.1",
     "react-router-dom": "^5.1.2",
     "react-search-input": "^0.11.3",
     "react-select": "^3.1.0",

superset-frontend/spec/javascripts/dashboard/components/DashboardBuilder_spec.jsx

@@ -50,16 +50,21 @@ jest.mock('src/dashboard/actions/dashboardState');
 
 describe('DashboardBuilder', () => {
   let favStarStub;
+  let focusedTabStub;
 
   beforeAll(() => {
     // this is invoked on mount, so we stub it instead of making a request
     favStarStub = sinon
       .stub(dashboardStateActions, 'fetchFaveStar')
       .returns({ type: 'mock-action' });
+    focusedTabStub = sinon
+      .stub(dashboardStateActions, 'setLastFocusedTab')
+      .returns({ type: 'mock-action' });
   });
 
   afterAll(() => {
     favStarStub.restore();
+    focusedTabStub.restore();
   });
 
   function setup(overrideState = {}, overrideStore) {

superset-frontend/spec/javascripts/dashboard/components/gridComponents/ChartHolder_spec.jsx

@@ -36,6 +36,7 @@ import { sliceId } from 'spec/fixtures/mockChartQueries';
 import dashboardInfo from 'spec/fixtures/mockDashboardInfo';
 import { dashboardLayout as mockLayout } from 'spec/fixtures/mockDashboardLayout';
 import { sliceEntitiesForChart } from 'spec/fixtures/mockSliceEntities';
+import { nativeFiltersInfo } from '../../fixtures/mockNativeFilters';
 
 describe('ChartHolder', () => {
   const props = {
@@ -55,6 +56,7 @@ describe('ChartHolder', () => {
     handleComponentDrop() {},
     updateComponents() {},
     deleteComponent() {},
+    nativeFilters: nativeFiltersInfo.filters,
   };
 
   function setup(overrideProps) {

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tabs_spec.jsx

@@ -33,8 +33,10 @@ import HoverMenu from 'src/dashboard/components/menu/HoverMenu';
 import DragDroppable from 'src/dashboard/components/dnd/DragDroppable';
 import Tabs from 'src/dashboard/components/gridComponents/Tabs';
 import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import emptyDashboardLayout from 'src/dashboard/fixtures/emptyDashboardLayout';
 import { dashboardLayoutWithTabs } from 'spec/fixtures/mockDashboardLayout';
 import { mockStoreWithTabs } from 'spec/fixtures/mockStore';
+import { nativeFilters } from 'spec/fixtures/mockNativeFilters';
 
 describe('Tabs', () => {
   fetchMock.post('glob:*/r/shortner/', {});
@@ -59,6 +61,8 @@ describe('Tabs', () => {
     deleteComponent() {},
     updateComponents() {},
     logEvent() {},
+    dashboardLayout: emptyDashboardLayout,
+    nativeFilters: nativeFilters.filters,
   };
 
   function setup(overrideProps) {

superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx

@@ -86,20 +86,23 @@ describe('DatasourceEditor', () => {
         nullable: true,
         default: '',
         primary_key: false,
+        is_dttm: true,
       },
       {
         name: 'gender',
         type: 'VARCHAR(32)',
         nullable: true,
         default: '',
         primary_key: false,
+        is_dttm: false,
       },
       {
         name: 'new_column',
         type: 'VARCHAR(10)',
         nullable: true,
         default: '',
         primary_key: false,
+        is_dttm: false,
       },
     ];
 

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -540,7 +540,7 @@ export default class ResultSet extends React.PureComponent<
     let limitMessage;
     const limitReached = results?.displayLimitReached;
     const limit = queryLimit || results.query.limit;
-    const isAdmin = !!this.props.user?.roles.Admin;
+    const isAdmin = !!this.props.user?.roles?.Admin;
     const displayMaxRowsReachedMessage = {
       withAdmin: t(
         `The number of results displayed is limited to %(rows)d by the configuration DISPLAY_MAX_ROWS. `,

superset-frontend/src/dashboard/actions/dashboardState.js

@@ -344,6 +344,11 @@ export function setDirectPathToChild(path) {
   return { type: SET_DIRECT_PATH, path };
 }
 
+export const SET_LAST_FOCUSED_TAB = 'SET_LAST_FOCUSED_TAB';
+export function setLastFocusedTab(tabId) {
+  return { type: SET_LAST_FOCUSED_TAB, tabId };
+}
+
 export const SET_FOCUSED_FILTER_FIELD = 'SET_FOCUSED_FILTER_FIELD';
 export function setFocusedFilterField(chartId, column) {
   return { type: SET_FOCUSED_FILTER_FIELD, chartId, column };

superset-frontend/src/dashboard/actions/hydrate.js

@@ -377,6 +377,7 @@ export const hydrateDashboard = (dashboardData, chartData, datasourcesData) => (
         hasUnsavedChanges: false,
         maxUndoHistoryExceeded: false,
         lastModifiedTime: dashboardData.changed_on,
+        lastFocusedTabId: null,
       },
       dashboardLayout,
     },

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx

@@ -21,7 +21,7 @@
 import { ParentSize } from '@vx/responsive';
 import Tabs from 'src/components/Tabs';
 import React, { FC, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import DashboardGrid from 'src/dashboard/containers/DashboardGrid';
 import getLeafComponentIdFromPath from 'src/dashboard/util/getLeafComponentIdFromPath';
 import { DashboardLayout, LayoutItem, RootState } from 'src/dashboard/types';
@@ -30,6 +30,10 @@ import {
   DASHBOARD_ROOT_DEPTH,
 } from 'src/dashboard/util/constants';
 import { getRootLevelTabIndex } from './utils';
+import { Filters } from '../../reducers/types';
+import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters';
+import { findTabsWithChartsInScope } from '../nativeFilters/utils';
+import { setFilterConfiguration } from '../../actions/nativeFilters';
 
 type DashboardContainerProps = {
   topLevelTabs?: LayoutItem;
@@ -39,17 +43,47 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
+  const nativeFilters = useSelector<RootState, Filters>(
+    state => state.nativeFilters.filters,
+  );
   const directPathToChild = useSelector<RootState, string[]>(
     state => state.dashboardState.directPathToChild,
   );
   const [tabIndex, setTabIndex] = useState(
     getRootLevelTabIndex(dashboardLayout, directPathToChild),
   );
 
+  const dispatch = useDispatch();
+
   useEffect(() => {
     setTabIndex(getRootLevelTabIndex(dashboardLayout, directPathToChild));
   }, [getLeafComponentIdFromPath(directPathToChild)]);
 
+  // recalculate charts and tabs in scopes of native filters only when a scope or dashboard layout changes
+  const nativeFiltersValues = Object.values(nativeFilters);
+  const scopes = nativeFiltersValues.map(filter => filter.scope);
+  useEffect(() => {
+    nativeFiltersValues.forEach(filter => {
+      const filterScope = filter.scope;
+      const chartsInScope = getChartIdsInFilterScope({
+        filterScope: {
+          scope: filterScope.rootPath,
+          // @ts-ignore
+          immune: filterScope.excluded,
+        },
+      });
+      const tabsInScope = findTabsWithChartsInScope(
+        dashboardLayout,
+        chartsInScope,
+      );
+      Object.assign(filter, {
+        chartsInScope,
+        tabsInScope: Array.from(tabsInScope),
+      });
+    });
+    dispatch(setFilterConfiguration(nativeFiltersValues));
+  }, [JSON.stringify(scopes), JSON.stringify(dashboardLayout)]);
+
   const childIds: string[] = topLevelTabs
     ? topLevelTabs.children
     : [DASHBOARD_GRID_ID];

superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx

@@ -85,37 +85,46 @@ const defaultProps = {
  * If ChartHolder were a function component, this could be implemented as a hook instead.
  */
 const FilterFocusHighlight = React.forwardRef(
-  ({ chartId, focusedFilterScope, ...otherProps }, ref) => {
+  ({ chartId, focusedFilterScope, nativeFilters, ...otherProps }, ref) => {
     const theme = useTheme();
-    if (!focusedFilterScope) return <div ref={ref} {...otherProps} />;
+    const focusedNativeFilterId = nativeFilters.focusedFilterId;
+    if (!(focusedFilterScope || focusedNativeFilterId))
+      return <div ref={ref} {...otherProps} />;
 
     // we use local styles here instead of a conditionally-applied class,
     // because adding any conditional class to this container
     // causes performance issues in Chrome.
 
     // default to the "de-emphasized" state
-    let styles = { opacity: 0.3, pointerEvents: 'none' };
+    const unfocusedChartStyles = { opacity: 0.3, pointerEvents: 'none' };
+    const focusedChartStyles = {
+      borderColor: theme.colors.primary.light2,
+      opacity: 1,
+      boxShadow: `0px 0px ${theme.gridUnit * 2}px ${
+        theme.colors.primary.light2
+      }`,
+      pointerEvents: 'auto',
+    };
 
-    if (
+    if (focusedNativeFilterId) {
+      if (
+        nativeFilters.filters[focusedNativeFilterId].chartsInScope.includes(
+          chartId,
+        )
+      ) {
+        return <div ref={ref} style={focusedChartStyles} {...otherProps} />;
+      }
+    } else if (
       chartId === focusedFilterScope.chartId ||
       getChartIdsInFilterScope({
         filterScope: focusedFilterScope.scope,
       }).includes(chartId)
     ) {
-      // apply the "highlighted" state if this chart
-      // contains a filter being focused, or is in scope of a focused filter.
-      styles = {
-        borderColor: theme.colors.primary.light2,
-        opacity: 1,
-        boxShadow: `0px 0px ${theme.gridUnit * 2}px ${
-          theme.colors.primary.light2
-        }`,
-        pointerEvents: 'auto',
-      };
+      return <div ref={ref} style={focusedChartStyles} {...otherProps} />;
     }
 
     // inline styles are used here due to a performance issue when adding/changing a class, which causes a reflow
-    return <div ref={ref} style={styles} {...otherProps} />;
+    return <div ref={ref} style={unfocusedChartStyles} {...otherProps} />;
   },
 );
 
@@ -233,6 +242,7 @@ class ChartHolder extends React.Component {
       isComponentVisible,
       dashboardId,
       focusedFilterScope,
+      nativeFilters,
     } = this.props;
 
     // inherit the size of parent columns
@@ -291,6 +301,7 @@ class ChartHolder extends React.Component {
             <FilterFocusHighlight
               chartId={chartId}
               focusedFilterScope={focusedFilterScope}
+              nativeFilters={nativeFilters}
               ref={dragSourceRef}
               data-test="dashboard-component-chart-holder"
               className={cx(

superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx

@@ -18,12 +18,13 @@
  */
 
 import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
 import { render, screen } from 'spec/helpers/testing-library';
 import mockState from 'spec/fixtures/mockState';
 import { sliceId as chartId } from 'spec/fixtures/mockChartQueries';
+import { nativeFiltersInfo } from 'spec/javascripts/dashboard/fixtures/mockNativeFilters';
 import newComponentFactory from 'src/dashboard/util/newComponentFactory';
-import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/react';
 import { ChartHolder } from './index';
 import { CHART_TYPE, ROW_TYPE } from '../../util/componentTypes';
 
@@ -60,6 +61,7 @@ describe('ChartHolder', () => {
     editMode: false,
     isComponentVisible: true,
     dashboardId: 123,
+    nativeFilters: nativeFiltersInfo.filters,
   };
 
   const renderWrapper = (props = defaultProps, state = mockState) =>