This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch refactor_empty in repository https://gitbox.apache.org/repos/asf/superset.git
commit dc49e9fd1ce980bd7f596f88504ea08d5abb3f5b Author: Maxime Beauchemin <[email protected]> AuthorDate: Wed Jan 15 00:08:37 2025 -0800 chore: Empty state refactor - making `size` a prop instead of one-component-per-size - fixing up the svg so its themable using `currentColor` - centralizing/fixing up references --- .../src/SqlLab/components/QueryHistory/index.tsx | 5 +- .../src/SqlLab/components/SouthPane/Results.tsx | 4 +- .../src/SqlLab/components/SqlEditor/index.tsx | 5 +- .../SqlLab/components/SqlEditorLeftBar/index.tsx | 6 +- .../SqlLab/components/TabbedSqlEditors/index.tsx | 5 +- superset-frontend/src/assets/images/chart.svg | 6 +- superset-frontend/src/assets/images/document.svg | 4 +- .../src/assets/images/empty-charts.svg | 22 +- .../src/assets/images/empty-dashboard.svg | 14 +- .../src/assets/images/empty-dataset.svg | 39 ++-- .../src/assets/images/empty-queries.svg | 16 +- .../src/assets/images/empty-query.svg | 12 +- .../src/assets/images/empty-table.svg | 6 +- superset-frontend/src/assets/images/empty.svg | 6 +- .../src/assets/images/empty_sql_chart.svg | 6 +- .../src/assets/images/filter-results.svg | 67 ++++-- superset-frontend/src/assets/images/filter.svg | 52 +++-- .../src/assets/images/star-circle.svg | 6 +- superset-frontend/src/assets/images/union.svg | 6 +- superset-frontend/src/assets/images/vector.svg | 4 +- superset-frontend/src/components/Chart/Chart.tsx | 8 +- .../Chart/DrillDetail/DrillDetailPane.tsx | 4 +- .../DatabaseSelector/DatabaseSelector.test.tsx | 4 +- .../components/EmptyState/EmptyState.stories.tsx | 99 ++++---- .../src/components/EmptyState/index.tsx | 251 ++++++++------------- .../src/components/ListView/ListView.tsx | 8 +- superset-frontend/src/components/Table/index.tsx | 59 ++--- .../DashboardBuilder/DashboardBuilder.tsx | 5 +- .../src/dashboard/components/DashboardGrid.jsx | 11 +- .../components/gridComponents/ChartHolder.test.tsx | 2 +- .../dashboard/components/gridComponents/Tab.jsx | 4 +- .../components/gridComponents/Tab.test.tsx | 4 +- .../nativeFilters/FilterBar/Vertical.tsx | 5 +- .../DataTablesPane/components/SamplesPane.tsx | 4 +- .../DataTablesPane/components/useResultsPane.tsx | 6 +- .../AnnotationLayerControl/AnnotationLayer.jsx | 5 +- .../DndColumnSelectControl/ColumnSelectPopover.tsx | 11 +- .../MetricControl/AdhocMetricEditPopover/index.jsx | 8 +- .../src/features/allEntities/AllEntitiesTable.tsx | 5 +- .../AddDataset/DatasetPanel/MessageContent.tsx | 7 +- .../AddDataset/EditDataset/UsageTab/index.tsx | 7 +- .../datasets/AddDataset/LeftPanel/index.tsx | 4 +- superset-frontend/src/features/home/EmptyState.tsx | 16 +- 43 files changed, 423 insertions(+), 405 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx index 30103dafa5..6916e1e19b 100644 --- a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx @@ -20,7 +20,7 @@ import { useEffect, useMemo, useState } from 'react'; import { shallowEqual, useSelector } from 'react-redux'; import { useInView } from 'react-intersection-observer'; import { omit } from 'lodash'; -import { EmptyStateMedium } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { t, styled, @@ -143,8 +143,9 @@ const QueryHistory = ({ </> ) : ( <StyledEmptyStateWrapper> - <EmptyStateMedium + <EmptyState title={t('Run a query to display query history')} + size="medium" image="document.svg" /> </StyledEmptyStateWrapper> diff --git a/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx b/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx index 3dfec40bdc..6a2a60831b 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx +++ b/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx @@ -19,7 +19,7 @@ import { FC } from 'react'; import { shallowEqual, useSelector } from 'react-redux'; import Alert from 'src/components/Alert'; -import { EmptyStateMedium } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { FeatureFlag, styled, t, isFeatureEnabled } from '@superset-ui/core'; import { SqlLabRootState } from 'src/SqlLab/types'; @@ -67,7 +67,7 @@ const Results: FC<Props> = ({ ) { return ( <StyledEmptyStateWrapper> - <EmptyStateMedium + <EmptyState title={t('Run a query to display results')} image="document.svg" /> diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx index cab82cd02f..b3d176d90e 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx @@ -100,7 +100,7 @@ import { LocalStorageKeys, setItem, } from 'src/utils/localStorageHelpers'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import Alert from 'src/components/Alert'; import getBootstrapData from 'src/utils/getBootstrapData'; import useLogAction from 'src/logger/useLogAction'; @@ -967,8 +967,9 @@ const SqlEditor: FC<Props> = ({ <Skeleton active /> </div> ) : showEmptyState && !hasSqlStatement ? ( - <EmptyStateBig + <EmptyState image="vector.svg" + size="large" title={t('Select a database to write a query')} description={t( 'Choose one of the available databases from the panel on the left.', diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx index c91036a725..1e0012aed2 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx @@ -41,7 +41,7 @@ import { TableSelectorMultiple } from 'src/components/TableSelector'; import { IconTooltip } from 'src/components/IconTooltip'; import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor'; import type { DatabaseObject } from 'src/components/DatabaseSelector'; -import { emptyStateComponent } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { getItem, LocalStorageKeys, @@ -113,7 +113,7 @@ const SqlEditorLeftBar = ({ 'schema', ]); - const [emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false); + const [_emptyResultsWithSearch, setEmptyResultsWithSearch] = useState(false); const [userSelectedDb, setUserSelected] = useState<DatabaseObject | null>( null, ); @@ -249,7 +249,7 @@ const SqlEditorLeftBar = ({ <LeftBarStyles data-test="sql-editor-left-bar"> <TableSelectorMultiple onEmptyResults={onEmptyResults} - emptyState={emptyStateComponent(emptyResultsWithSearch)} + emptyState={<EmptyState />} database={userSelectedDb} getDbList={handleDbList} handleError={handleError} diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx index df3099994e..7f43e8adb7 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx +++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx @@ -27,7 +27,7 @@ import { Logger } from 'src/logger/LogUtils'; import { Tooltip } from 'src/components/Tooltip'; import { detectOS } from 'src/utils/common'; import * as Actions from 'src/SqlLab/actions/sqlLab'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import getBootstrapData from 'src/utils/getBootstrapData'; import { locationContext } from 'src/pages/SqlLab/LocationContext'; import SqlEditor from '../SqlEditor'; @@ -255,8 +255,9 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> { tab={emptyTab} closable={false} > - <EmptyStateBig + <EmptyState image="empty_sql_chart.svg" + size="large" description={t('Add a new tab to create SQL Query')} /> </EditableTabs.TabPane> diff --git a/superset-frontend/src/assets/images/chart.svg b/superset-frontend/src/assets/images/chart.svg index 2267342bcc..34e45631e0 100644 --- a/superset-frontend/src/assets/images/chart.svg +++ b/superset-frontend/src/assets/images/chart.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="160" height="166" viewBox="0 0 160 166" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path fill-rule="evenodd" clip-rule="evenodd" d="M123.638 8C123.362 8 123.138 8.22386 123.138 8.5V158H151.896V8.5C151.896 8.22386 151.672 8 151.396 8H123.638ZM84.7933 40.6426C84.7933 40.3665 85.0171 40.1426 85.2933 40.1426H113.052C113.328 40.1426 113.552 40.3665 113.552 40.6426V158H84.7933V40.6426ZM46.9486 72.2853C46.6725 72.2853 46.4486 72.5091 46.4486 72.7853V157.999H75.2071V72.7853C75.2071 72.5091 74.9832 72.2853 74.7071 72.2853H46.9486ZM8.604 93.7147C8.32786 93.7147 8.104 93.9385 8.1 [...] -<path d="M123.138 158H122.638V158.5H123.138V158ZM151.896 158V158.5H152.396V158H151.896ZM113.552 158V158.5H114.052V158H113.552ZM84.7933 158H84.2933V158.5H84.7933V158ZM46.4486 157.999H45.9486V158.499H46.4486V157.999ZM75.2071 157.999V158.499H75.7071V157.999H75.2071ZM8.104 158H7.604V158.5H8.104V158ZM36.8625 158V158.5H37.3625V158H36.8625ZM123.638 8.5V8.5V7.5C123.086 7.5 122.638 7.94772 122.638 8.5H123.638ZM123.638 158V8.5H122.638V158H123.638ZM151.896 157.5H123.138V158.5H151.896V157.5ZM151.396 [...] +<svg width="160" height="170" viewBox="0 0 160 166" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path fill-rule="evenodd" clip-rule="evenodd" d="M123.638 8C123.362 8 123.138 8.22386 123.138 8.5V158H151.896V8.5C151.896 8.22386 151.672 8 151.396 8H123.638ZM84.7933 40.6426C84.7933 40.3665 85.0171 40.1426 85.2933 40.1426H113.052C113.328 40.1426 113.552 40.3665 113.552 40.6426V158H84.7933V40.6426ZM46.9486 72.2853C46.6725 72.2853 46.4486 72.5091 46.4486 72.7853V157.999H75.2071V72.7853C75.2071 72.5091 74.9832 72.2853 74.7071 72.2853H46.9486ZM8.604 93.7147C8.32786 93.7147 8.104 93.9385 8.1 [...] +<path d="M123.138 158H122.638V158.5H123.138V158ZM151.896 158V158.5H152.396V158H151.896ZM113.552 158V158.5H114.052V158H113.552ZM84.7933 158H84.2933V158.5H84.7933V158ZM46.4486 157.999H45.9486V158.499H46.4486V157.999ZM75.2071 157.999V158.499H75.7071V157.999H75.2071ZM8.104 158H7.604V158.5H8.104V158ZM36.8625 158V158.5H37.3625V158H36.8625ZM123.638 8.5V8.5V7.5C123.086 7.5 122.638 7.94772 122.638 8.5H123.638ZM123.638 158V8.5H122.638V158H123.638ZM151.896 157.5H123.138V158.5H151.896V157.5ZM151.396 [...] </svg> diff --git a/superset-frontend/src/assets/images/document.svg b/superset-frontend/src/assets/images/document.svg index e3d1bfe1be..552fc8d220 100644 --- a/superset-frontend/src/assets/images/document.svg +++ b/superset-frontend/src/assets/images/document.svg @@ -17,6 +17,6 @@ specific language governing permissions and limitations under the License. --> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M53.2326 10.7391L53.2336 10.7402L63.5 21.7963V79.5H0.5V0.5H43.7811L53.2326 10.7391Z" fill="#FAFAFA" stroke="#D9D9D9"/> -<path d="M44 0V22.4H64" stroke="#D9D9D9"/> +<path d="M53.2326 10.7391L53.2336 10.7402L63.5 21.7963V79.5H0.5V0.5H43.7811L53.2326 10.7391Z" fill="currentColor" stroke="currentColor" fill-opacity="0.5"/> +<path d="M44 0V22.4H64" stroke="currentColor"/> </svg> diff --git a/superset-frontend/src/assets/images/empty-charts.svg b/superset-frontend/src/assets/images/empty-charts.svg index b4cdd99086..8c7b205d2a 100644 --- a/superset-frontend/src/assets/images/empty-charts.svg +++ b/superset-frontend/src/assets/images/empty-charts.svg @@ -16,15 +16,15 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> -<rect x="16" y="1" width="86" height="62" rx="3" stroke="#D1D1D1" stroke-width="2"/> -<mask id="path-2-inside-1" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M58 10.6416C58 9.53706 57.1014 8.63294 56.0006 8.72373C43.6813 9.73974 34 20.0601 34 32.6416C34 45.8965 44.7452 56.6416 58 56.6416C70.5815 56.6416 80.9019 46.9604 81.9179 34.641C82.0087 33.5402 81.1046 32.6416 80 32.6416L60 32.6416C58.8954 32.6416 58 31.7462 58 30.6416V10.6416Z"/> -</mask> -<path d="M60 32.6416V30.6416V32.6416ZM81.9179 34.641L83.9111 34.8054L81.9179 34.641ZM36 32.6416C36 21.1096 44.8743 11.6481 56.165 10.717L55.8362 6.7305C42.4882 7.83135 32 19.0106 32 32.6416H36ZM58 54.6416C45.8497 54.6416 36 44.7919 36 32.6416H32C32 47.001 43.6406 58.6416 58 58.6416V54.6416ZM79.9247 34.4766C78.9935 45.7673 69.5321 54.6416 58 54.6416V58.6416C71.631 58.6416 82.8103 48.1535 83.9111 34.8054L79.9247 34.4766ZM80 30.6416L60 30.6416V34.6416L80 34.6416V30.6416ZM60 30.6416V10.6416H [...] -<mask id="path-4-inside-2" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M83.6717 28.1985C83.8558 29.3482 82.9306 30.3418 81.7663 30.3418H62C60.8954 30.3418 60 29.4464 60 28.3418V8.57554C60 7.41119 60.9937 6.48606 62.1434 6.67017C73.1842 8.43829 81.9035 17.1576 83.6717 28.1985Z"/> -</mask> -<path d="M83.6717 28.1985L81.6968 28.5147L83.6717 28.1985ZM81.7663 28.3418H62V32.3418H81.7663V28.3418ZM62 28.3418V8.57554H58V28.3418H62ZM61.8271 8.64501C72.0149 10.2765 80.0653 18.327 81.6968 28.5147L85.6465 27.8822C83.7418 15.9883 74.3535 6.60007 62.4596 4.69534L61.8271 8.64501ZM62 8.57554C62 8.56963 62.0009 8.58353 61.9803 8.60208C61.9692 8.61217 61.9483 8.62667 61.9159 8.63672C61.8805 8.64767 61.8474 8.64825 61.8271 8.64501L62.4596 4.69534C59.9821 4.29857 58 6.29722 58 8.57554H62ZM62 [...] -<path fill-rule="evenodd" clip-rule="evenodd" d="M15 55.5384C5.66793 57.9222 0 61.061 0 64.5001C0 71.956 26.6391 78.0001 59.5 78.0001C92.3609 78.0001 119 71.956 119 64.5001C119 60.9398 112.926 57.7014 103 55.2893V60C103 62.2092 101.209 64 99 64H19C16.7909 64 15 62.2092 15 60V55.5384Z" fill="#F2F2F2"/> +<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> + <rect x="16" y="1" width="86" height="62" rx="3" stroke="currentColor" stroke-width="2" /> + + + <path + d="M60 32.6416L80 32.6416C80.902 32.6416 81.9179 34.641 81.9179 34.641C80.902 46.9604 70.5815 56.6416 58 56.6416V32.6416Z" + fill="currentColor" fill-opacity="1" /> + + <path + d="M58 10.6416C58 9.53706 57.1014 8.63294 56.0006 8.72373C43.6813 9.73974 34 20.0601 34 32.6416C34 45.8965 44.7452 56.6416 58 56.6416C70.5815 56.6416 80.9019 46.9604 81.9179 34.641C82.0087 33.5402 81.1046 32.6416 80 32.6416L60 32.6416C58.8954 32.6416 58 31.7462 58 30.6416V10.6416Z" + fill="currentColor" fill-opacity="0.5" /> </svg> diff --git a/superset-frontend/src/assets/images/empty-dashboard.svg b/superset-frontend/src/assets/images/empty-dashboard.svg index c76eca0c30..2acf05c801 100644 --- a/superset-frontend/src/assets/images/empty-dashboard.svg +++ b/superset-frontend/src/assets/images/empty-dashboard.svg @@ -16,11 +16,11 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> -<rect x="17" y="1" width="86" height="62" rx="3" stroke="#D1D1D1" stroke-width="2"/> -<rect x="21" y="5" width="78" height="14" rx="3" stroke="#D1D1D1" stroke-width="2"/> -<rect x="21" y="23" width="38" height="36" rx="3" stroke="#D1D1D1" stroke-width="2"/> -<rect x="63" y="37" width="36" height="22" rx="3" stroke="#D1D1D1" stroke-width="2"/> -<rect x="63" y="23" width="36" height="10" rx="3" stroke="#D1D1D1" stroke-width="2"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M16 55.2892C6.07439 57.7013 0 60.9397 0 64.5C0 71.9559 26.6391 78 59.5 78C92.3609 78 119 71.9559 119 64.5C119 61.0609 113.332 57.9221 104 55.5383V60C104 62.2092 102.209 64 100 64H20C17.7909 64 16 62.2092 16 60V55.2892Z" fill="#F2F2F2"/> +<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> +<rect x="17" y="1" width="86" height="62" rx="3" stroke="currentColor" stroke-width="2"/> +<rect x="21" y="5" width="78" height="14" rx="3" stroke="currentColor" stroke-width="2"/> +<rect x="21" y="23" width="38" height="36" rx="3" stroke="currentColor" stroke-width="2"/> +<rect x="63" y="37" width="36" height="22" rx="3" stroke="currentColor" stroke-width="2"/> +<rect x="63" y="23" width="36" height="10" rx="3" stroke="currentColor" stroke-width="2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M16 55.2892C6.07439 57.7013 0 60.9397 0 64.5C0 71.9559 26.6391 78 59.5 78C92.3609 78 119 71.9559 119 64.5C119 61.0609 113.332 57.9221 104 55.5383V60C104 62.2092 102.209 64 100 64H20C17.7909 64 16 62.2092 16 60V55.2892Z" fill="currentColor" fill-opacity="0.25" stroke="currentColor"/> </svg> diff --git a/superset-frontend/src/assets/images/empty-dataset.svg b/superset-frontend/src/assets/images/empty-dataset.svg index 5ce1752545..9a0299d3b4 100644 --- a/superset-frontend/src/assets/images/empty-dataset.svg +++ b/superset-frontend/src/assets/images/empty-dataset.svg @@ -16,23 +16,24 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="152" height="152" viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" fill="white"/> -<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" fill="white"/> -<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" fill="white"/> -<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" fill="white"/> -<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" fill="white"/> -<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" fill="white"/> -<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" fill="white"/> -<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" fill="white"/> -<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" fill="white"/> -<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" stroke="#E0E0E0"/> -<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" stroke="#E0E0E0"/> -<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" stroke="#E0E0E0"/> -<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" stroke="#E0E0E0"/> -<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" stroke="#E0E0E0"/> -<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" stroke="#E0E0E0"/> -<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" stroke="#E0E0E0"/> -<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" stroke="#E0E0E0"/> -<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" stroke="#E0E0E0"/> +<svg viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" fill="currentColor"/> +<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" fill="currentColor"/> +<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" fill="currentColor"/> +<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" fill="currentColor"/> +<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" fill="currentColor"/> +<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" fill="currentColor"/> +<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" fill="currentColor"/> +<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" fill="currentColor"/> +<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" fill="currentColor"/> + +<path d="M44.5 1C45.0523 1 45.5 1.44772 45.5 2V45C45.5 45.5523 45.0523 46 44.5 46H1.5C0.947716 46 0.5 45.5523 0.5 45V2C0.5 1.44772 0.947716 1 1.5 1L44.5 1Z" stroke="currentColor"/> +<path d="M97.5 1C98.0523 1 98.5 1.44772 98.5 2V45C98.5 45.5523 98.0523 46 97.5 46H54.5C53.9477 46 53.5 45.5523 53.5 45V2C53.5 1.44772 53.9477 1 54.5 1L97.5 1Z" stroke="currentColor"/> +<path d="M150.5 1C151.052 1 151.5 1.44772 151.5 2V45C151.5 45.5523 151.052 46 150.5 46H107.5C106.948 46 106.5 45.5523 106.5 45V2C106.5 1.44772 106.948 1 107.5 1L150.5 1Z" stroke="currentColor"/> +<path d="M44.5 54C45.0523 54 45.5 54.4477 45.5 55V98C45.5 98.5523 45.0523 99 44.5 99H1.5C0.947716 99 0.5 98.5523 0.5 98V55C0.5 54.4477 0.947716 54 1.5 54H44.5Z" stroke="currentColor"/> +<path d="M97.5 54C98.0523 54 98.5 54.4477 98.5 55V98C98.5 98.5523 98.0523 99 97.5 99H54.5C53.9477 99 53.5 98.5523 53.5 98V55C53.5 54.4477 53.9477 54 54.5 54H97.5Z" stroke="currentColor"/> +<path d="M150.5 54C151.052 54 151.5 54.4477 151.5 55V98C151.5 98.5523 151.052 99 150.5 99H107.5C106.948 99 106.5 98.5523 106.5 98V55C106.5 54.4477 106.948 54 107.5 54H150.5Z" stroke="currentColor"/> +<path d="M44.5 106C45.0523 106 45.5 106.448 45.5 107V150C45.5 150.552 45.0523 151 44.5 151H1.5C0.947716 151 0.5 150.552 0.5 150V107C0.5 106.448 0.947716 106 1.5 106H44.5Z" stroke="currentColor"/> +<path d="M97.5 106C98.0523 106 98.5 106.448 98.5 107V150C98.5 150.552 98.0523 151 97.5 151H54.5C53.9477 151 53.5 150.552 53.5 150V107C53.5 106.448 53.9477 106 54.5 106H97.5Z" stroke="currentColor"/> +<path d="M150.5 106C151.052 106 151.5 106.448 151.5 107V150C151.5 150.552 151.052 151 150.5 151H107.5C106.948 151 106.5 150.552 106.5 150V107C106.5 106.448 106.948 106 107.5 106H150.5Z" stroke="currentColor"/> </svg> diff --git a/superset-frontend/src/assets/images/empty-queries.svg b/superset-frontend/src/assets/images/empty-queries.svg index 2239c0ae8e..1d2d8b00f2 100644 --- a/superset-frontend/src/assets/images/empty-queries.svg +++ b/superset-frontend/src/assets/images/empty-queries.svg @@ -16,20 +16,20 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M37 4C37 2.34315 38.3431 1 40 1H70.3431C71.1388 1 71.9019 1.31607 72.4645 1.87868L82.1213 11.5355C82.6839 12.0981 83 12.8612 83 13.6569V60C83 61.6569 81.6569 63 80 63H40C38.3431 63 37 61.6569 37 60V4Z" stroke="#D1D1D1" stroke-width="2"/> -<path d="M71 0.5V9C71 11.2091 72.7909 13 75 13H83.5" stroke="#D1D1D1" stroke-width="2"/> -<path d="M71 27V45C71 46.074 70.1033 47.3156 68.0381 48.3482C66.0326 49.3509 63.1921 50 60 50C56.8079 50 53.9674 49.3509 51.9619 48.3482C49.8967 47.3156 49 46.074 49 45V27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="#D1D1D1" stroke-width="2"/> +<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path d="M37 4C37 2.34315 38.3431 1 40 1H70.3431C71.1388 1 71.9019 1.31607 72.4645 1.87868L82.1213 11.5355C82.6839 12.0981 83 12.8612 83 13.6569V60C83 61.6569 81.6569 63 80 63H40C38.3431 63 37 61.6569 37 60V4Z" stroke="currentColor" stroke-width="2"/> +<path d="M71 0.5V9C71 11.2091 72.7909 13 75 13H83.5" stroke="currentColor" stroke-width="2"/> +<path d="M71 27V45C71 46.074 70.1033 47.3156 68.0381 48.3482C66.0326 49.3509 63.1921 50 60 50C56.8079 50 53.9674 49.3509 51.9619 48.3482C49.8967 47.3156 49 46.074 49 45V27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="currentColor" stroke-width="2"/> <mask id="path-4-inside-1" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M48 39C48 42.3137 53.3726 45 60 45C66.6274 45 72 42.3137 72 39H69.913C69.913 39.5358 69.4382 40.5104 67.5199 41.4695C65.7026 42.3781 63.0473 43 60 43C56.9527 43 54.2974 42.3781 52.4801 41.4695C50.5618 40.5104 50.087 39.5358 50.087 39H48Z"/> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M48 39C48 42.3137 53.3726 45 60 45C66.6274 45 72 42.3137 72 39H69.913C69.913 39.5358 69.4382 40.5104 67.5199 41.4695C65.7026 42.3781 63.0473 43 60 43C56.9527 43 54.2974 42.3781 52.4801 41.4695C50.5618 40.5104 50.087 39.5358 50.087 39H48Z" fill="black"/> -<path d="M48 39V37H46V39H48ZM72 39H74V37H72V39ZM69.913 39V37H67.913V39H69.913ZM52.4801 41.4695L51.5856 43.2583H51.5856L52.4801 41.4695ZM50.087 39H52.087V37H50.087V39ZM46 39C46 41.8225 48.2361 43.8394 50.6203 45.0315C53.1241 46.2834 56.4431 47 60 47V43C56.9295 43 54.2485 42.3735 52.4091 41.4538C50.4502 40.4743 50 39.4912 50 39H46ZM60 47C63.5569 47 66.8759 46.2834 69.3797 45.0315C71.7639 43.8394 74 41.8225 74 39H70C70 39.4912 69.5498 40.4743 67.5909 41.4538C65.7515 42.3735 63.0705 43 60 43 [...] +<path d="M48 39V37H46V39H48ZM72 39H74V37H72V39ZM69.913 39V37H67.913V39H69.913ZM52.4801 41.4695L51.5856 43.2583H51.5856L52.4801 41.4695ZM50.087 39H52.087V37H50.087V39ZM46 39C46 41.8225 48.2361 43.8394 50.6203 45.0315C53.1241 46.2834 56.4431 47 60 47V43C56.9295 43 54.2485 42.3735 52.4091 41.4538C50.4502 40.4743 50 39.4912 50 39H46ZM60 47C63.5569 47 66.8759 46.2834 69.3797 45.0315C71.7639 43.8394 74 41.8225 74 39H70C70 39.4912 69.5498 40.4743 67.5909 41.4538C65.7515 42.3735 63.0705 43 60 43 [...] <mask id="path-6-inside-2" fill="white"> <path fill-rule="evenodd" clip-rule="evenodd" d="M48 33C48 36.3137 53.3726 39 60 39C66.6274 39 72 36.3137 72 33H69.913C69.913 33.5358 69.4382 34.5104 67.5199 35.4695C65.7026 36.3781 63.0473 37 60 37C56.9527 37 54.2974 36.3781 52.4801 35.4695C50.5618 34.5104 50.087 33.5358 50.087 33H48Z"/> </mask> <path fill-rule="evenodd" clip-rule="evenodd" d="M48 33C48 36.3137 53.3726 39 60 39C66.6274 39 72 36.3137 72 33H69.913C69.913 33.5358 69.4382 34.5104 67.5199 35.4695C65.7026 36.3781 63.0473 37 60 37C56.9527 37 54.2974 36.3781 52.4801 35.4695C50.5618 34.5104 50.087 33.5358 50.087 33H48Z" fill="black"/> -<path d="M48 33V31H46V33H48ZM72 33H74V31H72V33ZM69.913 33V31H67.913V33H69.913ZM52.4801 35.4695L51.5856 37.2583H51.5856L52.4801 35.4695ZM50.087 33H52.087V31H50.087V33ZM46 33C46 35.8225 48.2361 37.8394 50.6203 39.0315C53.1241 40.2834 56.4431 41 60 41V37C56.9295 37 54.2485 36.3735 52.4091 35.4538C50.4502 34.4743 50 33.4912 50 33H46ZM60 41C63.5569 41 66.8759 40.2834 69.3797 39.0315C71.7639 37.8394 74 35.8225 74 33H70C70 33.4912 69.5498 34.4743 67.5909 35.4538C65.7515 36.3735 63.0705 37 60 37 [...] -<path d="M71 27C71 28.074 70.1033 29.3156 68.0381 30.3482C66.0326 31.3509 63.1921 32 60 32C56.8079 32 53.9674 31.3509 51.9619 30.3482C49.8967 29.3156 49 28.074 49 27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="#D1D1D1" stroke-width="2"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M36 51.1343C14.8256 53.2784 0 58.2318 0 64C0 71.732 26.6391 78 59.5 78C92.3609 78 119 71.732 119 64C119 58.323 104.64 53.4353 84 51.2381V60C84 62.2091 82.2091 64 80 64H40C37.7909 64 36 62.2091 36 60V51.1343Z" fill="#F2F2F2"/> +<path d="M48 33V31H46V33H48ZM72 33H74V31H72V33ZM69.913 33V31H67.913V33H69.913ZM52.4801 35.4695L51.5856 37.2583H51.5856L52.4801 35.4695ZM50.087 33H52.087V31H50.087V33ZM46 33C46 35.8225 48.2361 37.8394 50.6203 39.0315C53.1241 40.2834 56.4431 41 60 41V37C56.9295 37 54.2485 36.3735 52.4091 35.4538C50.4502 34.4743 50 33.4912 50 33H46ZM60 41C63.5569 41 66.8759 40.2834 69.3797 39.0315C71.7639 37.8394 74 35.8225 74 33H70C70 33.4912 69.5498 34.4743 67.5909 35.4538C65.7515 36.3735 63.0705 37 60 37 [...] +<path d="M71 27C71 28.074 70.1033 29.3156 68.0381 30.3482C66.0326 31.3509 63.1921 32 60 32C56.8079 32 53.9674 31.3509 51.9619 30.3482C49.8967 29.3156 49 28.074 49 27C49 25.926 49.8967 24.6844 51.9619 23.6518C53.9674 22.6491 56.8079 22 60 22C63.1921 22 66.0326 22.6491 68.0381 23.6518C70.1033 24.6844 71 25.926 71 27Z" stroke="currentColor" stroke-width="2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M36 51.1343C14.8256 53.2784 0 58.2318 0 64C0 71.732 26.6391 78 59.5 78C92.3609 78 119 71.732 119 64C119 58.323 104.64 53.4353 84 51.2381V60C84 62.2091 82.2091 64 80 64H40C37.7909 64 36 62.2091 36 60V51.1343Z" fill="currentColor" stroke="currentColor" fill-opacity="0.25" /> </svg> diff --git a/superset-frontend/src/assets/images/empty-query.svg b/superset-frontend/src/assets/images/empty-query.svg index be72857d8e..a19fc73eeb 100644 --- a/superset-frontend/src/assets/images/empty-query.svg +++ b/superset-frontend/src/assets/images/empty-query.svg @@ -16,10 +16,10 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="458" height="146" viewBox="0 0 458 146" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M17 21C17 18.7909 18.7909 17 21 17H125C127.209 17 129 18.7909 129 21V29C129 31.2091 127.209 33 125 33H21C18.7909 33 17 31.2091 17 29V21Z" fill="#ECEEF2"/> -<path d="M17 45C17 42.7909 18.7909 41 21 41H223C225.209 41 227 42.7909 227 45V53C227 55.2091 225.209 57 223 57H21C18.7909 57 17 55.2091 17 53V45Z" fill="#ECEEF2"/> -<path d="M21 65C18.7909 65 17 66.7909 17 69V77C17 79.2091 18.7909 81 21 81H172C174.209 81 176 79.2091 176 77V69C176 66.7909 174.209 65 172 65H21Z" fill="#ECEEF2"/> -<path d="M17 93C17 90.7909 18.7909 89 21 89H286C288.209 89 290 90.7909 290 93V101C290 103.209 288.209 105 286 105H21C18.7909 105 17 103.209 17 101V93Z" fill="#ECEEF2"/> -<path d="M21 113C18.7909 113 17 114.791 17 117V125C17 127.209 18.7909 129 21 129H73C75.2091 129 77 127.209 77 125V117C77 114.791 75.2091 113 73 113H21Z" fill="#ECEEF2"/> +<svg viewBox="0 0 300 146" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path d="M17 21C17 18.7909 18.7909 17 21 17H125C127.209 17 129 18.7909 129 21V29C129 31.2091 127.209 33 125 33H21C18.7909 33 17 31.2091 17 29V21Z" fill="currentColor"/> +<path d="M17 45C17 42.7909 18.7909 41 21 41H223C225.209 41 227 42.7909 227 45V53C227 55.2091 225.209 57 223 57H21C18.7909 57 17 55.2091 17 53V45Z" fill="currentColor"/> +<path d="M21 65C18.7909 65 17 66.7909 17 69V77C17 79.2091 18.7909 81 21 81H172C174.209 81 176 79.2091 176 77V69C176 66.7909 174.209 65 172 65H21Z" fill="currentColor"/> +<path d="M17 93C17 90.7909 18.7909 89 21 89H286C288.209 89 290 90.7909 290 93V101C290 103.209 288.209 105 286 105H21C18.7909 105 17 103.209 17 101V93Z" fill="currentColor"/> +<path d="M21 113C18.7909 113 17 114.791 17 117V125C17 127.209 18.7909 129 21 129H73C75.2091 129 77 127.209 77 125V117C77 114.791 75.2091 113 73 113H21Z" fill="currentColor"/> </svg> diff --git a/superset-frontend/src/assets/images/empty-table.svg b/superset-frontend/src/assets/images/empty-table.svg index c1062502f3..9079b07114 100644 --- a/superset-frontend/src/assets/images/empty-table.svg +++ b/superset-frontend/src/assets/images/empty-table.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="81" height="82" viewBox="0 0 81 82" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path fill-rule="evenodd" clip-rule="evenodd" d="M76.5 1H4.5C2.29086 1 0.5 2.79086 0.5 5V77C0.5 79.2091 2.29086 81 4.5 81H76.5C78.7091 81 80.5 79.2091 80.5 77V5C80.5 2.79086 78.7091 1 76.5 1ZM36.5 73H8.5V57H36.5V73ZM36.5 49H8.5V33H36.5V49ZM72.5 73H44.5V57H72.5V73ZM72.5 49H44.5V33H72.5V49ZM72.5 25H8.5V9H72.5V25Z" fill="#F7F7F7"/> -<path d="M36.5 73V73.5H37V73H36.5ZM8.5 73H8V73.5H8.5V73ZM8.5 57V56.5H8V57H8.5ZM36.5 57H37V56.5H36.5V57ZM36.5 49V49.5H37V49H36.5ZM8.5 49H8V49.5H8.5V49ZM8.5 33V32.5H8V33H8.5ZM36.5 33H37V32.5H36.5V33ZM72.5 73V73.5H73V73H72.5ZM44.5 73H44V73.5H44.5V73ZM44.5 57V56.5H44V57H44.5ZM72.5 57H73V56.5H72.5V57ZM72.5 49V49.5H73V49H72.5ZM44.5 49H44V49.5H44.5V49ZM44.5 33V32.5H44V33H44.5ZM72.5 33H73V32.5H72.5V33ZM72.5 25V25.5H73V25H72.5ZM8.5 25H8V25.5H8.5V25ZM8.5 9V8.5H8V9H8.5ZM72.5 9H73V8.5H72.5V9ZM76.5 0 [...] +<svg viewBox="0 0 81 82" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path fill-rule="evenodd" clip-rule="evenodd" d="M76.5 1H4.5C2.29086 1 0.5 2.79086 0.5 5V77C0.5 79.2091 2.29086 81 4.5 81H76.5C78.7091 81 80.5 79.2091 80.5 77V5C80.5 2.79086 78.7091 1 76.5 1ZM36.5 73H8.5V57H36.5V73ZM36.5 49H8.5V33H36.5V49ZM72.5 73H44.5V57H72.5V73ZM72.5 49H44.5V33H72.5V49ZM72.5 25H8.5V9H72.5V25Z" fill="currentColor"/> +<path d="M36.5 73V73.5H37V73H36.5ZM8.5 73H8V73.5H8.5V73ZM8.5 57V56.5H8V57H8.5ZM36.5 57H37V56.5H36.5V57ZM36.5 49V49.5H37V49H36.5ZM8.5 49H8V49.5H8.5V49ZM8.5 33V32.5H8V33H8.5ZM36.5 33H37V32.5H36.5V33ZM72.5 73V73.5H73V73H72.5ZM44.5 73H44V73.5H44.5V73ZM44.5 57V56.5H44V57H44.5ZM72.5 57H73V56.5H72.5V57ZM72.5 49V49.5H73V49H72.5ZM44.5 49H44V49.5H44.5V49ZM44.5 33V32.5H44V33H44.5ZM72.5 33H73V32.5H72.5V33ZM72.5 25V25.5H73V25H72.5ZM8.5 25H8V25.5H8.5V25ZM8.5 9V8.5H8V9H8.5ZM72.5 9H73V8.5H72.5V9ZM76.5 0 [...] </svg> diff --git a/superset-frontend/src/assets/images/empty.svg b/superset-frontend/src/assets/images/empty.svg index e2c78339ce..b503324f67 100644 --- a/superset-frontend/src/assets/images/empty.svg +++ b/superset-frontend/src/assets/images/empty.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="119" height="76" viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C8 [...] -<path d="M16 53.2891C6.07439 55.7012 0 58.9396 0 62.4999C0 69.9557 26.6391 75.9999 59.5 75.9999C92.3609 75.9999 119 69.9557 119 62.4999C119 58.9396 112.926 55.7012 103 53.2891V61.9999C103 64.209 101.209 65.9999 99 65.9999H20C17.7909 65.9999 16 64.209 16 61.9999V53.2891Z" fill="#F2F2F2"/> +<svg viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C8 [...] +<path d="M16 53.2891C6.07439 55.7012 0 58.9396 0 62.4999C0 69.9557 26.6391 75.9999 59.5 75.9999C92.3609 75.9999 119 69.9557 119 62.4999C119 58.9396 112.926 55.7012 103 53.2891V61.9999C103 64.209 101.209 65.9999 99 65.9999H20C17.7909 65.9999 16 64.209 16 61.9999V53.2891Z" fill="currentColor" stroke="currentColor" fill-opacity="0.25" /> </svg> diff --git a/superset-frontend/src/assets/images/empty_sql_chart.svg b/superset-frontend/src/assets/images/empty_sql_chart.svg index 6ab969575c..b729b471a6 100644 --- a/superset-frontend/src/assets/images/empty_sql_chart.svg +++ b/superset-frontend/src/assets/images/empty_sql_chart.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="196" height="152" viewBox="0 0 196 152" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path fill-rule="evenodd" clip-rule="evenodd" d="M193.652 1.5C193.652 1.22386 193.428 1 193.152 1L52.3477 1V30.3478L193.152 30.3478C193.428 30.3478 193.652 30.124 193.652 29.8478V1.5ZM41.4781 1.5C41.4781 1.22386 41.2543 1 40.9781 1L1.26074 1V30.3478L40.9781 30.3478C41.2543 30.3478 41.4781 30.124 41.4781 29.8478V1.5ZM193.652 122.152C193.652 121.876 193.428 121.652 193.152 121.652H153.435V151H193.152C193.428 151 193.652 150.776 193.652 150.5V122.152ZM40.9781 81.4348C41.2543 81.4348 41.4781 [...] -<path d="M193.152 1V0.500004V1ZM52.3477 1V0.5H51.8477V1H52.3477ZM52.3477 30.3478H51.8477V30.8478H52.3477V30.3478ZM193.152 30.3478V30.8478V30.3478ZM40.9781 1V1.5V1ZM1.26074 1L1.26074 0.500003L0.760742 0.500003V1H1.26074ZM1.26074 30.3478H0.760742V30.8478H1.26074L1.26074 30.3478ZM40.9781 30.3478V30.8478V30.3478ZM153.435 121.652V121.152H152.935V121.652H153.435ZM153.435 151H152.935V151.5H153.435V151ZM1.26074 110.783H0.760742V111.283H1.26074V110.783ZM1.26074 81.4348V80.9348H0.760742V81.4348H1. [...] +<svg viewBox="0 0 196 152" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path fill-rule="evenodd" clip-rule="evenodd" d="M193.652 1.5C193.652 1.22386 193.428 1 193.152 1L52.3477 1V30.3478L193.152 30.3478C193.428 30.3478 193.652 30.124 193.652 29.8478V1.5ZM41.4781 1.5C41.4781 1.22386 41.2543 1 40.9781 1L1.26074 1V30.3478L40.9781 30.3478C41.2543 30.3478 41.4781 30.124 41.4781 29.8478V1.5ZM193.652 122.152C193.652 121.876 193.428 121.652 193.152 121.652H153.435V151H193.152C193.428 151 193.652 150.776 193.652 150.5V122.152ZM40.9781 81.4348C41.2543 81.4348 41.4781 [...] +<path d="M193.152 1V0.500004V1ZM52.3477 1V0.5H51.8477V1H52.3477ZM52.3477 30.3478H51.8477V30.8478H52.3477V30.3478ZM193.152 30.3478V30.8478V30.3478ZM40.9781 1V1.5V1ZM1.26074 1L1.26074 0.500003L0.760742 0.500003V1H1.26074ZM1.26074 30.3478H0.760742V30.8478H1.26074L1.26074 30.3478ZM40.9781 30.3478V30.8478V30.3478ZM153.435 121.652V121.152H152.935V121.652H153.435ZM153.435 151H152.935V151.5H153.435V151ZM1.26074 110.783H0.760742V111.283H1.26074V110.783ZM1.26074 81.4348V80.9348H0.760742V81.4348H1. [...] </svg> diff --git a/superset-frontend/src/assets/images/filter-results.svg b/superset-frontend/src/assets/images/filter-results.svg index 770a54b34f..7244f5538b 100644 --- a/superset-frontend/src/assets/images/filter-results.svg +++ b/superset-frontend/src/assets/images/filter-results.svg @@ -16,19 +16,56 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="120" height="150" viewBox="0 0 120 150" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M100.133 19.8391L100.134 19.8402L119.5 40.6963V149.5H0.5V0.5H82.2811L100.133 19.8391Z" fill="#F7F7F7" stroke="#D9D9D9"/> -<path d="M82.5 0V42H120" stroke="#D9D9D9"/> -<mask id="path-3-inside-1_738_30486" fill="white"> -<rect x="24" y="65" width="71.7778" height="9.44444" rx="0.5"/> -</mask> -<rect x="24" y="65" width="71.7778" height="9.44444" rx="0.5" fill="white" stroke="#D9D9D9" stroke-width="2" mask="url(#path-3-inside-1_738_30486)"/> -<mask id="path-4-inside-2_738_30486" fill="white"> -<rect x="39.1113" y="85.7778" width="41.5556" height="9.44444" rx="0.5"/> -</mask> -<rect x="39.1113" y="85.7778" width="41.5556" height="9.44444" rx="0.5" fill="white" stroke="#D9D9D9" stroke-width="2" mask="url(#path-4-inside-2_738_30486)"/> -<mask id="path-5-inside-3_738_30486" fill="white"> -<rect x="50.4443" y="106.556" width="18.8889" height="9.44444" rx="0.5"/> -</mask> -<rect x="50.4443" y="106.556" width="18.8889" height="9.44444" rx="0.5" fill="white" stroke="#D9D9D9" stroke-width="2" mask="url(#path-5-inside-3_738_30486)"/> +<svg viewBox="0 0 120 150" fill="none" xmlns="http://www.w3.org/2000/svg";> + <path + d="M100.133 19.8391L100.134 19.8402L119.5 40.6963V149.5H0.5V0.5H82.2811L100.133 19.8391Z" + fill="currentColor" + fill-opacity="0.25" + stroke="currentColor" + stroke-opacity="1" + /> + <path + d="M82.5 0V42H120" + stroke="currentColor" + stroke-opacity="1" + /> + <rect + x="24" + y="65" + width="71.7778" + height="9.44444" + rx="0.5" + fill="currentColor" + fill-opacity="0.5" + stroke="currentColor" + stroke-opacity="1" + stroke-width="2" + mask="url(#path-3-inside-1_738_30486)" + /> + <rect + x="39.1113" + y="85.7778" + width="41.5556" + height="9.44444" + rx="0.5" + fill="currentColor" + fill-opacity="0.5" + stroke="currentColor" + stroke-opacity="1" + stroke-width="2" + mask="url(#path-4-inside-2_738_30486)" + /> + <rect + x="50.4443" + y="106.556" + width="18.8889" + height="9.44444" + rx="0.5" + fill="currentColor" + fill-opacity="0.5" + stroke="currentColor" + stroke-opacity="1" + stroke-width="2" + mask="url(#path-5-inside-3_738_30486)" + /> </svg> diff --git a/superset-frontend/src/assets/images/filter.svg b/superset-frontend/src/assets/images/filter.svg index 0e1f6b41ef..2e8c5e0f09 100644 --- a/superset-frontend/src/assets/images/filter.svg +++ b/superset-frontend/src/assets/images/filter.svg @@ -16,17 +16,43 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="73" height="51" viewBox="0 0 73 51" fill="none" xmlns="http://www.w3.org/2000/svg";> -<mask id="path-1-inside-1_369_13099" fill="white"> -<rect x="0.79834" width="71.7778" height="9.44444" rx="0.5"/> -</mask> -<rect x="0.79834" width="71.7778" height="9.44444" rx="0.5" fill="#F7F7F7" stroke="#D9D9D9" stroke-width="2" mask="url(#path-1-inside-1_369_13099)"/> -<mask id="path-2-inside-2_369_13099" fill="white"> -<rect x="15.9095" y="20.7773" width="41.5556" height="9.44444" rx="0.5"/> -</mask> -<rect x="15.9095" y="20.7773" width="41.5556" height="9.44444" rx="0.5" fill="#F7F7F7" stroke="#D9D9D9" stroke-width="2" mask="url(#path-2-inside-2_369_13099)"/> -<mask id="path-3-inside-3_369_13099" fill="white"> -<rect x="27.2428" y="41.5557" width="18.8889" height="9.44444" rx="0.5"/> -</mask> -<rect x="27.2428" y="41.5557" width="18.8889" height="9.44444" rx="0.5" fill="#F7F7F7" stroke="#D9D9D9" stroke-width="2" mask="url(#path-3-inside-3_369_13099)"/> +<svg viewBox="0 0 75 53" fill="none" xmlns="http://www.w3.org/2000/svg";> + <mask id="path-1-inside-1_369_13099" fill="white"> + <rect x="0.79834" width="71.7778" height="9.44444" rx="0.5" /> + </mask> + <rect + x="0.79834" + width="71.7778" + height="9.44444" + rx="0.5" + fill="currentColor" + fill-opacity="0.5" + stroke="currentColor" + stroke-opacity="1" + stroke-width="1" + /> + <rect + x="15.9095" + y="20.7773" + width="41.5556" + height="9.44444" + rx="0.5" + fill="currentColor" + fill-opacity="0.5" + stroke="currentColor" + stroke-opacity="1" + stroke-width="1" + /> + <rect + x="27.2428" + y="41.5557" + width="18.8889" + height="9.44444" + rx="0.5" + fill="currentColor" + fill-opacity="0.5" + stroke="currentColor" + stroke-opacity="1" + stroke-width="1" + /> </svg> diff --git a/superset-frontend/src/assets/images/star-circle.svg b/superset-frontend/src/assets/images/star-circle.svg index a46a1dd0fb..d9e6c77e2c 100644 --- a/superset-frontend/src/assets/images/star-circle.svg +++ b/superset-frontend/src/assets/images/star-circle.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="119" height="78" viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M59.2123 1.55857C59.4575 0.81382 60.5425 0.813801 60.7878 1.55857L67.5616 22.1322C67.9434 23.292 69.0328 24.0653 70.249 24.0653L92.1695 24.0653C92.9982 24.0653 93.2777 25.0719 92.6607 25.5143L74.9266 38.2295C73.9348 38.9406 73.5131 40.2085 73.8958 41.3707L80.6696 61.9444C80.8987 62.6402 80.076 63.3262 79.3906 62.8348L61.6566 50.1196C60.6679 49.4107 59.3321 49.4107 58.3434 50.1196L40.6094 62.8348C39.924 63.3262 39.1013 62.6402 39.3304 61.9444L46.1042 41.3707C46.4869 40.2085 46.06 [...] -<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6782 51.616C17.5239 53.3343 0 58.4528 0 64.5C0 71.9558 26.6391 78 59.5 78C92.3609 78 119 71.9558 119 64.5C119 58.5387 101.97 53.4798 78.3466 51.6913L81.6194 61.6317C82.1664 63.2928 80.2398 64.6741 78.808 63.6475L61.1757 51.0053C60.619 51.0018 60.0604 51 59.5 51C59.2765 51 59.0534 51.0003 58.8305 51.0008L41.192 63.6475C39.7602 64.6741 37.8337 63.2928 38.3806 61.6317L41.6782 51.616Z" fill="#F2F2F2"/> +<svg viewBox="0 0 119 78" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path d="M59.2123 1.55857C59.4575 0.81382 60.5425 0.813801 60.7878 1.55857L67.5616 22.1322C67.9434 23.292 69.0328 24.0653 70.249 24.0653L92.1695 24.0653C92.9982 24.0653 93.2777 25.0719 92.6607 25.5143L74.9266 38.2295C73.9348 38.9406 73.5131 40.2085 73.8958 41.3707L80.6696 61.9444C80.8987 62.6402 80.076 63.3262 79.3906 62.8348L61.6566 50.1196C60.6679 49.4107 59.3321 49.4107 58.3434 50.1196L40.6094 62.8348C39.924 63.3262 39.1013 62.6402 39.3304 61.9444L46.1042 41.3707C46.4869 40.2085 46.06 [...] +<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6782 51.616C17.5239 53.3343 0 58.4528 0 64.5C0 71.9558 26.6391 78 59.5 78C92.3609 78 119 71.9558 119 64.5C119 58.5387 101.97 53.4798 78.3466 51.6913L81.6194 61.6317C82.1664 63.2928 80.2398 64.6741 78.808 63.6475L61.1757 51.0053C60.619 51.0018 60.0604 51 59.5 51C59.2765 51 59.0534 51.0003 58.8305 51.0008L41.192 63.6475C39.7602 64.6741 37.8337 63.2928 38.3806 61.6317L41.6782 51.616Z" fill="currentColor" fill-opacity="0.25" stroke="curren [...] </svg> diff --git a/superset-frontend/src/assets/images/union.svg b/superset-frontend/src/assets/images/union.svg index 6ac0e0f016..9ccf437b22 100644 --- a/superset-frontend/src/assets/images/union.svg +++ b/superset-frontend/src/assets/images/union.svg @@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="119" height="76" viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C8 [...] -<path d="M16 53.2892C6.07439 55.7013 0 58.9397 0 62.5C0 69.9558 26.6391 76 59.5 76C92.3609 76 119 69.9558 119 62.5C119 58.9397 112.926 55.7013 103 53.2892V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V53.2892Z" fill="#F2F2F2"/> +<svg viewBox="0 0 119 76" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path fill-rule="evenodd" clip-rule="evenodd" d="M83.1952 1.36598L103 24V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V24L35.8048 1.36598C36.5643 0.497921 37.6616 0 38.8151 0H80.1849C81.3384 0 82.4357 0.497922 83.1952 1.36598ZM101 26V62C101 63.1046 100.105 64 99 64H20C18.8954 64 18 63.1046 18 62V26H35.25C37.8734 26 40 28.1266 40 30.75C40 34.4779 43.0221 37.5 46.75 37.5H72.25C75.9779 37.5 79 34.4779 79 30.75C79 28.1266 81.1266 26 83.75 26H101ZM100.342 24L81.6901 2.68299C8 [...] +<path d="M16 53.2892C6.07439 55.7013 0 58.9397 0 62.5C0 69.9558 26.6391 76 59.5 76C92.3609 76 119 69.9558 119 62.5C119 58.9397 112.926 55.7013 103 53.2892V62C103 64.2091 101.209 66 99 66H20C17.7909 66 16 64.2091 16 62V53.2892Z" fill="currentColor" stroke="currentColor" fill-opacity="0.25"/> </svg> diff --git a/superset-frontend/src/assets/images/vector.svg b/superset-frontend/src/assets/images/vector.svg index 0bf9c39c6c..d2f946e810 100644 --- a/superset-frontend/src/assets/images/vector.svg +++ b/superset-frontend/src/assets/images/vector.svg @@ -16,6 +16,6 @@ KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> -<svg width="118" height="150" viewBox="0 0 118 150" fill="none" xmlns="http://www.w3.org/2000/svg";> -<path d="M12.1212 11.5536H11.6212V12.0536V46.875V47.375H12.1212H105.871H106.371V46.875V12.0536V11.5536H105.871H12.1212ZM105.871 92.9107H106.371V92.4107V57.5893V57.0893H105.871H12.1212H11.6212V57.5893V92.4107V92.9107H12.1212H105.871ZM105.871 138.446H106.371V137.946V103.125V102.625H105.871H12.1212H11.6212V103.125V137.946V138.446H12.1212H105.871ZM5.42477 0.5H112.568C115.255 0.5 117.425 2.67012 117.425 5.35714V144.643C117.425 147.33 115.255 149.5 112.568 149.5H5.42477C2.73774 149.5 0.567627 [...] +<svg viewBox="0 0 118 150" fill="none" xmlns="http://www.w3.org/2000/svg";> +<path d="M12.1212 11.5536H11.6212V12.0536V46.875V47.375H12.1212H105.871H106.371V46.875V12.0536V11.5536H105.871H12.1212ZM105.871 92.9107H106.371V92.4107V57.5893V57.0893H105.871H12.1212H11.6212V57.5893V92.4107V92.9107H12.1212H105.871ZM105.871 138.446H106.371V137.946V103.125V102.625H105.871H12.1212H11.6212V103.125V137.946V138.446H12.1212H105.871ZM5.42477 0.5H112.568C115.255 0.5 117.425 2.67012 117.425 5.35714V144.643C117.425 147.33 115.255 149.5 112.568 149.5H5.42477C2.73774 149.5 0.567627 [...] </svg> diff --git a/superset-frontend/src/components/Chart/Chart.tsx b/superset-frontend/src/components/Chart/Chart.tsx index 3526a26b3f..fd7b5fcaab 100644 --- a/superset-frontend/src/components/Chart/Chart.tsx +++ b/superset-frontend/src/components/Chart/Chart.tsx @@ -31,7 +31,7 @@ import { } from '@superset-ui/core'; import { PLACEHOLDER_DATASOURCE } from 'src/dashboard/constants'; import Loading from 'src/components/Loading'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import ErrorBoundary from 'src/components/ErrorBoundary'; import { Logger, LOG_ACTIONS_RENDER_CHART } from 'src/logger/LogUtils'; import { URL_PARAMS } from 'src/constants'; @@ -337,7 +337,8 @@ class Chart extends PureComponent<ChartProps, {}> { if (errorMessage && ensureIsArray(queriesResponse).length === 0) { return ( - <EmptyStateBig + <EmptyState + size="large" title={t('Add required control values to preview chart')} description={getChartRequiredFieldsMissingMessage(true)} image="chart.svg" @@ -352,7 +353,8 @@ class Chart extends PureComponent<ChartProps, {}> { ensureIsArray(queriesResponse).length === 0 ) { return ( - <EmptyStateBig + <EmptyState + size="large" title={t('Your chart is ready to go!')} description={ <span> diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx index 9cf0102b5e..bcab733f48 100644 --- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx +++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx @@ -41,7 +41,7 @@ import Loading from 'src/components/Loading'; import BooleanCell from 'src/components/Table/cell-renderers/BooleanCell'; import NullCell from 'src/components/Table/cell-renderers/NullCell'; import TimeCell from 'src/components/Table/cell-renderers/TimeCell'; -import { EmptyStateMedium } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { getDatasourceSamples } from 'src/components/Chart/chartAction'; import Table, { ColumnsType, TableSize } from 'src/components/Table'; import HeaderWithRadioGroup from 'src/components/Table/header-renderers/HeaderWithRadioGroup'; @@ -285,7 +285,7 @@ export default function DrillDetailPane({ } else if (resultsPage?.total === 0) { // Render empty state if no results are returned for page const title = t('No rows were returned for this dataset'); - tableContent = <EmptyStateMedium image="document.svg" title={title} />; + tableContent = <EmptyState image="document.svg" title={title} />; } else { // Render table if at least one page has successfully loaded tableContent = ( diff --git a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx index 44d0bff0e0..ee17f2d801 100644 --- a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx +++ b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx @@ -28,7 +28,7 @@ import { import userEvent from '@testing-library/user-event'; import { api } from 'src/hooks/apiResources/queryApi'; import DatabaseSelector, { DatabaseSelectorProps } from '.'; -import { EmptyStateSmall } from '../EmptyState'; +import { EmptyState } from '../EmptyState'; const createProps = (): DatabaseSelectorProps => ({ db: { @@ -307,7 +307,7 @@ test('should show empty state if there are no options', async () => { <DatabaseSelector {...props} db={undefined} - emptyState={<EmptyStateSmall title="empty" image="" />} + emptyState={<EmptyState size="small" title="empty" />} />, { useRedux: true, store }, ); diff --git a/superset-frontend/src/components/EmptyState/EmptyState.stories.tsx b/superset-frontend/src/components/EmptyState/EmptyState.stories.tsx index 9d6f56c52d..dbc3a0af9c 100644 --- a/superset-frontend/src/components/EmptyState/EmptyState.stories.tsx +++ b/superset-frontend/src/components/EmptyState/EmptyState.stories.tsx @@ -9,64 +9,59 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an + * "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS + * OF ANY KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ +import { Meta, StoryFn } from '@storybook/react'; +import { Row, Col } from 'antd'; +import { EmptyState, imageMap } from '.'; -import EmptyImage from 'src/assets/images/empty.svg'; -import ChartImage from 'src/assets/images/chart.svg'; -import FilterImage from 'src/assets/images/filter.svg'; -import { EmptyStateBig, EmptyStateMedium, EmptyStateSmall } from '.'; +const emptyStates = [ + { title: null, description: null, image: undefined }, + ...Object.keys(imageMap).map(key => ({ + image: key, + title: `Empty State with image ${key}`, + description: 'This is the default empty state.', + })), +]; export default { - title: 'Empty state', - component: EmptyStateMedium, -}; - -export const SmallEmptyState = () => ( - <EmptyStateSmall - image={<FilterImage />} - title="Small empty state" - description="This is an example of a small empty state" - /> -); - -export const MediumEmptyState = () => ( - <EmptyStateMedium - image={<ChartImage />} - title="Medium empty state" - description="This is an example of a medium empty state" - /> -); + title: 'Empty State Gallery', + component: EmptyState, + argTypes: { + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'], + defaultValue: 'medium', + description: 'Size of the Empty State components', + }, + }, +} as Meta; -export const MediumEmptyStateWithButton = () => ( - <EmptyStateMedium - image={<EmptyImage />} - title="Medium empty state" - description="This is an example of a medium empty state with a button" - buttonAction={() => {}} - buttonText="Click!" - /> +export const Gallery: StoryFn<{ size: 'small' | 'medium' | 'large' }> = ({ + size, +}) => ( + <Row gutter={[16, 16]}> + {emptyStates.map((state, index) => ( + <Col key={index} xs={24} sm={12} md={8} lg={6}> + <EmptyState + size={size} + title={state.title} + description={state.description} + image={state.image} + > + Childrens render here. + </EmptyState> + </Col> + ))} + </Row> ); -export const BigEmptyState = () => ( - <EmptyStateBig - image={<EmptyImage />} - title="Big empty state" - description="This is an example of a big empty state" - /> -); - -export const BigEmptyStateWithButton = () => ( - <EmptyStateBig - image={<ChartImage />} - title="Big empty state" - description="This is an example of a big empty state with a button" - buttonText="Click!" - buttonAction={() => {}} - /> -); +Gallery.args = { + size: 'medium', +}; diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx index edc13e622f..cf85063a96 100644 --- a/superset-frontend/src/components/EmptyState/index.tsx +++ b/superset-frontend/src/components/EmptyState/index.tsx @@ -16,38 +16,57 @@ * specific language governing permissions and limitations * under the License. */ - -import { - ReactNode, - SyntheticEvent, - MouseEventHandler as ReactMouseEventHandler, -} from 'react'; +import { ReactNode, SyntheticEvent } from 'react'; import { styled, css, SupersetTheme, t } from '@superset-ui/core'; import Button from 'src/components/Button'; + +// Importing svg images +import FilterResultsImage from 'src/assets/images/filter-results.svg'; +import ChartImage from 'src/assets/images/chart.svg'; +import FilterImage from 'src/assets/images/filter.svg'; +import EmptyChartsImage from 'src/assets/images/empty-charts.svg'; +import EmptyDashboardImage from 'src/assets/images/empty-dashboard.svg'; +import UnionImage from 'src/assets/images/union.svg'; +import EmptyQueriesImage from 'src/assets/images/empty-queries.svg'; +import StarCircleImage from 'src/assets/images/star-circle.svg'; +import VectorImage from 'src/assets/images/vector.svg'; +import DocumentImage from 'src/assets/images/document.svg'; +import DatasetImage from 'src/assets/images/empty-dataset.svg'; +import EmptySqlChartImage from 'src/assets/images/empty_sql_chart.svg'; +import EmptyQueryImage from 'src/assets/images/empty-query.svg'; +import EmptyTableImage from 'src/assets/images/empty-table.svg'; +import EmptyImage from 'src/assets/images/empty.svg'; import { Empty } from './Empty'; -export enum EmptyStateSize { - Small, - Medium, - Big, -} +export const imageMap = { + 'chart.svg': <ChartImage />, + 'document.svg': <DocumentImage />, + 'empty-charts.svg': <EmptyChartsImage />, + 'empty-dashboard.svg': <EmptyDashboardImage />, + 'empty-dataset.svg': <DatasetImage />, + 'empty-queries.svg': <EmptyQueriesImage />, + 'empty-query.svg': <EmptyQueryImage />, + 'empty-table.svg': <EmptyTableImage />, + 'empty.svg': <EmptyImage />, + 'empty_sql_chart.svg': <EmptySqlChartImage />, + 'filter-results.svg': <FilterResultsImage />, + 'filter.svg': <FilterImage />, + 'star-circle.svg': <StarCircleImage />, + 'union.svg': <UnionImage />, + 'vector.svg': <VectorImage />, +}; -export interface EmptyStateSmallProps { +type EmptyStateSize = 'small' | 'medium' | 'large'; + +export type EmptyStateProps = { title?: ReactNode; description?: ReactNode; - image?: ReactNode; -} - -export interface EmptyStateProps extends EmptyStateSmallProps { + image?: ReactNode | string; buttonText?: ReactNode; - buttonAction?: ReactMouseEventHandler<HTMLElement>; - className?: string; -} - -export interface ImageContainerProps { - image: ReactNode; - size: EmptyStateSize; -} + buttonAction?: (event: SyntheticEvent) => void; + size?: EmptyStateSize; + children?: ReactNode; +}; const EmptyStateContainer = styled.div` ${({ theme }) => css` @@ -55,6 +74,7 @@ const EmptyStateContainer = styled.div` flex-direction: column; width: 100%; height: 100%; + color: ${theme.colors.grayscale.light3}; align-items: center; justify-content: center; padding: ${theme.gridUnit * 4}px; @@ -75,43 +95,24 @@ const EmptyStateContainer = styled.div` `} `; -const TextContainer = styled.div``; - -const Title = styled.p` - ${({ theme }) => css` - font-size: ${theme.typography.sizes.m}px; +const Title = styled.p<{ size: EmptyStateSize }>` + ${({ theme, size }) => css` + font-size: ${size === 'large' + ? theme.typography.sizes.l + : theme.typography.sizes.m}px; color: ${theme.colors.grayscale.light1}; - margin: ${theme.gridUnit * 2}px 0 0 0; + margin-top: ${size === 'large' ? theme.gridUnit * 4 : theme.gridUnit * 2}px; font-weight: ${theme.typography.weights.bold}; `} `; -const BigTitle = styled(Title)` - ${({ theme }) => css` - font-size: ${theme.typography.sizes.l}px; - color: ${theme.colors.grayscale.light1}; - margin-top: ${theme.gridUnit * 4}px; - `} -`; - -const Description = styled.p` - ${({ theme }) => css` - font-size: ${theme.typography.sizes.s}px; +const Description = styled.p<{ size: EmptyStateSize }>` + ${({ theme, size }) => css` + font-size: ${size === 'large' + ? theme.typography.sizes.m + : theme.typography.sizes.s}px; color: ${theme.colors.grayscale.light1}; - margin: ${theme.gridUnit * 2}px 0 0 0; - `} -`; - -const BigDescription = styled(Description)` - ${({ theme }) => css` - font-size: ${theme.typography.sizes.m}px; - `} -`; - -const SmallDescription = styled(Description)` - ${({ theme }) => css` - margin-top: ${theme.gridUnit}px; - line-height: 1.2; + margin-top: ${theme.gridUnit * 2}px; `} `; @@ -122,81 +123,68 @@ const ActionButton = styled(Button)` `} `; -const getImage = (image: string | ReactNode) => - typeof image === 'string' ? `/static/assets/images/${image}` : image; - const getImageHeight = (size: EmptyStateSize) => { switch (size) { - case EmptyStateSize.Small: + case 'small': return { height: '50px' }; - case EmptyStateSize.Medium: + case 'medium': return { height: '80px' }; - case EmptyStateSize.Big: + case 'large': return { height: '150px' }; default: - return { height: '50px' }; + return { height: '80px' }; } }; -const ImageContainer = ({ image, size }: ImageContainerProps) => ( - <Empty - description={false} - image={getImage(image)} - imageStyle={getImageHeight(size)} - /> -); +const ImageContainer = ({ + image, + size, +}: { + image?: ReactNode | string; + size: EmptyStateSize; +}) => { + if (!image) return null; + const mappedImage = typeof image === 'string' ? imageMap[image] : image; + return ( + <div role="img" aria-label="empty"> + <Empty + description={false} + image={mappedImage} + imageStyle={getImageHeight(size)} + /> + </div> + ); +}; const handleMouseDown = (e: SyntheticEvent) => { e.preventDefault(); e.stopPropagation(); }; -export const EmptyStateBig = ({ - title, - image, - description, - buttonAction, +export const EmptyState: React.FC<EmptyStateProps> = ({ + title = t('No results'), + description = t('There is currently no information to display.'), + image = 'empty.svg', buttonText, - className, -}: EmptyStateProps) => ( - <EmptyStateContainer className={className}> - {image && <ImageContainer image={image} size={EmptyStateSize.Big} />} - <TextContainer - css={(theme: SupersetTheme) => css` - max-width: ${theme.gridUnit * 150}px; - `} - > - <BigTitle>{title}</BigTitle> - {description && <BigDescription>{description}</BigDescription>} - {buttonAction && buttonText && ( - <ActionButton - buttonStyle="primary" - onClick={buttonAction} - onMouseDown={handleMouseDown} - > - {buttonText} - </ActionButton> - )} - </TextContainer> - </EmptyStateContainer> -); - -export const EmptyStateMedium = ({ - title, - image, - description, buttonAction, - buttonText, -}: EmptyStateProps) => ( + size = 'medium', + children, +}) => ( <EmptyStateContainer> - {image && <ImageContainer image={image} size={EmptyStateSize.Medium} />} - <TextContainer + {image && <ImageContainer image={image} size={size} />} + <div css={(theme: SupersetTheme) => css` - max-width: ${theme.gridUnit * 100}px; + max-width: ${size === 'large' + ? theme.gridUnit * 150 + : theme.gridUnit * 100}px; `} > - <Title>{title}</Title> - {description && <Description>{description}</Description>} + {title && <Title size={size}>{title}</Title>} + {description && ( + <Description size={size} className="ant-empty-description"> + {description} + </Description> + )} {buttonText && buttonAction && ( <ActionButton buttonStyle="primary" @@ -206,48 +194,7 @@ export const EmptyStateMedium = ({ {buttonText} </ActionButton> )} - </TextContainer> - </EmptyStateContainer> -); - -export const EmptyStateSmall = ({ - title, - image, - description, -}: EmptyStateSmallProps) => ( - <EmptyStateContainer> - {image && <ImageContainer image={image} size={EmptyStateSize.Small} />} - <TextContainer - css={(theme: SupersetTheme) => css` - max-width: ${theme.gridUnit * 75}px; - `} - > - <Title>{title}</Title> - {description && <SmallDescription>{description}</SmallDescription>} - </TextContainer> + {children} + </div> </EmptyStateContainer> ); - -const TRANSLATIONS = { - NO_DATABASES_MATCH_TITLE: t('No databases match your search'), - NO_DATABASES_AVAILABLE_TITLE: t('There are no databases available'), - MANAGE_YOUR_DATABASES_TEXT: t('Manage your databases'), - HERE_TEXT: t('here'), -}; - -export const emptyStateComponent = (emptyResultsWithSearch: boolean) => ( - <EmptyStateSmall - image="empty.svg" - title={ - emptyResultsWithSearch - ? TRANSLATIONS.NO_DATABASES_MATCH_TITLE - : TRANSLATIONS.NO_DATABASES_AVAILABLE_TITLE - } - description={ - <p> - {TRANSLATIONS.MANAGE_YOUR_DATABASES_TEXT}{' '} - <a href="/databaseview/list">{TRANSLATIONS.HERE_TEXT}</a> - </p> - } - /> -); diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index 30bcb99aa3..cfa060f11d 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -37,7 +37,7 @@ import { ViewModeType, } from './types'; import { ListViewError, useListViewState } from './utils'; -import { EmptyStateBig, EmptyStateProps } from '../EmptyState'; +import { EmptyState, EmptyStateProps } from '../EmptyState'; const ListViewStyles = styled.div` text-align: center; @@ -447,17 +447,19 @@ function ListView<T extends object = any>({ {!loading && rows.length === 0 && ( <EmptyWrapper className={viewMode}> {query.filters ? ( - <EmptyStateBig + <EmptyState title={t('No results match your filter criteria')} description={t('Try different criteria to display results.')} + size="large" image="filter-results.svg" buttonAction={() => handleClearFilterControls()} buttonText={t('clear all filters')} /> ) : ( - <EmptyStateBig + <EmptyState {...emptyState} title={emptyState?.title || t('No Data')} + size="large" image={emptyState?.image || 'filter-results.svg'} /> )} diff --git a/superset-frontend/src/components/Table/index.tsx b/superset-frontend/src/components/Table/index.tsx index 1495befa5a..11a803893b 100644 --- a/superset-frontend/src/components/Table/index.tsx +++ b/superset-frontend/src/components/Table/index.tsx @@ -16,13 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { useState, useEffect, useRef, ReactElement, Key } from 'react'; +import { useState, useEffect, useRef, Key } from 'react'; import AntTable, { ColumnsType, TableProps as AntTableProps, } from 'antd/lib/table'; -import ConfigProvider from 'antd/lib/config-provider'; import { PaginationProps } from 'antd/lib/pagination'; import { t, useTheme, logging, styled } from '@superset-ui/core'; import Loading from 'src/components/Loading'; @@ -116,10 +115,6 @@ export interface TableProps<RecordType> { * Set table to display no data even if data has been provided */ hideData?: boolean; - /** - * emptyComponent - */ - emptyComponent?: ReactElement; /** * Enables setting the text displayed in various components and tooltips within the Table UI. */ @@ -256,7 +251,6 @@ export function Table<RecordType extends object>( defaultPageSize = 15, pageSizeOptions = ['5', '15', '25', '50', '100'], hideData = false, - emptyComponent, locale, height, virtualize = false, @@ -288,9 +282,6 @@ export function Table<RecordType extends object>( onChange: onSelectChange, }; - const renderEmpty = () => - emptyComponent ?? <div>{mergedLocale.emptyText}</div>; - // Log use of experimental features useEffect(() => { if (reorderable === true) { @@ -403,31 +394,29 @@ export function Table<RecordType extends object>( }; return ( - <ConfigProvider renderEmpty={renderEmpty}> - <div ref={wrapperRef}> - {!virtualize && ( - <StyledTable - {...sharedProps} - rowSelection={selectionTypeValue ? rowSelection : undefined} - sticky={sticky} - /> - )} - {virtualize && ( - <StyledVirtualTable - {...sharedProps} - scroll={{ - y: 300, - x: '100vw', - // To avoid jest failure by scrollTo - ...(process.env.WEBPACK_MODE === 'test' && { - scrollToFirstRowOnChange: false, - }), - }} - allowHTML={allowHTML} - /> - )} - </div> - </ConfigProvider> + <div ref={wrapperRef}> + {!virtualize && ( + <StyledTable + {...sharedProps} + rowSelection={selectionTypeValue ? rowSelection : undefined} + sticky={sticky} + /> + )} + {virtualize && ( + <StyledVirtualTable + {...sharedProps} + scroll={{ + y: 300, + x: '100vw', + // To avoid jest failure by scrollTo + ...(process.env.WEBPACK_MODE === 'test' && { + scrollToFirstRowOnChange: false, + }), + }} + allowHTML={allowHTML} + /> + )} + </div> ); } diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index e5caed6968..cdddff00b0 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -64,7 +64,7 @@ import { } from 'src/dashboard/util/constants'; import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar'; import Loading from 'src/components/Loading'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { useUiConfig } from 'src/components/UiConfigContext'; import ResizableSidebar from 'src/components/ResizableSidebar'; import { @@ -666,8 +666,9 @@ const DashboardBuilder = () => { {!editMode && !topLevelTabs && dashboardLayout[DASHBOARD_GRID_ID]?.children?.length === 0 && ( - <EmptyStateBig + <EmptyState title={t('There are no charts added to this dashboard')} + size="large" description={ canEdit && t( diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx index 6c6d5f853a..a5f0e52408 100644 --- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx +++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx @@ -20,7 +20,7 @@ import { PureComponent, Fragment } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { addAlpha, css, styled, t } from '@superset-ui/core'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { componentShape } from '../util/propShapes'; import DashboardComponent from '../containers/DashboardComponent'; import { Droppable } from './dnd/DragDroppable'; @@ -205,11 +205,12 @@ class DashboardGrid extends PureComponent { shouldDisplayEmptyState && gridComponent.type === TAB_TYPE; const dashboardEmptyState = editMode && ( - <EmptyStateBig + <EmptyState title={t('Drag and drop components and charts to the dashboard')} description={t( 'You can create a new chart or use existing ones from the panel on the right', )} + size="large" buttonText={ <> <i className="fa fa-plus" /> @@ -228,8 +229,9 @@ class DashboardGrid extends PureComponent { ); const topLevelTabEmptyState = editMode ? ( - <EmptyStateBig + <EmptyState title={t('Drag and drop components to this tab')} + size="large" description={t( `You can create a new chart or use existing ones from the panel on the right`, )} @@ -249,8 +251,9 @@ class DashboardGrid extends PureComponent { image="chart.svg" /> ) : ( - <EmptyStateBig + <EmptyState title={t('There are no components added to this tab')} + size="large" description={ canEdit && t('You can add the components in the edit mode.') } diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx index 990647b2c3..2a3d0ada5d 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.tsx @@ -117,7 +117,7 @@ describe('ChartHolder', () => { 'Make sure that the controls are configured properly and the datasource contains data for the selected time range', ), ).not.toBeInTheDocument(); // description should display only in Explore view - expect(screen.getByAltText('empty')).toBeVisible(); + expect(screen.getByRole('img', { name: 'empty' })).toBeVisible(); }); it('should render anchor link when not editing', async () => { diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx index 2c4695f8c7..36a7731641 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx @@ -22,7 +22,7 @@ import classNames from 'classnames'; import { useDispatch, useSelector } from 'react-redux'; import { styled, t } from '@superset-ui/core'; -import { EmptyStateMedium } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import EditableTitle from 'src/components/EditableTitle'; import { setEditMode } from 'src/dashboard/actions/dashboardState'; import DashboardComponent from 'src/dashboard/containers/DashboardComponent'; @@ -197,7 +197,7 @@ const Tab = props => { </Droppable> )} {shouldDisplayEmptyState && ( - <EmptyStateMedium + <EmptyState title={ editMode ? t('Drag and drop components to this tab') diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx index 39adea09f9..c007b535d4 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.test.tsx @@ -288,7 +288,7 @@ test('Render tab content with no children', () => { expect( screen.getByText('There are no components added to this tab'), ).toBeVisible(); - expect(screen.getByAltText('empty')).toBeVisible(); + expect(screen.getByRole('img', { name: 'empty' })).toBeVisible(); expect(screen.queryByText('edit mode')).not.toBeInTheDocument(); }); @@ -397,7 +397,7 @@ test('Render tab content with no children, editMode: true, canEdit: true', () => expect( screen.getByText('Drag and drop components to this tab'), ).toBeVisible(); - expect(screen.getByAltText('empty')).toBeVisible(); + expect(screen.getByRole('img', { name: 'empty' })).toBeVisible(); expect( screen.getByRole('link', { name: 'create a new chart' }), ).toBeVisible(); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx index b76b65c133..d6960ad370 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx @@ -33,7 +33,7 @@ import cx from 'classnames'; import { FeatureFlag, isFeatureEnabled, styled, t } from '@superset-ui/core'; import Icons from 'src/components/Icons'; import Loading from 'src/components/Loading'; -import { EmptyStateSmall } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { getFilterBarTestId } from './utils'; import { VerticalBarProps } from './types'; import Header from './Header'; @@ -168,7 +168,8 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({ () => filterValues.length === 0 ? ( <FilterBarEmptyStateContainer> - <EmptyStateSmall + <EmptyState + size="small" title={t('No global filters are currently added')} image="filter.svg" description={ diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx index ca0a1d6af4..4e83fa63a5 100644 --- a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx +++ b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx @@ -19,7 +19,7 @@ import { useState, useEffect, useMemo } from 'react'; import { ensureIsArray, GenericDataType, styled, t } from '@superset-ui/core'; import Loading from 'src/components/Loading'; -import { EmptyStateMedium } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import TableView, { EmptyWrapperType } from 'src/components/TableView'; import { useFilteredTableData, @@ -124,7 +124,7 @@ export const SamplesPane = ({ if (data.length === 0) { const title = t('No samples were returned for this dataset'); - return <EmptyStateMedium image="document.svg" title={title} />; + return <EmptyState image="document.svg" title={title} />; } return ( diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx index fe262fe720..e96963d108 100644 --- a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx +++ b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx @@ -26,7 +26,7 @@ import { getClientErrorObject, } from '@superset-ui/core'; import Loading from 'src/components/Loading'; -import { EmptyStateMedium } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { getChartDataRequest } from 'src/components/Chart/chartAction'; import { ResultsPaneProps, QueryResultInterface } from '../types'; import { SingleQueryResultPane } from './SingleQueryResultPane'; @@ -110,7 +110,7 @@ export const useResultsPane = ({ if (errorMessage) { const title = t('Run a query to display results'); return Array(queryCount).fill( - <EmptyStateMedium image="document.svg" title={title} />, + <EmptyState image="document.svg" title={title} />, ); } @@ -136,7 +136,7 @@ export const useResultsPane = ({ if (resultResp.length === 0) { const title = t('No results were returned for this query'); return Array(queryCount).fill( - <EmptyStateMedium image="document.svg" title={title} />, + <EmptyState image="document.svg" title={title} />, ); } return resultResp diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx index 304ec3409d..905fd04f9c 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx @@ -38,7 +38,7 @@ import TextControl from 'src/explore/components/controls/TextControl'; import CheckboxControl from 'src/explore/components/controls/CheckboxControl'; import PopoverSection from 'src/components/PopoverSection'; import ControlHeader from 'src/explore/components/ControlHeader'; -import { EmptyStateSmall } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { ANNOTATION_SOURCE_TYPES, ANNOTATION_TYPES, @@ -111,8 +111,9 @@ const NotFoundContentWrapper = styled.div` const NotFoundContent = () => ( <NotFoundContentWrapper> - <EmptyStateSmall + <EmptyState title={t('No annotation layers')} + size="small" description={ <span> {t('Add an annotation layer')}{' '} diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx index 711cad392d..6e0a256965 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx @@ -43,7 +43,7 @@ import { Select } from 'src/components'; import { Form, FormItem } from 'src/components/Form'; import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; import { SQLEditor } from 'src/components/AsyncAceEditor'; -import { EmptyStateSmall } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords'; import { StyledColumnOption } from 'src/explore/components/optionRenderers'; import { @@ -334,8 +334,9 @@ const ColumnSelectPopover = ({ /> </FormItem> ) : datasourceType === DatasourceType.Table ? ( - <EmptyStateSmall + <EmptyState image="empty.svg" + size="small" title={ isTemporal ? t('No temporal columns found') @@ -352,8 +353,9 @@ const ColumnSelectPopover = ({ } /> ) : ( - <EmptyStateSmall + <EmptyState image="empty.svg" + size="small" title={ isTemporal ? t('No temporal columns found') @@ -393,8 +395,9 @@ const ColumnSelectPopover = ({ disabled={disabledTabs.has('simple')} > {isTemporal && simpleColumns.length === 0 ? ( - <EmptyStateSmall + <EmptyState image="empty.svg" + size="small" title={t('No temporal columns found')} description={ datasourceType === DatasourceType.Table ? ( diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx index c527aa5825..188487b338 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx @@ -30,7 +30,7 @@ import Tabs from 'src/components/Tabs'; import Button from 'src/components/Button'; import { Select } from 'src/components'; import { Tooltip } from 'src/components/Tooltip'; -import { EmptyStateSmall } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { Form, FormItem } from 'src/components/Form'; import { SQLEditor } from 'src/components/AsyncAceEditor'; import sqlKeywords from 'src/SqlLab/utils/sqlKeywords'; @@ -389,16 +389,18 @@ export default class AdhocMetricEditPopover extends PureComponent { /> </FormItem> ) : datasource.type === DatasourceType.Table ? ( - <EmptyStateSmall + <EmptyState image="empty.svg" + size="small" title={t('No saved metrics found')} description={t( 'Add metrics to dataset in "Edit datasource" modal', )} /> ) : ( - <EmptyStateSmall + <EmptyState image="empty.svg" + size="small" title={t('No saved metrics found')} description={ <> diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx index 8ecbf33872..ae51762d78 100644 --- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx +++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx @@ -23,7 +23,7 @@ import { TagsList } from 'src/components/Tags'; import FacePile from 'src/components/FacePile'; import Tag from 'src/types/TagType'; import Owner from 'src/types/Owner'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { NumberParam, useQueryParam } from 'use-query-params'; const MAX_TAGS_TO_SHOW = 3; @@ -160,8 +160,9 @@ export default function AllEntitiesTable({ {renderTable('query')} </> ) : ( - <EmptyStateBig + <EmptyState image="dashboard.svg" + size="large" title={t('No entities have this tag currently assigned')} buttonAction={() => setShowTagModal(true)} buttonText={t('Add tag to entities')} diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx index 9f57935947..5aab720272 100644 --- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx @@ -18,7 +18,7 @@ */ import { t, styled } from '@superset-ui/core'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { Link } from 'react-router-dom'; const StyledContainer = styled.div` @@ -31,7 +31,7 @@ const StyledContainer = styled.div` height: 100%; `; -const StyledEmptyStateBig = styled(EmptyStateBig)` +const StyledEmptyState = styled(EmptyState)` max-width: 50%; p { @@ -91,8 +91,9 @@ export const MessageContent = (props: MessageContentProps) => { } return ( <StyledContainer> - <StyledEmptyStateBig + <StyledEmptyState image={currentImage} + size="large" title={currentTitle} description={currentDescription} /> diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx index 0e41182096..289a67f5aa 100644 --- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx @@ -32,7 +32,7 @@ import Table, { TableSize, OnChangeFunction, } from 'src/components/Table'; -import { EmptyStateBig } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import ChartImage from 'src/assets/images/chart.svg'; import Icons from 'src/components/Icons'; import { useToasts } from 'src/components/MessageToasts/withToasts'; @@ -147,7 +147,7 @@ const emptyStateButtonText = ( </> ); -const StyledEmptyStateBig = styled(EmptyStateBig)` +const StyledEmptyState = styled(EmptyState)` margin: ${({ theme }) => 13 * theme.gridUnit}px 0; `; @@ -250,8 +250,9 @@ const DatasetUsage = ({ datasetId }: DatasetUsageProps) => { onChange={onChange} /> {!data.length && !loading ? ( - <StyledEmptyStateBig + <StyledEmptyState image={<ChartImage />} + size="large" title={t('No charts')} description={t('This dataset is not used to power any charts.')} buttonText={emptyStateButtonText} diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx index c14109aede..5ca43fbf01 100644 --- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx @@ -20,7 +20,7 @@ import { useEffect, SetStateAction, Dispatch, useCallback } from 'react'; import { styled, t } from '@superset-ui/core'; import TableSelector, { TableOption } from 'src/components/TableSelector'; import { DatabaseObject } from 'src/components/DatabaseSelector'; -import { emptyStateComponent } from 'src/components/EmptyState'; +import { EmptyState } from 'src/components/EmptyState'; import { useToasts } from 'src/components/MessageToasts/withToasts'; import { LocalStorageKeys, getItem } from 'src/utils/localStorageHelpers'; import { @@ -184,7 +184,7 @@ export default function LeftPanel({ <TableSelector database={dataset?.db} handleError={addDangerToast} - emptyState={emptyStateComponent(false)} + emptyState={<EmptyState />} onDbChange={setDatabase} onCatalogChange={setCatalog} onSchemaChange={setSchema} diff --git a/superset-frontend/src/features/home/EmptyState.tsx b/superset-frontend/src/features/home/EmptyState.tsx index cbcede55ec..4c4e3f00bd 100644 --- a/superset-frontend/src/features/home/EmptyState.tsx +++ b/superset-frontend/src/features/home/EmptyState.tsx @@ -18,7 +18,7 @@ */ import { Link } from 'react-router-dom'; import Button from 'src/components/Button'; -import { Empty } from 'src/components/EmptyState/Empty'; +import { EmptyState as EmptyStateComponent } from 'src/components/EmptyState'; import { TableTab } from 'src/views/CRUD/types'; import { styled, t } from '@superset-ui/core'; import { WelcomeTable } from './types'; @@ -57,6 +57,7 @@ export interface EmptyStateProps { const EmptyContainer = styled.div` min-height: 200px; display: flex; + color: ${({ theme }) => theme.colors.grayscale.light2}; flex-direction: column; justify-content: space-around; `; @@ -130,8 +131,9 @@ export default function EmptyState({ ) { return ( <EmptyContainer> - <Empty - image={`/static/assets/images/${tableIcon[tableName]}`} + <EmptyStateComponent + image={tableIcon[tableName]} + size="large" description={ tableName === WelcomeTable.Recents || tab === TableTab.Other ? recent @@ -153,15 +155,15 @@ export default function EmptyState({ </Link> </ButtonContainer> )} - </Empty> + </EmptyStateComponent> </EmptyContainer> ); } // Favorite tab empty state return ( <EmptyContainer> - <Empty - image="/static/assets/images/star-circle.svg" + <EmptyStateComponent + image="star-circle.svg" description={ <span className="no-favorites"> {t("You don't have any favorites yet!")} @@ -181,7 +183,7 @@ export default function EmptyState({ : welcomeTableLabels[tableName], })} </Button> - </Empty> + </EmptyStateComponent> </EmptyContainer> ); }
