[GH-1655] Card Delete : added Confirmation Dialog

[prakharporwal]

Resolves #1655

Summary

1. For Kanban Card
2. For Card Dialog

Future Work

On Confirmation Card Dialog Component May be this can work

1. We can use a redux store to save state of the dialog
2. make a simple function like window.confirm() within the component which set the state of card to SHOW and pass required props to raise warning wherever its required .

[asaadmahmood]

@prakharporwal Updated the card modal css to somewhat match the designs, looks good now.

Please pull your branch before you make any changes.

[sbishel]

Thanks @prakharporwal, some suggestions.

[sbishel]

You don't need to use state for this, just set when showing the dialog box.

[prakharporwal]

Typescript raise error when not adding a initial state. I have added non-optional props only .

[sbishel]

See below comment

[sbishel]

Create your confirmDialogProps here, using state is not necessary.

[prakharporwal]

State is needed. I set confirmDialogProps when showing Dialog.

[sbishel]

In both cardDialog.tsx and kanbanCard.tsx, the state for confirmDialogProps never changes it is always the same. It could actually be set to this value by default. Therefore, storing this in state is unnecessary. Simply create the properties struct when you call <ConfirmationDialogBox> or create a variable to hold those properties and use it here.

{showConfirmationDialogBox && 
    <ConfirmationDialogBox dialogBox={
        heading: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-heading', defaultMessage: 'Confirm card delete!'}),
        confirmButtonText: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-button-text', defaultMessage: 'Delete'}),
        onConfirm: handleDeleteCard,
        onClose: () => {
            setShowConfirmationDialogBox(false)
        },
    }/>
}

Let me know if I'm not understanding something. Thanks

[prakharporwal]

/update-branch

[mattermod]

Error trying to update the PR.
Please do it manually.

[sbishel]

Thanks for changes...see additional comments.

[sbishel]

In both cardDialog.tsx and kanbanCard.tsx, the state for confirmDialogProps never changes it is always the same. It could actually be set to this value by default. Therefore, storing this in state is unnecessary. Simply create the properties struct when you call <ConfirmationDialogBox> or create a variable to hold those properties and use it here.

{showConfirmationDialogBox && 
    <ConfirmationDialogBox dialogBox={
        heading: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-heading', defaultMessage: 'Confirm card delete!'}),
        confirmButtonText: intl.formatMessage({id: 'CardDialog.delete-confirmation-dialog-button-text', defaultMessage: 'Delete'}),
        onConfirm: handleDeleteCard,
        onClose: () => {
            setShowConfirmationDialogBox(false)
        },
    }/>
}

Let me know if I'm not understanding something. Thanks

[sbishel]

See below comment

[prakharporwal]

@sbishel Got it removed useState hook from cardDialog and kanbanCard.tsx for confirmDialogProps.