mirror of
https://github.com/apache/superset.git
synced 2024-09-18 19:49:37 -04:00
fix: Menu items are not disappearing when deleting a dashboard (#23039)
This commit is contained in:
parent
464ddee4b4
commit
17fbb2dbb2
@ -19,11 +19,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link, useHistory } from 'react-router-dom';
|
import { Link, useHistory } from 'react-router-dom';
|
||||||
import { t, useTheme } from '@superset-ui/core';
|
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 { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
||||||
import { AntdDropdown } from 'src/components';
|
import { AntdDropdown } from 'src/components';
|
||||||
import { Menu } from 'src/components/Menu';
|
import { Menu } from 'src/components/Menu';
|
||||||
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
|
|
||||||
import ListViewCard from 'src/components/ListViewCard';
|
import ListViewCard from 'src/components/ListViewCard';
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
import Label from 'src/components/Label';
|
import Label from 'src/components/Label';
|
||||||
@ -36,33 +35,27 @@ interface DashboardCardProps {
|
|||||||
dashboard: Dashboard;
|
dashboard: Dashboard;
|
||||||
hasPerm: (name: string) => boolean;
|
hasPerm: (name: string) => boolean;
|
||||||
bulkSelectEnabled: boolean;
|
bulkSelectEnabled: boolean;
|
||||||
refreshData: () => void;
|
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
addDangerToast: (msg: string) => void;
|
|
||||||
addSuccessToast: (msg: string) => void;
|
|
||||||
openDashboardEditModal?: (d: Dashboard) => void;
|
openDashboardEditModal?: (d: Dashboard) => void;
|
||||||
saveFavoriteStatus: (id: number, isStarred: boolean) => void;
|
saveFavoriteStatus: (id: number, isStarred: boolean) => void;
|
||||||
favoriteStatus: boolean;
|
favoriteStatus: boolean;
|
||||||
dashboardFilter?: string;
|
|
||||||
userId?: string | number;
|
userId?: string | number;
|
||||||
showThumbnails?: boolean;
|
showThumbnails?: boolean;
|
||||||
handleBulkDashboardExport: (dashboardsToExport: Dashboard[]) => void;
|
handleBulkDashboardExport: (dashboardsToExport: Dashboard[]) => void;
|
||||||
|
onDelete: (dashboard: Dashboard) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
function DashboardCard({
|
function DashboardCard({
|
||||||
dashboard,
|
dashboard,
|
||||||
hasPerm,
|
hasPerm,
|
||||||
bulkSelectEnabled,
|
bulkSelectEnabled,
|
||||||
dashboardFilter,
|
|
||||||
refreshData,
|
|
||||||
userId,
|
userId,
|
||||||
addDangerToast,
|
|
||||||
addSuccessToast,
|
|
||||||
openDashboardEditModal,
|
openDashboardEditModal,
|
||||||
favoriteStatus,
|
favoriteStatus,
|
||||||
saveFavoriteStatus,
|
saveFavoriteStatus,
|
||||||
showThumbnails,
|
showThumbnails,
|
||||||
handleBulkDashboardExport,
|
handleBulkDashboardExport,
|
||||||
|
onDelete,
|
||||||
}: DashboardCardProps) {
|
}: DashboardCardProps) {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const canEdit = hasPerm('can_write');
|
const canEdit = hasPerm('can_write');
|
||||||
@ -100,37 +93,15 @@ function DashboardCard({
|
|||||||
)}
|
)}
|
||||||
{canDelete && (
|
{canDelete && (
|
||||||
<Menu.Item>
|
<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,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{confirmDelete => (
|
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
className="action-button"
|
className="action-button"
|
||||||
onClick={confirmDelete}
|
onClick={() => onDelete(dashboard)}
|
||||||
data-test="dashboard-card-option-delete-button"
|
data-test="dashboard-card-option-delete-button"
|
||||||
>
|
>
|
||||||
<Icons.Trash iconSize="l" /> {t('Delete')}
|
<Icons.Trash iconSize="l" /> {t('Delete')}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</ConfirmStatusChange>
|
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
)}
|
)}
|
||||||
</Menu>
|
</Menu>
|
||||||
|
@ -42,12 +42,14 @@ import Owner from 'src/types/Owner';
|
|||||||
import withToasts from 'src/components/MessageToasts/withToasts';
|
import withToasts from 'src/components/MessageToasts/withToasts';
|
||||||
import FacePile from 'src/components/FacePile';
|
import FacePile from 'src/components/FacePile';
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
|
import DeleteModal from 'src/components/DeleteModal';
|
||||||
import FaveStar from 'src/components/FaveStar';
|
import FaveStar from 'src/components/FaveStar';
|
||||||
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
|
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import ImportModelsModal from 'src/components/ImportModal/index';
|
import ImportModelsModal from 'src/components/ImportModal/index';
|
||||||
|
|
||||||
import Dashboard from 'src/dashboard/containers/Dashboard';
|
import Dashboard from 'src/dashboard/containers/Dashboard';
|
||||||
|
import { Dashboard as CRUDDashboard } from 'src/views/CRUD/types';
|
||||||
import CertifiedBadge from 'src/components/CertifiedBadge';
|
import CertifiedBadge from 'src/components/CertifiedBadge';
|
||||||
import getBootstrapData from 'src/utils/getBootstrapData';
|
import getBootstrapData from 'src/utils/getBootstrapData';
|
||||||
import DashboardCard from './DashboardCard';
|
import DashboardCard from './DashboardCard';
|
||||||
@ -131,6 +133,8 @@ function DashboardList(props: DashboardListProps) {
|
|||||||
const [dashboardToEdit, setDashboardToEdit] = useState<Dashboard | null>(
|
const [dashboardToEdit, setDashboardToEdit] = useState<Dashboard | null>(
|
||||||
null,
|
null,
|
||||||
);
|
);
|
||||||
|
const [dashboardToDelete, setDashboardToDelete] =
|
||||||
|
useState<CRUDDashboard | null>(null);
|
||||||
|
|
||||||
const [importingDashboard, showImportModal] = useState<boolean>(false);
|
const [importingDashboard, showImportModal] = useState<boolean>(false);
|
||||||
const [passwordFields, setPasswordFields] = useState<string[]>([]);
|
const [passwordFields, setPasswordFields] = useState<string[]>([]);
|
||||||
@ -575,7 +579,6 @@ function DashboardList(props: DashboardListProps) {
|
|||||||
dashboard={dashboard}
|
dashboard={dashboard}
|
||||||
hasPerm={hasPerm}
|
hasPerm={hasPerm}
|
||||||
bulkSelectEnabled={bulkSelectEnabled}
|
bulkSelectEnabled={bulkSelectEnabled}
|
||||||
refreshData={refreshData}
|
|
||||||
showThumbnails={
|
showThumbnails={
|
||||||
userKey
|
userKey
|
||||||
? userKey.thumbnails
|
? userKey.thumbnails
|
||||||
@ -583,23 +586,19 @@ function DashboardList(props: DashboardListProps) {
|
|||||||
}
|
}
|
||||||
userId={userId}
|
userId={userId}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
addDangerToast={addDangerToast}
|
|
||||||
addSuccessToast={addSuccessToast}
|
|
||||||
openDashboardEditModal={openDashboardEditModal}
|
openDashboardEditModal={openDashboardEditModal}
|
||||||
saveFavoriteStatus={saveFavoriteStatus}
|
saveFavoriteStatus={saveFavoriteStatus}
|
||||||
favoriteStatus={favoriteStatus[dashboard.id]}
|
favoriteStatus={favoriteStatus[dashboard.id]}
|
||||||
handleBulkDashboardExport={handleBulkDashboardExport}
|
handleBulkDashboardExport={handleBulkDashboardExport}
|
||||||
|
onDelete={dashboard => setDashboardToDelete(dashboard)}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
[
|
[
|
||||||
addDangerToast,
|
|
||||||
addSuccessToast,
|
|
||||||
bulkSelectEnabled,
|
bulkSelectEnabled,
|
||||||
favoriteStatus,
|
favoriteStatus,
|
||||||
hasPerm,
|
hasPerm,
|
||||||
loading,
|
loading,
|
||||||
userId,
|
userId,
|
||||||
refreshData,
|
|
||||||
saveFavoriteStatus,
|
saveFavoriteStatus,
|
||||||
userKey,
|
userKey,
|
||||||
],
|
],
|
||||||
@ -681,6 +680,30 @@ function DashboardList(props: DashboardListProps) {
|
|||||||
onSubmit={handleDashboardEdit}
|
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>
|
<ListView<Dashboard>
|
||||||
bulkActions={bulkActions}
|
bulkActions={bulkActions}
|
||||||
bulkSelectEnabled={bulkSelectEnabled}
|
bulkSelectEnabled={bulkSelectEnabled}
|
||||||
|
@ -34,9 +34,11 @@ import {
|
|||||||
createErrorHandler,
|
createErrorHandler,
|
||||||
getFilterValues,
|
getFilterValues,
|
||||||
PAGE_SIZE,
|
PAGE_SIZE,
|
||||||
|
handleDashboardDelete,
|
||||||
} from 'src/views/CRUD/utils';
|
} from 'src/views/CRUD/utils';
|
||||||
import withToasts from 'src/components/MessageToasts/withToasts';
|
import withToasts from 'src/components/MessageToasts/withToasts';
|
||||||
import Loading from 'src/components/Loading';
|
import Loading from 'src/components/Loading';
|
||||||
|
import DeleteModal from 'src/components/DeleteModal';
|
||||||
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
|
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
|
||||||
import DashboardCard from 'src/views/CRUD/dashboard/DashboardCard';
|
import DashboardCard from 'src/views/CRUD/dashboard/DashboardCard';
|
||||||
import SubMenu from 'src/views/components/SubMenu';
|
import SubMenu from 'src/views/components/SubMenu';
|
||||||
@ -90,6 +92,9 @@ function DashboardTable({
|
|||||||
const [activeTab, setActiveTab] = useState(defaultTab);
|
const [activeTab, setActiveTab] = useState(defaultTab);
|
||||||
const [preparingExport, setPreparingExport] = useState<boolean>(false);
|
const [preparingExport, setPreparingExport] = useState<boolean>(false);
|
||||||
const [loaded, setLoaded] = useState<boolean>(false);
|
const [loaded, setLoaded] = useState<boolean>(false);
|
||||||
|
const [dashboardToDelete, setDashboardToDelete] = useState<Dashboard | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
|
||||||
const getData = (tab: TableTab) =>
|
const getData = (tab: TableTab) =>
|
||||||
fetchData({
|
fetchData({
|
||||||
@ -217,6 +222,30 @@ function DashboardTable({
|
|||||||
onSubmit={handleDashboardEdit}
|
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 && (
|
{dashboards.length > 0 && (
|
||||||
<CardContainer showThumbnails={showThumbnails}>
|
<CardContainer showThumbnails={showThumbnails}>
|
||||||
{dashboards.map(e => (
|
{dashboards.map(e => (
|
||||||
@ -226,10 +255,6 @@ function DashboardTable({
|
|||||||
hasPerm={hasPerm}
|
hasPerm={hasPerm}
|
||||||
bulkSelectEnabled={false}
|
bulkSelectEnabled={false}
|
||||||
showThumbnails={showThumbnails}
|
showThumbnails={showThumbnails}
|
||||||
dashboardFilter={activeTab}
|
|
||||||
refreshData={refreshData}
|
|
||||||
addDangerToast={addDangerToast}
|
|
||||||
addSuccessToast={addSuccessToast}
|
|
||||||
userId={user?.userId}
|
userId={user?.userId}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
openDashboardEditModal={(dashboard: Dashboard) =>
|
openDashboardEditModal={(dashboard: Dashboard) =>
|
||||||
@ -238,6 +263,7 @@ function DashboardTable({
|
|||||||
saveFavoriteStatus={saveFavoriteStatus}
|
saveFavoriteStatus={saveFavoriteStatus}
|
||||||
favoriteStatus={favoriteStatus[e.id]}
|
favoriteStatus={favoriteStatus[e.id]}
|
||||||
handleBulkDashboardExport={handleBulkDashboardExport}
|
handleBulkDashboardExport={handleBulkDashboardExport}
|
||||||
|
onDelete={dashboard => setDashboardToDelete(dashboard)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</CardContainer>
|
</CardContainer>
|
||||||
|
Loading…
Reference in New Issue
Block a user