You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by as...@apache.org on 2026/01/12 14:26:36 UTC
(superset) 01/01: fix(datasets): ui bug fixes
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 <al...@gmail.com>
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}
/>