Remove sdk.getComponent() where possible (#7091)

src/SecurityManager.ts

@@ -33,6 +33,7 @@ import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
 
 import { logger } from "matrix-js-sdk/src/logger";
 import { ComponentType } from "react";
+import QuestionDialog from "./components/views/dialogs/QuestionDialog";
 
 // This stores the secret storage private keys in memory for the JS SDK. This is
 // only meant to act as a cache to avoid prompting the user multiple times
@@ -72,7 +73,6 @@ export class AccessCancelledError extends Error {
 }
 
 async function confirmToDismiss(): Promise<boolean> {
-    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
     const [sure] = await Modal.createDialog(QuestionDialog, {
         title: _t("Cancel entering passphrase?"),
         description: _t("Are you sure you want to cancel entering passphrase?"),

src/components/structures/GroupFilterPanel.tsx

@@ -21,7 +21,6 @@ import GroupFilterOrderStore from '../../stores/GroupFilterOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
 
-import * as sdk from '../../index';
 import dis from '../../dispatcher/dispatcher';
 import { _t } from '../../languageHandler';
 
@@ -32,6 +31,8 @@ import SettingsStore from "../../settings/SettingsStore";
 import UserTagTile from "../views/elements/UserTagTile";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import UIStore from "../../stores/UIStore";
+import DNDTagTile from "../views/elements/DNDTagTile";
+import ActionButton from "../views/elements/ActionButton";
 
 interface IGroupFilterPanelProps {
 
@@ -129,9 +130,6 @@ class GroupFilterPanel extends React.Component<IGroupFilterPanelProps, IGroupFil
     }
 
     public render() {
-        const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
-        const ActionButton = sdk.getComponent('elements.ActionButton');
-
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
                 key={tag}

src/components/structures/auth/CompleteSecurity.tsx

@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import SetupEncryptionBody from "./SetupEncryptionBody";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AccessibleButton from '../../views/elements/AccessibleButton';
+import CompleteSecurityBody from "../../views/auth/CompleteSecurityBody";
+import AuthPage from "../../views/auth/AuthPage";
 
 interface IProps {
     onFinished: () => void;
@@ -58,8 +59,6 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const AuthPage = sdk.getComponent("auth.AuthPage");
-        const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody");
         const { phase, lostKeys } = this.state;
         let icon;
         let title;

src/components/structures/auth/ForgotPassword.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 
 import React from 'react';
 import { _t, _td } from '../../../languageHandler';
-import * as sdk from '../../../index';
 import Modal from "../../../Modal";
 import PasswordReset from "../../../PasswordReset";
 import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils";
@@ -33,6 +32,12 @@ import { PASSWORD_MIN_SCORE } from '../../views/auth/RegistrationForm';
 import { IValidationResult } from "../../views/elements/Validation";
 import InlineSpinner from '../../views/elements/InlineSpinner';
 import { logger } from "matrix-js-sdk/src/logger";
+import Spinner from "../../views/elements/Spinner";
+import QuestionDialog from "../../views/dialogs/QuestionDialog";
+import ErrorDialog from "../../views/dialogs/ErrorDialog";
+import Field from "../../views/elements/Field";
+import AuthHeader from "../../views/auth/AuthHeader";
+import AuthBody from "../../views/auth/AuthBody";
 
 enum Phase {
     // Show the forgot password inputs
@@ -184,7 +189,6 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
         } else if (this.state.password !== this.state.password2) {
             this.showErrorDialog(_t('New passwords must match each other.'));
         } else {
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createTrackedDialog('Forgot Password Warning', '', QuestionDialog, {
                 title: _t('Warning!'),
                 description:
@@ -219,7 +223,6 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
     };
 
     public showErrorDialog(description: string, title?: string) {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
             title,
             description,
@@ -250,8 +253,6 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
     }
 
     renderForgot() {
-        const Field = sdk.getComponent('elements.Field');
-
         let errorText = null;
         const err = this.state.errorText;
         if (err) {
@@ -334,7 +335,6 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
     }
 
     renderSendingEmail() {
-        const Spinner = sdk.getComponent("elements.Spinner");
         return <Spinner />;
     }
 
@@ -371,9 +371,6 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
     }
 
     render() {
-        const AuthHeader = sdk.getComponent("auth.AuthHeader");
-        const AuthBody = sdk.getComponent("auth.AuthBody");
-
         let resetPasswordJsx;
         switch (this.state.phase) {
             case Phase.Forgot:

src/components/views/dialogs/InfoDialog.tsx

@@ -44,6 +44,7 @@ export default class InfoDialog extends React.Component<IProps> {
     };
 
     render() {
+        // FIXME: Using a regular import will break the app
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (

src/components/views/dialogs/IntegrationsImpossibleDialog.tsx

@@ -17,9 +17,10 @@ limitations under the License.
 import React from 'react';
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import * as sdk from "../../../index";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IDialogProps } from "./IDialogProps";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
 
 interface IProps extends IDialogProps {}
 
@@ -31,8 +32,6 @@ export default class IntegrationsImpossibleDialog extends React.Component<IProps
 
     public render(): JSX.Element {
         const brand = SdkConfig.get().brand;
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
         return (
             <BaseDialog

src/components/views/dialogs/LogoutDialog.tsx

@@ -18,7 +18,6 @@ limitations under the License.
 import React, { ComponentType } from 'react';
 import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
 import Modal from '../../../Modal';
-import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -26,6 +25,10 @@ import RestoreKeyBackupDialog from './security/RestoreKeyBackupDialog';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import QuestionDialog from "./QuestionDialog";
+import BaseDialog from "./BaseDialog";
+import Spinner from "../elements/Spinner";
+import DialogButtons from "../elements/DialogButtons";
 
 interface IProps {
     onFinished: (success: boolean) => void;
@@ -133,8 +136,6 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
 
     render() {
         if (this.state.shouldLoadBackupStatus) {
-            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
             const description = <div>
                 <p>{ _t(
                     "Encrypted messages are secured with end-to-end encryption. " +
@@ -145,11 +146,8 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
 
             let dialogContent;
             if (this.state.loading) {
-                const Spinner = sdk.getComponent('views.elements.Spinner');
-
                 dialogContent = <Spinner />;
             } else {
-                const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
                 let setupButtonCaption;
                 if (this.state.backupInfo) {
                     setupButtonCaption = _t("Connect this session to Key Backup");
@@ -192,7 +190,6 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
                 { dialogContent }
             </BaseDialog>);
         } else {
-            const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
             return (<QuestionDialog
                 hasCancelButton={true}
                 title={_t("Sign out")}

src/components/views/messages/MStickerBody.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from 'react';
 import MImageBody from './MImageBody';
-import * as sdk from '../../../index';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
+import Tooltip from "../elements/Tooltip";
 
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
@@ -53,7 +53,6 @@ export default class MStickerBody extends MImageBody {
 
         if (!content || !content.body || !content.info || !content.info.w) return null;
 
-        const Tooltip = sdk.getComponent('elements.Tooltip');
         return <div style={{ left: content.info.w + 'px' }} className="mx_MStickerBody_tooltip">
             <Tooltip label={content.body} />
         </div>;

src/components/views/messages/MessageActionBar.tsx

@@ -21,7 +21,6 @@ import { EventStatus, MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import type { Relations } from 'matrix-js-sdk/src/models/relations';
 
 import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { Action } from '../../../dispatcher/actions';
 import { aboveLeftOf, ContextMenu, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
@@ -42,6 +41,7 @@ import SettingsStore from '../../../settings/SettingsStore';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import ReplyChain from '../elements/ReplyChain';
 import { dispatchShowThreadEvent } from '../../../dispatcher/dispatch-actions/threads';
+import ReactionPicker from "../emojipicker/ReactionPicker";
 
 interface IOptionsButtonProps {
     mxEvent: MatrixEvent;
@@ -107,7 +107,6 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
     let contextMenu;
     if (menuDisplayed) {
         const buttonRect = button.current.getBoundingClientRect();
-        const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
         contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
             <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
         </ContextMenu>;

src/components/views/rooms/AppsDrawer.tsx

@@ -21,7 +21,6 @@ import { Resizable } from "re-resizable";
 
 import AppTile from '../elements/AppTile';
 import dis from '../../../dispatcher/dispatcher';
-import * as sdk from '../../../index';
 import * as ScalarMessaging from '../../../ScalarMessaging';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
@@ -37,6 +36,7 @@ import UIStore from "../../../stores/UIStore";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { IApp } from "../../../stores/WidgetStore";
 import { ActionPayload } from "../../../dispatcher/payloads";
+import Spinner from "../elements/Spinner";
 
 interface IProps {
     userId: string;
@@ -237,8 +237,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
                 WidgetUtils.getRoomWidgets(this.props.room),
             )
         ) {
-            const Loader = sdk.getComponent("elements.Spinner");
-            spinner = <Loader />;
+            spinner = <Spinner />;
         }
 
         const classes = classNames({

src/components/views/rooms/RoomPreviewBar.tsx

@@ -21,7 +21,6 @@ import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { IJoinRuleEventContent, JoinRule } from "matrix-js-sdk/src/@types/partials";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
-import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
@@ -37,6 +36,7 @@ import Spinner from "../elements/Spinner";
 import AccessibleButton from "../elements/AccessibleButton";
 import { UIFeature } from "../../../settings/UIFeature";
 import SettingsStore from "../../../settings/SettingsStore";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 const MemberEventHtmlReasonField = "io.element.html_reason";
 
@@ -465,7 +465,6 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
                 break;
             }
             case MessageCase.Invite: {
-                const RoomAvatar = sdk.getComponent("views.avatars.RoomAvatar");
                 const oobData = Object.assign({}, this.props.oobData, {
                     avatarUrl: this.communityProfile().avatarMxc,
                 });

src/components/views/settings/CrossSigningPanel.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
-import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import Spinner from '../elements/Spinner';
 import InteractiveAuthDialog from '../dialogs/InteractiveAuthDialog';
@@ -29,6 +28,7 @@ import SetupEncryptionDialog from '../dialogs/security/SetupEncryptionDialog';
 import { accessSecretStorage } from '../../../SecurityManager';
 
 import { logger } from "matrix-js-sdk/src/logger";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IState {
     error?: Error;
@@ -165,7 +165,6 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
     };
 
     public render() {
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         const {
             error,
             crossSigningPublicKeysOnDevice,

src/components/views/terms/InlineTermsAgreement.tsx

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from "react";
 import { _t, pickBestLanguage } from "../../../languageHandler";
-import * as sdk from "../../..";
 import { objectClone } from "../../../utils/objects";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     policiesAndServicePairs: any[];
@@ -113,7 +113,6 @@ export default class InlineTermsAgreement extends React.Component<IProps, IState
     }
 
     public render(): React.ReactNode {
-        const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
         const hasUnchecked = !!this.state.policies.some(p => !p.checked);
 
         return (

src/components/views/verification/VerificationCancelled.tsx

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import DialogButtons from "../elements/DialogButtons";
 
 interface IProps {
     onDone: () => void;
@@ -26,7 +26,6 @@ interface IProps {
 @replaceableComponent("views.verification.VerificationCancelled")
 export default class VerificationCancelled extends React.Component<IProps> {
     public render(): React.ReactNode {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             <p>{ _t(
                 "The other party cancelled the verification.",

src/components/views/verification/VerificationComplete.tsx

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import DialogButtons from "../elements/DialogButtons";
 
 interface IProps {
     onDone: () => void;
@@ -26,7 +26,6 @@ interface IProps {
 @replaceableComponent("views.verification.VerificationComplete")
 export default class VerificationComplete extends React.Component<IProps> {
     public render(): React.ReactNode {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
             <h2>{ _t("Verified!") }</h2>
             <p>{ _t("You've successfully verified this user.") }</p>