diff --git a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
index 11a62a02e3d..7a78192968a 100644
--- a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
+++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
@@ -1,12 +1,13 @@
 import { css } from '@emotion/css';
 import { sumBy } from 'lodash';
 import React from 'react';
+import { connect, ConnectedProps } from 'react-redux';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
 import { Modal, ConfirmModal, Button } from '@grafana/ui';
 import { config } from 'app/core/config';
-
-import { DashboardModel, PanelModel } from '../../state';
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
+import { cleanUpDashboardAndVariables } from 'app/features/dashboard/state/actions';
 
 import { useDashboardDelete } from './useDashboardDelete';
 
@@ -15,9 +16,17 @@ type DeleteDashboardModalProps = {
   dashboard: DashboardModel;
 };
 
-export const DeleteDashboardModal: React.FC<DeleteDashboardModalProps> = ({ hideModal, dashboard }) => {
+const mapDispatchToProps = {
+  cleanUpDashboardAndVariables,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+type Props = DeleteDashboardModalProps & ConnectedProps<typeof connector>;
+
+const DeleteDashboardModalUnconnected: React.FC<Props> = ({ hideModal, cleanUpDashboardAndVariables, dashboard }) => {
   const isProvisioned = dashboard.meta.provisioned;
-  const { onDeleteDashboard } = useDashboardDelete(dashboard.uid);
+  const { onDeleteDashboard } = useDashboardDelete(dashboard.uid, cleanUpDashboardAndVariables);
 
   const [, onConfirm] = useAsyncFn(async () => {
     await onDeleteDashboard();
@@ -98,3 +107,5 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi
     </Modal.ButtonRow>
   </Modal>
 );
+
+export const DeleteDashboardModal = connector(DeleteDashboardModalUnconnected);
diff --git a/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx b/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx
index ed9429909c5..630ae39be28 100644
--- a/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx
+++ b/public/app/features/dashboard/components/DeleteDashboard/useDashboardDelete.tsx
@@ -5,16 +5,17 @@ import { locationService } from '@grafana/runtime';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { deleteDashboard } from 'app/features/manage-dashboards/state/actions';
 
-export const useDashboardDelete = (uid: string) => {
+export const useDashboardDelete = (uid: string, cleanUpDashboardAndVariables: () => void) => {
   const [state, onDeleteDashboard] = useAsyncFn(() => deleteDashboard(uid, false), []);
   const notifyApp = useAppNotification();
 
   useEffect(() => {
     if (state.value) {
+      cleanUpDashboardAndVariables();
       locationService.replace('/');
       notifyApp.success('Dashboard Deleted', `${state.value.title} has been deleted`);
     }
-  }, [state, notifyApp]);
+  }, [state, notifyApp, cleanUpDashboardAndVariables]);
 
   return { state, onDeleteDashboard };
 };