wip checkpoint

web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx

@@ -4,6 +4,7 @@ import {
     MenuItemGroup,
     MenuSectionTitle,
 } from "@/base/components/Menu";
+import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { nameAndExtension } from "@/base/file";
 import log from "@/base/log";
 import { photosDialogZIndex } from "@/new/photos/components/z-index";
@@ -39,7 +40,6 @@ import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { getLocalCollections } from "services/collectionService";
 import uploadManager from "services/upload/uploadManager";
-import { getEditorCloseConfirmationMessage } from "utils/ui";
 import ColoursMenu from "./ColoursMenu";
 import CropMenu, { cropRegionOfCanvas, getCropRegionArgs } from "./CropMenu";
 import FreehandCropRegion from "./FreehandCropRegion";
@@ -84,7 +84,7 @@ export interface CropBoxProps {
 }
 
 const ImageEditorOverlay = (props: IProps) => {
-    const appContext = useContext(AppContext);
+    const { showMiniDialog } = useContext(AppContext);
 
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     const originalSizeCanvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -442,9 +442,7 @@ const ImageEditorOverlay = (props: IProps) => {
 
     const handleCloseWithConfirmation = () => {
         if (transformationPerformed || coloursAdjusted) {
-            appContext.setDialogBoxAttributesV2(
-                getEditorCloseConfirmationMessage(handleClose),
-            );
+            showMiniDialog(confirmEditorCloseDialogAttributes(handleClose));
         } else {
             handleClose();
         }
@@ -733,6 +731,18 @@ const ImageEditorOverlay = (props: IProps) => {
 
 export default ImageEditorOverlay;
 
+const confirmEditorCloseDialogAttributes = (
+    onConfirm: () => void,
+): MiniDialogAttributes => ({
+    title: t("CONFIRM_EDITOR_CLOSE_MESSAGE"),
+    message: t("CONFIRM_EDITOR_CLOSE_DESCRIPTION"),
+    continue: {
+        text: t("close"),
+        color: "critical",
+        action: onConfirm,
+    },
+});
+
 /**
  * Create a new {@link File} with the contents of the given canvas.
  *

web/apps/photos/src/pages/_app.tsx

@@ -1,9 +1,12 @@
 import { clientPackageName, staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
-import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { AttributedMiniDialog } from "@/base/components/MiniDialog";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { AppNavbar } from "@/base/components/Navbar";
+import {
+    genericErrorDialogAttributes,
+    useAttributedMiniDialog,
+} from "@/base/components/utils/mini-dialog";
 import { setupI18n } from "@/base/i18n";
 import log from "@/base/log";
 import {
@@ -36,7 +39,6 @@ import { getTheme } from "@ente/shared/themes";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import type { User } from "@ente/shared/user/types";
 import ArrowForward from "@mui/icons-material/ArrowForward";
-import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import Notification from "components/Notification";
@@ -72,17 +74,15 @@ export default function App({ Component, pageProps }: AppProps) {
     const isLoadingBarRunning = useRef(false);
     const loadingBar = useRef(null);
     const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
-    const [dialogBoxAttributeV2, setDialogBoxAttributesV2] = useState<
-        MiniDialogAttributes | undefined
-    >();
     const [messageDialogView, setMessageDialogView] = useState(false);
-    const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
     const [watchFolderView, setWatchFolderView] = useState(false);
     const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
     const [notificationView, setNotificationView] = useState(false);
     const closeNotification = () => setNotificationView(false);
     const [notificationAttributes, setNotificationAttributes] =
         useState<NotificationAttributes>(null);
+
+    const { showMiniDialog, miniDialogProps } = useAttributedMiniDialog();
     const [themeColor, setThemeColor] = useLocalState(
         LS_KEYS.THEME,
         THEME_COLOR.DARK,
@@ -201,10 +201,6 @@ export default function App({ Component, pageProps }: AppProps) {
         setMessageDialogView(true);
     }, [dialogMessage]);
 
-    useEffect(() => {
-        setDialogBoxV2View(true);
-    }, [dialogBoxAttributeV2]);
-
     useEffect(() => {
         setNotificationView(true);
     }, [notificationAttributes]);
@@ -236,12 +232,6 @@ export default function App({ Component, pageProps }: AppProps) {
         () => setMessageDialogView(false),
         [],
     );
-    const closeDialogBoxV2 = () => setDialogBoxV2View(false);
-
-    const showMiniDialog = useCallback((attributes: MiniDialogAttributes) => {
-        setDialogBoxAttributesV2(attributes);
-        setDialogBoxV2View(true);
-    }, []);
 
     // Use `onGenericError` instead.
     const somethingWentWrong = useCallback(
@@ -254,18 +244,10 @@ export default function App({ Component, pageProps }: AppProps) {
         [],
     );
 
-    const onGenericError = useCallback(
-        (e: unknown) => (
-            log.error("Error", e),
-            setDialogBoxAttributesV2({
-                title: t("error"),
-                icon: <ErrorOutline />,
-                message: t("generic_error"),
-                close: { variant: "critical" },
-            })
-        ),
-        [],
-    );
+    const onGenericError = useCallback((e: unknown) => {
+        log.error("Error", e);
+        showMiniDialog(genericErrorDialogAttributes());
+    }, []);
 
     const logout = useCallback(() => {
         void photosLogout().then(() => router.push("/"));
@@ -287,7 +269,6 @@ export default function App({ Component, pageProps }: AppProps) {
         showMiniDialog,
         somethingWentWrong,
         onGenericError,
-        setDialogBoxAttributesV2,
         mapEnabled,
         updateMapEnabled, // <- changes on each render
         isCFProxyDisabled,
@@ -318,9 +299,7 @@ export default function App({ Component, pageProps }: AppProps) {
                 />
                 <AttributedMiniDialog
                     sx={{ zIndex: photosDialogZIndex }}
-                    open={dialogBoxV2View}
-                    onClose={closeDialogBoxV2}
-                    attributes={dialogBoxAttributeV2}
+                    {...miniDialogProps}
                 />
 
                 <Notification

web/apps/photos/src/utils/ui/index.tsx

@@ -1,11 +1,9 @@
-import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { ensureElectron } from "@/base/electron";
 import { AppUpdate } from "@/base/types/ipc";
 import { openURL } from "@/new/photos/utils/web";
 import { DialogBoxAttributes } from "@ente/shared/components/DialogBox/types";
 import AutoAwesomeOutlinedIcon from "@mui/icons-material/AutoAwesomeOutlined";
 import InfoOutlined from "@mui/icons-material/InfoRounded";
-import { Link } from "@mui/material";
 import { t } from "i18next";
 import { Trans } from "react-i18next";
 import { Subscription } from "types/billing";
@@ -136,16 +134,3 @@ export const getSessionExpiredMessage = (
         variant: "accent",
     },
 });
-
-export const getEditorCloseConfirmationMessage = (
-    doClose: () => void,
-): DialogBoxAttributes => ({
-    title: t("CONFIRM_EDITOR_CLOSE_MESSAGE"),
-    content: t("CONFIRM_EDITOR_CLOSE_DESCRIPTION"),
-    proceed: {
-        action: doClose,
-        text: t("close"),
-        variant: "critical",
-    },
-    close: { text: t("cancel") },
-});

web/packages/accounts/pages/recover.tsx

@@ -29,7 +29,7 @@ const bip39 = require("bip39");
 bip39.setDefaultWordlist("english");
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
-    const { showNavBar, setDialogBoxAttributesV2 } = appContext;
+    const { showNavBar, showMiniDialog } = appContext;
 
     const [keyAttributes, setKeyAttributes] = useState<
         KeyAttributes | undefined
@@ -98,10 +98,11 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     };
 
     const showNoRecoveryKeyMessage = () =>
-        setDialogBoxAttributesV2({
+        showMiniDialog({
             title: t("sorry"),
-            close: {},
             message: t("NO_RECOVERY_KEY_MESSAGE"),
+            continue: { color: "secondary" },
+            cancel: false,
         });
 
     return (

web/packages/accounts/pages/two-factor/recover.tsx

@@ -42,7 +42,7 @@ export interface RecoverPageProps {
 }
 
 const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
-    const { logout } = appContext;
+    const { showMiniDialog, logout } = appContext;
 
     const [encryptedTwoFactorSecret, setEncryptedTwoFactorSecret] =
         useState<Omit<B64EncryptionResult, "key"> | null>(null);
@@ -72,6 +72,7 @@ const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
                 if (!resp.encryptedSecret) {
                     showContactSupportDialog({
                         text: t("GO_BACK"),
+                        autoClose: true,
                         action: router.back,
                     });
                 } else {
@@ -91,6 +92,7 @@ const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
                     setDoesHaveEncryptedRecoveryKey(false);
                     showContactSupportDialog({
                         text: t("GO_BACK"),
+                        autoClose: true,
                         action: router.back,
                     });
                 }
@@ -146,11 +148,10 @@ const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
     };
 
     const showContactSupportDialog = (
-        dialogClose?: MiniDialogAttributes["close"],
+        dialogContinue?: MiniDialogAttributes["continue"],
     ) => {
-        appContext.setDialogBoxAttributesV2({
+        showMiniDialog({
             title: t("contact_support"),
-            close: dialogClose ?? {},
             message: (
                 <Trans
                     i18nKey={"NO_TWO_FACTOR_RECOVERY_KEY_MESSAGE"}
@@ -160,6 +161,8 @@ const Page: React.FC<RecoverPageProps> = ({ appContext, twoFactorType }) => {
                     values={{ emailID: "support@ente.io" }}
                 />
             ),
+            continue: { color: "secondary", ...(dialogContinue ?? {}) },
+            cancel: false,
         });
     };
 

web/packages/base/components/MiniDialog.tsx

@@ -75,6 +75,11 @@ export interface MiniDialogAttributes {
          * is opened, allowing the user to confirm just by pressing ENTER.
          */
         autoFocus?: boolean;
+        /**
+         * If `true`, close the dialog after {@link action} completes.
+         * TODO: Test/Impl/Is this needed?
+         */
+        autoClose?: boolean;
         /**
          * The function to call when the user activates the button.
          *