change staticBackdrop to closeOnBackdropClick

src/components/Collections/CollectionOptions.tsx

@@ -128,7 +128,6 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
         setDialogMessage({
             title: constants.CONFIRM_DELETE_COLLECTION,
             content: constants.DELETE_COLLECTION_MESSAGE(),
-            staticBackdrop: true,
             proceed: {
                 text: constants.DELETE_COLLECTION,
                 action: handleCollectionAction(CollectionActions.DELETE),
@@ -144,7 +143,6 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
         setDialogMessage({
             title: constants.CONFIRM_DOWNLOAD_COLLECTION,
             content: constants.DOWNLOAD_COLLECTION_MESSAGE(),
-            staticBackdrop: true,
             proceed: {
                 text: constants.DOWNLOAD,
                 action: handleCollectionAction(CollectionActions.DOWNLOAD),

src/components/Collections/CollectionShare/index.tsx

@@ -18,7 +18,6 @@ interface Props {
 
 function CollectionShare(props: Props) {
     const handleClose = dialogCloseHandler({
-        staticBackdrop: true,
         onClose: props.onHide,
     });
 

src/components/DialogBox/base.tsx

@@ -30,23 +30,21 @@ DialogBoxBase.defaultProps = {
 
 export const dialogCloseHandler =
     ({
-        staticBackdrop,
+        closeOnBackdropClick,
         nonClosable,
         onClose,
     }: {
-        staticBackdrop?: boolean;
+        closeOnBackdropClick?: boolean;
         nonClosable?: boolean;
-        onClose?: () => void;
+        onClose: () => void;
     }): DialogProps['onClose'] =>
     (_, reason) => {
         if (nonClosable) {
             // no-op
-        } else if (staticBackdrop && reason === 'backdropClick') {
+        } else if (!closeOnBackdropClick && reason === 'backdropClick') {
             // no-op
         } else {
-            if (onClose && typeof onClose === 'function') {
-                onClose();
-            }
+            onClose();
         }
     };
 

src/components/DialogBox/index.tsx

@@ -36,7 +36,7 @@ export default function DialogBox({
     }
 
     const handleClose = dialogCloseHandler({
-        staticBackdrop: attributes.staticBackdrop,
+        closeOnBackdropClick: attributes.closeOnBackdropClick,
         nonClosable: attributes.nonClosable,
         onClose: onClose,
     });

src/components/FixCreationTime/index.tsx

@@ -101,7 +101,6 @@ export default function FixCreationTime(props: Props) {
                     fixState === FIX_STATE.RUNNING
                         ? constants.FIX_CREATION_TIME_IN_PROGRESS
                         : constants.FIX_CREATION_TIME,
-                staticBackdrop: true,
                 nonClosable: true,
             }}>
             <div

src/components/FixLargeThumbnail.tsx

@@ -141,7 +141,6 @@ export default function FixLargeThumbnails(props: Props) {
             onClose={props.hide}
             attributes={{
                 title: constants.COMPRESS_THUMBNAILS,
-                staticBackdrop: true,
             }}>
             <div
                 style={{

src/components/RecoveryKey/index.tsx

@@ -7,6 +7,7 @@ import CodeBlock from '../CodeBlock';
 import { ButtonProps, Typography } from '@mui/material';
 import * as bip39 from 'bip39';
 import { DashedBorderWrapper } from './styledComponents';
+import { DialogBoxAttributes } from 'types/dialogBox';
 
 // mobile client library only supports english.
 bip39.setDefaultWordlist('english');
@@ -42,13 +43,12 @@ function RecoveryKey({ somethingWentWrong, ...props }: Props) {
         props.onHide();
     }
 
-    const recoveryKeyDialogAttributes = {
+    const recoveryKeyDialogAttributes: DialogBoxAttributes = {
         title: constants.RECOVERY_KEY,
         close: {
             text: constants.SAVE_LATER,
             variant: 'secondary' as ButtonProps['color'],
         },
-        staticBackdrop: true,
         proceed: {
             text: constants.SAVE,
             action: onSaveClick,

src/components/Sidebar/ExitSection.tsx

@@ -12,7 +12,7 @@ export default function ExitSection() {
         setDialogMessage({
             title: `${constants.CONFIRM} ${constants.LOGOUT}`,
             content: constants.LOGOUT_MESSAGE,
-            staticBackdrop: true,
+
             proceed: {
                 text: constants.LOGOUT,
                 action: logoutUser,
@@ -26,7 +26,7 @@ export default function ExitSection() {
         setDialogMessage({
             title: `${constants.DELETE_ACCOUNT}`,
             content: constants.DELETE_ACCOUNT_MESSAGE(),
-            staticBackdrop: true,
+
             proceed: {
                 text: constants.DELETE_ACCOUNT,
                 action: () => {

src/components/Sidebar/HelpSection.tsx

@@ -37,7 +37,7 @@ export default function HelpSection() {
             setDialogMessage({
                 title: constants.DOWNLOAD_APP,
                 content: constants.DOWNLOAD_APP_MESSAGE(),
-                staticBackdrop: true,
+
                 proceed: {
                     text: constants.DOWNLOAD,
                     action: downloadApp,

src/components/TwoFactor/Modal/Manage.tsx

@@ -19,7 +19,7 @@ export default function TwoFactorModalManageSection(props: Iprops) {
     const warnTwoFactorDisable = async () => {
         setDialogMessage({
             title: constants.DISABLE_TWO_FACTOR,
-            staticBackdrop: true,
+
             content: constants.DISABLE_TWO_FACTOR_MESSAGE,
             close: { text: constants.CANCEL },
             proceed: {
@@ -53,7 +53,7 @@ export default function TwoFactorModalManageSection(props: Iprops) {
     const warnTwoFactorReconfigure = async () => {
         setDialogMessage({
             title: constants.UPDATE_TWO_FACTOR,
-            staticBackdrop: true,
+
             content: constants.UPDATE_TWO_FACTOR_MESSAGE,
             close: { text: constants.CANCEL },
             proceed: {

src/components/TwoFactor/Modal/index.tsx

@@ -48,7 +48,6 @@ function TwoFactorModal(props: Props) {
             onClose={props.onHide}
             attributes={{
                 title: constants.TWO_FACTOR_AUTHENTICATION,
-                staticBackdrop: true,
             }}>
             <>
                 {isTwoFactorEnabled ? (

src/components/UploadProgress/index.tsx

@@ -82,7 +82,6 @@ export default function UploadProgress(props: Props) {
     }
 
     const handleClose = dialogCloseHandler({
-        staticBackdrop: true,
         onClose: confirmCancelUpload,
     });
 

src/components/pages/dedupe/SelectedFileOptions.tsx

@@ -44,7 +44,6 @@ export default function DeduplicateOptions({
         setDialogMessage({
             title: constants.CONFIRM_DELETE,
             content: constants.TRASH_MESSAGE,
-            staticBackdrop: true,
             proceed: {
                 action: deleteFileHelper,
                 text: constants.MOVE_TO_TRASH,

src/components/pages/gallery/PlanSelector.tsx

@@ -170,7 +170,6 @@ function PlanSelector(props: Props) {
                     constants.UPDATE_SUBSCRIPTION
                 )}`,
                 content: constants.UPDATE_SUBSCRIPTION_MESSAGE,
-                staticBackdrop: true,
                 proceed: {
                     text: constants.UPDATE_SUBSCRIPTION,
                     action: updateSubscription.bind(
@@ -328,7 +327,7 @@ function PlanSelector(props: Props) {
                                                         constants.ACTIVATE_SUBSCRIPTION_MESSAGE(
                                                             subscription.expiryTime
                                                         ),
-                                                    staticBackdrop: true,
+
                                                     proceed: {
                                                         text: constants.ACTIVATE_SUBSCRIPTION,
                                                         action: activateSubscription.bind(
@@ -354,7 +353,7 @@ function PlanSelector(props: Props) {
                                                     title: constants.CONFIRM_CANCEL_SUBSCRIPTION,
                                                     content:
                                                         constants.CANCEL_SUBSCRIPTION_MESSAGE(),
-                                                    staticBackdrop: true,
+
                                                     proceed: {
                                                         text: constants.CANCEL_SUBSCRIPTION,
                                                         action: cancelSubscription.bind(

src/components/pages/gallery/SelectedFileOptions.tsx

@@ -81,7 +81,6 @@ const SelectedFileOptions = ({
         setDialogMessage({
             title: constants.CONFIRM_DELETE,
             content: constants.TRASH_MESSAGE,
-            staticBackdrop: true,
             proceed: {
                 action: deleteFileHelper,
                 text: constants.MOVE_TO_TRASH,
@@ -94,7 +93,6 @@ const SelectedFileOptions = ({
         setDialogMessage({
             title: constants.CONFIRM_DELETE,
             content: constants.DELETE_MESSAGE,
-            staticBackdrop: true,
             proceed: {
                 action: () => deleteFileHelper(true),
                 text: constants.DELETE,
@@ -116,7 +114,7 @@ const SelectedFileOptions = ({
         setDialogMessage({
             title: constants.CONFIRM_REMOVE,
             content: constants.CONFIRM_REMOVE_MESSAGE(),
-            staticBackdrop: true,
+
             proceed: {
                 action: removeFromCollectionHelper,
                 text: constants.REMOVE,

src/components/pages/gallery/Upload.tsx

@@ -134,7 +134,7 @@ export default function Upload(props: Props) {
             } else if (isCanvasBlocked()) {
                 appContext.setDialogMessage({
                     title: constants.CANVAS_BLOCKED_TITLE,
-                    staticBackdrop: true,
+
                     content: constants.CANVAS_BLOCKED_MESSAGE(),
                     close: { text: constants.CLOSE },
                     proceed: {
@@ -311,7 +311,7 @@ export default function Upload(props: Props) {
                 logError(e, 'Failed to create album');
                 appContext.setDialogMessage({
                     title: constants.ERROR,
-                    staticBackdrop: true,
+
                     close: { variant: 'danger' },
                     content: constants.CREATE_ALBUM_FAILED,
                 });

src/components/pages/gallery/UploadStrategyChoiceModal.tsx

@@ -18,7 +18,6 @@ function UploadStrategyChoiceModal({
     ...props
 }: Props) {
     const handleClose = dialogCloseHandler({
-        staticBackdrop: true,
         onClose: props.onClose,
     });
 

src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -104,7 +104,6 @@ export function AbuseReportForm({ show, close, url }: Iprops) {
             onClose={close}
             attributes={{
                 title: constants.ABUSE_REPORT,
-                staticBackdrop: true,
             }}>
             <Wrapper>
                 <h6>{constants.ABUSE_REPORT_DESCRIPTION}</h6>

src/pages/deduplicate/index.tsx

@@ -121,14 +121,14 @@ export default function Deduplicate() {
                 case ServerErrorCodes.FORBIDDEN:
                     setDialogMessage({
                         title: constants.ERROR,
-                        staticBackdrop: true,
+
                         close: { variant: 'danger' },
                         content: constants.NOT_FILE_OWNER,
                     });
             }
             setDialogMessage({
                 title: constants.ERROR,
-                staticBackdrop: true,
+
                 close: { variant: 'danger' },
                 content: constants.UNKNOWN_ERROR,
             });

src/pages/gallery/index.tsx

@@ -214,7 +214,7 @@ export default function Gallery() {
         setDialogMessage({
             title: constants.SESSION_EXPIRED,
             content: constants.SESSION_EXPIRED_MESSAGE,
-            staticBackdrop: true,
+
             nonClosable: true,
             proceed: {
                 text: constants.LOGIN,
@@ -392,7 +392,7 @@ export default function Gallery() {
                 logError(e, 'collection ops failed', { ops });
                 setDialogMessage({
                     title: constants.ERROR,
-                    staticBackdrop: true,
+
                     close: { variant: 'danger' },
                     content: constants.UNKNOWN_ERROR,
                 });
@@ -420,7 +420,7 @@ export default function Gallery() {
                 case ServerErrorCodes.FORBIDDEN:
                     setDialogMessage({
                         title: constants.ERROR,
-                        staticBackdrop: true,
+
                         close: { variant: 'danger' },
                         content: constants.NOT_FILE_OWNER,
                     });
@@ -428,7 +428,7 @@ export default function Gallery() {
             }
             setDialogMessage({
                 title: constants.ERROR,
-                staticBackdrop: true,
+
                 close: { variant: 'danger' },
                 content: constants.UNKNOWN_ERROR,
             });
@@ -454,7 +454,7 @@ export default function Gallery() {
                 logError(e, 'create and collection ops failed', { ops });
                 setDialogMessage({
                     title: constants.ERROR,
-                    staticBackdrop: true,
+
                     close: { variant: 'danger' },
                     content: constants.UNKNOWN_ERROR,
                 });
@@ -490,14 +490,14 @@ export default function Gallery() {
                 case ServerErrorCodes.FORBIDDEN:
                     setDialogMessage({
                         title: constants.ERROR,
-                        staticBackdrop: true,
+
                         close: { variant: 'danger' },
                         content: constants.NOT_FILE_OWNER,
                     });
             }
             setDialogMessage({
                 title: constants.ERROR,
-                staticBackdrop: true,
+
                 close: { variant: 'danger' },
                 content: constants.UNKNOWN_ERROR,
             });
@@ -523,7 +523,7 @@ export default function Gallery() {
         setDialogMessage({
             title: constants.CONFIRM_EMPTY_TRASH,
             content: constants.EMPTY_TRASH_MESSAGE,
-            staticBackdrop: true,
+
             proceed: {
                 action: emptyTrashHelper,
                 text: constants.EMPTY_TRASH,
@@ -543,7 +543,7 @@ export default function Gallery() {
         } catch (e) {
             setDialogMessage({
                 title: constants.ERROR,
-                staticBackdrop: true,
+
                 close: { variant: 'danger' },
                 content: constants.UNKNOWN_ERROR,
             });

src/pages/index.tsx

@@ -144,7 +144,7 @@ export default function LandingPage() {
             logError(e, 'usage in incognito mode tried');
             appContext.setDialogMessage({
                 title: constants.LOCAL_STORAGE_NOT_ACCESSIBLE,
-                staticBackdrop: true,
+
                 nonClosable: true,
                 content: constants.LOCAL_STORAGE_NOT_ACCESSIBLE_MESSAGE,
             });

src/types/dialogBox/index.ts

@@ -2,7 +2,7 @@ import { ButtonProps } from '@mui/material';
 
 export interface DialogBoxAttributes {
     title?: string;
-    staticBackdrop?: boolean;
+    closeOnBackdropClick?: boolean;
     nonClosable?: boolean;
     content?: any;
     close?: {

src/utils/billing/index.ts

@@ -317,7 +317,7 @@ function handleFailureReason(
             setDialogMessage({
                 title: constants.UPDATE_PAYMENT_METHOD,
                 content: constants.UPDATE_PAYMENT_METHOD_MESSAGE,
-                staticBackdrop: true,
+
                 proceed: {
                     text: constants.UPDATE_PAYMENT_METHOD,
                     variant: 'success',
@@ -336,7 +336,7 @@ function handleFailureReason(
             setDialogMessage({
                 title: constants.UPDATE_PAYMENT_METHOD,
                 content: constants.STRIPE_AUTHENTICATION_FAILED,
-                staticBackdrop: true,
+
                 proceed: {
                     text: constants.UPDATE_PAYMENT_METHOD,
                     variant: 'success',