diff --git a/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts b/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts index a411c41d08af8..cd67d37474728 100644 --- a/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts +++ b/superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts @@ -65,6 +65,9 @@ type ConfigDetailsProps = { type RightMenuItemIconProps = { menuChild: MenuObjectChildProps; }; +type DatabaseDeleteRelatedExtensionProps = { + databaseId: number; +}; export type Extensions = Partial<{ 'alertsreports.header.icon': React.ComponentType; @@ -80,6 +83,7 @@ export type Extensions = Partial<{ 'welcome.banner': React.ComponentType; 'welcome.main.replacement': React.ComponentType; 'ssh_tunnel.form.switch': React.ComponentType; + 'database.delete.related': React.ComponentType; }>; /** diff --git a/superset-frontend/src/components/DeleteModal/index.tsx b/superset-frontend/src/components/DeleteModal/index.tsx index b8b577d3060f3..74a6f178c7191 100644 --- a/superset-frontend/src/components/DeleteModal/index.tsx +++ b/superset-frontend/src/components/DeleteModal/index.tsx @@ -32,7 +32,7 @@ const StyledDiv = styled.div` `; const DescriptionContainer = styled.div` - line-height: 40px; + line-height: ${({ theme }) => theme.gridUnit * 4}px; padding-top: 16px; `; diff --git a/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx b/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx index 2ab5d067bf5af..fd989b50d2270 100644 --- a/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx +++ b/superset-frontend/src/pages/DatabaseList/DatabaseList.test.jsx @@ -165,9 +165,14 @@ 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) + .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. +

+
+ `); act(() => { wrapper diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx index 0a59ccc3b2683..44a4ac3ca002d 100644 --- a/superset-frontend/src/pages/DatabaseList/index.tsx +++ b/superset-frontend/src/pages/DatabaseList/index.tsx @@ -16,7 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import { FeatureFlag, styled, SupersetClient, t } from '@superset-ui/core'; +import { + FeatureFlag, + getExtensionsRegistry, + styled, + SupersetClient, + t, +} from '@superset-ui/core'; import React, { useState, useMemo, useEffect } from 'react'; import rison from 'rison'; import { useSelector } from 'react-redux'; @@ -43,6 +49,11 @@ import type { MenuObjectProps } from 'src/types/bootstrapTypes'; import DatabaseModal from 'src/features/databases/DatabaseModal'; import { DatabaseObject } from 'src/features/databases/types'; +const extensionsRegistry = getExtensionsRegistry(); +const DatabaseDeleteRelatedExtension = extensionsRegistry.get( + 'database.delete.related', +); + const PAGE_SIZE = 25; interface DatabaseDeleteObject extends DatabaseObject { @@ -512,13 +523,24 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) { /> {databaseCurrentlyDeleting && ( +

+ {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, + databaseCurrentlyDeleting.sqllab_tab_count, + )} +

+ {DatabaseDeleteRelatedExtension && currentDatabase?.id && ( + + )} + + } onConfirm={() => { if (databaseCurrentlyDeleting) { handleDatabaseDelete(databaseCurrentlyDeleting);