Typing and other PR feedback fixes

src/components/structures/EMSElementProAction.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import * as React from "react";
 import EMSElementProDialog from "../views/dialogs/EMSElementProDialog";
-import Modal from "../../Modal";
+import Modal, {IHandle} from "../../Modal";
 import {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
@@ -28,8 +28,8 @@ interface IProps {}
 interface IState {}
 
 export default class EMSElementProAction extends React.PureComponent<IProps, IState> {
-    closingAllowed = false;
+    private closingAllowed = false;
-    modalRef: any;
+    private modalRef: IHandle<void[]>;
 
     private openDialog = () => {
         this.modalRef = Modal.createTrackedDialog(
@@ -52,7 +52,7 @@ export default class EMSElementProAction extends React.PureComponent<IProps, ISt
                 <IconizedContextMenuOption
                     iconClassName="mx_UserMenu_iconHosting"
                     label={_t("Get your own Element!")}
-                    onClick={(e) => this.openDialog()}
+                    onClick={this.openDialog}
                 />
             </IconizedContextMenuOptionList>
         );

src/components/structures/UserMenu.tsx

@@ -319,12 +319,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
                                 "<a>Upgrade</a> to your own domain", {},
                                 {
                                     a: sub => (
-                                        <a
+                                        <a href={signupLink} target="_blank" rel="noreferrer noopener" tabIndex={-1}>
-                                            href={signupLink}
+                                            {sub}
-                                            target="_blank"
+                                        </a>
-                                            rel="noreferrer noopener"
-                                            tabIndex={-1}
-                                        >{sub}</a>
                                     ),
                                 },
                             )}

src/components/views/dialogs/EMSElementProDialog.tsx

@@ -20,9 +20,10 @@ import EMSElementProConfirmCloseDialog from './EMSElementProConfirmCloseDialog';
 import EMSElementProDataConfirmDialog from './EMSElementProDataConfirmDialog';
 import Modal from "../../../Modal";
 import SdkConfig from "../../../SdkConfig";
-import { _t } from "../../../languageHandler";
+import {_t} from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import { OwnProfileStore } from "../../../stores/OwnProfileStore";
+import {OwnProfileStore} from "../../../stores/OwnProfileStore";
+import {IPostmessage, IPostmessageResponseData, PostmessageAction} from "./EMSElementProDialogTypes";
 
 interface IProps {
     requestClose(): void;
@@ -34,8 +35,8 @@ interface IState {
 }
 
 export default class EMSElementProDialog extends React.PureComponent<IProps, IState> {
-    iframeRef;
+    private iframeRef: React.RefObject<HTMLIFrameElement> = React.createRef();
-    elementProSetupUrl: string;
+    private readonly elementProSetupUrl: string;
 
     constructor(props: IProps) {
         super(props);
@@ -45,16 +46,15 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
             error: null,
         };
 
-        this.iframeRef = React.createRef();
         this.elementProSetupUrl = SdkConfig.get().ems_element_pro.url;
     }
 
-    private messageHandler = (message) => {
+    private messageHandler = (message: IPostmessage) => {
         if (!this.elementProSetupUrl.startsWith(message.origin)) {
             return;
         }
         switch (message.data.action) {
-            case 'element_pro_account_details_request':
+            case PostmessageAction.ElementProAccountDetailsRequest:
                 Modal.createDialog(
                     EMSElementProDataConfirmDialog,
                     {
@@ -66,14 +66,14 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
                     },
                 );
                 break;
-            case 'setup_complete':
+            case PostmessageAction.SetupComplete:
                 // Set as completed but let the user close the modal themselves
                 // so they have time to finish reading any information
                 this.setState({
                     completed: true,
                 });
                 break;
-            case 'close_dialog':
+            case PostmessageAction.CloseDialog:
                 this.onFinished(true);
                 break;
         }
@@ -97,11 +97,8 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
         }
     }
 
-    private sendMessage = (message) => {
+    private sendMessage = (message: IPostmessageResponseData) => {
-        this.iframeRef.contentWindow.postMessage(
+        this.iframeRef.current.contentWindow.postMessage(message, this.elementProSetupUrl);
-            message,
-            this.elementProSetupUrl,
-        )
     }
 
     private async sendAccountDetails() {
@@ -114,7 +111,7 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
             return;
         }
         this.sendMessage({
-            action: 'element_pro_account_details',
+            action: PostmessageAction.ElementProAccountDetails,
             account: {
                 accessToken: await MatrixClientPeg.get().getAccessToken(),
                 name: OwnProfileStore.instance.displayName,
@@ -145,7 +142,8 @@ export default class EMSElementProDialog extends React.PureComponent<IProps, ISt
                 <div className="mx_EMSElementProDialog_container">
                     <iframe
                         src={this.elementProSetupUrl}
-                        ref={ref => this.iframeRef = ref}
+                        ref={this.iframeRef}
+                        sandbox="allow-forms allow-scripts allow-same-origin"
                     />
                     {this.state.error &&
                         <div>

src/components/views/dialogs/EMSElementProDialogTypes.tsx

@@ -0,0 +1,28 @@
+export enum PostmessageAction {
+    CloseDialog = "close_dialog",
+    ElementProAccountDetails = "element_pro_account_details",
+    ElementProAccountDetailsRequest = "element_pro_account_details_request",
+    SetupComplete = "setup_complete",
+}
+
+interface IAccountData {
+    accessToken: string;
+    name: string;
+    openIdToken: string;
+    serverName: string;
+    userLocalpart: string;
+}
+
+export interface IPostmessageRequestData {
+    action: PostmessageAction;
+}
+
+export interface IPostmessageResponseData {
+    action: PostmessageAction;
+    account: IAccountData;
+}
+
+export interface IPostmessage {
+    data: IPostmessageRequestData;
+    origin: string;
+}