From a0efa63185900baa7c3a60cbdb13be20e2924ee3 Mon Sep 17 00:00:00 2001
From: Nishidh Jain <61869195+NishidhJain@users.noreply.github.com>
Date: Mon, 4 Apr 2022 17:35:44 +0530
Subject: [PATCH] Fix(FE) : Ask for confirmation before deleting any dashboard
 from dashboard list (#534)

* A confirmation dialog will pop up before deleting any dashboard

Co-authored-by: Palash gupta <palash@signoz.io>
---
 .../TableComponents/DeleteButton.tsx          | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
index f0b2d183df..fd9ef16001 100644
--- a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
@@ -1,4 +1,6 @@
-import React, { useCallback } from 'react';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Modal } from 'antd';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -8,14 +10,29 @@ import AppActions from 'types/actions';
 import { Data } from '../index';
 import { TableLinkText } from './styles';
 
-function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
-	const onClickHandler = useCallback(() => {
-		deleteDashboard({
-			uuid: id,
-		});
-	}, [id, deleteDashboard]);
+const { confirm } = Modal;
 
-	return <TableLinkText onClick={onClickHandler}>Delete</TableLinkText>;
+function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
+	const openConfirmationDialog = (): void => {
+		confirm({
+			title: 'Do you really want to delete this dashboard?',
+			icon: <ExclamationCircleOutlined style={{ color: '#e42b35' }} />,
+			onOk() {
+				deleteDashboard({
+					uuid: id,
+				});
+			},
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+		});
+	};
+
+	return (
+		<TableLinkText type="danger" onClick={openConfirmationDialog}>
+			Delete
+		</TableLinkText>
+	);
 }
 
 interface DispatchProps {