From ef22efd9174bf5fa441ff3bbe17d231eb53bcb9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20Ta=C5=84czyk?= Date: Wed, 3 Nov 2021 13:57:03 +0100 Subject: [PATCH] [GH-1278] Confirm delete when deleting board (#1339) * Delete board confirmation modal (#1278) * dialog should fill the screen on small resolution * Updating delete board confirm UI * Pass onClose callback to Dialog props * lint * removing danger-button-bg-rgb from shared variables, adjusting dialog styles to work both in plugin and standalone version of focalboard * lint * remove set timeout * Update button.scss * update snpashot Co-authored-by: Asaad Mahmood Co-authored-by: Hossein Ahmadian-Yazdi Co-authored-by: Harshil Sharma --- webapp/cypress/integration/createBoard.js | 2 + webapp/i18n/en.json | 6 +- .../__snapshots__/cardDialog.test.tsx.snap | 9 -- webapp/src/components/dialog.scss | 1 + webapp/src/components/dialog.tsx | 1 - .../deleteBoardDialog.test.tsx.snap | 17 ++++ .../components/sidebar/deleteBoardDialog.scss | 49 +++++++++++ .../sidebar/deleteBoardDialog.test.tsx | 57 +++++++++++++ .../components/sidebar/deleteBoardDialog.tsx | 85 +++++++++++++++++++ .../components/sidebar/sidebarBoardItem.tsx | 47 ++++++---- .../src/components/viewHeader/viewHeader.scss | 4 - webapp/src/widgets/buttons/button.scss | 38 ++++++++- webapp/src/widgets/buttons/button.tsx | 2 + 13 files changed, 282 insertions(+), 36 deletions(-) create mode 100644 webapp/src/components/sidebar/__snapshots__/deleteBoardDialog.test.tsx.snap create mode 100644 webapp/src/components/sidebar/deleteBoardDialog.scss create mode 100644 webapp/src/components/sidebar/deleteBoardDialog.test.tsx create mode 100644 webapp/src/components/sidebar/deleteBoardDialog.tsx diff --git a/webapp/cypress/integration/createBoard.js b/webapp/cypress/integration/createBoard.js index 71fd41cfb..d344e0946 100644 --- a/webapp/cypress/integration/createBoard.js +++ b/webapp/cypress/integration/createBoard.js @@ -117,6 +117,8 @@ describe('Create and delete board / card', () => { cy.contains('Delete board').click({force: true}); + cy.get('.DeleteBoardDialog button.danger').click({force: true}); + // Board should not exist cy.contains(boardTitle).should('not.exist'); }); diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index e3813f5aa..be44c719b 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -47,6 +47,10 @@ "DashboardPage.CenterPanel.NoWorkspacesDescription": "Please try searching for another term", "DashboardPage.showEmpty": "Show empty", "DashboardPage.title": "Dashboard", + "DeleteBoardDialog.confirm-cancel": "Cancel", + "DeleteBoardDialog.confirm-delete": "Delete", + "DeleteBoardDialog.confirm-info": "Are you sure you want to delete the board “{boardTitle}”? Deleting it will delete the property from all cards in this board.", + "DeleteBoardDialog.confirm-tite": "Confirm Delete Board", "Dialog.closeDialog": "Close dialog", "EditableDayPicker.today": "Today", "EmptyCenterPanel.no-content": "Add or select a board from the sidebar to get started.", @@ -200,4 +204,4 @@ "login.register-button": "or create an account if you don't have one", "register.login-button": "or log in if you already have an account", "register.signup-title": "Sign up for your account" -} \ No newline at end of file +} diff --git a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap index 437ed9577..e77e3b1a8 100644 --- a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap +++ b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap @@ -24,9 +24,6 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = ` class="CompassIcon icon-close CloseIcon" /> -
-
-
.content { diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx index 9c37d3c8d..5149ab724 100644 --- a/webapp/src/components/dialog.tsx +++ b/webapp/src/components/dialog.tsx @@ -50,7 +50,6 @@ const Dialog = React.memo((props: Props) => { className='IconButton--large' /> } -
{toolsMenu && + exists +
+`; + +exports[`components/sidebar/DeleteBoardDialog Delete should submit 1`] = ` +
+ deleted +
+`; diff --git a/webapp/src/components/sidebar/deleteBoardDialog.scss b/webapp/src/components/sidebar/deleteBoardDialog.scss new file mode 100644 index 000000000..02ca8d10e --- /dev/null +++ b/webapp/src/components/sidebar/deleteBoardDialog.scss @@ -0,0 +1,49 @@ +.DeleteBoardDialog { + .dialog { + @media not screen and (max-width: 975px) { + max-width: 512px; + height: max-content; + } + + > .toolbar { + padding-bottom: 0; + justify-content: end; + } + } + + .container { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 0 40px; + max-width: 100%; + + .header { + flex-shrink: 0; + display: flex; + justify-content: center; + margin-top: 0; + margin-bottom: 0; + } + + p.body { + display: flex; + flex-grow: 1; + justify-content: center; + text-align: center; + margin: 10px 0; + } + + .footer { + display: flex; + flex-direction: row; + flex-shrink: 0; + justify-content: center; + padding: 20px 0 40px; + + button:first-child { + margin-right: 10px; + } + } + } +} diff --git a/webapp/src/components/sidebar/deleteBoardDialog.test.tsx b/webapp/src/components/sidebar/deleteBoardDialog.test.tsx new file mode 100644 index 000000000..aa2821b26 --- /dev/null +++ b/webapp/src/components/sidebar/deleteBoardDialog.test.tsx @@ -0,0 +1,57 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useState} from 'react' +import {IntlProvider} from 'react-intl' + +import userEvent from '@testing-library/user-event' +import {act, render} from '@testing-library/react' + +import DeleteBoardDialog from './deleteBoardDialog' + +describe('components/sidebar/DeleteBoardDialog', () => { + it('Cancel should not submit', async () => { + const container = renderTest() + + const cancelButton = container.querySelector('.dialog .footer button:not(.danger)') + expect(cancelButton).not.toBeFalsy() + expect(cancelButton?.textContent).toBe('Cancel') + await act(async () => userEvent.click(cancelButton as Element)) + + expect(container).toMatchSnapshot() + }) + + it('Delete should submit', async () => { + const container = renderTest() + + const deleteButton = container.querySelector('.dialog .footer button.danger') + expect(deleteButton).not.toBeFalsy() + expect(deleteButton?.textContent).toBe('Delete') + await act(async () => userEvent.click(deleteButton as Element)) + + expect(container).toMatchSnapshot() + }) + + function renderTest() { + const rootPortalDiv = document.createElement('div') + rootPortalDiv.id = 'focalboard-root-portal' + + const {container} = render(, {container: document.body.appendChild(rootPortalDiv)}) + return container + } + + function TestComponent() { + const [isDeleted, setDeleted] = useState(false) + const [isOpen, setOpen] = useState(true) + + return ( + {isDeleted ? 'deleted' : 'exists'} + {isOpen && + setOpen(false)} + onDelete={async () => setDeleted(true)} + />} + ) + } +}) diff --git a/webapp/src/components/sidebar/deleteBoardDialog.tsx b/webapp/src/components/sidebar/deleteBoardDialog.tsx new file mode 100644 index 000000000..a076741e6 --- /dev/null +++ b/webapp/src/components/sidebar/deleteBoardDialog.tsx @@ -0,0 +1,85 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React, {useState} from 'react' +import {FormattedMessage} from 'react-intl' + +import {Utils} from '../../utils' +import Button from '../../widgets/buttons/button' + +import Dialog from '../dialog' +import RootPortal from '../rootPortal' + +import './deleteBoardDialog.scss' + +type Props = { + boardTitle: string; + onClose: () => void; + onDelete: () => Promise +} + +export default function DeleteBoardDialog(props: Props): JSX.Element { + const [isSubmitting, setSubmitting] = useState(false) + + return ( + + +
+

+ +

+

+ +

+
+ + +
+
+ + + ) +} diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx index 48dc31700..778d8fbe3 100644 --- a/webapp/src/components/sidebar/sidebarBoardItem.tsx +++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx @@ -18,6 +18,9 @@ import OptionsIcon from '../../widgets/icons/options' import TableIcon from '../../widgets/icons/table' import Menu from '../../widgets/menu' import MenuWrapper from '../../widgets/menuWrapper' + +import DeleteBoardDialog from './deleteBoardDialog' + import './sidebarBoardItem.scss' type Props = { @@ -33,6 +36,7 @@ const SidebarBoardItem = React.memo((props: Props) => { const [collapsed, setCollapsed] = useState(false) const intl = useIntl() const history = useHistory() + const [deleteBoardOpen, setDeleteBoardOpen] = useState(false) const match = useRouteMatch<{boardId: string, viewId?: string, cardId?: string, workspaceId?: string}>() const showBoard = useCallback((boardId) => { @@ -127,23 +131,8 @@ const SidebarBoardItem = React.memo((props: Props) => { id='deleteBoard' name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete board'})} icon={} - onClick={async () => { - TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.DeleteBoard, {board: board.id}) - mutator.deleteBlock( - board, - intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete board'}), - async () => { - if (props.nextBoardId) { - // This delay is needed because WSClient has a default 100 ms notification delay before updates - setTimeout(() => { - showBoard(props.nextBoardId) - }, 120) - } - }, - async () => { - showBoard(board.id) - }, - ) + onClick={() => { + setDeleteBoardOpen(true) }} /> @@ -189,6 +178,30 @@ const SidebarBoardItem = React.memo((props: Props) => {
))} + + {deleteBoardOpen && + setDeleteBoardOpen(false)} + onDelete={async () => { + TelemetryClient.trackEvent(TelemetryCategory, TelemetryActions.DeleteBoard, {board: board.id}) + mutator.deleteBlock( + board, + intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete board'}), + async () => { + if (props.nextBoardId) { + // This delay is needed because WSClient has a default 100 ms notification delay before updates + setTimeout(() => { + showBoard(props.nextBoardId) + }, 120) + } + }, + async () => { + showBoard(board.id) + }, + ) + }} + />}
) }) diff --git a/webapp/src/components/viewHeader/viewHeader.scss b/webapp/src/components/viewHeader/viewHeader.scss index f8dc80b86..08cfc5ac9 100644 --- a/webapp/src/components/viewHeader/viewHeader.scss +++ b/webapp/src/components/viewHeader/viewHeader.scss @@ -41,8 +41,4 @@ background: rgba(var(--center-channel-color-rgb), 0.1); } } - - .octo-spacer { - flex: 1; - } } diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss index 0bca7dcdc..91fb1435e 100644 --- a/webapp/src/widgets/buttons/button.scss +++ b/webapp/src/widgets/buttons/button.scss @@ -1,4 +1,6 @@ .Button { + --danger-button-bg-rgb: 247, 67, 67; + font-family: 'Open Sans', sans-serif; display: flex; flex: 0 0 auto; @@ -15,6 +17,7 @@ color: inherit; height: 32px; padding: 0 10px; + font-weight: 600; &:hover { background-color: rgba(var(--center-channel-color-rgb), 0.08); @@ -43,6 +46,18 @@ &:hover { background-color: rgb(var(--button-bg-rgb), 0.8); } + + &.danger { + background: linear-gradient(rgb(var(--danger-button-bg-rgb)), rgb(var(--danger-button-bg-rgb))); + + &:hover { + background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), linear-gradient(rgb(var(--danger-button-bg-rgb)), rgb(var(--danger-button-bg-rgb))); + } + + &:active { + background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), linear-gradient(rgb(var(--danger-button-bg-rgb)), rgb(var(--danger-button-bg-rgb))); + } + } } &.emphasis--secondary { @@ -58,6 +73,19 @@ } } + &.emphasis--tertiary { + color: rgb(var(--button-bg-rgb)); + background-color: rgb(var(--button-bg-rgb), 0.08); + + &:hover { + background-color: rgb(var(--button-bg-rgb), 0.12); + } + + &:active { + background-color: rgb(var(--button-bg-rgb), 0.16); + } + } + &.emphasis--danger { color: rgb(var(--button-danger-color-rgb)); background-color: rgb(var(--button-danger-bg-rgb)); @@ -65,25 +93,27 @@ &: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)); - font-weight: 600; } &.size--small { font-size: 12px; - font-weight: 600; padding: 0 16px; height: 32px; } + &.size--medium { + font-size: 14px; + padding: 0 20px; + height: 40px; + } + &.size--large { font-size: 16px; - font-weight: 600; height: 48px; padding: 0 24px; diff --git a/webapp/src/widgets/buttons/button.tsx b/webapp/src/widgets/buttons/button.tsx index f04489f14..5efc21b26 100644 --- a/webapp/src/widgets/buttons/button.tsx +++ b/webapp/src/widgets/buttons/button.tsx @@ -16,6 +16,7 @@ type Props = { submit?: boolean emphasis?: string size?: string + danger?: boolean className?: string } @@ -24,6 +25,7 @@ function Button(props: Props): JSX.Element { Button: true, active: Boolean(props.active), filled: Boolean(props.filled), + danger: Boolean(props.danger), } classNames[`emphasis--${props.emphasis}`] = Boolean(props.emphasis) classNames[`size--${props.size}`] = Boolean(props.size)