Fix blank dataset description styles

apache · Aug 22, 2022 · ecf3314 · ecf3314
1 parent 30d733a
commit ecf3314
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx
@@ -37,6 +37,7 @@ export interface EmptyStateSmallProps {
 export interface EmptyStateProps extends EmptyStateSmallProps {
   buttonText?: ReactNode;
   buttonAction?: React.MouseEventHandler<HTMLElement>;
+  className?: string;
 }
 
 export interface ImageContainerProps {
@@ -152,8 +153,9 @@ export const EmptyStateBig = ({
   description,
   buttonAction,
   buttonText,
+  className,
 }: EmptyStateProps) => (
-  <EmptyStateContainer>
+  <EmptyStateContainer className={className}>
     <ImageContainer image={image} size={EmptyStateSize.Big} />
     <TextContainer
       css={(theme: SupersetTheme) =>

diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx
@@ -17,14 +17,20 @@
  * under the License.
  */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import { EmptyStateBig } from 'src/components/EmptyState';
 
+const StyledEmptyStateBig = styled(EmptyStateBig)`
+  p {
+    width: ${({ theme }) => theme.gridUnit * 115}px;
+  }
+`;
+
 const renderDescription = () => (
   <>
-    {t('Datasets can be created from database tables or SQL queries. Select ')}
-    <br />
-    {t('a database table to the left or ')}
+    {t(
+      'Datasets can be created from database tables or SQL queries. Select a database table to the left or ',
+    )}
     <span
       role="button"
       onClick={() => {
@@ -34,20 +40,16 @@ const renderDescription = () => (
     >
       {t('create dataset from SQL query')}
     </span>
-    {t(' to open ')}
-    <br />
-    {t('SQL Lab. From there you can save the query as a dataset.')}
+    {t(' to open SQL Lab. From there you can save the query as a dataset.')}
   </>
 );
 
 export default function DatasetPanel() {
   return (
-    <>
-      <EmptyStateBig
-        image="empty-dataset.svg"
-        title={t('Select dataset source')}
-        description={renderDescription()}
-      />
-    </>
+    <StyledEmptyStateBig
+      image="empty-dataset.svg"
+      title={t('Select dataset source')}
+      description={renderDescription()}
+    />
   );
 }