mirror/outline
1
0
Fork 0
mirror of https://github.com/outline/outline.git synced 2026-01-06 11:09:55 -06:00
Code Issues 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 />,

15
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>
<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>
</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.",
{

106
app/scenes/DocumentDelete.tsx
View File

@@ -82,65 +82,65 @@ function DocumentDelete({ document, onSubmit }: Props) {
);
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : nestedDocumentsCount < 1 ? (
<Trans
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history</em>."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : (
<Trans
count={nestedDocumentsCount}
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and <em>{{ any }} nested document</em>."
values={{
documentTitle: document.titleWithDefault,
any: nestedDocumentsCount,
}}
components={{
em: <strong />,
}}
/>
)}
</Text>
{canArchive && (
<Text type="secondary">
<Trans>
If you’d like the option of referencing or restoring the{" "}
{{
noun: document.noun,
}}{" "}
in the future, consider archiving it instead.
</Trans>
</Text>
<form onSubmit={handleSubmit}>
<Text type="secondary">
{document.isTemplate ? (
<Trans
defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : nestedDocumentsCount < 1 ? (
<Trans
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history</em>."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
) : (
<Trans
count={nestedDocumentsCount}
defaults="Are you sure about that? Deleting the <em>{{ documentTitle }}</em> document will delete all of its history and <em>{{ any }} nested document</em>."
values={{
documentTitle: document.titleWithDefault,
any: nestedDocumentsCount,
}}
components={{
em: <strong />,
}}
/>
)}
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
&nbsp;&nbsp;
</Text>
{canArchive && (
<Text type="secondary">
<Trans>
If you’d like the option of referencing or restoring the{" "}
{{
noun: document.noun,
}}{" "}
in the future, consider archiving it instead.
</Trans>
</Text>
)}
<Flex justify="flex-end" gap={8}>
{canArchive && (
<Button type="button" onClick={handleArchive} neutral>
{isArchiving ? `${t("Archiving")}…` : t("Archive")}
</Button>
)}
</form>
</Flex>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</Flex>
</form>
);
}

64
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,50 +14,37 @@ 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);
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]
);
const handleSubmit = async () => {
await documents.delete(document, {
permanent: true,
});
toast.success(t("Document permanently deleted"));
onSubmit();
history.push("/trash");
};
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<Trans
defaults="Are you sure you want to permanently delete the <em>{{ documentTitle }}</em> document? This action is immediate and cannot be undone."
values={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</form>
<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={{
documentTitle: document.titleWithDefault,
}}
components={{
em: <strong />,
}}
/>
</ConfirmationDialog>
</Flex>
);
}

57
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,42 +14,30 @@ 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 {
await group.delete();
history.push(settingsPath("groups"));
onSubmit();
} catch (err) {
toast.error(err.message);
} finally {
setIsDeleting(false);
}
const handleSubmit = async () => {
await group.delete();
history.push(settingsPath("groups"));
onSubmit();
};
return (
<Flex column>
<form onSubmit={handleSubmit}>
<Text type="secondary">
<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={{
groupName: group.name,
}}
components={{
em: <strong />,
}}
/>
</Text>
<Button type="submit" danger>
{isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
</Button>
</form>
</Flex>
<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={{
groupName: group.name,
}}
components={{
em: <strong />,
}}
/>
</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
>

65
app/scenes/TeamDelete.tsx
View File

@@ -64,36 +64,37 @@ function TeamDelete({ onSubmit }: Props) {
const workspaceName = team.name;
return (
<Flex column>
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy this workspace.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<Text type="secondary">
<Trans>
Deleting the <strong>{{ workspaceName }}</strong> workspace will
destroy all collections, documents, users, and associated data.
You will be immediately logged out of {{ appName }}.
</Trans>
</Text>
</>
)}
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy this workspace.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<Text type="secondary">
<Trans>
Deleting the <strong>{{ workspaceName }}</strong> workspace will
destroy all collections, documents, users, and associated data.
You will be immediately logged out of {{ appName }}.
</Trans>
</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>
</Flex>
</form>
);
}

66
app/scenes/UserDelete.tsx
View File

@@ -56,37 +56,37 @@ function UserDelete() {
const appName = env.APP_NAME;
return (
<Flex column>
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy your account.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<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
immediately logged out of {{ appName }} and all your API tokens
will be revoked.
</Trans>
</Text>
</>
)}
<form onSubmit={formHandleSubmit(handleSubmit)}>
{isWaitingCode ? (
<>
<Text type="secondary">
<Trans>
A confirmation code has been sent to your email address, please
enter the code below to permanently destroy your account.
</Trans>
</Text>
<Input
placeholder={t("Confirmation code")}
autoComplete="off"
autoFocus
maxLength={8}
required
{...inputProps}
/>
</>
) : (
<>
<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
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>
</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",