Merge branch 'master' of https://github.com/apache/superset into chor…

…e/highlight-corrupt-filter

superset-frontend/.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
     'prettier/react',
     'plugin:react-hooks/recommended',
   ],
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,

superset-frontend/package.json

@@ -16,7 +16,7 @@
     "dev-server": "cross-env NODE_ENV=development BABEL_ENV=development node --max_old_space_size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode=development",
     "prod": "npm run build",
     "build-dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --mode=development --color",
-    "build-instrumented": "cross-env NODE_ENV=development BABEL_ENV=instrumented webpack --mode=development --color",
+    "build-instrumented": "cross-env NODE_ENV=production BABEL_ENV=instrumented webpack --mode=production --color",
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production BABEL_ENV=\"${BABEL_ENV:=production}\" webpack --mode=production --color",
     "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && npm run type",
     "prettier-check": "prettier --check 'src/**/*.{css,less,sass,scss}'",
@@ -186,17 +186,18 @@
     "use-query-params": "^1.1.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/compat-data": "^7.12.7",
-    "@babel/core": "^7.12.10",
-    "@babel/node": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "@babel/cli": "^7.15.7",
+    "@babel/compat-data": "^7.15.0",
+    "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.7",
+    "@babel/node": "^7.15.4",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/register": "^7.12.10",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
     "@emotion/jest": "^11.3.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
@@ -245,7 +246,6 @@
     "@types/yargs": "12 - 15",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",

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

@@ -69,9 +69,17 @@ enum LIMITING_FACTOR {
 
 const LOADING_STYLES: CSSProperties = { position: 'relative', minHeight: 100 };
 
+interface DatasetOwner {
+  first_name: string;
+  id: number;
+  last_name: string;
+  username: string;
+}
+
 interface DatasetOptionAutocomplete {
   value: string;
   datasetId: number;
+  owners: [DatasetOwner];
 }
 
 interface ResultSetProps {
@@ -142,13 +150,15 @@ const updateDataset = async (
   datasetId: number,
   sql: string,
   columns: Array<Record<string, any>>,
+  owners: [number],
   overrideColumns: boolean,
 ) => {
   const endpoint = `api/v1/dataset/${datasetId}?override_columns=${overrideColumns}`;
   const headers = { 'Content-Type': 'application/json' };
   const body = JSON.stringify({
     sql,
     columns,
+    owners,
   });
 
   const data: JsonResponse = await SupersetClient.put({
@@ -269,6 +279,7 @@ export default class ResultSet extends React.PureComponent<
       datasetToOverwrite.datasetId,
       sql,
       results.selected_columns.map(d => ({ column_name: d.name })),
+      datasetToOverwrite.owners.map((o: DatasetOwner) => o.id),
       true,
     );
 
@@ -405,10 +416,13 @@ export default class ResultSet extends React.PureComponent<
         endpoint: '/api/v1/dataset',
       })(`q=${queryParams}`);
 
-      return response.result.map((r: { table_name: string; id: number }) => ({
-        value: r.table_name,
-        datasetId: r.id,
-      }));
+      return response.result.map(
+        (r: { table_name: string; id: number; owners: [DatasetOwner] }) => ({
+          value: r.table_name,
+          datasetId: r.id,
+          owners: r.owners,
+        }),
+      );
     }
 
     return null;

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -24,7 +24,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import Split from 'react-split';
-import { t, styled, supersetTheme, withTheme } from '@superset-ui/core';
+import { t, styled, withTheme } from '@superset-ui/core';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import StyledModal from 'src/components/Modal';
@@ -102,10 +102,10 @@ const LimitSelectStyled = styled.span`
 
 const StyledToolbar = styled.div`
   padding: ${({ theme }) => theme.gridUnit * 2}px;
-  background-color: @lightest;
+  background: ${({ theme }) => theme.colors.grayscale.light5};
   display: flex;
   justify-content: space-between;
-  border: 1px solid ${supersetTheme.colors.grayscale.light2};
+  border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   border-top: 0;
 
   form {

superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styled, supersetTheme } from '@superset-ui/core';
+import { styled, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { ErrorLevel } from './types';
 
@@ -54,12 +54,14 @@ export default function BasicErrorAlert({
   level,
   title,
 }: BasicErrorAlertProps) {
+  const theme = useTheme();
+
   return (
     <StyledContainer level={level} role="alert">
       {level === 'error' ? (
-        <Icons.ErrorSolid iconColor={supersetTheme.colors[level].base} />
+        <Icons.ErrorSolid iconColor={theme.colors[level].base} />
       ) : (
-        <Icons.WarningSolid iconColor={supersetTheme.colors[level].base} />
+        <Icons.WarningSolid iconColor={theme.colors[level].base} />
       )}
       <StyledContent>
         <StyledTitle>{title}</StyledTitle>

superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useState, ReactNode } from 'react';
-import { styled, supersetTheme, t } from '@superset-ui/core';
+import { styled, useTheme, t } from '@superset-ui/core';
 import { noOp } from 'src/utils/common';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
@@ -97,6 +97,8 @@ export default function ErrorAlert({
   subtitle,
   title,
 }: ErrorAlertProps) {
+  const theme = useTheme();
+
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isBodyExpanded, setIsBodyExpanded] = useState(false);
 
@@ -109,12 +111,12 @@ export default function ErrorAlert({
           {level === 'error' ? (
             <Icons.ErrorSolid
               className="icon"
-              iconColor={supersetTheme.colors[level].base}
+              iconColor={theme.colors[level].base}
             />
           ) : (
             <Icons.WarningSolid
               className="icon"
-              iconColor={supersetTheme.colors[level].base}
+              iconColor={theme.colors[level].base}
             />
           )}
           <strong>{title}</strong>
@@ -172,12 +174,12 @@ export default function ErrorAlert({
               {level === 'error' ? (
                 <Icons.ErrorSolid
                   className="icon"
-                  iconColor={supersetTheme.colors[level].base}
+                  iconColor={theme.colors[level].base}
                 />
               ) : (
                 <Icons.WarningSolid
                   className="icon"
-                  iconColor={supersetTheme.colors[level].base}
+                  iconColor={theme.colors[level].base}
                 />
               )}
               <div className="title">{title}</div>

superset-frontend/src/components/FilterableTable/FilterableTable.tsx

@@ -435,7 +435,7 @@ export default class FilterableTable extends PureComponent<
         }}
         className={`grid-cell ${this.rowClassName({ index: rowIndex })}`}
       >
-        <div>{content}</div>
+        <div css={{ width: 'inherit' }}>{content}</div>
       </div>
     );
 

superset-frontend/src/components/Select/Select.tsx

@@ -93,6 +93,7 @@ export interface SelectProps extends PickedSelectProps {
   pageSize?: number;
   invertSelection?: boolean;
   fetchOnlyOnSearch?: boolean;
+  onError?: (error: string) => void;
 }
 
 const StyledContainer = styled.div`
@@ -331,6 +332,10 @@ const Select = ({
     getClientErrorObject(response).then(e => {
       const { error } = e;
       setError(error);
+
+      if (props.onError) {
+        props.onError(error);
+      }
     });
 
   const handleData = (data: OptionsType) => {

superset-frontend/src/dashboard/components/SliceAdder.jsx

@@ -59,10 +59,10 @@ const defaultProps = {
 
 const KEYS_TO_FILTERS = ['slice_name', 'viz_type', 'datasource_name'];
 const KEYS_TO_SORT = {
-  slice_name: 'Name',
-  viz_type: 'Vis type',
-  datasource_name: 'Dataset',
-  changed_on: 'Recent',
+  slice_name: 'name',
+  viz_type: 'viz type',
+  datasource_name: 'dataset',
+  changed_on: 'recent',
 };
 
 const DEFAULT_SORT_KEY = 'changed_on';

superset-frontend/src/explore/components/controls/SelectAsyncControl/SelectAsyncControl.test.tsx

@@ -17,19 +17,21 @@
  * under the License.
  */
 import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
 import SelectAsyncControl from '.';
 
-jest.mock('src/components/AsyncSelect', () => ({
+const datasetsOwnersEndpoint = 'glob:*/api/v1/dataset/related/owners*';
+
+jest.mock('src/components/Select/Select', () => ({
   __esModule: true,
   default: (props: any) => (
     <div
       data-test="select-test"
-      data-data-endpoint={props.dataEndpoint}
       data-value={JSON.stringify(props.value)}
       data-placeholder={props.placeholder}
-      data-multi={props.multi ? 'true' : 'false'}
+      data-multi={props.mode}
     >
       <button
         type="button"
@@ -40,19 +42,19 @@ jest.mock('src/components/AsyncSelect', () => ({
       <button type="button" onClick={() => props.mutator()}>
         mutator
       </button>
-
-      <div data-test="valueRenderer">
-        {props.valueRenderer({ label: 'valueRenderer' })}
-      </div>
     </div>
   ),
 }));
 
+fetchMock.get(datasetsOwnersEndpoint, {
+  result: [],
+});
+
 const createProps = () => ({
+  ariaLabel: 'SelectAsyncControl',
   value: [],
-  dataEndpoint: 'api/v1/dataset/related/owners',
+  dataEndpoint: datasetsOwnersEndpoint,
   multi: true,
-  onAsyncErrorMessage: 'Error while fetching data',
   placeholder: 'Select ...',
   onChange: jest.fn(),
   mutator: jest.fn(),
@@ -65,17 +67,13 @@ beforeEach(() => {
 test('Should render', () => {
   const props = createProps();
   render(<SelectAsyncControl {...props} />, { useRedux: true });
-  expect(screen.getByTestId('SelectAsyncControl')).toBeInTheDocument();
+  expect(screen.getByTestId('select-test')).toBeInTheDocument();
 });
 
-test('Should send correct props to AsyncSelect component - value props', () => {
+test('Should send correct props to Select component - value props', () => {
   const props = createProps();
   render(<SelectAsyncControl {...props} />, { useRedux: true });
 
-  expect(screen.getByTestId('select-test')).toHaveAttribute(
-    'data-data-endpoint',
-    props.dataEndpoint,
-  );
   expect(screen.getByTestId('select-test')).toHaveAttribute(
     'data-value',
     JSON.stringify(props.value),
@@ -86,22 +84,19 @@ test('Should send correct props to AsyncSelect component - value props', () => {
   );
   expect(screen.getByTestId('select-test')).toHaveAttribute(
     'data-multi',
-    'true',
-  );
-  expect(screen.getByTestId('valueRenderer')).toHaveTextContent(
-    'valueRenderer',
+    'multiple',
   );
 });
 
-test('Should send correct props to AsyncSelect component - function onChange multi:true', () => {
+test('Should send correct props to Select component - function onChange multi:true', () => {
   const props = createProps();
   render(<SelectAsyncControl {...props} />, { useRedux: true });
   expect(props.onChange).toBeCalledTimes(0);
   userEvent.click(screen.getByText('onChange'));
   expect(props.onChange).toBeCalledTimes(1);
 });
 
-test('Should send correct props to AsyncSelect component - function onChange multi:false', () => {
+test('Should send correct props to Select component - function onChange multi:false', () => {
   const props = createProps();
   render(<SelectAsyncControl {...{ ...props, multi: false }} />, {
     useRedux: true,