This is an automated email from the ASF dual-hosted git repository. asoare pushed a commit to branch alexandrusoare/fix/datasets-ui-bugs in repository https://gitbox.apache.org/repos/asf/superset.git
commit 290650a91f01cbfffbec4de125f8adab33b550b3 Author: alexandrusoare <[email protected]> AuthorDate: Mon Jan 12 16:26:09 2026 +0200 fix(datasets): ui bug fixes --- .../src/components/EmptyState/index.tsx | 87 +++++++++++++--------- .../src/components/EmptyState/types.ts | 3 + .../AddDataset/DatasetPanel/DatasetPanel.tsx | 13 ++-- .../AddDataset/DatasetPanel/MessageContent.tsx | 3 +- 4 files changed, 64 insertions(+), 42 deletions(-) diff --git a/superset-frontend/packages/superset-ui-core/src/components/EmptyState/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/EmptyState/index.tsx index 3d8d3d43a7..b73e61f014 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/EmptyState/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/components/EmptyState/index.tsx @@ -99,6 +99,15 @@ const Description = styled.p<{ size: EmptyStateSize }>` `} `; +const sizeOrder: Record<EmptyStateSize, number> = { + small: 0, + medium: 1, + large: 2, +}; + +const getLargerSize = (a: EmptyStateSize, b: EmptyStateSize): EmptyStateSize => + sizeOrder[a] >= sizeOrder[b] ? a : b; + const getImageHeight = (size: EmptyStateSize) => { switch (size) { case 'small': @@ -148,41 +157,49 @@ export const EmptyState: React.FC<EmptyStateProps> = ({ buttonIcon, buttonAction, size = 'medium', + textSize, children, -}) => ( - <EmptyStateContainer> - {image && <ImageContainer image={image} size={size} />} - <div - css={(theme: SupersetTheme) => css` - max-width: ${size === 'large' - ? theme.sizeUnit * 150 - : theme.sizeUnit * 100}px; - `} - > - {title && <Title size={size}>{title}</Title>} - {description && ( - <Description size={size} className="ant-empty-description"> - {description} - </Description> - )} - {buttonText && buttonAction && ( - <Button - icon={buttonIcon} - buttonStyle="primary" - onClick={buttonAction} - onMouseDown={handleMouseDown} - css={(theme: SupersetTheme) => css` - margin-top: ${theme.sizeUnit * 4}px; - z-index: 1; - box-shadow: none; - `} - > - {buttonText} - </Button> - )} - {children} - </div> - </EmptyStateContainer> -); +}) => { + const effectiveTextSize = textSize ?? size; + const containerSize = getLargerSize(size, effectiveTextSize); + return ( + <EmptyStateContainer> + {image && <ImageContainer image={image} size={size} />} + <div + css={(theme: SupersetTheme) => css` + max-width: ${containerSize === 'large' + ? theme.sizeUnit * 150 + : theme.sizeUnit * 100}px; + `} + > + {title && <Title size={effectiveTextSize}>{title}</Title>} + {description && ( + <Description + size={effectiveTextSize} + className="ant-empty-description" + > + {description} + </Description> + )} + {buttonText && buttonAction && ( + <Button + icon={buttonIcon} + buttonStyle="primary" + onClick={buttonAction} + onMouseDown={handleMouseDown} + css={(theme: SupersetTheme) => css` + margin-top: ${theme.sizeUnit * 4}px; + z-index: 1; + box-shadow: none; + `} + > + {buttonText} + </Button> + )} + {children} + </div> + </EmptyStateContainer> + ); +}; export type { EmptyStateProps }; diff --git a/superset-frontend/packages/superset-ui-core/src/components/EmptyState/types.ts b/superset-frontend/packages/superset-ui-core/src/components/EmptyState/types.ts index a7dc967306..010f5b247d 100644 --- a/superset-frontend/packages/superset-ui-core/src/components/EmptyState/types.ts +++ b/superset-frontend/packages/superset-ui-core/src/components/EmptyState/types.ts @@ -28,6 +28,9 @@ export type EmptyStateProps = { buttonText?: ReactNode; buttonIcon?: IconType; buttonAction?: (event: SyntheticEvent) => void; + /** Controls image size. Defaults to 'medium'. */ size?: EmptyStateSize; + /** Controls title and description text size. Defaults to the value of `size` if not provided. */ + textSize?: EmptyStateSize; children?: ReactNode; }; diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx index b54c835487..3e47c08e41 100644 --- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx @@ -49,8 +49,9 @@ interface StyledHeaderProps { position: EPosition; } -const LOADER_WIDTH = 200; -const SPINNER_WIDTH = 120; +const LOADER_WIDTH = 120; +const SPINNER_WIDTH = 40; +const TEXT_WIDTH = 150; const HALF = 0.5; const MARGIN_MULTIPLIER = 3; @@ -61,7 +62,7 @@ const StyledHeader = styled.div<StyledHeaderProps>` ${theme.sizeUnit * MARGIN_MULTIPLIER}px ${theme.sizeUnit * MARGIN_MULTIPLIER}px ${theme.sizeUnit * (MARGIN_MULTIPLIER + 3)}px; - font-size: ${theme.sizeUnit * 6}px; + font-size: ${theme.sizeUnit * 5}px; font-weight: ${theme.fontWeightStrong}; padding-bottom: ${theme.sizeUnit * MARGIN_MULTIPLIER}px; @@ -113,11 +114,11 @@ const StyledLoader = styled.div` } div { - width: 100%; + width: ${TEXT_WIDTH}px; margin-top: ${theme.sizeUnit * MARGIN_MULTIPLIER}px; text-align: center; font-weight: ${theme.fontWeightNormal}; - font-size: ${theme.fontSizeLG}px; + font-size: ${theme.fontSize}px; color: ${theme.colorTextSecondary}; } `} @@ -331,7 +332,7 @@ const DatasetPanel = ({ } title={tableName || ''} > - <Icons.InsertRowAboveOutlined iconSize="xxl" /> + <Icons.InsertRowAboveOutlined iconSize="xl" /> {tableName} </StyledHeader> </> diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx index e6b4186fb4..0e9a57a446 100644 --- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx @@ -94,7 +94,8 @@ export const MessageContent = (props: MessageContentProps) => { <StyledContainer> <StyledEmptyState image={currentImage} - size="large" + size="medium" + textSize="large" title={currentTitle} description={currentDescription} />
