chore: upgrade @emotion (#14454)

superset-frontend/cypress-base/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@cypress/code-coverage": "^3.9.2",
-    "@superset-ui/core": "^0.17.18",
+    "@superset-ui/core": "^0.17.42",
     "react-dom": "^16.13.0",
     "rison": "^0.1.1",
     "shortid": "^2.2.15"

superset-frontend/jest.config.js

@@ -35,6 +35,7 @@ module.exports = {
     '^.+\\.tsx?$': 'ts-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
   globals: {
     'ts-jest': {
       babelConfig: true,

superset-frontend/package.json

@@ -64,38 +64,38 @@
     "@ant-design/icons": "^4.2.2",
     "@babel/runtime-corejs3": "^7.12.5",
     "@data-ui/sparkline": "^0.0.84",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.1.3",
-    "@emotion/core": "^10.0.35",
     "@emotion/react": "^11.1.5",
-    "@superset-ui/chart-controls": "^0.17.41",
+    "@superset-ui/chart-controls": "^0.17.42",
-    "@superset-ui/core": "^0.17.40",
+    "@superset-ui/core": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-chord": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-partition": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-partition": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-rose": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-rose": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.42",
-    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.41",
+    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.42",
-    "@superset-ui/legacy-preset-chart-big-number": "^0.17.41",
+    "@superset-ui/legacy-preset-chart-big-number": "^0.17.42",
     "@superset-ui/legacy-preset-chart-deckgl": "^0.4.6",
-    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.41",
+    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.42",
-    "@superset-ui/plugin-chart-echarts": "^0.17.41",
+    "@superset-ui/plugin-chart-echarts": "^0.17.42",
-    "@superset-ui/plugin-chart-pivot-table": "^0.17.41",
+    "@superset-ui/plugin-chart-pivot-table": "^0.17.42",
     "@superset-ui/plugin-chart-table": "^0.17.42",
-    "@superset-ui/plugin-chart-word-cloud": "^0.17.41",
+    "@superset-ui/plugin-chart-word-cloud": "^0.17.42",
-    "@superset-ui/preset-chart-xy": "^0.17.41",
+    "@superset-ui/preset-chart-xy": "^0.17.42",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",
     "antd": "^4.9.4",
@@ -194,7 +194,7 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/register": "^7.12.10",
-    "@emotion/babel-preset-css-prop": "^10.2.1",
+    "@emotion/jest": "^11.3.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@storybook/addon-actions": "^6.1.17",
@@ -246,7 +246,6 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-emotion": "^10.0.33",
     "babel-plugin-jsx-remove-data-test-id": "^2.1.3",
     "babel-plugin-lodash": "^3.3.4",
     "cache-loader": "^1.2.2",
@@ -254,7 +253,6 @@
     "copy-webpack-plugin": "^6.0.3",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
-    "emotion-ts-plugin": "^0.5.3",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^7.17.0",

superset-frontend/spec/javascripts/explore/components/MetricsControl_spec.jsx

@@ -55,7 +55,7 @@ function setup(overrides) {
     ...overrides,
   };
   const wrapper = shallow(<MetricsControl {...props} />);
-  const component = wrapper.dive().shallow();
+  const component = wrapper.shallow();
   return { wrapper, component, onChange };
 }
 

superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx

@@ -65,7 +65,7 @@ function verify(sourceProp: string) {
 
 async function setup({
   extraProps,
-  baseControl = MetricsControl,
+  baseControl = MetricsControl as WithAsyncVerificationOptions['baseControl'],
   onChange,
 }: Partial<WithAsyncVerificationOptions> & {
   extraProps?: ExtraControlProps;
@@ -121,7 +121,7 @@ describe('VerifiedMetricsControl', () => {
     });
 
     const child = wrapper.find(MetricsControl);
-    child.props().onChange(['abc']);
+    child.props().onChange?.(['abc']);
 
     expect(child.length).toBe(1);
     expect(mockOnChange).toBeCalledTimes(1);

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

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
 import { styled, useTheme } from '@superset-ui/core';
 
 import { Tooltip } from 'src/components/Tooltip';

superset-frontend/src/components/Checkbox/Checkbox.test.tsx

@@ -45,9 +45,7 @@ describe('Checkbox', () => {
       const shallowWrapper = shallow(
         <Checkbox style={{}} checked={false} onChange={() => true} />,
       );
-      expect(
+      expect(shallowWrapper.dive().find(CheckboxUnchecked)).toExist();
-        shallowWrapper.dive().dive().dive().find(CheckboxUnchecked),
-      ).toExist();
     });
   });
 
@@ -56,9 +54,7 @@ describe('Checkbox', () => {
       const shallowWrapper = shallow(
         <Checkbox style={{}} checked onChange={() => true} />,
       );
-      expect(
+      expect(shallowWrapper.dive().find(CheckboxChecked)).toExist();
-        shallowWrapper.dive().dive().dive().find(CheckboxChecked),
-      ).toExist();
     });
   });
 

superset-frontend/src/components/Icons/Icon.tsx

@@ -23,9 +23,15 @@ import { styled } from '@superset-ui/core';
 import { ReactComponent as TransparentIcon } from 'images/icons/transparent.svg';
 import IconType from './IconType';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AntdIconComponent = ({
-const AntdIconComponent = ({ iconColor, iconSize, ...rest }: IconType) => (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  <AntdIcon viewBox={rest.viewBox || '0 0 24 24'} {...rest} />
+  iconColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  iconSize,
+  viewBox,
+  ...rest
+}: Omit<IconType, 'ref' | 'css'>) => (
+  <AntdIcon viewBox={viewBox || '0 0 24 24'} {...rest} />
 );
 
 export const StyledIcon = styled(AntdIconComponent)<IconType>`

superset-frontend/src/components/Icons/IconType.ts

@@ -16,10 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
 
-import AntdIcon from '@ant-design/icons';
+type AntdIconType = IconComponentProps;
-
-type AntdIconType = typeof AntdIcon.defaultProps;
 type IconType = AntdIconType & {
   iconColor?: string;
   twoToneColor?: string;

superset-frontend/src/components/Label/index.tsx

@@ -87,6 +87,8 @@ export default function Label(props: LabelProps) {
 
   return (
     <Tag
+      onClick={onClick}
+      {...rest}
       css={{
         transition: `background-color ${transitionTiming}s`,
         whiteSpace: 'nowrap',
@@ -105,8 +107,6 @@ export default function Label(props: LabelProps) {
           opacity: 1,
         },
       }}
-      onClick={onClick}
-      {...rest}
     >
       {children}
     </Tag>

superset-frontend/src/components/ListViewCard/index.tsx

@@ -17,8 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { styled } from '@superset-ui/core';
+import { styled, useTheme } from '@superset-ui/core';
-import Icon from 'src/components/Icon';
+import Icon, { IconName } from 'src/components/Icon';
 import { AntdCard, Skeleton, ThinSkeleton } from 'src/common/components';
 import { Tooltip } from 'src/components/Tooltip';
 import ImageLoader, { BackgroundPosition } from './ImageLoader';
@@ -130,14 +130,6 @@ const CoverFooterRight = styled.div`
   text-overflow: ellipsis;
 `;
 
-const SkeletonTitle = styled(Skeleton.Input)`
-  width: ${({ theme }) => Math.trunc(theme.gridUnit * 62.5)}px;
-`;
-
-const SkeletonActions = styled(Skeleton.Button)`
-  width: ${({ theme }) => theme.gridUnit * 10}px;
-`;
-
 const paragraphConfig = { rows: 1, width: 150 };
 
 interface LinkProps {
@@ -183,6 +175,7 @@ function ListViewCard({
   cover,
 }: CardProps) {
   const Link = url && linkComponent ? linkComponent : AnchorLink;
+  const theme = useTheme();
   return (
     <StyledCard
       data-test="styled-card"
@@ -216,10 +209,21 @@ function ListViewCard({
           title={
             <>
               <TitleContainer>
-                <SkeletonTitle active size="small" />
+                <Skeleton.Input
+                  active
+                  size="small"
+                  css={{
+                    width: Math.trunc(theme.gridUnit * 62.5),
+                  }}
+                />
                 <div className="card-actions">
                   <Skeleton.Button active shape="circle" />{' '}
-                  <SkeletonActions active />
+                  <Skeleton.Button
+                    active
+                    css={{
+                      width: theme.gridUnit * 10,
+                    }}
+                  />
                 </div>
               </TitleContainer>
             </>
@@ -250,8 +254,7 @@ function ListViewCard({
             </TitleContainer>
           }
           description={description}
-          // @ts-ignore
+          avatar={avatar ? <Icon name={avatar as IconName} /> : null}
-          avatar={avatar ? <Icon name={avatar} /> : null}
         />
       )}
     </StyledCard>

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

@@ -18,10 +18,10 @@
  */
 import React from 'react';
 import { isNil } from 'lodash';
-import { styled, SupersetThemeProps, t } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
+import { css } from '@emotion/react';
 import { Modal as BaseModal } from 'src/common/components';
 import Button from 'src/components/Button';
-import { css } from '@emotion/core';
 
 interface ModalProps {
   className?: string;
@@ -45,7 +45,7 @@ interface ModalProps {
   closable?: boolean;
 }
 
-interface StyledModalProps extends SupersetThemeProps {
+interface StyledModalProps {
   maxWidth?: string;
   responsive?: boolean;
   height?: string;

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

@@ -17,8 +17,8 @@
  * under the License.
  */
 import React, { CSSProperties, ComponentType, ReactNode } from 'react';
-import { css, SerializedStyles, ClassNames } from '@emotion/core';
+import { SerializedStyles } from '@emotion/react';
-import { SupersetTheme } from '@superset-ui/core';
+import { SupersetTheme, css } from '@superset-ui/core';
 import {
   Styles,
   Theme,
@@ -345,18 +345,14 @@ export const DEFAULT_COMPONENTS: SelectComponentsType = {
     );
   },
   Option: ({ children, innerProps, data, ...props }) => (
-    <ClassNames>
+    <Option
-      {({ css }) => (
+      {...props}
-        <Option
+      data={data}
-          {...props}
+      css={data?.style ? data.style : null}
-          data={data}
+      innerProps={innerProps}
-          className={css(data && data.style ? data.style : null)}
+    >
-          innerProps={innerProps}
+      {children}
-        >
+    </Option>
-          {children}
-        </Option>
-      )}
-    </ClassNames>
   ),
   ClearIndicator: props => (
     <ClearIndicator {...props}>

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

@@ -29,7 +29,7 @@ export interface TabsProps extends AntDTabsProps {
 const notForwardedProps = ['fullWidth', 'allowOverflow'];
 
 const StyledTabs = styled(AntDTabs, {
-  shouldForwardProp: prop => !notForwardedProps.includes(prop),
+  shouldForwardProp: prop => !notForwardedProps.includes(String(prop)),
 })<TabsProps>`
   overflow: ${({ allowOverflow }) => (allowOverflow ? 'visible' : 'hidden')};
 

superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { t, useTheme, css } from '@superset-ui/core';
+import { Global, css } from '@emotion/react';
+import { t, useTheme } from '@superset-ui/core';
 import {
   MinusCircleFilled,
   CheckCircleFilled,
@@ -25,7 +26,6 @@ import {
 } from '@ant-design/icons';
 import Popover from 'src/components/Popover';
 import Collapse from 'src/components/Collapse';
-import { Global } from '@emotion/core';
 import Icon from 'src/components/Icon';
 import {
   Indent,

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -26,7 +26,7 @@ import { debounce } from 'lodash';
 import { Resizable } from 're-resizable';
 
 import { useDynamicPluginContext } from 'src/components/DynamicPlugins';
-import { Global } from '@emotion/core';
+import { Global } from '@emotion/react';
 import { Tooltip } from 'src/components/Tooltip';
 import { usePrevious } from 'src/common/hooks/usePrevious';
 import Icon from 'src/components/Icon';

superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import { useTheme, t } from '@superset-ui/core';
 
 import { Tooltip } from 'src/components/Tooltip';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
 
 const TIME_PICKER_HELPER = (
   <>

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx

@@ -71,7 +71,7 @@ function setup(overrides) {
     ...overrides,
   };
   const wrapper = shallow(<AdhocFilterControl {...props} />);
-  const component = wrapper.dive().shallow();
+  const component = wrapper.shallow();
   return { wrapper, component, onChange };
 }
 

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx

@@ -54,6 +54,7 @@ const selectedMetricType = PropTypes.oneOfType([
 ]);
 
 const propTypes = {
+  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   name: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.arrayOf(adhocFilterType),

superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { t } from '@superset-ui/core';
 import Label from 'src/components/Label';
 import Collapse from 'src/components/Collapse';

superset-frontend/src/views/CRUD/alert/components/AlertStatusIcon.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, supersetTheme, withTheme } from '@superset-ui/core';
+import { t, supersetTheme, useTheme } from '@superset-ui/core';
 import React from 'react';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
@@ -52,6 +52,7 @@ export default function AlertStatusIcon({
   state: string;
   isReportEnabled: boolean;
 }) {
+  const theme = useTheme();
   const lastStateConfig = {
     icon: Icons.Check,
     label: '',
@@ -97,14 +98,15 @@ export default function AlertStatusIcon({
       lastStateConfig.status = AlertState.noop;
   }
   const Icon = lastStateConfig.icon;
-  const AlertIcon = withTheme(({ theme }) => (
-    <Icon
-      iconColor={getStatusColor(lastStateConfig.status, isReportEnabled, theme)}
-    />
-  ));
   return (
     <Tooltip title={lastStateConfig.label} placement="bottomLeft">
-      <AlertIcon />
+      <Icon
+        iconColor={getStatusColor(
+          lastStateConfig.status,
+          isReportEnabled,
+          theme,
+        )}
+      />
     </Tooltip>
   );
 }

superset-frontend/src/views/menu.tsx

@@ -21,7 +21,7 @@
 // eg, backend rendered views
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { ThemeProvider } from '@superset-ui/core';
 import Menu from 'src/components/Menu/Menu';

superset-frontend/tsconfig.json

@@ -33,7 +33,12 @@
     "sourceMap": true,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
-    "target": "esnext"
+    "target": "esnext",
+    "types": [
+      "@emotion/react/types/css-prop",
+      "jest",
+      "@testing-library/jest-dom"
+    ]
   },
   "include": [
     "./src/**/*",

superset-frontend/webpack.config.js

@@ -291,9 +291,6 @@ const config = {
       'react-dom': '@hot-loader/react-dom',
       // Force using absolute import path of some packages in the root node_modules,
       // as they can be dependencies of other packages via `npm link`.
-      // Both `@emotion/core` and `@superset-ui/core` remember some globals within
-      // module after imported, which will not be available everywhere if two
-      // different copies of the same module are imported in different places.
       '@superset-ui/core': path.resolve(
         APP_DIR,
         './node_modules/@superset-ui/core',