@@ -105,18 +107,24 @@ export function ControlHeader({
{warning && (
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-
+ css`
+ font-size: ${theme.sizeUnit * 3}px;
+ color: ${theme.colorError};
+ `}
+ />
{' '}
)}
{danger && (
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-
+ css`
+ font-size: ${theme.sizeUnit * 3}px;
+ color: ${theme.colorError};
+ `}
+ />{' '}
{' '}
)}
@@ -127,9 +135,12 @@ export function ControlHeader({
placement="top"
title={validationErrors.join(' ')}
>
- {/* TODO: Remove fa-icon */}
- {/* eslint-disable-next-line icons/no-fa-icons-usage */}
-
+
css`
+ font-size: ${theme.sizeUnit * 3}px;
+ color: ${theme.colorError};
+ `}
+ />{' '}
{' '}
)}
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx
index 032365ebd5d..6e0bcdf35a3 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx
@@ -17,5 +17,4 @@
* under the License.
*/
-export { Dropdown } from 'antd';
-export type { DropDownProps } from 'antd/lib/dropdown';
+export { Dropdown, type DropDownProps } from 'antd-v5';
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx
index 89a7405cde5..97c20923c0b 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx
@@ -17,5 +17,4 @@
* under the License.
*/
-export { Menu } from 'antd';
-export type { MenuProps } from 'antd/lib/menu';
+export { Menu, type MenuProps } from 'antd-v5';
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
index d3f2df4c885..dda211db6f4 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx
@@ -25,6 +25,7 @@ import {
SafeMarkdown,
SupersetTheme,
} from '@superset-ui/core';
+import { Typography } from 'antd-v5';
import { InfoTooltipWithTrigger } from './InfoTooltipWithTrigger';
import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
import CertifiedIconWithTooltip from './CertifiedIconWithTooltip';
@@ -61,13 +62,6 @@ export function MetricOption({
url = '',
}: MetricOptionProps) {
const verbose = metric.verbose_name || metric.metric_name || metric.label;
- const link = url ? (
-
- {verbose}
-
- ) : (
- verbose
- );
const label = (
- {link}
+ {url ? (
+
+ {verbose}
+
+ ) : (
+ verbose
+ )}
);
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/Select.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/Select.tsx
index 01fb74d2e8e..148ddbf3ff4 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/Select.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/Select.tsx
@@ -17,7 +17,10 @@
* under the License.
*/
import { useState, ReactNode } from 'react';
-import AntdSelect, { SelectProps as AntdSelectProps } from 'antd/lib/select';
+import {
+ Select as AntdSelect,
+ type SelectProps as AntdSelectProps,
+} from 'antd-v5';
export const { Option }: any = AntdSelect;
@@ -35,7 +38,7 @@ export type SelectProps = Omit, 'options'> & {
export default function Select({
creatable,
onSearch,
- dropdownMatchSelectWidth = false,
+ popupMatchSelectWidth = false,
minWidth = '100%',
showSearch: showSearch_ = true,
onChange,
@@ -73,7 +76,7 @@ export default function Select({
return (
- dropdownMatchSelectWidth={dropdownMatchSelectWidth}
+ popupMatchSelectWidth={popupMatchSelectWidth}
showSearch={showSearch}
onSearch={handleSearch}
onChange={handleChange}
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
index 81bca2c4d40..03cb83d27d3 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx
@@ -18,6 +18,7 @@
*/
import { ReactNode } from 'react';
import { JsonValue, useTheme } from '@superset-ui/core';
+import { Radio } from 'antd-v5';
import { ControlHeader } from '../../components/ControlHeader';
// [value, label]
@@ -71,22 +72,17 @@ export default function RadioButtonControl({
}}
>
-
+ onChange(e.target.value)}
+ >
{options.map(([val, label]) => (
-
+
))}
-
+
);
}
diff --git a/superset-frontend/packages/superset-ui-core/src/chart-composition/tooltip/TooltipTable.tsx b/superset-frontend/packages/superset-ui-core/src/chart-composition/tooltip/TooltipTable.tsx
index 4952d821f1a..949cb609948 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart-composition/tooltip/TooltipTable.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/chart-composition/tooltip/TooltipTable.tsx
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-
-import { CSSProperties, PureComponent, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { Table, type TableColumnsType } from 'antd-v5';
interface TooltipRowData {
key: string | number;
@@ -27,43 +27,52 @@ interface TooltipRowData {
valueStyle?: CSSProperties;
}
-const defaultProps = {
- className: '',
- data: [] as TooltipRowData[],
-};
-
-type Props = {
+interface TooltipTableProps {
className?: string;
data: TooltipRowData[];
-} & Readonly
;
+}
const VALUE_CELL_STYLE: CSSProperties = { paddingLeft: 8, textAlign: 'right' };
-export default class TooltipTable extends PureComponent {
- static defaultProps = defaultProps;
+const TooltipTable = ({ className = '', data }: TooltipTableProps) => {
+ const columns: TableColumnsType = [
+ {
+ title: '',
+ dataIndex: 'keyColumn',
+ key: 'keyColumn',
+ render: (text, record) => (
+ {record.keyColumn ?? record.key}
+ ),
+ },
+ {
+ title: '',
+ dataIndex: 'valueColumn',
+ key: 'valueColumn',
+ align: 'right',
+ render: (text, record) => (
+
+ {record.valueColumn}
+
+ ),
+ },
+ ];
- render() {
- const { className, data } = this.props;
+ return (
+
+ );
+};
- return (
-
-
- {data.map(({ key, keyColumn, keyStyle, valueColumn, valueStyle }) => (
-
- | {keyColumn ?? key} |
-
- {valueColumn}
- |
-
- ))}
-
-
- );
- }
-}
+export default TooltipTable;
diff --git a/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx b/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx
index 7df4e8c5faa..c27cb44f4c5 100644
--- a/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx
+++ b/superset-frontend/packages/superset-ui-core/test/chart-composition/tooltip/TooltipTable.test.tsx
@@ -18,20 +18,25 @@
*/
import '@testing-library/jest-dom';
-import { screen, render } from '@testing-library/react';
+import { screen, render, within } from '@testing-library/react';
import { TooltipTable } from '@superset-ui/core';
import { CSSProperties } from 'react';
describe('TooltipTable', () => {
it('sets className', () => {
- const { container } = render();
- expect(container.querySelector('[class="test-class"]')).toBeInTheDocument();
+ const { container } = render(
+ ,
+ );
+ expect(container.querySelector('.test-class')).toBeInTheDocument();
});
it('renders empty table', () => {
- const { container } = render();
- expect(container.querySelector('tbody')).toBeInTheDocument();
- expect(container.querySelector('tr')).not.toBeInTheDocument();
+ render();
+ const table = screen.getByRole('table');
+ expect(table).toBeInTheDocument();
+ const rows = within(table).queryAllByRole('row');
+ expect(rows.length).toBe(1);
+ expect(rows[0]).toHaveTextContent(/No Data|empty/i);
});
it('renders table with content', async () => {
@@ -41,29 +46,33 @@ describe('TooltipTable', () => {
keyColumn: 'Cersei',
keyStyle: { padding: '10' },
valueColumn: 2,
- valueStyle: { textAlign: 'right' } as CSSProperties,
+ valueStyle: { textAlign: 'right' as CSSProperties['textAlign'] },
},
{
key: 'Jaime',
keyColumn: 'Jaime',
keyStyle: { padding: '10' },
valueColumn: 1,
- valueStyle: { textAlign: 'right' } as CSSProperties,
- },
- {
- key: 'Tyrion',
- keyStyle: { padding: '10' },
- valueColumn: 2,
+ valueStyle: { textAlign: 'right' as CSSProperties['textAlign'] },
},
+ { key: 'Tyrion', keyStyle: { padding: '10' }, valueColumn: 2 },
];
render();
- for await (const { key, valueColumn } of data) {
- const keyCell = await screen.findByText(key);
- const valueCell = keyCell?.nextSibling as HTMLElement;
- expect(keyCell).toBeInTheDocument();
- expect(valueCell?.textContent).toEqual(String(valueColumn));
- }
+ await Promise.all(
+ data.map(async ({ keyColumn, key, valueColumn }) => {
+ const keyText = keyColumn ?? key;
+ const keyCell = await screen.findByText(keyText);
+ expect(keyCell).toBeInTheDocument();
+
+ const row = keyCell.closest('tr');
+ expect(row).toBeInTheDocument();
+
+ const cells = within(row!).getAllByRole('cell');
+ expect(cells[0]).toHaveTextContent(String(keyText));
+ expect(cells[1]).toHaveTextContent(String(valueColumn));
+ }),
+ );
});
});
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/shared/components/VerifyCORS.tsx b/superset-frontend/packages/superset-ui-demo/storybook/shared/components/VerifyCORS.tsx
index 82d3c536d43..d87f83bccc6 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/shared/components/VerifyCORS.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/shared/components/VerifyCORS.tsx
@@ -25,6 +25,7 @@ import {
SupersetApiError,
t,
} from '@superset-ui/core';
+import { Button } from 'antd-v5';
import ErrorMessage from './ErrorMessage';
export type Props = {
@@ -117,13 +118,9 @@ export default class VerifyCORS extends Component {
3) click below to verify authentication. You may debug CORS further
using the `@superset-ui/connection` story.
-
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js
index 3a7ff4c40be..ceec36621c0 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/Styles.js
@@ -33,6 +33,7 @@ export const Styles = styled.div`
}
table thead {
+ background-color: ${theme.colorBgBase};
position: ${isDashboardEditMode ? 'inherit' : 'sticky'};
top: 0;
}
diff --git a/superset-frontend/plugins/plugin-chart-table/package.json b/superset-frontend/plugins/plugin-chart-table/package.json
index 4abf7dacfe7..418a6a1b609 100644
--- a/superset-frontend/plugins/plugin-chart-table/package.json
+++ b/superset-frontend/plugins/plugin-chart-table/package.json
@@ -33,7 +33,8 @@
"memoize-one": "^5.2.1",
"react-table": "^7.8.0",
"regenerator-runtime": "^0.14.1",
- "xss": "^1.0.15"
+ "xss": "^1.0.15",
+ "antd-v5": "npm:antd@^5.24.6"
},
"peerDependencies": {
"@ant-design/icons": "^5.2.6",
diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
index 21ce6541cf2..a9d8d0d1ba9 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
@@ -25,7 +25,7 @@ import {
CSSProperties,
DragEvent,
} from 'react';
-
+import { css, typedMemo, usePrevious } from '@superset-ui/core';
import {
useTable,
usePagination,
@@ -39,7 +39,6 @@ import {
Row,
} from 'react-table';
import { matchSorter, rankings } from 'match-sorter';
-import { typedMemo, usePrevious } from '@superset-ui/core';
import { isEqual } from 'lodash';
import GlobalFilter, { GlobalFilterProps } from './components/GlobalFilter';
import SelectPageSize, {
@@ -381,7 +380,13 @@ export default typedMemo(function DataTable