fix: Menu items are not disappearing when deleting a dashboard

Author: michael-s-molina

superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx

@@ -19,11 +19,10 @@
 import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { t, useTheme } from '@superset-ui/core';
-import { handleDashboardDelete, CardStyles } from 'src/views/CRUD/utils';
+import { CardStyles } from 'src/views/CRUD/utils';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { AntdDropdown } from 'src/components';
 import { Menu } from 'src/components/Menu';
-import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import ListViewCard from 'src/components/ListViewCard';
 import Icons from 'src/components/Icons';
 import Label from 'src/components/Label';
@@ -36,33 +35,27 @@ interface DashboardCardProps {
   dashboard: Dashboard;
   hasPerm: (name: string) => boolean;
   bulkSelectEnabled: boolean;
-  refreshData: () => void;
   loading: boolean;
-  addDangerToast: (msg: string) => void;
-  addSuccessToast: (msg: string) => void;
   openDashboardEditModal?: (d: Dashboard) => void;
   saveFavoriteStatus: (id: number, isStarred: boolean) => void;
   favoriteStatus: boolean;
-  dashboardFilter?: string;
   userId?: string | number;
   showThumbnails?: boolean;
   handleBulkDashboardExport: (dashboardsToExport: Dashboard[]) => void;
+  onDelete: (dashboard: Dashboard) => void;
 }
 
 function DashboardCard({
   dashboard,
   hasPerm,
   bulkSelectEnabled,
-  dashboardFilter,
-  refreshData,
   userId,
-  addDangerToast,
-  addSuccessToast,
   openDashboardEditModal,
   favoriteStatus,
   saveFavoriteStatus,
   showThumbnails,
   handleBulkDashboardExport,
+  onDelete,
 }: DashboardCardProps) {
   const history = useHistory();
   const canEdit = hasPerm('can_write');
@@ -100,37 +93,15 @@ function DashboardCard({
       )}
       {canDelete && (
         <Menu.Item>
-          <ConfirmStatusChange
-            title={t('Please confirm')}
-            description={
-              <>
-                {t('Are you sure you want to delete')}{' '}
-                <b>{dashboard.dashboard_title}</b>?
-              </>
-            }
-            onConfirm={() =>
-              handleDashboardDelete(
-                dashboard,
-                refreshData,
-                addSuccessToast,
-                addDangerToast,
-                dashboardFilter,
-                userId,
-              )
-            }
+          <div
+            role="button"
+            tabIndex={0}
+            className="action-button"
+            onClick={() => onDelete(dashboard)}
+            data-test="dashboard-card-option-delete-button"
           >
-            {confirmDelete => (
-              <div
-                role="button"
-                tabIndex={0}
-                className="action-button"
-                onClick={confirmDelete}
-                data-test="dashboard-card-option-delete-button"
-              >
-                <Icons.Trash iconSize="l" /> {t('Delete')}
-              </div>
-            )}
-          </ConfirmStatusChange>
+            <Icons.Trash iconSize="l" /> {t('Delete')}
+          </div>
         </Menu.Item>
       )}
     </Menu>

superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx

@@ -42,12 +42,14 @@ import Owner from 'src/types/Owner';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import FacePile from 'src/components/FacePile';
 import Icons from 'src/components/Icons';
+import DeleteModal from 'src/components/DeleteModal';
 import FaveStar from 'src/components/FaveStar';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
 import { Tooltip } from 'src/components/Tooltip';
 import ImportModelsModal from 'src/components/ImportModal/index';
 
 import Dashboard from 'src/dashboard/containers/Dashboard';
+import { Dashboard as CRUDDashboard } from 'src/views/CRUD/types';
 import CertifiedBadge from 'src/components/CertifiedBadge';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import DashboardCard from './DashboardCard';
@@ -131,6 +133,8 @@ function DashboardList(props: DashboardListProps) {
   const [dashboardToEdit, setDashboardToEdit] = useState<Dashboard | null>(
     null,
   );
+  const [dashboardToDelete, setDashboardToDelete] =
+    useState<CRUDDashboard | null>(null);
 
   const [importingDashboard, showImportModal] = useState<boolean>(false);
   const [passwordFields, setPasswordFields] = useState<string[]>([]);
@@ -575,31 +579,26 @@ function DashboardList(props: DashboardListProps) {
         dashboard={dashboard}
         hasPerm={hasPerm}
         bulkSelectEnabled={bulkSelectEnabled}
-        refreshData={refreshData}
         showThumbnails={
           userKey
             ? userKey.thumbnails
             : isFeatureEnabled(FeatureFlag.THUMBNAILS)
         }
         userId={userId}
         loading={loading}
-        addDangerToast={addDangerToast}
-        addSuccessToast={addSuccessToast}
         openDashboardEditModal={openDashboardEditModal}
         saveFavoriteStatus={saveFavoriteStatus}
         favoriteStatus={favoriteStatus[dashboard.id]}
         handleBulkDashboardExport={handleBulkDashboardExport}
+        onDelete={dashboard => setDashboardToDelete(dashboard)}
       />
     ),
     [
-      addDangerToast,
-      addSuccessToast,
       bulkSelectEnabled,
       favoriteStatus,
       hasPerm,
       loading,
       userId,
-      refreshData,
       saveFavoriteStatus,
       userKey,
     ],
@@ -681,6 +680,30 @@ function DashboardList(props: DashboardListProps) {
                   onSubmit={handleDashboardEdit}
                 />
               )}
+              {dashboardToDelete && (
+                <DeleteModal
+                  description={
+                    <>
+                      {t('Are you sure you want to delete')}{' '}
+                      <b>{dashboardToDelete.dashboard_title}</b>?
+                    </>
+                  }
+                  onConfirm={() => {
+                    handleDashboardDelete(
+                      dashboardToDelete,
+                      refreshData,
+                      addSuccessToast,
+                      addDangerToast,
+                      undefined,
+                      userId,
+                    );
+                    setDashboardToDelete(null);
+                  }}
+                  onHide={() => setDashboardToDelete(null)}
+                  open={!!dashboardToDelete}
+                  title={t('Please confirm')}
+                />
+              )}
               <ListView<Dashboard>
                 bulkActions={bulkActions}
                 bulkSelectEnabled={bulkSelectEnabled}

superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx

@@ -34,9 +34,11 @@ import {
   createErrorHandler,
   getFilterValues,
   PAGE_SIZE,
+  handleDashboardDelete,
 } from 'src/views/CRUD/utils';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import Loading from 'src/components/Loading';
+import DeleteModal from 'src/components/DeleteModal';
 import PropertiesModal from 'src/dashboard/components/PropertiesModal';
 import DashboardCard from 'src/views/CRUD/dashboard/DashboardCard';
 import SubMenu from 'src/views/components/SubMenu';
@@ -90,6 +92,9 @@ function DashboardTable({
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
   const [loaded, setLoaded] = useState<boolean>(false);
+  const [dashboardToDelete, setDashboardToDelete] = useState<Dashboard | null>(
+    null,
+  );
 
   const getData = (tab: TableTab) =>
     fetchData({
@@ -217,6 +222,30 @@ function DashboardTable({
           onSubmit={handleDashboardEdit}
         />
       )}
+      {dashboardToDelete && (
+        <DeleteModal
+          description={
+            <>
+              {t('Are you sure you want to delete')}{' '}
+              <b>{dashboardToDelete.dashboard_title}</b>?
+            </>
+          }
+          onConfirm={() => {
+            handleDashboardDelete(
+              dashboardToDelete,
+              refreshData,
+              addSuccessToast,
+              addDangerToast,
+              activeTab,
+              user?.userId,
+            );
+            setDashboardToDelete(null);
+          }}
+          onHide={() => setDashboardToDelete(null)}
+          open={!!dashboardToDelete}
+          title={t('Please confirm')}
+        />
+      )}
       {dashboards.length > 0 && (
         <CardContainer showThumbnails={showThumbnails}>
           {dashboards.map(e => (
@@ -226,10 +255,6 @@ function DashboardTable({
               hasPerm={hasPerm}
               bulkSelectEnabled={false}
               showThumbnails={showThumbnails}
-              dashboardFilter={activeTab}
-              refreshData={refreshData}
-              addDangerToast={addDangerToast}
-              addSuccessToast={addSuccessToast}
               userId={user?.userId}
               loading={loading}
               openDashboardEditModal={(dashboard: Dashboard) =>
@@ -238,6 +263,7 @@ function DashboardTable({
               saveFavoriteStatus={saveFavoriteStatus}
               favoriteStatus={favoriteStatus[e.id]}
               handleBulkDashboardExport={handleBulkDashboardExport}
+              onDelete={dashboard => setDashboardToDelete(dashboard)}
             />
           ))}
         </CardContainer>