This is an automated email from the ASF dual-hosted git repository.
enzomartellucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new fc67569cd4 fix(datasets): ui bug fixes (#37058)
fc67569cd4 is described below
commit fc67569cd48f56050f7ea4b930d3c7d309086f64
Author: Alexandru Soare <[email protected]>
AuthorDate: Tue Jan 13 17:21:46 2026 +0200
fix(datasets): ui bug fixes (#37058)
---
.../src/components/EmptyState/index.tsx | 87 +++++++++++++---------
.../src/components/EmptyState/types.ts | 3 +
.../AddDataset/DatasetPanel/DatasetPanel.tsx | 25 +++----
.../AddDataset/DatasetPanel/MessageContent.tsx | 3 +-
4 files changed, 66 insertions(+), 52 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 330563566c..30031e5055 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 49bafe421a..21b9d4fb90 100644
---
a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++
b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -49,19 +49,18 @@ interface StyledHeaderProps {
position: EPosition;
}
-const LOADER_WIDTH = 200;
-const SPINNER_WIDTH = 120;
-const HALF = 0.5;
const MARGIN_MULTIPLIER = 3;
const StyledHeader = styled.div<StyledHeaderProps>`
${({ theme, position }) => `
position: ${position};
+ display: flex;
+ align-items: center;
margin: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px
${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;
@@ -71,7 +70,6 @@ const StyledHeader = styled.div<StyledHeaderProps>`
.anticon:first-of-type {
margin-right: ${theme.sizeUnit * 2}px;
- vertical-align: text-top;
}
`}
@@ -104,20 +102,15 @@ const LoaderContainer = styled.div`
const StyledLoader = styled.div`
${({ theme }) => `
- max-width: 50%;
- width: ${LOADER_WIDTH}px;
-
- .ant-image {
- width: ${SPINNER_WIDTH}px;
- margin-left: ${(LOADER_WIDTH - SPINNER_WIDTH) * HALF}px;
- }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
div {
- width: 100%;
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};
}
`}
@@ -268,7 +261,7 @@ const DatasetPanel = ({
loader = (
<LoaderContainer>
<StyledLoader>
- <Loading position="inline-centered" />
+ <Loading position="inline-centered" size="m" />
<div>{REFRESHING}</div>
</StyledLoader>
</LoaderContainer>
@@ -331,7 +324,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 a8f3eff54d..48add4bc27 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}
/>
