diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 39dfcf5d3..67742cb72 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -53,6 +53,7 @@ repos: - id: debug-statements - id: end-of-file-fixer - id: trailing-whitespace + exclude: ^.*\.(snap) args: ["--markdown-linebreak-ext=md"] - repo: https://github.com/pre-commit/mirrors-prettier rev: v3.1.0 # Use the sha or tag you want to point at diff --git a/.rat-excludes b/.rat-excludes index 7cfb991cc..12f1f2fe5 100644 --- a/.rat-excludes +++ b/.rat-excludes @@ -61,6 +61,9 @@ tsconfig.tsbuildinfo generator-superset/* temporary_superset_ui/* +# skip license checks for auto-generated test snapshots +.*snap + # docs overrides for third party logos we don't have the rights to google-big-query.svg google-sheets.svg diff --git a/superset-frontend/.prettierignore b/superset-frontend/.prettierignore index 72f96752b..790231eb2 100644 --- a/superset-frontend/.prettierignore +++ b/superset-frontend/.prettierignore @@ -25,5 +25,6 @@ CHANGELOG/ *.geojson *-topo.json storybook-static/ +*.snap /.nx/workspace-data diff --git a/superset-frontend/src/components/DeleteModal/index.tsx b/superset-frontend/src/components/DeleteModal/index.tsx index 3190adae2..11991854d 100644 --- a/superset-frontend/src/components/DeleteModal/index.tsx +++ b/superset-frontend/src/components/DeleteModal/index.tsx @@ -84,6 +84,7 @@ export default function DeleteModal({ primaryButtonType="danger" show={open} title={title} + centered > {description} diff --git a/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx b/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx index 8027ddaec..b15126b34 100644 --- a/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx +++ b/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx @@ -164,14 +164,7 @@ describe('Admin DatabaseList', () => { }); await waitForComponentToPaint(wrapper); - expect(wrapper.find(DeleteModal).props().description) - .toMatchInlineSnapshot(` - -

- The database db 0 is linked to 0 charts that appear on 0 dashboards and users have 0 SQL Lab tabs using this database open. Are you sure you want to continue? Deleting the database will break those objects. -

- - `); + expect(wrapper.find(DeleteModal).props().description).toMatchSnapshot(); act(() => { wrapper diff --git a/superset-frontend/src/pages/DatabaseList/__snapshots__/DatabaseList.test.jsx.snap b/superset-frontend/src/pages/DatabaseList/__snapshots__/DatabaseList.test.jsx.snap new file mode 100644 index 000000000..c4f6ebc96 --- /dev/null +++ b/superset-frontend/src/pages/DatabaseList/__snapshots__/DatabaseList.test.jsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Admin DatabaseList deletes 1`] = ` + +

+ The database + + + db 0 + + + is linked to 0 charts that appear on 0 dashboards and users have 0 SQL Lab tabs using this database open. Are you sure you want to continue? Deleting the database will break those objects. +

+ +`; diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx index 345d589a1..776dbbe81 100644 --- a/superset-frontend/src/pages/DatabaseList/index.tsx +++ b/superset-frontend/src/pages/DatabaseList/index.tsx @@ -27,7 +27,6 @@ import rison from 'rison'; import { useSelector } from 'react-redux'; import { useQueryParams, BooleanParam } from 'use-query-params'; import { LocalStorageKeys, setItem } from 'src/utils/localStorageHelpers'; - import Loading from 'src/components/Loading'; import { useListViewResource } from 'src/views/CRUD/hooks'; import { @@ -65,8 +64,8 @@ const dbConfigExtraExtension = extensionsRegistry.get( const PAGE_SIZE = 25; interface DatabaseDeleteObject extends DatabaseObject { - chart_count: number; - dashboard_count: number; + charts: any; + dashboards: any; sqllab_tab_count: number; } interface DatabaseListProps { @@ -170,8 +169,8 @@ function DatabaseList({ .then(({ json = {} }) => { setDatabaseCurrentlyDeleting({ ...database, - chart_count: json.charts.count, - dashboard_count: json.dashboards.count, + charts: json.charts, + dashboards: json.dashboards, sqllab_tab_count: json.sqllab_tab_states.count, }); }) @@ -609,14 +608,82 @@ function DatabaseList({ description={ <>

+ {t('The database')}{' '} + {databaseCurrentlyDeleting.database_name}{' '} {t( - 'The database %s is linked to %s charts that appear on %s dashboards and users have %s SQL Lab tabs using this database open. Are you sure you want to continue? Deleting the database will break those objects.', - databaseCurrentlyDeleting.database_name, - databaseCurrentlyDeleting.chart_count, - databaseCurrentlyDeleting.dashboard_count, + 'is linked to %s charts that appear on %s dashboards and users have %s SQL Lab tabs using this database open. Are you sure you want to continue? Deleting the database will break those objects.', + databaseCurrentlyDeleting.charts.count, + databaseCurrentlyDeleting.dashboards.count, databaseCurrentlyDeleting.sqllab_tab_count, )}

+ {databaseCurrentlyDeleting.dashboards.count >= 1 && ( + <> +

{t('Affected Dashboards')}

+ + + )} + {databaseCurrentlyDeleting.charts.count >= 1 && ( + <> +

{t('Affected Charts')}

+ + + )} {DatabaseDeleteRelatedExtension && ( = ({ } = useListViewResource('dataset', t('dataset'), addDangerToast); const [datasetCurrentlyDeleting, setDatasetCurrentlyDeleting] = useState< - (Dataset & { chart_count: number; dashboard_count: number }) | null + | (Dataset & { + charts: any; + dashboards: any; + }) + | null >(null); const [datasetCurrentlyEditing, setDatasetCurrentlyEditing] = @@ -243,8 +247,8 @@ const DatasetList: FunctionComponent = ({ .then(({ json = {} }) => { setDatasetCurrentlyDeleting({ ...dataset, - chart_count: json.charts.count, - dashboard_count: json.dashboards.count, + charts: json.charts, + dashboards: json.dashboards, }); }) .catch( @@ -742,13 +746,80 @@ const DatasetList: FunctionComponent = ({ description={ <>

+ {t('The dataset')} + {datasetCurrentlyDeleting.table_name} {t( - 'The dataset %s is linked to %s charts that appear on %s dashboards. Are you sure you want to continue? Deleting the dataset will break those objects.', - datasetCurrentlyDeleting.table_name, - datasetCurrentlyDeleting.chart_count, - datasetCurrentlyDeleting.dashboard_count, + 'is linked to %s charts that appear on %s dashboards. Are you sure you want to continue? Deleting the dataset will break those objects.', + datasetCurrentlyDeleting.charts.count, + datasetCurrentlyDeleting.dashboards.count, )}

+ {datasetCurrentlyDeleting.dashboards.count >= 1 && ( + <> +

{t('Affected Dashboards')}

+
    + {datasetCurrentlyDeleting.dashboards.result + .slice(0, 10) + .map( + ( + result: { id: Key | null | undefined; title: string }, + index: number, + ) => ( +
  • + + {result.title} + +
    • + ), + )} + {datasetCurrentlyDeleting.dashboards.result.length > 10 && ( +
  • + {t( + '... and %s others', + datasetCurrentlyDeleting.dashboards.result.length - + 10, + )} +
    • + )} +
+ + )} + {datasetCurrentlyDeleting.charts.count >= 1 && ( + <> +

{t('Affected Charts')}

+
    + {datasetCurrentlyDeleting.charts.result.slice(0, 10).map( + ( + result: { + id: Key | null | undefined; + slice_name: string; + }, + index: number, + ) => ( +
  • + + {result.slice_name} + +
    • + ), + )} + {datasetCurrentlyDeleting.charts.result.length > 10 && ( +
  • + {t( + '... and %s others', + datasetCurrentlyDeleting.charts.result.length - 10, + )} +
    • + )} +
+ + )} {DatasetDeleteRelatedExtension && (