Move threads e2e tests over to cypress (#8501)

* Add non-consent (default) Synapse template

* Add consent test

* Add create room test

* Stash work

* Initial threads tests

* fix

* Delete old threads e2e tests, plan new ones

* Fix typed s'more

* Try something else

* specify d.ts

* Fix types once and for all?

* Fix the consent tests

* Iterate threads test harness

* Fix dispatcher types

* Iterate threads test

* fix typing

* Alternative import attempt

* let it break let it break let it break

* Tweak types

* Stash

* delint and update docs

* null-guard scrollIntoView

* Iterate threads test

* Apply suggestions from code review

src/@types/global.d.ts

@@ -51,6 +51,7 @@ import { ConsoleLogger, IndexedDBLogStore } from "../rageshake/rageshake";
 import ActiveWidgetStore from "../stores/ActiveWidgetStore";
 import AutoRageshakeStore from "../stores/AutoRageshakeStore";
 import { IConfigOptions } from "../IConfigOptions";
+import { MatrixDispatcher } from "../dispatcher/dispatcher";
 
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -109,6 +110,7 @@ declare global {
         mxSendSentryReport: (userText: string, issueUrl: string, error: Error) => Promise<void>;
         mxLoginWithAccessToken: (hsUrl: string, accessToken: string) => Promise<void>;
         mxAutoRageshakeStore?: AutoRageshakeStore;
+        mxDispatcher: MatrixDispatcher;
     }
 
     interface Electron {

src/Lifecycle.ts

@@ -665,7 +665,7 @@ async function persistCredentials(credentials: IMatrixClientCreds): Promise<void
     }
 
     if (credentials.pickleKey) {
-        let encryptedAccessToken;
+        let encryptedAccessToken: IEncryptedPayload;
         try {
             // try to encrypt the access token using the pickle key
             const encrKey = await pickleKeyToAesKey(credentials.pickleKey);

src/components/structures/TimelinePanel.tsx

@@ -1197,6 +1197,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
     private scrollIntoView(eventId?: string, pixelOffset?: number, offsetBase?: number): void {
         const doScroll = () => {
+            if (!this.messagePanel.current) return;
             if (eventId) {
                 debuglog("TimelinePanel scrolling to eventId " + eventId +
                     " at position " + (offsetBase * 100) + "% + " + pixelOffset);

src/dispatcher/dispatcher.ts

@@ -67,9 +67,8 @@ export class MatrixDispatcher extends Dispatcher<ActionPayload> {
 
 export const defaultDispatcher = new MatrixDispatcher();
 
-const anyGlobal = <any>global;
-if (!anyGlobal.mxDispatcher) {
-    anyGlobal.mxDispatcher = defaultDispatcher;
+if (!window.mxDispatcher) {
+    window.mxDispatcher = defaultDispatcher;
 }
 
 export default defaultDispatcher;

src/stores/RoomViewStore.tsx

@@ -407,7 +407,7 @@ export class RoomViewStore extends Store<ActionPayload> {
             dis.dispatch({
                 action: Action.JoinRoomError,
                 roomId,
-                err: err,
+                err,
             });
         }
     }

src/utils/StorageManager.ts

@@ -18,6 +18,7 @@ import { LocalStorageCryptoStore } from 'matrix-js-sdk/src/crypto/store/localSto
 import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixClient } from 'matrix-js-sdk/src/client';
 
 import Analytics from '../Analytics';
 
@@ -25,7 +26,7 @@ const localStorage = window.localStorage;
 
 // just *accessing* indexedDB throws an exception in firefox with
 // indexeddb disabled.
-let indexedDB;
+let indexedDB: IDBFactory;
 try {
     indexedDB = window.indexedDB;
 } catch (e) {}
@@ -161,7 +162,7 @@ async function checkCryptoStore() {
         track("Crypto store using IndexedDB inaccessible");
     }
     try {
-        exists = await LocalStorageCryptoStore.exists(localStorage);
+        exists = LocalStorageCryptoStore.exists(localStorage);
         log(`Crypto store using local storage contains data? ${exists}`);
         return { exists, healthy: true };
     } catch (e) {
@@ -172,12 +173,10 @@ async function checkCryptoStore() {
     return { exists, healthy: false };
 }
 
-export function trackStores(client) {
-    if (client.store && client.store.on) {
-        client.store.on("degraded", () => {
-            track("Sync store using IndexedDB degraded to memory");
-        });
-    }
+export function trackStores(client: MatrixClient) {
+    client.store?.on?.("degraded", () => {
+        track("Sync store using IndexedDB degraded to memory");
+    });
 }
 
 /**
@@ -188,16 +187,16 @@ export function trackStores(client) {
  * and if it is true and not crypto data is found, an error is
  * presented to the user.
  *
- * @param {bool} cryptoInited True if crypto has been set up
+ * @param {boolean} cryptoInited True if crypto has been set up
  */
-export function setCryptoInitialised(cryptoInited) {
-    localStorage.setItem("mx_crypto_initialised", cryptoInited);
+export function setCryptoInitialised(cryptoInited: boolean) {
+    localStorage.setItem("mx_crypto_initialised", String(cryptoInited));
 }
 
 /* Simple wrapper functions around IndexedDB.
  */
 
-let idb = null;
+let idb: IDBDatabase = null;
 
 async function idbInit(): Promise<void> {
     if (!indexedDB) {
@@ -206,8 +205,8 @@ async function idbInit(): Promise<void> {
     idb = await new Promise((resolve, reject) => {
         const request = indexedDB.open("matrix-react-sdk", 1);
         request.onerror = reject;
-        request.onsuccess = (event) => { resolve(request.result); };
-        request.onupgradeneeded = (event) => {
+        request.onsuccess = () => { resolve(request.result); };
+        request.onupgradeneeded = () => {
             const db = request.result;
             db.createObjectStore("pickleKey");
             db.createObjectStore("account");
@@ -266,6 +265,6 @@ export async function idbDelete(
         const objectStore = txn.objectStore(table);
         const request = objectStore.delete(key);
         request.onerror = reject;
-        request.onsuccess = (event) => { resolve(); };
+        request.onsuccess = () => { resolve(); };
     });
 }