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>

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';
 
+const { confirm } = Modal;
+
 function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
-	const onClickHandler = useCallback(() => {
+	const openConfirmationDialog = (): void => {
+		confirm({
+			title: 'Do you really want to delete this dashboard?',
+			icon: <ExclamationCircleOutlined style={{ color: '#e42b35' }} />,
+			onOk() {
 				deleteDashboard({
 					uuid: id,
 				});
-	}, [id, deleteDashboard]);
+			},
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+		});
+	};
 
-	return <TableLinkText onClick={onClickHandler}>Delete</TableLinkText>;
+	return (
+		<TableLinkText type="danger" onClick={openConfirmationDialog}>
+			Delete
+		</TableLinkText>
+	);
 }
 
 interface DispatchProps {