feat: have user type name of thing to delete for extra safety #4080
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { screen } from "@testing-library/react" | ||
| import userEvent from "@testing-library/user-event" | ||
| import i18next from "i18next" | ||
| import { render } from "testHelpers/renderHelpers" | ||
| import { DeleteDialog } from "./DeleteDialog" | ||
|
|
||
| describe("DeleteDialog", () => { | ||
| it("disables confirm button when the text field is empty", () => { | ||
| render( | ||
| <DeleteDialog | ||
| isOpen | ||
| onConfirm={jest.fn()} | ||
| onCancel={jest.fn()} | ||
| entity="template" | ||
| name="MyTemplate" | ||
| />, | ||
| ) | ||
| const confirmButton = screen.getByRole("button", { name: "Delete" }) | ||
| expect(confirmButton).toBeDisabled() | ||
| }) | ||
|
|
||
| it("disables confirm button when the text field is filled incorrectly", async () => { | ||
| const { t } = i18next | ||
| render( | ||
| <DeleteDialog | ||
| isOpen | ||
| onConfirm={jest.fn()} | ||
| onCancel={jest.fn()} | ||
| entity="template" | ||
| name="MyTemplate" | ||
| />, | ||
| ) | ||
| const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "template" }) | ||
| const textField = screen.getByLabelText(labelText) | ||
| await userEvent.type(textField, "MyTemplateWrong") | ||
| const confirmButton = screen.getByRole("button", { name: "Delete" }) | ||
| expect(confirmButton).toBeDisabled() | ||
| }) | ||
|
|
||
| it("enables confirm button when the text field is filled correctly", async () => { | ||
| const { t } = i18next | ||
| render( | ||
| <DeleteDialog | ||
| isOpen | ||
| onConfirm={jest.fn()} | ||
| onCancel={jest.fn()} | ||
| entity="template" | ||
| name="MyTemplate" | ||
| />, | ||
| ) | ||
| const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "template" }) | ||
| const textField = screen.getByLabelText(labelText) | ||
| await userEvent.type(textField, "MyTemplate") | ||
| const confirmButton = screen.getByRole("button", { name: "Delete" }) | ||
| expect(confirmButton).not.toBeDisabled() | ||
| }) | ||
| }) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,80 @@ | ||
| import FormHelperText from "@material-ui/core/FormHelperText" | ||
| import makeStyles from "@material-ui/core/styles/makeStyles" | ||
| import TextField from "@material-ui/core/TextField" | ||
| import Typography from "@material-ui/core/Typography" | ||
| import { Maybe } from "components/Conditionals/Maybe" | ||
| import { Stack } from "components/Stack/Stack" | ||
| import React, { ChangeEvent, useState } from "react" | ||
| import { useTranslation } from "react-i18next" | ||
| import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog" | ||
|
|
||
| export interface DeleteDialogProps { | ||
| isOpen: boolean | ||
| onConfirm: () => void | ||
| onCancel: () => void | ||
| entity: string | ||
| name: string | ||
| info?: string | ||
| confirmLoading?: boolean | ||
| } | ||
|
|
||
| export const DeleteDialog: React.FC<React.PropsWithChildren<DeleteDialogProps>> = ({ | ||
| isOpen, | ||
| onCancel, | ||
| onConfirm, | ||
| entity, | ||
| info, | ||
|
There was a problem hiding this comment. What kind of info is this? A description? There was a problem hiding this comment. Yeah, it's intended to help the user identify the entity to delete, so they don't delete the wrong one by accident. @bpmct suggested this on the basis of an article about making the wrong repo private and thus losing all their github stars. There was a problem hiding this comment. It's the orange text here. Note storybook isn't showing buttons; that's been going on for a while and so far doesn't mean the buttons are actually gone. |
||
| name, | ||
| confirmLoading, | ||
| }) => { | ||
| const styles = useStyles() | ||
| const { t } = useTranslation("common") | ||
| const [nameValue, setNameValue] = useState("") | ||
| const confirmed = name === nameValue | ||
| const handleChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
| setNameValue(event.target.value) | ||
| } | ||
|
|
||
| const content = ( | ||
| <> | ||
| <Typography>{t("deleteDialog.intro", { entity })}</Typography> | ||
| <Maybe condition={info !== undefined}> | ||
| <Typography className={styles.warning}>{info}</Typography> | ||
| </Maybe> | ||
| <Typography>{t("deleteDialog.confirm", { entity })}</Typography> | ||
|
There was a problem hiding this comment. I love how we're not passing whole strings in so that the language will stay consistent. |
||
| <Stack spacing={1}> | ||
| <TextField | ||
| name="confirmation" | ||
| id="confirmation" | ||
| placeholder={name} | ||
| value={nameValue} | ||
| onChange={handleChange} | ||
| label={t("deleteDialog.confirmLabel", { entity })} | ||
| /> | ||
| <Maybe condition={nameValue.length > 0 && !confirmed}> | ||
| <FormHelperText error>{t("deleteDialog.incorrectName", { entity })}</FormHelperText> | ||
| </Maybe> | ||
| </Stack> | ||
| </> | ||
| ) | ||
|
|
||
| return ( | ||
| <ConfirmDialog | ||
| type="delete" | ||
| hideCancel={false} | ||
| open={isOpen} | ||
| title={t("deleteDialog.title", { entity })} | ||
| onConfirm={onConfirm} | ||
| onClose={onCancel} | ||
| description={content} | ||
| confirmLoading={confirmLoading} | ||
| disabled={!confirmed} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| warning: { | ||
| color: theme.palette.warning.light, | ||
| }, | ||
| })) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,3 @@ | ||
| { | ||
| "deleteSuccess": "Template successfully deleted." | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️