Cleanup logic for asModal to make it a little easier to use dynamically

package.json

@@ -18,6 +18,7 @@
         "i18next-chained-backend": "^2.0.0",
         "i18next-localstorage-backend": "^3.0.0",
         "i18next-xhr-backend": "^3.2.2",
+        "qrcode.react": "^1.0.1",
         "query-string": "^6.7.0",
         "react": "^16.13.1",
         "react-copy-to-clipboard": "^5.0.2",

resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx

@@ -7,53 +7,29 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 
 export default () => {
-    const user = useStoreState((state: ApplicationStore) => state.user.data!);
     const [ visible, setVisible ] = useState(false);
+    const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);
 
-    return user.useTotp ?
+    return (
         <div>
-            {visible &&
+            {visible && (
-            <DisableTwoFactorModal
+                isEnabled ?
-                appear
+                    <DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
-                visible={visible}
+                    :
-                onDismissed={() => setVisible(false)}
+                    <SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
-            />
+            )}
-            }
             <p css={tw`text-sm`}>
-                Two-factor authentication is currently enabled on your account.
+                {isEnabled ?
+                    'Two-factor authentication is currently enabled on your account.'
+                    :
+                    'You do not currently have two-factor authentication enabled on your account. Click the button below to begin configuring it.'
+                }
             </p>
             <div css={tw`mt-6`}>
-                <Button
+                <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
-                    color={'red'}
+                    {isEnabled ? 'Disable' : 'Enable'}
-                    isSecondary
-                    onClick={() => setVisible(true)}
-                >
-                    Disable
                 </Button>
             </div>
         </div>
-        :
+    );
-        <div>
-            {visible &&
-            <SetupTwoFactorModal
-                appear
-                visible={visible}
-                onDismissed={() => setVisible(false)}
-            />
-            }
-            <p css={tw`text-sm`}>
-                You do not currently have two-factor authentication enabled on your account. Click
-                the button below to begin configuring it.
-            </p>
-            <div css={tw`mt-6`}>
-                <Button
-                    color={'green'}
-                    isSecondary
-                    onClick={() => setVisible(true)}
-                >
-                    Begin Setup
-                </Button>
-            </div>
-        </div>
-    ;
 };

resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Form, Formik, FormikHelpers } from 'formik';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
@@ -9,26 +8,31 @@ import { ApplicationStore } from '@/state';
 import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import asModal from '@/hoc/asModal';
+import ModalContext from '@/context/ModalContext';
 
 interface Values {
     password: string;
 }
 
-export default ({ ...props }: RequiredModalProps) => {
+const DisableTwoFactorModal = () => {
+    const { dismiss, setPropOverrides } = useContext(ModalContext);
     const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
 
     const submit = ({ password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setPropOverrides({ showSpinnerOverlay: true, dismissable: false });
         disableAccountTwoFactor(password)
             .then(() => {
                 updateUserData({ useTotp: false });
-                props.onDismissed();
+                dismiss();
             })
             .catch(error => {
                 console.error(error);
 
                 clearAndAddHttpError({ error, key: 'account:two-factor' });
                 setSubmitting(false);
+                setPropOverrides(null);
             });
     };
 
@@ -42,29 +46,26 @@ export default ({ ...props }: RequiredModalProps) => {
                 password: string().required('You must provider your current password in order to continue.'),
             })}
         >
-            {({ isSubmitting, isValid }) => (
+            {({ isValid }) => (
-                <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
+                <Form className={'mb-0'}>
-                    <Form className={'mb-0'}>
+                    <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
-                        <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
+                    <Field
-                        <Field
+                        id={'password'}
-                            id={'password'}
+                        name={'password'}
-                            name={'password'}
+                        type={'password'}
-                            type={'password'}
+                        label={'Current Password'}
-                            label={'Current Password'}
+                        description={'In order to disable two-factor authentication you will need to provide your account password.'}
-                            description={'In order to disable two-factor authentication you will need to provide your account password.'}
+                        autoFocus
-                            autoFocus
+                    />
-                        />
+                    <div css={tw`mt-6 text-right`}>
-                        <div css={tw`mt-6 text-right`}>
+                        <Button color={'red'} disabled={!isValid}>
-                            <Button
+                            Disable Two-Factor
-                                color={'red'}
+                        </Button>
-                                disabled={!isValid}
+                    </div>
-                            >
+                </Form>
-                                Disable Two-Factor
-                            </Button>
-                        </div>
-                    </Form>
-                </Modal>
             )}
         </Formik>
     );
 };
+
+export default asModal()(DisableTwoFactorModal);

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
 import getTwoFactorTokenUrl from '@/api/account/getTwoFactorTokenUrl';
@@ -10,16 +9,19 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import Field from '@/components/elements/Field';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import asModal from '@/hoc/asModal';
+import ModalContext from '@/context/ModalContext';
 
 interface Values {
     code: string;
 }
 
-export default ({ onDismissed, ...props }: RequiredModalProps) => {
+const SetupTwoFactorModal = () => {
     const [ token, setToken ] = useState('');
     const [ loading, setLoading ] = useState(true);
     const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
 
+    const { dismiss, setPropOverrides } = useContext(ModalContext);
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
     const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -33,6 +35,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
     }, []);
 
     const submit = ({ code }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setPropOverrides(state => ({ ...state, showSpinnerOverlay: true }));
         enableAccountTwoFactor(code)
             .then(tokens => {
                 setRecoveryTokens(tokens);
@@ -42,16 +45,25 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
 
                 clearAndAddHttpError({ error, key: 'account:two-factor' });
             })
-            .then(() => setSubmitting(false));
+            .then(() => {
+                setSubmitting(false);
+                setPropOverrides(state => ({ ...state, showSpinnerOverlay: false }));
+            });
     };
 
-    const dismiss = () => {
+    useEffect(() => {
-        if (recoveryTokens.length > 0) {
+        setPropOverrides(state => ({
-            updateUserData({ useTotp: true });
+            ...state,
-        }
+            closeOnEscape: !recoveryTokens.length,
+            closeOnBackground: !recoveryTokens.length,
+        }));
 
-        onDismissed();
+        return () => {
-    };
+            if (recoveryTokens.length > 0) {
+                updateUserData({ useTotp: true });
+            }
+        };
+    }, [ recoveryTokens ]);
 
     return (
         <Formik
@@ -63,79 +75,69 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
                     .matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
             })}
         >
-            {({ isSubmitting }) => (
+            {recoveryTokens.length > 0 ?
-                <Modal
+                <>
-                    {...props}
+                    <h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
-                    top={false}
+                    <p css={tw`text-neutral-300`}>
-                    onDismissed={dismiss}
+                        Two-factor authentication has been enabled on your account. Should you loose access to
-                    dismissable={!isSubmitting}
+                        this device you&apos;ll need to use one of the codes displayed below in order to access your
-                    showSpinnerOverlay={loading || isSubmitting}
+                        account.
-                    closeOnEscape={!recoveryTokens}
+                    </p>
-                    closeOnBackground={!recoveryTokens}
+                    <p css={tw`text-neutral-300 mt-4`}>
-                >
+                        <strong>These codes will not be displayed again.</strong> Please take note of them now
-                    {recoveryTokens.length > 0 ?
+                        by storing them in a secure repository such as a password manager.
-                        <>
+                    </p>
-                            <h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
+                    <pre css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
-                            <p css={tw`text-neutral-300`}>
+                        {recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
-                                Two-factor authentication has been enabled on your account. Should you loose access to
+                    </pre>
-                                this device you&apos;ll need to use one of the codes displayed below in order to access your
+                    <div css={tw`text-right`}>
-                                account.
+                        <Button css={tw`mt-6`} onClick={dismiss}>
-                            </p>
+                            Close
-                            <p css={tw`text-neutral-300 mt-4`}>
+                        </Button>
-                                <strong>These codes will not be displayed again.</strong> Please take note of them now
+                    </div>
-                                by storing them in a secure repository such as a password manager.
+                </>
-                            </p>
+                :
-                            <pre css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
+                <Form css={tw`mb-0`}>
-                                {recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
+                    <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
-                            </pre>
+                    <div css={tw`flex flex-wrap`}>
-                            <div css={tw`text-right`}>
+                        <div css={tw`w-full md:flex-1`}>
-                                <Button css={tw`mt-6`} onClick={dismiss}>
+                            <div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
-                                    Close
+                                {!token || !token.length ?
+                                    <img
+                                        src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
+                                        css={tw`w-64 h-64 rounded`}
+                                    />
+                                    :
+                                    <img
+                                        src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
+                                        onLoad={() => setLoading(false)}
+                                        css={tw`w-full h-full shadow-none rounded-none`}
+                                    />
+                                }
+                            </div>
+                        </div>
+                        <div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
+                            <div css={tw`flex-1`}>
+                                <Field
+                                    id={'code'}
+                                    name={'code'}
+                                    type={'text'}
+                                    title={'Code From Authenticator'}
+                                    description={'Enter the code from your authenticator device after scanning the QR image.'}
+                                    autoFocus={!loading}
+                                />
+                            </div>
+                            <div css={tw`mt-6 md:mt-0 text-right`}>
+                                <Button>
+                                    Setup
                                 </Button>
                             </div>
-                        </>
+                        </div>
-                        :
+                    </div>
-                        <Form css={tw`mb-0`}>
+                </Form>
-                            <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
+            }
-                            <div css={tw`flex flex-wrap`}>
-                                <div css={tw`w-full md:flex-1`}>
-                                    <div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
-                                        {!token || !token.length ?
-                                            <img
-                                                src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
-                                                css={tw`w-64 h-64 rounded`}
-                                            />
-                                            :
-                                            <img
-                                                src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
-                                                onLoad={() => setLoading(false)}
-                                                css={tw`w-full h-full shadow-none rounded-none`}
-                                            />
-                                        }
-                                    </div>
-                                </div>
-                                <div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
-                                    <div css={tw`flex-1`}>
-                                        <Field
-                                            id={'code'}
-                                            name={'code'}
-                                            type={'text'}
-                                            title={'Code From Authenticator'}
-                                            description={'Enter the code from your authenticator device after scanning the QR image.'}
-                                            autoFocus={!loading}
-                                        />
-                                    </div>
-                                    <div css={tw`mt-6 md:mt-0 text-right`}>
-                                        <Button>
-                                            Setup
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </Form>
-                    }
-                </Modal>
-            )}
         </Formik>
     );
 };
+
+export default asModal()(SetupTwoFactorModal);

resources/scripts/components/elements/Spinner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import styled, { css, keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 
@@ -10,6 +10,11 @@ interface Props {
     isBlue?: boolean;
 }
 
+interface Spinner extends React.FC<Props> {
+    Size: Record<'SMALL' | 'BASE' | 'LARGE', SpinnerSize>;
+    Suspense: React.FC<Props>;
+}
+
 const spin = keyframes`
     to { transform: rotate(360deg); }
 `;
@@ -30,7 +35,7 @@ const SpinnerComponent = styled.div<Props>`
     border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
 `;
 
-const Spinner = ({ centered, ...props }: Props) => (
+const Spinner: Spinner = ({ centered, ...props }) => (
     centered ?
         <div
             css={[
@@ -43,12 +48,19 @@ const Spinner = ({ centered, ...props }: Props) => (
         :
         <SpinnerComponent {...props}/>
 );
-Spinner.DisplayName = 'Spinner';
+Spinner.displayName = 'Spinner';
 
 Spinner.Size = {
-    SMALL: 'small' as SpinnerSize,
+    SMALL: 'small',
-    BASE: 'base' as SpinnerSize,
+    BASE: 'base',
-    LARGE: 'large' as SpinnerSize,
+    LARGE: 'large',
 };
 
+Spinner.Suspense = ({ children, centered = true, size = Spinner.Size.LARGE, ...props }) => (
+    <Suspense fallback={<Spinner centered={centered} size={size} {...props}/>}>
+        {children}
+    </Suspense>
+);
+Spinner.Suspense.displayName = 'Spinner.Suspense';
+
 export default Spinner;

resources/scripts/components/elements/SuspenseSpinner.tsx

@@ -1,10 +0,0 @@
-import React, { Suspense } from 'react';
-import Spinner from '@/components/elements/Spinner';
-
-const SuspenseSpinner: React.FC = ({ children }) => (
-    <Suspense fallback={<Spinner size={'large'} centered/>}>
-        {children}
-    </Suspense>
-);
-
-export default SuspenseSpinner;

resources/scripts/components/server/ServerConsole.tsx

@@ -1,6 +1,5 @@
 import React, { lazy, memo } from 'react';
 import { ServerContext } from '@/state/server';
-import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import Can from '@/components/elements/Can';
 import ContentContainer from '@/components/elements/ContentContainer';
 import tw from 'twin.macro';
@@ -10,6 +9,7 @@ import isEqual from 'react-fast-compare';
 import PowerControls from '@/components/server/PowerControls';
 import { EulaModalFeature } from '@feature/index';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
+import Spinner from '@/components/elements/Spinner';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
@@ -51,12 +51,12 @@ const ServerConsole = () => {
                 }
             </div>
             <div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
-                <SuspenseSpinner>
+                <Spinner.Suspense>
                     <ErrorBoundary>
                         <ChunkedConsole/>
                     </ErrorBoundary>
                     <ChunkedStatGraphs/>
-                </SuspenseSpinner>
+                </Spinner.Suspense>
                 {eggFeatures.includes('eula') &&
                 <React.Suspense fallback={null}>
                     <EulaModalFeature/>

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -32,7 +32,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
     const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-    const { dismiss, toggleSpinner } = useContext(ModalContext);
+    const { dismiss, setPropOverrides } = useContext(ModalContext);
 
     const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
     const permissions = useStoreState(state => state.permissions.data);
@@ -56,7 +56,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
     }, [ isRootAdmin, permissions, loggedInPermissions ]);
 
     const submit = (values: Values) => {
-        toggleSpinner(true);
+        setPropOverrides({ showSpinnerOverlay: true });
         clearFlashes('user:edit');
 
         createOrUpdateSubuser(uuid, values, subuser)
@@ -66,7 +66,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
             })
             .catch(error => {
                 console.error(error);
-                toggleSpinner(false);
+                setPropOverrides(null);
                 clearAndAddHttpError({ key: 'user:edit', error });
 
                 if (ref.current) {

resources/scripts/context/ModalContext.ts

@@ -1,13 +1,14 @@
 import React from 'react';
+import { SettableModalProps } from '@/hoc/asModal';
 
 export interface ModalContextValues {
     dismiss: () => void;
-    toggleSpinner: (visible?: boolean) => void;
+    setPropOverrides: (value: ((current: Readonly<Partial<SettableModalProps>>) => Partial<SettableModalProps>) | Partial<SettableModalProps> | null) => void;
 }
 
 const ModalContext = React.createContext<ModalContextValues>({
     dismiss: () => null,
-    toggleSpinner: () => null,
+    setPropOverrides: () => null,
 });
 
 ModalContext.displayName = 'ModalContext';

resources/scripts/hoc/asModal.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import PortaledModal, { ModalProps } from '@/components/elements/Modal';
-import ModalContext from '@/context/ModalContext';
+import ModalContext, { ModalContextValues } from '@/context/ModalContext';
 
 export interface AsModalProps {
     visible: boolean;
     onModalDismissed?: () => void;
 }
 
-type ExtendedModalProps = Omit<ModalProps, 'appear' | 'visible' | 'onDismissed'>;
+export type SettableModalProps = Omit<ModalProps, 'appear' | 'visible' | 'onDismissed'>;
 
 interface State {
     render: boolean;
     visible: boolean;
     showSpinnerOverlay?: boolean;
+    propOverrides: Partial<SettableModalProps>;
 }
 
 type ExtendedComponentType<T> = (C: React.ComponentType<T>) => React.ComponentType<T & AsModalProps>;
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P) => ExtendedModalProps)): ExtendedComponentType<P> {
+function asModal<P extends {}> (modalProps?: SettableModalProps | ((props: P) => SettableModalProps)): ExtendedComponentType<P> {
     return function (Component) {
         return class extends React.PureComponent <P & AsModalProps, State> {
             static displayName = `asModal(${Component.displayName})`;
@@ -30,54 +31,64 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
                     render: props.visible,
                     visible: props.visible,
                     showSpinnerOverlay: undefined,
+                    propOverrides: {},
                 };
             }
 
-            get modalProps () {
+            get computedModalProps (): Readonly<SettableModalProps & { visible: boolean }> {
                 return {
                     ...(typeof modalProps === 'function' ? modalProps(this.props) : modalProps),
                     showSpinnerOverlay: this.state.showSpinnerOverlay,
+                    ...this.state.propOverrides,
+                    visible: this.state.visible,
                 };
             }
 
+            /**
+             * @this {React.PureComponent<P & AsModalProps, State>}
+             */
             componentDidUpdate (prevProps: Readonly<P & AsModalProps>) {
                 if (prevProps.visible && !this.props.visible) {
-                    // noinspection JSPotentiallyInvalidUsageOfThis
                     this.setState({ visible: false, showSpinnerOverlay: false });
                 } else if (!prevProps.visible && this.props.visible) {
-                    // noinspection JSPotentiallyInvalidUsageOfThis
                     this.setState({ render: true, visible: true });
                 }
+                if (!this.state.render) {
+                    this.setState({ propOverrides: {} });
+                }
             }
 
             dismiss = () => this.setState({ visible: false });
 
-            toggleSpinner = (value?: boolean) => this.setState({ showSpinnerOverlay: value });
+            setPropOverrides: ModalContextValues['setPropOverrides'] = value => this.setState(state => ({
+                propOverrides: !value ? {} : (typeof value === 'function' ? value(state.propOverrides) : value),
+            }));
 
+            /**
+             * @this {React.PureComponent<P & AsModalProps, State>}
+             */
             render () {
+                if (!this.state.render) return null;
+
                 return (
-                    this.state.render ?
+                    <PortaledModal
-                        <PortaledModal
+                        appear
-                            appear
+                        onDismissed={() => this.setState({ render: false }, () => {
-                            visible={this.state.visible}
+                            if (typeof this.props.onModalDismissed === 'function') {
-                            onDismissed={() => this.setState({ render: false }, () => {
+                                this.props.onModalDismissed();
-                                if (typeof this.props.onModalDismissed === 'function') {
+                            }
-                                    this.props.onModalDismissed();
+                        })}
-                                }
+                        {...this.computedModalProps}
-                            })}
+                    >
-                            {...this.modalProps}
+                        <ModalContext.Provider
+                            value={{
+                                dismiss: this.dismiss.bind(this),
+                                setPropOverrides: this.setPropOverrides.bind(this),
+                            }}
                         >
-                            <ModalContext.Provider
+                            <Component {...this.props}/>
-                                value={{
+                        </ModalContext.Provider>
-                                    dismiss: this.dismiss.bind(this),
+                    </PortaledModal>
-                                    toggleSpinner: this.toggleSpinner.bind(this),
-                                }}
-                            >
-                                <Component {...this.props}/>
-                            </ModalContext.Provider>
-                        </PortaledModal>
-                        :
-                        null
                 );
             }
         };

resources/scripts/routers/ServerRouter.tsx

@@ -9,7 +9,6 @@ import { ServerContext } from '@/state/server';
 import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
 import FileManagerContainer from '@/components/server/files/FileManagerContainer';
 import { CSSTransition } from 'react-transition-group';
-import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import FileEditContainer from '@/components/server/files/FileEditContainer';
 import SettingsContainer from '@/components/server/settings/SettingsContainer';
 import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
@@ -151,9 +150,9 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                         </RequireServerPermission>
                                     </Route>
                                     <Route path={`${match.path}/files/:action(edit|new)`} exact>
-                                        <SuspenseSpinner>
+                                        <Spinner.Suspense>
                                             <FileEditContainer/>
-                                        </SuspenseSpinner>
+                                        </Spinner.Suspense>
                                     </Route>
                                     <Route path={`${match.path}/databases`} exact>
                                         <RequireServerPermission permissions={'database.*'}>

yarn.lock

@@ -5810,7 +5810,7 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
-prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5889,6 +5889,20 @@ purgecss@^3.1.3:
     postcss "^8.2.1"
     postcss-selector-parser "^6.0.2"
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
+  integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"