chore: add extension for related DB assets on delete (#24050)

apache · May 16, 2023 · fe903c3 · fe903c3
1 parent 61418d2
commit fe903c3
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
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
@@ -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<SwitchProps>;
+  'database.delete.related': React.ComponentType<DatabaseDeleteRelatedExtensionProps>;
 }>;
 
 /**

diff --git 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
@@ -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(`
+      <React.Fragment>
+        <p>
+          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.
+        </p>
+      </React.Fragment>
+    `);
 
     act(() => {
       wrapper

diff --git 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 && (
         <DeleteModal
-          description={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,
-          )}
+          description={
+            <>
+              <p>
+                {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,
+                )}
+              </p>
+              {DatabaseDeleteRelatedExtension && currentDatabase?.id && (
+                <DatabaseDeleteRelatedExtension
+                  databaseId={currentDatabase.id}
+                />
+              )}
+            </>
+          }
           onConfirm={() => {
             if (databaseCurrentlyDeleting) {
               handleDatabaseDelete(databaseCurrentlyDeleting);