Conform more of the code base to strict null checking (#10147)

* Conform more of the code base to strict null checking

* More strict fixes

* More strict work

* Fix missing optional type

* Iterate

src/components/views/settings/BridgeTile.tsx

@@ -65,7 +65,7 @@ interface IBridgeStateEvent {
 }
 
 export default class BridgeTile extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const content: IBridgeStateEvent = this.props.ev.getContent();
         // Validate
         if (!content.channel?.id || !content.protocol?.id) {

src/components/views/settings/ChangeDisplayName.tsx

@@ -38,7 +38,7 @@ export default class ChangeDisplayName extends React.Component {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <EditableTextContainer
                 getInitialValue={this.getDisplayName}

src/components/views/settings/ChangePassword.tsx

@@ -376,7 +376,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
         return null;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const rowClassName = this.props.rowClassName;
         const buttonClassName = this.props.buttonClassName;
 

src/components/views/settings/CrossSigningPanel.tsx

@@ -157,7 +157,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const {
             error,
             crossSigningPublicKeysOnDevice,

src/components/views/settings/CryptographyPanel.tsx

@@ -34,7 +34,7 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const client = MatrixClientPeg.get();
         const deviceId = client.deviceId;
         let identityKey = client.getDeviceEd25519Key();

src/components/views/settings/DevicesPanel.tsx

@@ -241,7 +241,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const loadError = <div className={classNames(this.props.className, "error")}>{this.state.deviceLoadError}</div>;
 
         if (this.state.deviceLoadError !== undefined) {

src/components/views/settings/DevicesPanelEntry.tsx

@@ -117,7 +117,7 @@ export default class DevicesPanelEntry extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let iconClass = "";
         let verifyButton: JSX.Element;
         if (this.props.verified !== null) {

src/components/views/settings/EventIndexPanel.tsx

@@ -145,7 +145,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let eventIndexingSettings = null;
         const brand = SdkConfig.get().brand;
 

src/components/views/settings/FontScalingPanel.tsx

@@ -105,7 +105,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
         return { valid: true, feedback: _t("Use between %(min)s pt and %(max)s pt", { min, max }) };
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_SettingsTab_section mx_FontScalingPanel">
                 <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>

src/components/views/settings/ImageSizePanel.tsx

@@ -47,7 +47,7 @@ export default class ImageSizePanel extends React.Component<IProps, IState> {
         SettingsStore.setValue("Images.size", null, SettingLevel.ACCOUNT, newSize);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_SettingsTab_section mx_ImageSizePanel">
                 <span className="mx_SettingsTab_subheading">{_t("Image size in the timeline")}</span>

src/components/views/settings/IntegrationManager.tsx

@@ -85,7 +85,7 @@ export default class IntegrationManager extends React.Component<IProps, IState>
         this.setState({ errored: true });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.props.loading) {
             return (
                 <div className="mx_IntegrationManager_loading">

src/components/views/settings/LayoutSwitcher.tsx

@@ -55,7 +55,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
         this.props.onLayoutChanged(layout);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const ircClasses = classNames("mx_LayoutSwitcher_RadioButton", {
             mx_LayoutSwitcher_RadioButton_selected: this.state.layout == Layout.IRC,
         });

src/components/views/settings/Notifications.tsx

@@ -758,7 +758,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.phase === Phase.Loading) {
             // Ends up default centered
             return <Spinner />;

src/components/views/settings/ProfileSettings.tsx

@@ -160,7 +160,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
         reader.readAsDataURL(file);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const hostingSignupLink = getHostingLink("user-settings");
         let hostingSignup = null;
         if (hostingSignupLink) {

src/components/views/settings/SecureBackupPanel.tsx

@@ -216,7 +216,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
         this.loadBackupStatus();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const {
             loading,
             error,

src/components/views/settings/SetIdServer.tsx

@@ -381,7 +381,7 @@ export default class SetIdServer extends React.Component<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const idServerUrl = this.state.currentClientIdServer;
         let sectionTitle;
         let bodyText;

src/components/views/settings/SpellCheckSettings.tsx

@@ -42,7 +42,7 @@ export class ExistingSpellCheckLanguage extends React.Component<ExistingSpellChe
         return this.props.onRemoved(this.props.language);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_ExistingSpellCheckLanguage">
                 <span className="mx_ExistingSpellCheckLanguage_language">{this.props.language}</span>
@@ -86,7 +86,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
         this.setState({ newLanguage: language });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const existingSpellCheckLanguages = this.props.languages.map((e) => {
             return <ExistingSpellCheckLanguage language={e} onRemoved={this.onRemoved} key={e} />;
         });

src/components/views/settings/account/EmailAddresses.tsx

@@ -90,7 +90,7 @@ export class ExistingEmailAddress extends React.Component<IExistingEmailAddressP
             });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
                 <div className="mx_ExistingEmailAddress">
@@ -236,7 +236,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
             });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const existingEmailElements = this.props.emails.map((e) => {
             return <ExistingEmailAddress email={e} onRemoved={this.onRemoved} key={e.address} />;
         });

src/components/views/settings/account/PhoneNumbers.tsx

@@ -86,7 +86,7 @@ export class ExistingPhoneNumber extends React.Component<IExistingPhoneNumberPro
             });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.verifyRemove) {
             return (
                 <div className="mx_ExistingPhoneNumber">
@@ -241,7 +241,7 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
         this.setState({ phoneCountry: country.iso2 });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const existingPhoneElements = this.props.msisdns.map((p) => {
             return <ExistingPhoneNumber msisdn={p} onRemoved={this.onRemoved} key={p.address} />;
         });

src/components/views/settings/discovery/EmailAddresses.tsx

@@ -197,7 +197,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { address } = this.props.email;
         const { verifying, bound } = this.state;
 
@@ -251,7 +251,7 @@ interface IProps {
 }
 
 export default class EmailAddresses extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let content;
         if (this.props.emails.length > 0) {
             content = this.props.emails.map((e) => {

src/components/views/settings/discovery/PhoneNumbers.tsx

@@ -205,7 +205,7 @@ export class PhoneNumber extends React.Component<IPhoneNumberProps, IPhoneNumber
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { address } = this.props.msisdn;
         const { verifying, bound } = this.state;
 
@@ -266,7 +266,7 @@ interface IProps {
 }
 
 export default class PhoneNumbers extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let content;
         if (this.props.msisdns.length > 0) {
             content = this.props.msisdns.map((e) => {

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.tsx

@@ -96,7 +96,7 @@ export default class AdvancedRoomSettingsTab extends React.Component<IProps, ISt
         this.props.closeSettingsFn();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const isSpace = room.isSpaceRoom();

src/components/views/settings/tabs/room/BridgeSettingsTab.tsx

@@ -49,7 +49,7 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
         return BRIDGE_EVENT_TYPES.map((typeName) => roomState.getStateEvents(typeName)).flat(1);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // This settings tab will only be invoked if the following function returns more
         // than 0 events, so no validation is needed at this stage.
         const bridgeEvents = BridgeSettingsTab.getBridgeStateEvents(this.props.roomId);

src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx

@@ -56,7 +56,7 @@ export default class GeneralRoomSettingsTab extends React.Component<IProps, ISta
         PosthogTrackers.trackInteraction("WebRoomSettingsLeaveButton", ev);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const client = this.context;
         const room = client.getRoom(this.props.roomId);
 

src/components/views/settings/tabs/room/NotificationSettingsTab.tsx

@@ -155,7 +155,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let currentUploadedFile = null;
         if (this.state.uploadedFile) {
             currentUploadedFile = (

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -99,7 +99,7 @@ export class BannedUser extends React.Component<IBannedUserProps> {
             });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let unbanButton;
 
         if (this.props.canUnban) {
@@ -236,7 +236,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const isSpaceRoom = room.isSpaceRoom();

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx

@@ -414,7 +414,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const client = this.context;
         const room = client.getRoom(this.props.roomId);
         const isEncrypted = this.state.encrypted;

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -139,7 +139,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         return (

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -494,7 +494,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const plaf = PlatformPeg.get();
         const supportsMultiLanguageSpellCheck = plaf.supportsSpellCheckSettings();
 

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -206,7 +206,7 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         let faqText = _t(

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -52,7 +52,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
         };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const features = SettingsStore.getFeatureSettingNames();
         const [labs, betas] = features.reduce(
             (arr, f) => {

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.tsx

@@ -246,7 +246,7 @@ export default class MjolnirUserSettingsTab extends React.Component<{}, IState>
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
 
         return (

src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx

@@ -20,7 +20,7 @@ import { _t } from "../../../../../languageHandler";
 import Notifications from "../../Notifications";
 
 export default class NotificationUserSettingsTab extends React.Component {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_SettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Notifications")}</div>

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -151,7 +151,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const useCase = SettingsStore.getValue<UseCase | null>("FTUE.useCaseSelection");
         const roomListSettings = PreferencesUserSettingsTab.ROOM_LIST_SETTINGS
             // Only show the breadcrumbs setting if breadcrumbs v2 is disabled

src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -53,7 +53,7 @@ export class IgnoredUser extends React.Component<IIgnoredUserProps> {
         this.props.onUnignored(this.props.userId);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const id = `mx_SecurityUserSettingsTab_ignoredUser_${this.props.userId}`;
         return (
             <div className="mx_SecurityUserSettingsTab_ignoredUser">
@@ -284,7 +284,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
         this.setState({ showLoginWithQR: null });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const secureBackup = (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Secure Backup")}</span>

src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx

@@ -121,7 +121,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let requestButton = null;
         let speakerDropdown = null;
         let microphoneDropdown = null;