From 977bc1dafaa1b8f81471203cb23ae33520ee152d Mon Sep 17 00:00:00 2001 From: prakharporwal <49529937+prakharporwal@users.noreply.github.com> Date: Fri, 15 Oct 2021 00:12:36 +0530 Subject: [PATCH] [GH-512] Feature #512 made confirmation dialog box. (#1546) * Made confirmationDialogBox from existing dialog component * Used ConfirmationDialogBox to raise warning before deletion of card property * fixes as ci checks did not pass * fixes to pass ci tests * Flash Message now visible (changed its z-index) * Confirmation Dialog shows the property name. * fixes for eslint test failure * fixes for eslint test fail * fixes for eslint test failure * fix for eslint test failure * fixed a wrong subtext string * fixed eslint issues in scss * i18n en.json for localisation updated * `en.json;`-wrong file generated by `npm run i18n-extract ` command removed Co-authored-by: Prakhar <> --- webapp/i18n/en.json | 3 + .../cardDetail/cardDetailProperties.tsx | 39 +++++++++++- .../src/components/confirmationDialogBox.scss | 60 +++++++++++++++++++ .../src/components/confirmationDialogBox.tsx | 56 +++++++++++++++++ webapp/src/components/dialog.tsx | 2 +- webapp/src/components/flashMessages.scss | 2 +- webapp/src/styles/shared-variables.scss | 2 + webapp/src/widgets/buttons/button.scss | 10 ++++ 8 files changed, 169 insertions(+), 5 deletions(-) create mode 100644 webapp/src/components/confirmationDialogBox.scss create mode 100644 webapp/src/components/confirmationDialogBox.tsx diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 371826da1..35573743f 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -14,6 +14,9 @@ "CardDetail.addCardText": "add card text", "CardDetail.moveContent": "move card content", "CardDetail.new-comment-placeholder": "Add a comment...", + "CardDetailProperty.confirm-delete": "Confirm Delete Property", + "CardDetailProperty.confirm-delete-subtext": "Are you sure you want to delete the property \"{propertyName}\"? Deleting it will delete the property from all cards in this board.", + "CardDetailProperty.property-deleted": "Deleted {propertyName} Successfully!", "CardDialog.editing-template": "You're editing a template.", "CardDialog.nocard": "This card doesn't exist or is inaccessible.", "CardDialog.copiedLink": "Copied!", diff --git a/webapp/src/components/cardDetail/cardDetailProperties.tsx b/webapp/src/components/cardDetail/cardDetailProperties.tsx index ebabdd7e2..cb9dc58b0 100644 --- a/webapp/src/components/cardDetail/cardDetailProperties.tsx +++ b/webapp/src/components/cardDetail/cardDetailProperties.tsx @@ -1,7 +1,8 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react' -import {FormattedMessage} from 'react-intl' + +import React, {useState} from 'react' +import {useIntl, FormattedMessage} from 'react-intl' import {Board, PropertyType, IPropertyTemplate} from '../../blocks/board' import {Card} from '../../blocks/card' @@ -14,6 +15,8 @@ import MenuWrapper from '../../widgets/menuWrapper' import PropertyMenu from '../../widgets/propertyMenu' import PropertyValueElement from '../propertyValueElement' +import {ConfirmationDialogBox} from '../confirmationDialogBox' +import {sendFlashMessage} from '../flashMessages' type Props = { board: Board @@ -27,8 +30,13 @@ type Props = { } const CardDetailProperties = React.memo((props: Props) => { + const intl = useIntl() const {board, card, cards, views, activeView, contents, comments} = props + const [showConfirmationDialog, setShowConfirmationDialog] = useState(false) + const [deletingPropId, setDeletingPropId] = useState('') + const [deletingPropName, setDeletingPropName] = useState('') + return (
{board.fields.cardProperties.map((propertyTemplate: IPropertyTemplate) => { @@ -47,7 +55,12 @@ const CardDetailProperties = React.memo((props: Props) => { propertyName={propertyTemplate.name} propertyType={propertyTemplate.type} onTypeAndNameChanged={(newType: PropertyType, newName: string) => mutator.changePropertyTypeAndName(board, cards, propertyTemplate, newType, newName)} - onDelete={(id: string) => mutator.deleteProperty(board, views, cards, id)} + onDelete={(id: string) => { + setDeletingPropId(id) + setDeletingPropName(propertyTemplate.name) + setShowConfirmationDialog(true) + } + } /> } @@ -64,6 +77,26 @@ const CardDetailProperties = React.memo((props: Props) => { ) })} + {showConfirmationDialog && ( + setShowConfirmationDialog(false)} + onConfirm={() => { + mutator.deleteProperty(board, views, cards, deletingPropId) + setShowConfirmationDialog(false) + sendFlashMessage({content: intl.formatMessage({id: 'CardDetailProperty.property-deleted', defaultMessage: 'Deleted {propertyName} Successfully!'}, {propertyName: deletingPropName}), severity: 'high'}) + }} + + heading={intl.formatMessage({id: 'CardDetailProperty.confirm-delete', defaultMessage: 'Confirm Delete Property'})} + subText={intl.formatMessage({ + id: 'CardDetailProperty.confirm-delete-subtext', + defaultMessage: 'Are you sure you want to delete the property "{propertyName}"? Deleting it will delete the property from all cards in this board.', + }, + {propertyName: deletingPropName}) + } + /> + )} + {!props.readonly &&
+ +
+
+ + ) +} diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx index 6ae95a58d..9c37d3c8d 100644 --- a/webapp/src/components/dialog.tsx +++ b/webapp/src/components/dialog.tsx @@ -12,7 +12,7 @@ import './dialog.scss' type Props = { children: React.ReactNode - toolsMenu: React.ReactNode + toolsMenu?: React.ReactNode // some dialogs may not require a toolmenu hideCloseButton?: boolean className?: string onClose: () => void, diff --git a/webapp/src/components/flashMessages.scss b/webapp/src/components/flashMessages.scss index 5bc6740f6..429c901df 100644 --- a/webapp/src/components/flashMessages.scss +++ b/webapp/src/components/flashMessages.scss @@ -17,7 +17,7 @@ font-size: 18px; vertical-align: middle; border-radius: 20px; - z-index: 12; + z-index: 999; &.flashIn { visibility: visible; diff --git a/webapp/src/styles/shared-variables.scss b/webapp/src/styles/shared-variables.scss index ee7b04d6d..c87908a64 100644 --- a/webapp/src/styles/shared-variables.scss +++ b/webapp/src/styles/shared-variables.scss @@ -5,6 +5,8 @@ --sidebar-text-rgb: 255, 255, 255; --button-color-rgb: 255, 255, 255; --button-bg-rgb: 28, 88, 217; + --button-danger-color-rgb: 255, 255, 255; + --button-danger-bg-rgb: 210, 75, 78; --link-color-rgb: 56, 111, 229; --error-text-rgb: #d24b4e; } diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss index 9f0208b62..0bca7dcdc 100644 --- a/webapp/src/widgets/buttons/button.scss +++ b/webapp/src/widgets/buttons/button.scss @@ -58,6 +58,16 @@ } } + &.emphasis--danger { + color: rgb(var(--button-danger-color-rgb)); + background-color: rgb(var(--button-danger-bg-rgb)); + + &:hover { + background-color: rgb(var(--button-danger-bg-rgb), 0.8); + } + + } + &.active { background: rgba(var(--button-bg-rgb), 0.08); color: rgb(var(--button-bg-rgb));