From 17699dfcd0f19f883f5589c1369ee23bb6c10bc2 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 11 Jul 2022 16:50:13 -0400
Subject: [PATCH] Don't unnecessarily persist the host signup dialog (#9043)

https://github.com/matrix-org/matrix-react-sdk/pull/8747 made it more evident that the host signup dialog was relying on some quirks in how PersistedElement sizes and positions things that it probably shouldn't have been relying on. As far as I can tell, this dialog doesn't *need* to be a PersistedElement at all since it's mounted manually as part of LoggedInView, and so it doesn't look like there's any way for it to unexpectedly disappear on the user.

According to Travis this is supposed to be a bespoke widget in a proper dialog, but this is intended as a more short-term fix.
---
 res/css/views/dialogs/_HostSignupDialog.scss  |  11 --
 .../views/dialogs/HostSignupDialog.tsx        | 121 ++++++++----------
 2 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
index 56d7103404..b1b7b18898 100644
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -105,17 +105,6 @@ limitations under the License.
     right: 25px;
 }
 
-.mx_HostSignup_persisted {
-    width: 90vw;
-    max-width: 580px;
-    height: 80vh;
-    max-height: 600px;
-    top: 0;
-    left: 0;
-    position: fixed;
-    display: none;
-}
-
 .mx_HostSignupDialog_minimized {
     position: fixed;
     bottom: 80px;
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index 91c29c68d1..deb14a9b18 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -20,7 +20,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import AccessibleButton from "../elements/AccessibleButton";
 import Modal from "../../../Modal";
-import PersistedElement from "../elements/PersistedElement";
 import QuestionDialog from './QuestionDialog';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
@@ -35,8 +34,6 @@ import {
 import { IConfigOptions } from "../../../IConfigOptions";
 import { SnakedObject } from "../../../utils/SnakedObject";
 
-const HOST_SIGNUP_KEY = "host_signup";
-
 interface IProps {}
 
 interface IState {
@@ -111,8 +108,6 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
 
     private closeDialog = async () => {
         window.removeEventListener("message", this.messageHandler);
-        // Ensure we destroy the host signup persisted element
-        PersistedElement.destroyElement("host_signup");
         // Finally clear the flag in
         return HostSignupStore.instance.setHostSignupActive(false);
     };
@@ -235,69 +230,65 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
 
     public render(): React.ReactNode {
         return (
-            <div className="mx_HostSignup_persisted">
-                <PersistedElement key={HOST_SIGNUP_KEY} persistKey={HOST_SIGNUP_KEY}>
-                    <div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
-                        <div
-                            className={classNames("mx_Dialog",
+            <div className={classNames({ "mx_Dialog_wrapper": !this.state.minimized })}>
+                <div
+                    className={classNames("mx_Dialog",
+                        {
+                            "mx_HostSignupDialog_minimized": this.state.minimized,
+                            "mx_HostSignupDialog": !this.state.minimized,
+                        },
+                    )}
+                >
+                    { this.state.minimized &&
+                        <div className="mx_Dialog_header mx_Dialog_headerWithButton">
+                            <div className="mx_Dialog_title">
+                                { _t("%(hostSignupBrand)s Setup", {
+                                    hostSignupBrand: this.config.get("brand"),
+                                }) }
+                            </div>
+                            <AccessibleButton
+                                className="mx_HostSignup_maximize_button"
+                                onClick={this.maximizeDialog}
+                                aria-label={_t("Maximise dialog")}
+                                title={_t("Maximise dialog")}
+                            />
+                        </div>
+                    }
+                    { !this.state.minimized &&
+                        <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
+                            <AccessibleButton
+                                onClick={this.minimizeDialog}
+                                className="mx_HostSignup_minimize_button"
+                                aria-label={_t("Minimise dialog")}
+                                title={_t("Minimise dialog")}
+                            />
+                            <AccessibleButton
+                                onClick={this.onCloseClick}
+                                className="mx_Dialog_cancelButton"
+                                aria-label={_t("Close dialog")}
+                                title={_t("Close dialog")}
+                            />
+                        </div>
+                    }
+                    { this.state.error &&
+                        <div>
+                            { this.state.error }
+                        </div>
+                    }
+                    { !this.state.error &&
+                        <iframe
+                            title={_t(
+                                "Upgrade to %(hostSignupBrand)s",
                                 {
-                                    "mx_HostSignupDialog_minimized": this.state.minimized,
-                                    "mx_HostSignupDialog": !this.state.minimized,
+                                    hostSignupBrand: this.config.get("brand"),
                                 },
                             )}
-                        >
-                            { this.state.minimized &&
-                                <div className="mx_Dialog_header mx_Dialog_headerWithButton">
-                                    <div className="mx_Dialog_title">
-                                        { _t("%(hostSignupBrand)s Setup", {
-                                            hostSignupBrand: this.config.get("brand"),
-                                        }) }
-                                    </div>
-                                    <AccessibleButton
-                                        className="mx_HostSignup_maximize_button"
-                                        onClick={this.maximizeDialog}
-                                        aria-label={_t("Maximise dialog")}
-                                        title={_t("Maximise dialog")}
-                                    />
-                                </div>
-                            }
-                            { !this.state.minimized &&
-                                <div className="mx_Dialog_header mx_Dialog_headerWithCancel">
-                                    <AccessibleButton
-                                        onClick={this.minimizeDialog}
-                                        className="mx_HostSignup_minimize_button"
-                                        aria-label={_t("Minimise dialog")}
-                                        title={_t("Minimise dialog")}
-                                    />
-                                    <AccessibleButton
-                                        onClick={this.onCloseClick}
-                                        className="mx_Dialog_cancelButton"
-                                        aria-label={_t("Close dialog")}
-                                        title={_t("Close dialog")}
-                                    />
-                                </div>
-                            }
-                            { this.state.error &&
-                                <div>
-                                    { this.state.error }
-                                </div>
-                            }
-                            { !this.state.error &&
-                                <iframe
-                                    title={_t(
-                                        "Upgrade to %(hostSignupBrand)s",
-                                        {
-                                            hostSignupBrand: this.config.get("brand"),
-                                        },
-                                    )}
-                                    src={this.config.get("url")}
-                                    ref={this.iframeRef}
-                                    sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
-                                />
-                            }
-                        </div>
-                    </div>
-                </PersistedElement>
+                            src={this.config.get("url")}
+                            ref={this.iframeRef}
+                            sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
+                        />
+                    }
+                </div>
             </div>
         );
     }