iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: upgrade @emotion (#14454)

This commit is contained in:
Jesse Yang 2021-05-04 15:26:16 -07:00 committed by GitHub
parent d138b4407d
commit 23014e9233
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 1965 additions and 4941 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1419
superset-frontend/cypress-base/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
superset-frontend/cypress-base/package.json
View File

@ -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"

1
superset-frontend/jest.config.js
View File

@ -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,

5283
superset-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

60
superset-frontend/package.json
View File

@ -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/core": "^0.17.40",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.41",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.41",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.41",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.41",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.41",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.41",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.41",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.41",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.41",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.41",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.41",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.41",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.41",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.41",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.41",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.41",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.41",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.41",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.41",
"@superset-ui/legacy-preset-chart-big-number": "^0.17.41",
"@superset-ui/chart-controls": "^0.17.42",
"@superset-ui/core": "^0.17.42",
"@superset-ui/legacy-plugin-chart-calendar": "^0.17.42",
"@superset-ui/legacy-plugin-chart-chord": "^0.17.42",
"@superset-ui/legacy-plugin-chart-country-map": "^0.17.42",
"@superset-ui/legacy-plugin-chart-event-flow": "^0.17.42",
"@superset-ui/legacy-plugin-chart-force-directed": "^0.17.42",
"@superset-ui/legacy-plugin-chart-heatmap": "^0.17.42",
"@superset-ui/legacy-plugin-chart-histogram": "^0.17.42",
"@superset-ui/legacy-plugin-chart-horizon": "^0.17.42",
"@superset-ui/legacy-plugin-chart-map-box": "^0.17.42",
"@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.42",
"@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.42",
"@superset-ui/legacy-plugin-chart-partition": "^0.17.42",
"@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.42",
"@superset-ui/legacy-plugin-chart-rose": "^0.17.42",
"@superset-ui/legacy-plugin-chart-sankey": "^0.17.42",
"@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.42",
"@superset-ui/legacy-plugin-chart-sunburst": "^0.17.42",
"@superset-ui/legacy-plugin-chart-treemap": "^0.17.42",
"@superset-ui/legacy-plugin-chart-world-map": "^0.17.42",
"@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/plugin-chart-echarts": "^0.17.41",
"@superset-ui/plugin-chart-pivot-table": "^0.17.41",
"@superset-ui/legacy-preset-chart-nvd3": "^0.17.42",
"@superset-ui/plugin-chart-echarts": "^0.17.42",
"@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/preset-chart-xy": "^0.17.41",
"@superset-ui/plugin-chart-word-cloud": "^0.17.42",
"@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",

2
superset-frontend/spec/javascripts/explore/components/MetricsControl_spec.jsx
View File

@ -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 };
}

4
superset-frontend/spec/javascripts/explore/components/withAsyncVerification_spec.tsx
View File

@ -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);

2
superset-frontend/src/SqlLab/components/ColumnElement.tsx
View File

@ -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';

8
superset-frontend/src/components/Checkbox/Checkbox.test.tsx
View File

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

12
superset-frontend/src/components/Icons/Icon.tsx
View File

@ -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 = ({ iconColor, iconSize, ...rest }: IconType) => (
<AntdIcon viewBox={rest.viewBox || '0 0 24 24'} {...rest} />
const AntdIconComponent = ({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
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>`

5
superset-frontend/src/components/Icons/IconType.ts
View File

@ -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 = typeof AntdIcon.defaultProps;
type AntdIconType = IconComponentProps;
type IconType = AntdIconType & {
iconColor?: string;
twoToneColor?: string;

4
superset-frontend/src/components/Label/index.tsx
View File

@ -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>

31
superset-frontend/src/components/ListViewCard/index.tsx
View File

@ -17,8 +17,8 @@
* under the License.
*/
import React from 'react';
import { styled } from '@superset-ui/core';
import Icon from 'src/components/Icon';
import { styled, useTheme } from '@superset-ui/core';
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} /> : null}
avatar={avatar ? <Icon name={avatar as IconName} /> : null}
/>
)}
</StyledCard>

6
superset-frontend/src/components/Modal/Modal.tsx
View File

@ -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;

24
superset-frontend/src/components/Select/styles.tsx
View File

@ -17,8 +17,8 @@
* under the License.
*/
import React, { CSSProperties, ComponentType, ReactNode } from 'react';
import { css, SerializedStyles, ClassNames } from '@emotion/core';
import { SupersetTheme } from '@superset-ui/core';
import { SerializedStyles } from '@emotion/react';
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>
{({ css }) => (
<Option
{...props}
data={data}
className={css(data && data.style ? data.style : null)}
innerProps={innerProps}
>
{children}
</Option>
)}
</ClassNames>
<Option
{...props}
data={data}
css={data?.style ? data.style : null}
innerProps={innerProps}
>
{children}
</Option>
),
ClearIndicator: props => (
<ClearIndicator {...props}>

2
superset-frontend/src/components/Tabs/Tabs.tsx
View File

@ -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')};

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

@ -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,

2
superset-frontend/src/explore/components/ExploreViewContainer.jsx
View File

@ -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';

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

@ -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 = (
<>

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

@ -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 };
}

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

@ -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),

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

@ -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';

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

@ -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>
);
}

2
superset-frontend/src/views/menu.tsx
View File

@ -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';

7
superset-frontend/tsconfig.json
View File

@ -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/**/*",

3
superset-frontend/webpack.config.js
View File

@ -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',