From 296111557cf3f8dfb8b59acc3ac14a912ce51c2f Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Sun, 2 Feb 2025 11:10:28 +0100 Subject: [PATCH] merge --- superset-frontend/package-lock.json | 33 +++++++- .../src/components/GridTable/Header.tsx | 4 +- .../src/components/GridTable/index.tsx | 12 +-- .../src/components/Radio/index.tsx | 80 ++++++++++--------- 4 files changed, 81 insertions(+), 48 deletions(-) diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index a4d8d68ea14bf..cbf5462bd5a86 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -56,7 +56,9 @@ "@visx/xychart": "^3.5.1", "abortcontroller-polyfill": "^1.7.8", "ace-builds": "^1.36.3", - "antd": "^4.10.3", + "ag-grid-community": "32.2.1", + "ag-grid-react": "32.2.1", + "antd": "4.10.3", "antd-v5": "npm:antd@^5.18.0", "bootstrap": "^3.4.1", "brace": "^0.11.1", @@ -14510,6 +14512,35 @@ "node": ">= 10.0.0" } }, + "node_modules/ag-charts-types": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", + "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==", + "license": "MIT" + }, + "node_modules/ag-grid-community": { + "version": "32.2.1", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.1.tgz", + "integrity": "sha512-mrnm1DnLI9Wd408mMwP+6p7lbTC3FYgzNIUPygBvNh3SzZnbzTEUJF/BTKXi+MARWtG5S0IMUYy4hqBiLbobaQ==", + "license": "MIT", + "dependencies": { + "ag-charts-types": "10.2.0" + } + }, + "node_modules/ag-grid-react": { + "version": "32.2.1", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.1.tgz", + "integrity": "sha512-lojTKsT/ncRZ81mrDa7qkIhZePfYlLCHIiAL1WbzL1mNPrglaa7QQKkE6hhhuAXvAm2uUhK1OfkMPnrqsEFldA==", + "license": "MIT", + "dependencies": { + "ag-grid-community": "32.2.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", diff --git a/superset-frontend/src/components/GridTable/Header.tsx b/superset-frontend/src/components/GridTable/Header.tsx index a50677970707b..297399a19440f 100644 --- a/superset-frontend/src/components/GridTable/Header.tsx +++ b/superset-frontend/src/components/GridTable/Header.tsx @@ -57,7 +57,7 @@ const SortSeqLabel = styled.span` const HeaderAction = styled.div` display: none; position: absolute; - right: ${({ theme }) => theme.gridUnit * 3}px; + right: ${({ theme }) => theme.sizeUnit * 3}px; &.main { margin: 0 auto; left: 0; @@ -66,7 +66,7 @@ const HeaderAction = styled.div` } & .ant-dropdown-trigger { cursor: context-menu; - padding: ${({ theme }) => theme.gridUnit * 2}px; + padding: ${({ theme }) => theme.sizeUnit * 2}px; background-color: var(--ag-background-color); box-shadow: 0 0 2px var(--ag-chip-border-color); border-radius: 50%; diff --git a/superset-frontend/src/components/GridTable/index.tsx b/superset-frontend/src/components/GridTable/index.tsx index 1311148adc828..05f27a2aa3491 100644 --- a/superset-frontend/src/components/GridTable/index.tsx +++ b/superset-frontend/src/components/GridTable/index.tsx @@ -166,7 +166,7 @@ function GridTable({ filter: Boolean(enableActions), }; - const rowHeight = theme.gridUnit * (size === GridSize.Middle ? 9 : 7); + const rowHeight = theme.sizeUnit * (size === GridSize.Middle ? 9 : 7); return ( @@ -174,11 +174,11 @@ function GridTable({ styles={() => css` #grid-table.ag-theme-quartz { --ag-icon-font-family: agGridMaterial; - --ag-grid-size: ${theme.gridUnit}px; - --ag-font-size: ${theme.typography.sizes[ - size === GridSize.Middle ? 'm' : 's' - ]}px; - --ag-font-family: ${theme.typography.families.sansSerif}; + --ag-grid-size: ${theme.sizeUnit}px; + --ag-font-size: ${GridSize.Middle === size + ? theme.fontSize + : theme.fontSizeSM}px; + --ag-font-family: ${theme.fontFamily}; --ag-row-height: ${rowHeight}px; ${!striped && `--ag-odd-row-background-color: ${theme.colors.grayscale.light5};`} diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx index 740051b96b885..9311cdde5ad55 100644 --- a/superset-frontend/src/components/Radio/index.tsx +++ b/superset-frontend/src/components/Radio/index.tsx @@ -16,46 +16,48 @@ * specific language governing permissions and limitations * under the License. */ -import { styled } from '@superset-ui/core'; -import { Radio as AntdRadio } from 'antd'; +import { Radio as Antd5Radio, CheckboxOptionType } from 'antd-v5'; +import type { + RadioChangeEvent, + RadioProps, + RadioGroupProps, +} from 'antd-v5/lib/radio'; -const StyledRadio = styled(AntdRadio)` - .ant-radio-inner { - top: -1px; - left: 2px; - width: ${({ theme }) => theme.sizeUnit * 4}px; - height: ${({ theme }) => theme.sizeUnit * 4}px; - border-width: 2px; - border-color: ${({ theme }) => theme.colors.grayscale.light2}; - } +import { Space, SpaceProps } from 'src/components/Space'; - .ant-radio.ant-radio-checked { - .ant-radio-inner { - border-width: ${({ theme }) => theme.sizeUnit + 1}px; - border-color: ${({ theme }) => theme.colorPrimary}; - } +export type RadioGroupWrapperProps = RadioGroupProps & { + spaceConfig?: { + direction?: SpaceProps['direction']; + size?: SpaceProps['size']; + align?: SpaceProps['align']; + wrap?: SpaceProps['wrap']; + }; + options: CheckboxOptionType[]; +}; - .ant-radio-inner::after { - background-color: ${({ theme }) => theme.colors.grayscale.light5}; - top: 0; - left: 0; - width: ${({ theme }) => theme.sizeUnit + 2}px; - height: ${({ theme }) => theme.sizeUnit + 2}px; - } - } - - .ant-radio:hover, - .ant-radio:focus { - .ant-radio-inner { - border-color: ${({ theme }) => theme.colorPrimaryText}; - } - } -`; -const StyledGroup = styled(AntdRadio.Group)` - font-size: inherit; -`; - -export const Radio = Object.assign(StyledRadio, { - Group: StyledGroup, - Button: AntdRadio.Button, +const RadioGroup = ({ + spaceConfig, + options, + ...props +}: RadioGroupWrapperProps) => { + const content = options.map((option: CheckboxOptionType) => ( + + {option.label} + + )); + return ( + + {spaceConfig ? {content} : content} + + ); +}; +export type { + RadioChangeEvent, + RadioGroupProps, + RadioProps, + CheckboxOptionType, +}; +export const Radio = Object.assign(Antd5Radio, { + GroupWrapper: RadioGroup, + Button: Antd5Radio.Button, });