This commit is contained in:
Manav Rathi
2024-10-10 11:49:54 +05:30
parent d904b9318a
commit 86f0dbb620
11 changed files with 55 additions and 44 deletions

View File

@@ -46,7 +46,7 @@ const Page: React.FC = () => {
const showPasskeyFetchFailedErrorDialog = useCallback(() => {
setDialogBoxAttributesV2({
title: t("error"),
content: t("passkey_fetch_failed"),
message: t("passkey_fetch_failed"),
close: {},
});
}, [setDialogBoxAttributesV2]);
@@ -282,7 +282,7 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
setDialogBoxAttributesV2({
title: t("delete_passkey"),
content: t("delete_passkey_confirmation"),
message: t("delete_passkey_confirmation"),
proceed: {
text: t("delete"),
action: handleDelete,

View File

@@ -126,7 +126,7 @@ const passwordChangedElsewhereDialogAttributes = (
onLogin: () => void,
): MiniDialogAttributes => ({
title: t("password_changed_elsewhere"),
content: t("password_changed_elsewhere_message"),
message: t("password_changed_elsewhere_message"),
proceed: {
text: t("login"),
action: onLogin,

View File

@@ -43,7 +43,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
setDialogBoxAttributesV2({
title: t("error"),
close: { variant: "critical" },
content: t("generic_error_retry"),
message: t("generic_error_retry"),
});
const initiateDelete = async (
@@ -86,7 +86,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
const confirmAccountDeletion = () => {
setDialogBoxAttributesV2({
title: t("delete_account"),
content: <Trans i18nKey="delete_account_confirm_message" />,
message: <Trans i18nKey="delete_account_confirm_message" />,
proceed: {
text: t("delete"),
action: solveChallengeAndDeleteAccount,
@@ -101,7 +101,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
setDialogBoxAttributesV2({
title: t("delete_account"),
content: (
message: (
<Trans
i18nKey="delete_account_manually_message"
components={{ a: <Link href={`mailto:${emailID}`} /> }}

View File

@@ -681,7 +681,7 @@ const DebugSection: React.FC = () => {
const confirmLogDownload = () =>
showMiniDialog({
title: t("DOWNLOAD_LOGS"),
content: <Trans i18nKey={"DOWNLOAD_LOGS_MESSAGE"} />,
message: <Trans i18nKey={"DOWNLOAD_LOGS_MESSAGE"} />,
proceed: {
text: t("download"),
variant: "accent",

View File

@@ -260,7 +260,7 @@ export default function App({ Component, pageProps }: AppProps) {
setDialogBoxAttributesV2({
title: t("error"),
icon: <ErrorOutline />,
content: t("generic_error"),
message: t("generic_error"),
close: { variant: "critical" },
})
),

View File

@@ -101,7 +101,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
setDialogBoxAttributesV2({
title: t("sorry"),
close: {},
content: t("NO_RECOVERY_KEY_MESSAGE"),
message: t("NO_RECOVERY_KEY_MESSAGE"),
});
return (

View File

@@ -151,7 +151,7 @@ const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
appContext.setDialogBoxAttributesV2({
title: t("contact_support"),
close: dialogClose ?? {},
content: (
message: (
<Trans
i18nKey={"NO_TWO_FACTOR_RECOVERY_KEY_MESSAGE"}
components={{

View File

@@ -33,20 +33,50 @@ export interface MiniDialogAttributes {
* An optional component shown next to the title.
*/
icon?: React.ReactNode;
staticBackdrop?: boolean;
nonClosable?: boolean;
/**
* The dialog's message.
*
* This will be usually be a string, but the prop accepts any React node to
* allow passing a i18next <Trans /> component.
*/
content?: React.ReactNode;
message?: React.ReactNode;
/**
* If `true`, then clicks in the backdrop are ignored. The default behaviour
* is to close the dialog when the background is clicked.
*/
staticBackdrop?: boolean;
/**
* If `true`, then the dialog cannot be closed (e.g. with the ESC key, or
* clicking on the backdrop) except through one of the explicitly provided
* actions.
*/
nonClosable?: boolean;
/**
* Customize the primary action button offered by the dialog box.
*
* This is provided by boxes which serve as some sort of confirmation. For
* dialogs which are informational notifications, this is usually skipped,
* only the {@link close} action button is configured.
*/
proceed?: {
/** The string to use as the label for the primary action button. */
text: string;
/** The color of the button. */
variant?: ButtonProps["color"];
/**
* The function to call when the user presses the primary action button.
*
* It is passed a {@link setLoading} function that can be used to show
* or hide loading indicator or the primary action button.
*/
action:
| (() => void | Promise<void>)
| ((setLoading: (value: boolean) => void) => void | Promise<void>);
};
/**
* Customize the cancel (dismiss) action button offered by the dialog box.
*
* Usually dialog boxes should have a cancel action, but this can be skipped
* to only show one of the other types of buttons.
* Usually all dialog boxes should have a cancel action.
*/
close?: {
/** The string to use as the label for the cancel button. */
@@ -60,24 +90,7 @@ export interface MiniDialogAttributes {
*/
action?: () => void;
};
/**
* Customize the primary action button offered by the dialog box.
*/
proceed?: {
/** The string to use as the label for the primary action. */
text: string;
/**
* The function to call when the user presses the primary action button.
*
* It is passed a {@link setLoading} function that can be used to show
* or hide loading indicator or the primary action button.
*/
action:
| (() => void | Promise<void>)
| ((setLoading: (value: boolean) => void) => void | Promise<void>);
variant?: ButtonProps["color"];
disabled?: boolean;
};
/** The direction in which the buttons are stacked. Default is "column". */
buttonDirection?: "row" | "column";
}
@@ -145,11 +158,10 @@ export const AttributedMiniDialog: React.FC<
{attributes.icon}
</Box>
)}
<DialogContent>
{attributes.content && (
{attributes.message && (
<Typography color="text.muted">
{attributes.content}
{attributes.message}
</Typography>
)}
{children}
@@ -160,7 +172,7 @@ export const AttributedMiniDialog: React.FC<
gap: "12px",
}}
direction={
attributes.buttonDirection === "row"
attributes.buttonDirection == "row"
? "row-reverse"
: "column"
}
@@ -168,7 +180,7 @@ export const AttributedMiniDialog: React.FC<
{attributes.proceed && (
<LoadingButton
loading={loading}
size="large"
fullWidth
color={attributes.proceed?.variant}
onClick={async () => {
await attributes.proceed?.action(
@@ -177,14 +189,13 @@ export const AttributedMiniDialog: React.FC<
onClose();
}}
disabled={attributes.proceed.disabled}
>
{attributes.proceed.text}
</LoadingButton>
)}
{attributes.close && (
<FocusVisibleButton
size="large"
fullWidth
color={attributes.close?.variant ?? "secondary"}
onClick={() => {
attributes.close?.action &&

View File

@@ -292,7 +292,7 @@ const ManageML: React.FC<ManageMLProps> = ({
const confirmDisableML = () => {
setDialogBoxAttributesV2({
title: t("ml_search_disable"),
content: t("ml_search_disable_confirm"),
message: t("ml_search_disable_confirm"),
close: { text: t("cancel") },
proceed: {
variant: "critical",

View File

@@ -105,7 +105,7 @@ const CGroupPersonOptions: React.FC<CGroupPersonOptionsProps> = ({
const handleDeletePerson = () =>
setDialogBoxAttributesV2({
title: pt("Reset person?"),
content: pt(
message: pt(
"The name, face groupings and suggestions for this person will be reset",
),
close: { text: t("cancel") },

View File

@@ -207,7 +207,7 @@ export const sessionExpiredDialogAttributes = (
onLogin: () => void,
): MiniDialogAttributes => ({
title: t("SESSION_EXPIRED"),
content: t("SESSION_EXPIRED_MESSAGE"),
message: t("SESSION_EXPIRED_MESSAGE"),
nonClosable: true,
proceed: {
text: t("login"),
@@ -222,5 +222,5 @@ export const sessionExpiredDialogAttributes = (
const genericErrorAttributes = (): MiniDialogAttributes => ({
title: t("error"),
close: { variant: "critical" },
content: t("generic_error_retry"),
message: t("generic_error_retry"),
});