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

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>