Skip to content

Commit

Permalink
fix: Menu items are not disappearing when deleting a dashboard (#23039)
Browse files Browse the repository at this point in the history
  • Loading branch information
michael-s-molina authored Feb 10, 2023
1 parent 464ddee commit 17fbb2d
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 50 deletions.
51 changes: 11 additions & 40 deletions superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
Expand Down Expand Up @@ -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>
Expand Down
35 changes: 29 additions & 6 deletions superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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[]>([]);
Expand Down Expand Up @@ -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,
],
Expand Down Expand Up @@ -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}
Expand Down
34 changes: 30 additions & 4 deletions superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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 => (
Expand All @@ -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) =>
Expand All @@ -238,6 +263,7 @@ function DashboardTable({
saveFavoriteStatus={saveFavoriteStatus}
favoriteStatus={favoriteStatus[e.id]}
handleBulkDashboardExport={handleBulkDashboardExport}
onDelete={dashboard => setDashboardToDelete(dashboard)}
/>
))}
</CardContainer>
Expand Down

0 comments on commit 17fbb2d

Please sign in to comment.