yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Confirmation dialog call to action should be on the right

Browse Source
This commit is contained in:
Tom Moor
2023-12-19 11:21:30 -05:00
parent 1c0e396cd1
commit 56e6b5211a
11 changed files with 180 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/actions/definitions/documents.tsx
View File

@@ -784,7 +784,7 @@ export const archiveDocument = createAction({
});
export const deleteDocument = createAction({
name: ({ t }) => t("Delete"),
name: ({ t }) => `${t("Delete")}…`,
analyticsName: "Delete document",
section: DocumentSection,
icon: <TrashIcon />,

9
app/components/ConfirmationDialog.tsx
View File

@@ -1,5 +1,6 @@
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
@@ -29,6 +30,7 @@ const ConfirmationDialog: React.FC<Props> = ({
disabled = false,
}: Props) => {
const [isSaving, setIsSaving] = React.useState(false);
const { t } = useTranslation();
const { dialogs } = useStores();
const handleSubmit = React.useCallback(
@@ -48,19 +50,20 @@ const ConfirmationDialog: React.FC<Props> = ({
);
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">{children}</Text>
<Flex justify="flex-end">
<Button
type="submit"
disabled={isSaving || disabled}
danger={danger}
autoFocus
>
{isSaving && savingText ? savingText : submitText}
{isSaving && savingText ? savingText : submitText ?? t("Confirm")}
</Button>
</form>
</Flex>
</form>
);
};

24
app/components/UserDialogs.tsx
View File

@@ -21,11 +21,7 @@ export function UserChangeToViewerDialog({ user, onSubmit }: Props) {
};
return (
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("Confirm")}
savingText={`${t("Saving")}…`}
>
<ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
{t(
"Are you sure you want to make {{ userName }} a read-only viewer? They will not be able to edit any content",
{
@@ -47,11 +43,7 @@ export function UserChangeToMemberDialog({ user, onSubmit }: Props) {
};
return (
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("Confirm")}
savingText={`${t("Saving")}…`}
>
<ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
{t("Are you sure you want to make {{ userName }} a member?", {
userName: user.name,
})}
@@ -94,11 +86,7 @@ export function UserChangeToAdminDialog({ user, onSubmit }: Props) {
};
return (
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("Confirm")}
savingText={`${t("Saving")}…`}
>
<ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
{t(
"Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
{
@@ -119,11 +107,7 @@ export function UserSuspendDialog({ user, onSubmit }: Props) {
};
return (
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("Confirm")}
savingText={`${t("Saving")}…`}
>
<ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
{t(
"Are you sure you want to suspend {{ userName }}? Suspended users will be prevented from logging in.",
{

12
app/scenes/DocumentDelete.tsx
View File

@@ -82,7 +82,6 @@ function DocumentDelete({ document, onSubmit }: Props) {
);
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
@@ -130,17 +129,18 @@ function DocumentDelete({ document, onSubmit }: Props) {
</Trans>
</Text>
)}
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
&nbsp;&nbsp;
<Flex justify="flex-end" gap={8}>
{canArchive && (
<Button type="button" onClick={handleArchive} neutral>
{isArchiving ? `${t("Archiving")}…` : t("Archive")}
</Button>
)}
</form>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</Flex>
</form>
);
}

34
app/scenes/DocumentPermanentDelete.tsx
View File

@@ -4,9 +4,8 @@ import { useTranslation, Trans } from "react-i18next";
import { useHistory } from "react-router-dom";
import { toast } from "sonner";
import Document from "~/models/Document";
import Button from "~/components/Button";
import ConfirmationDialog from "~/components/ConfirmationDialog";
import Flex from "~/components/Flex";
import Text from "~/components/Text";
import useStores from "~/hooks/useStores";
type Props = {
@@ -15,36 +14,27 @@ type Props = {
};
function DocumentPermanentDelete({ document, onSubmit }: Props) {
const [isDeleting, setIsDeleting] = React.useState(false);
const { t } = useTranslation();
const { documents } = useStores();
const history = useHistory();
const handleSubmit = React.useCallback(
async (ev: React.SyntheticEvent) => {
ev.preventDefault();
try {
setIsDeleting(true);
const handleSubmit = async () => {
await documents.delete(document, {
permanent: true,
});
toast.success(t("Document permanently deleted"));
onSubmit();
history.push("/trash");
} catch (err) {
toast.error(err.message);
} finally {
setIsDeleting(false);
}
},
[document, onSubmit, t, history, documents]
);
};
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<ConfirmationDialog
submitText={t("I’m sure – Delete")}
savingText={`${t("Deleting")}…`}
onSubmit={handleSubmit}
danger
>
<Trans
defaults="Are you sure you want to permanently delete the <em>{{ documentTitle }}</em> document? This action is immediate and cannot be undone."
values={{
@@ -54,11 +44,7 @@ function DocumentPermanentDelete({ document, onSubmit }: Props) {
em: <strong />,
}}
/>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</form>
</ConfirmationDialog>
</Flex>
);
}

33
app/scenes/GroupDelete.tsx
View File

@@ -2,11 +2,8 @@ import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import { useHistory } from "react-router-dom";
import { toast } from "sonner";
import Group from "~/models/Group";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import Text from "~/components/Text";
import ConfirmationDialog from "~/components/ConfirmationDialog";
import { settingsPath } from "~/utils/routeHelpers";
type Props = {
@@ -17,27 +14,20 @@ type Props = {
function GroupDelete({ group, onSubmit }: Props) {
const { t } = useTranslation();
const history = useHistory();
const [isDeleting, setIsDeleting] = React.useState(false);
const handleSubmit = async (ev: React.SyntheticEvent) => {
ev.preventDefault();
setIsDeleting(true);
try {
const handleSubmit = async () => {
await group.delete();
history.push(settingsPath("groups"));
onSubmit();
} catch (err) {
toast.error(err.message);
} finally {
setIsDeleting(false);
}
};
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<ConfirmationDialog
onSubmit={handleSubmit}
submitText={t("I’m sure – Delete")}
savingText={`${t("Deleting")}…`}
danger
>
<Trans
defaults="Are you sure about that? Deleting the <em>{{groupName}}</em> group will cause its members to lose access to collections and documents that it is associated with."
values={{
@@ -47,12 +37,7 @@ function GroupDelete({ group, onSubmit }: Props) {
em: <strong />,
}}
/>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</form>
</Flex>
</ConfirmationDialog>
);
}

1
app/scenes/Settings/Security.tsx
View File

@@ -109,7 +109,6 @@ function Security() {
onSubmit={async () => {
await saveData(newData);
}}
submitText={t("I’m sure")}
savingText={`${t("Saving")}…`}
danger
>

1
app/scenes/Settings/components/FileOperationListItem.tsx
View File

@@ -81,7 +81,6 @@ const FileOperationListItem = ({ fileOperation }: Props) => {
content: (
<ConfirmationDialog
onSubmit={handleDelete}
submitText={t("I’m sure")}
savingText={`${t("Deleting")}…`}
danger
>

5
app/scenes/TeamDelete.tsx
View File

@@ -64,7 +64,6 @@ function TeamDelete({ onSubmit }: Props) {
const workspaceName = team.name;
return (
<Flex column>
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
@@ -94,6 +93,8 @@ function TeamDelete({ onSubmit }: Props) {
</Text>
</>
)}
<Flex justify="flex-end">
{env.EMAIL_ENABLED && !isWaitingCode ? (
<Button type="submit" onClick={handleRequestDelete} neutral>
{t("Continue")}…
@@ -109,8 +110,8 @@ function TeamDelete({ onSubmit }: Props) {
: t("Delete workspace")}
</Button>
)}
</form>
</Flex>
</form>
);
}

8
app/scenes/UserDelete.tsx
View File

@@ -56,7 +56,6 @@ function UserDelete() {
const appName = env.APP_NAME;
return (
<Flex column>
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
@@ -79,14 +78,15 @@ function UserDelete() {
<>
<Text type="secondary">
<Trans>
Are you sure? Deleting your account will destroy identifying
data associated with your user and cannot be undone. You will be
Are you sure? Deleting your account will destroy identifying data
associated with your user and cannot be undone. You will be
immediately logged out of {{ appName }} and all your API tokens
will be revoked.
</Trans>
</Text>
</>
)}
<Flex justify="flex-end">
{env.EMAIL_ENABLED && !isWaitingCode ? (
<Button type="submit" onClick={handleRequestDelete} neutral>
{t("Continue")}…
@@ -102,8 +102,8 @@ function UserDelete() {
: t("Delete my account")}
</Button>
)}
</form>
</Flex>
</form>
);
}

3
shared/i18n/locales/en_US/translation.json
View File

@@ -126,6 +126,7 @@
"Type a command or search": "Type a command or search",
"Are you sure you want to permanently delete this entire comment thread?": "Are you sure you want to permanently delete this entire comment thread?",
"Are you sure you want to permanently delete this comment?": "Are you sure you want to permanently delete this comment?",
"Confirm": "Confirm",
"Document is too large": "Document is too large",
"This document has reached the maximum size and can no longer be edited": "This document has reached the maximum size and can no longer be edited",
"Authentication failed": "Authentication failed",
@@ -262,7 +263,6 @@
"No results": "No results",
"Previous page": "Previous page",
"Next page": "Next page",
"Confirm": "Confirm",
"Saving": "Saving",
"Are you sure you want to make {{ userName }} a read-only viewer? They will not be able to edit any content": "Are you sure you want to make {{ userName }} a read-only viewer? They will not be able to edit any content",
"Are you sure you want to make {{ userName }} a member?": "Are you sure you want to make {{ userName }} a member?",
@@ -753,7 +753,6 @@
"Import deleted": "Import deleted",
"Export deleted": "Export deleted",
"Are you sure you want to delete this import?": "Are you sure you want to delete this import?",
"I’m sure": "I’m sure",
"Deleting this import will also delete all collections and documents that were created from it. This cannot be undone.": "Deleting this import will also delete all collections and documents that were created from it. This cannot be undone.",
"Check server logs for more details.": "Check server logs for more details.",
"{{userName}} requested": "{{userName}} requested",