Merge remote-tracking branch 'origin/develop' into feat/add-message-edition-wysiwyg-composer

src/components/views/auth/LoginWithQR.tsx

@@ -370,7 +370,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_LoginWithQR">
+            <div data-testid="login-with-qr" className="mx_LoginWithQR">
                 <div className={centreTitle ? "mx_LoginWithQR_centreTitle" : ""}>
                     { backButton ?
                         <AccessibleButton

src/components/views/context_menus/ThreadListContextMenu.tsx

@@ -29,9 +29,9 @@ import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 
-interface IProps {
+export interface ThreadListContextMenuProps {
     mxEvent: MatrixEvent;
-    permalinkCreator: RoomPermalinkCreator;
+    permalinkCreator?: RoomPermalinkCreator;
     onMenuToggle?: (open: boolean) => void;
 }
 
@@ -43,7 +43,7 @@ const contextMenuBelow = (elementRect: DOMRect) => {
     return { left, top, chevronFace };
 };
 
-const ThreadListContextMenu: React.FC<IProps> = ({
+const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
     mxEvent,
     permalinkCreator,
     onMenuToggle,
@@ -64,12 +64,14 @@ const ThreadListContextMenu: React.FC<IProps> = ({
         closeThreadOptions();
     }, [mxEvent, closeThreadOptions]);
 
-    const copyLinkToThread = useCallback(async (evt: ButtonEvent) => {
-        evt.preventDefault();
-        evt.stopPropagation();
-        const matrixToUrl = permalinkCreator.forEvent(mxEvent.getId());
-        await copyPlaintext(matrixToUrl);
-        closeThreadOptions();
+    const copyLinkToThread = useCallback(async (evt: ButtonEvent | undefined) => {
+        if (permalinkCreator) {
+            evt?.preventDefault();
+            evt?.stopPropagation();
+            const matrixToUrl = permalinkCreator.forEvent(mxEvent.getId());
+            await copyPlaintext(matrixToUrl);
+            closeThreadOptions();
+        }
     }, [mxEvent, closeThreadOptions, permalinkCreator]);
 
     useEffect(() => {
@@ -87,6 +89,7 @@ const ThreadListContextMenu: React.FC<IProps> = ({
             title={_t("Thread options")}
             isExpanded={menuDisplayed}
             inputRef={button}
+            data-testid="threadlist-dropdown-button"
         />
         { menuDisplayed && (<IconizedContextMenu
             onFinished={closeThreadOptions}
@@ -102,11 +105,14 @@ const ThreadListContextMenu: React.FC<IProps> = ({
                      label={_t("View in room")}
                      iconClassName="mx_ThreadPanel_viewInRoom"
                  /> }
-                <IconizedContextMenuOption
-                    onClick={(e) => copyLinkToThread(e)}
-                    label={_t("Copy link to thread")}
-                    iconClassName="mx_ThreadPanel_copyLinkToThread"
-                />
+                { permalinkCreator &&
+                    <IconizedContextMenuOption
+                        data-testid="copy-thread-link"
+                        onClick={(e) => copyLinkToThread(e)}
+                        label={_t("Copy link to thread")}
+                        iconClassName="mx_ThreadPanel_copyLinkToThread"
+                    />
+                }
             </IconizedContextMenuOptionList>
         </IconizedContextMenu>) }
     </React.Fragment>;

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx

@@ -21,10 +21,11 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import { OIDCState, WidgetPermissionStore } from "../../../stores/widgets/WidgetPermissionStore";
+import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore";
 import { IDialogProps } from "./IDialogProps";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 interface IProps extends IDialogProps {
     widget: Widget;
@@ -57,7 +58,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
         if (this.state.rememberSelection) {
             logger.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
 
-            WidgetPermissionStore.instance.setOIDCState(
+            SdkContextClass.instance.widgetPermissionStore.setOIDCState(
                 this.props.widget, this.props.widgetKind, this.props.inRoomId,
                 allowed ? OIDCState.Allowed : OIDCState.Denied,
             );

src/components/views/elements/Spinner.tsx

@@ -40,6 +40,7 @@ export default class Spinner extends React.PureComponent<IProps> {
                     style={{ width: w, height: h }}
                     aria-label={_t("Loading...")}
                     role="progressbar"
+                    data-testid="spinner"
                 />
             </div>
         );

src/components/views/elements/Tooltip.tsx

@@ -57,7 +57,7 @@ type State = Partial<Pick<CSSProperties, "display" | "right" | "top" | "transfor
 
 export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
     private static container: HTMLElement;
-    private parent: Element;
+    private parent: Element | null = null;
 
     // XXX: This is because some components (Field) are unable to `import` the Tooltip class,
     // so we expose the Alignment options off of us statically.
@@ -87,7 +87,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
             capture: true,
         });
 
-        this.parent = ReactDOM.findDOMNode(this).parentNode as Element;
+        this.parent = ReactDOM.findDOMNode(this)?.parentNode as Element ?? null;
 
         this.updatePosition();
     }
@@ -109,7 +109,7 @@ export default class Tooltip extends React.PureComponent<ITooltipProps, State> {
     // positioned, also taking into account any window zoom
     private updatePosition = (): void => {
         // When the tooltip is hidden, no need to thrash the DOM with `style` attribute updates (performance)
-        if (!this.props.visible) return;
+        if (!this.props.visible || !this.parent) return;
 
         const parentBox = this.parent.getBoundingClientRect();
         const width = UIStore.instance.windowWidth;

src/components/views/rooms/BasicMessageComposer.tsx

@@ -31,7 +31,6 @@ import Autocomplete, { generateCompletionDomId } from '../rooms/Autocomplete';
 import { getAutoCompleteCreator, Part, Type } from '../../../editor/parts';
 import { parseEvent, parsePlainTextMessage } from '../../../editor/deserialize';
 import { renderModel } from '../../../editor/render';
-import TypingStore from "../../../stores/TypingStore";
 import SettingsStore from "../../../settings/SettingsStore";
 import { IS_MAC, Key } from "../../../Keyboard";
 import { EMOTICON_TO_EMOJI } from "../../../emoji";
@@ -47,6 +46,7 @@ import { getKeyBindingsManager } from '../../../KeyBindingsManager';
 import { ALTERNATE_KEY_NAME, KeyBindingAction } from '../../../accessibility/KeyboardShortcuts';
 import { _t } from "../../../languageHandler";
 import { linkify } from '../../../linkify-matrix';
+import { SdkContextClass } from '../../../contexts/SDKContext';
 
 // matches emoticons which follow the start of a line or whitespace
 const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s|:^$');
@@ -246,7 +246,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 isTyping = false;
             }
         }
-        TypingStore.sharedInstance().setSelfTyping(
+        SdkContextClass.instance.typingStore.setSelfTyping(
             this.props.room.roomId,
             this.props.threadId,
             isTyping,
@@ -789,6 +789,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 aria-activedescendant={activeDescendant}
                 dir="auto"
                 aria-disabled={this.props.disabled}
+                data-testid="basicmessagecomposer"
             />
         </div>);
     }

src/components/views/rooms/MessageComposer.tsx

@@ -74,6 +74,7 @@ function SendButton(props: ISendButtonProps) {
             className="mx_MessageComposer_sendMessage"
             onClick={props.onClick}
             title={props.title ?? _t('Send message')}
+            data-testid="sendmessagebtn"
         />
     );
 }

src/components/views/rooms/RoomListHeader.tsx

@@ -379,7 +379,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
             isExpanded={mainMenuDisplayed}
             className="mx_RoomListHeader_contextMenuButton"
             title={activeSpace
-                ? _t("%(spaceName)s menu", { spaceName })
+                ? _t("%(spaceName)s menu", { spaceName: spaceName ?? activeSpace.name })
                 : _t("Home options")}
         >
             { title }