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>
This commit is contained in:
Nishidh Jain 2022-04-04 17:35:44 +05:30 committed by GitHub
parent fd83cea9a0
commit a0efa63185
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 {