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 330563566c2..30031e50550 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 = { + 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 = ({ buttonIcon, buttonAction, size = 'medium', + textSize, children, -}) => ( - - {image && } -
css` - max-width: ${size === 'large' - ? theme.sizeUnit * 150 - : theme.sizeUnit * 100}px; - `} - > - {title && {title}} - {description && ( - - {description} - - )} - {buttonText && buttonAction && ( - - )} - {children} -
-
-); +}) => { + const effectiveTextSize = textSize ?? size; + const containerSize = getLargerSize(size, effectiveTextSize); + return ( + + {image && } +
css` + max-width: ${containerSize === 'large' + ? theme.sizeUnit * 150 + : theme.sizeUnit * 100}px; + `} + > + {title && {title}} + {description && ( + + {description} + + )} + {buttonText && buttonAction && ( + + )} + {children} +
+
+ ); +}; 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 a7dc9673062..010f5b247d3 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 49bafe421ad..21b9d4fb90d 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` ${({ 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` .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 = ( - +
{REFRESHING}
@@ -331,7 +324,7 @@ const DatasetPanel = ({ } title={tableName || ''} > - + {tableName} diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx index a8f3eff54db..48add4bc273 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) => {