Use the JoinRuleSettings component for the guest link access prompt.

As part of the effort to make room state more reliable, we're looking at changing how state is communicated to widgets. Rather than passing all state events from the timeline through (and forcing the widget to assume that they belong to the server's view of the room state), let's try passing only those state events through that we believe actually belong to the server's view of the room state. When combined with a matrix-js-sdk that supports MSC4222, this improves the reliability of state tracking for widgets.

We would like to later explore a solution that has a separate 'state update' widget action in addition to the generic 'incoming timeline event' widget action, to make the widget API better reflect the shape of the data sources that drive it (like the sync responses of Simplified Sliding Sync or MSC4222).

res/css/_common.pcss

@@ -596,7 +596,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -616,14 +616,16 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
+        .mx_ShareDialog button
+    ):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -635,7 +637,7 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -648,7 +650,7 @@ legend {
 .mx_Dialog_buttons
     button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
         .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button),
+    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -664,7 +666,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/views/dialogs/_ShareDialog.pcss

@@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_ShareDialog hr {
-    margin-top: 25px;
-    margin-bottom: 25px;
-    border-color: $light-fg-color;
-}
+.mx_ShareDialog {
+    /* Value from figma design */
+    width: 416px;
 
-.mx_ShareDialog .mx_ShareDialog_content {
-    margin: 10px 0;
+    .mx_Dialog_header {
+        text-align: center;
+        margin-bottom: var(--cpd-space-6x);
+        /* Override dialog header padding to able to center it */
+        padding-inline-end: 0;
+    }
 
-    .mx_CopyableText {
-        width: unset; /* full width */
+    .mx_ShareDialog_content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: center;
 
-        > a {
-            text-decoration: none;
-            flex-shrink: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+        .mx_ShareDialog_top {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            align-items: center;
+            width: 100%;
+
+            span {
+                text-align: center;
+                font: var(--cpd-font-body-sm-semibold);
+                color: var(--cpd-color-text-secondary);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                width: 100%;
+            }
+        }
+
+        label {
+            display: inline-flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+            align-items: center;
+            font: var(--cpd-font-body-md-medium);
+        }
+
+        button {
+            width: 100%;
+        }
+
+        .mx_ShareDialog_social {
+            display: flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+
+            a {
+                /* 48px on figma but we need to add the border size */
+                width: 46px;
+                height: 46px;
+                border-radius: 99px;
+                border: 1px solid var(--cpd-color-border-interactive-secondary);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
         }
     }
 }
-
-.mx_ShareDialog_split {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.mx_ShareDialog_qrcode_container {
-    float: left;
-    height: 256px;
-    width: 256px;
-    margin-right: 64px;
-}
-
-.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
-    width: 299px;
-}
-
-.mx_ShareDialog_social_container {
-    display: inline-block;
-}
-
-.mx_ShareDialog_social_icon {
-    display: inline-grid;
-    margin-right: 10px;
-    margin-bottom: 10px;
-}

res/css/views/settings/_JoinRuleSettings.pcss

@@ -53,6 +53,14 @@ Please see LICENSE files in the repository root for full details.
         display: block;
     }
 
+    &.mx_StyledRadioButton_disabled {
+        opacity: 0.5;
+    }
+
+    &.mx_StyledRadioButton_disabled + span {
+        opacity: 0.5;
+    }
+
     & + span {
         display: inline-block;
         margin-left: 34px;
@@ -71,3 +79,7 @@ Please see LICENSE files in the repository root for full details.
     font: var(--cpd-font-body-md-regular);
     margin-top: var(--cpd-space-2x);
 }
+
+.mx_JoinRuleSettings_recommended {
+    color: $accent-1000;
+}

src/components/views/context_menus/MessageContextMenu.tsx

@@ -38,7 +38,7 @@ import ContextMenu, { toRightOf, MenuProps } from "../../structures/ContextMenu"
 import ReactionPicker from "../emojipicker/ReactionPicker";
 import ViewSource from "../../structures/ViewSource";
 import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import EndPollDialog from "../dialogs/EndPollDialog";
 import { isPollEnded } from "../messages/MPollBody";

src/components/views/dialogs/ShareDialog.tsx

@@ -7,22 +7,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as React from "react";
+import React, { JSX, useMemo, useRef, useState } from "react";
 import { Room, RoomMember, MatrixEvent, User } from "matrix-js-sdk/src/matrix";
+import { Checkbox, Button } from "@vector-im/compound-web";
+import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 
 import { _t } from "../../../languageHandler";
 import QRCode from "../elements/QRCode";
 import { RoomPermalinkCreator, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
-import { selectText } from "../../../utils/strings";
-import StyledCheckbox from "../elements/StyledCheckbox";
-import SettingsStore from "../../../settings/SettingsStore";
+import { copyPlaintext } from "../../../utils/strings";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
-import CopyableText from "../elements/CopyableText";
 import { XOR } from "../../../@types/common";
+import { useSettingValue } from "../../../hooks/useSettings.ts";
 
 /* eslint-disable @typescript-eslint/no-require-imports */
-const socials = [
+const SOCIALS = [
     {
         name: "Facebook",
         img: require("../../../../res/img/social/facebook.png"),
@@ -33,11 +34,7 @@ const socials = [
         img: require("../../../../res/img/social/twitter-2.png"),
         url: (url: string) => `https://twitter.com/home?status=${url}`,
     },
-    /* // icon missing
-        name: 'Google Plus',
-        img: 'img/social/',
-        url: (url) => `https://plus.google.com/share?url=${url}`,
-    },*/ {
+    {
         name: "LinkedIn",
         img: require("../../../../res/img/social/linkedin.png"),
         url: (url: string) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
@@ -78,160 +75,153 @@ interface Props extends BaseProps {
      * A <u>matrix.to</u> link will be generated out of it if it's not already a url.
      */
     target: Room | User | RoomMember | URL;
+    /**
+     * Optional when the target is a Room, User, RoomMember or a URL.
+     * Mandatory when the target is a MatrixEvent.
+     */
     permalinkCreator?: RoomPermalinkCreator;
 }
 
 interface EventProps extends BaseProps {
+    /**
+     * The target to link to.
+     */
     target: MatrixEvent;
+    /**
+     * Optional when the target is a Room, User, RoomMember or a URL.
+     * Mandatory when the target is a MatrixEvent.
+     */
     permalinkCreator: RoomPermalinkCreator;
 }
 
-interface IState {
-    linkSpecificEvent: boolean;
-    permalinkCreator: RoomPermalinkCreator | null;
+type ShareDialogProps = XOR<Props, EventProps>;
+
+/**
+ * A dialog to share a link to a room, user, room member or a matrix event.
+ */
+export function ShareDialog({ target, customTitle, onFinished, permalinkCreator }: ShareDialogProps): JSX.Element {
+    const showQrCode = useSettingValue<boolean>(UIFeature.ShareQRCode);
+    const showSocials = useSettingValue<boolean>(UIFeature.ShareSocial);
+
+    const timeoutIdRef = useRef<number>();
+    const [isCopied, setIsCopied] = useState(false);
+
+    const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent);
+    const { title, url, checkboxLabel } = useTargetValues(target, linkToSpecificEvent, permalinkCreator);
+    const newTitle = customTitle ?? title;
+
+    return (
+        <BaseDialog
+            title={newTitle}
+            className="mx_ShareDialog"
+            contentId="mx_Dialog_content"
+            onFinished={onFinished}
+            fixedWidth={false}
+        >
+            <div className="mx_ShareDialog_content">
+                <div className="mx_ShareDialog_top">
+                    {showQrCode && <QRCode data={url} width={200} />}
+                    <span>{url}</span>
+                </div>
+                {checkboxLabel && (
+                    <label>
+                        <Checkbox
+                            defaultChecked={linkToSpecificEvent}
+                            onChange={(evt) => setLinkToSpecificEvent(evt.target.checked)}
+                        />
+                        {checkboxLabel}
+                    </label>
+                )}
+                <Button
+                    Icon={isCopied ? CheckIcon : LinkIcon}
+                    onClick={async () => {
+                        clearTimeout(timeoutIdRef.current);
+                        await copyPlaintext(url);
+                        setIsCopied(true);
+                        timeoutIdRef.current = setTimeout(() => setIsCopied(false), 2000);
+                    }}
+                >
+                    {isCopied ? _t("share|link_copied") : _t("action|copy_link")}
+                </Button>
+                {showSocials && <SocialLinks url={url} />}
+            </div>
+        </BaseDialog>
+    );
 }
 
-export default class ShareDialog extends React.PureComponent<XOR<Props, EventProps>, IState> {
-    public constructor(props: XOR<Props, EventProps>) {
-        super(props);
+/**
+ * Social links to share the link on different platforms.
+ */
+interface SocialLinksProps {
+    /**
+     * The URL to share.
+     */
+    url: string;
+}
 
-        let permalinkCreator: RoomPermalinkCreator | null = null;
-        if (props.target instanceof Room) {
-            permalinkCreator = new RoomPermalinkCreator(props.target);
-            permalinkCreator.load();
+/**
+ * The socials to share the link on.
+ */
+function SocialLinks({ url }: SocialLinksProps): JSX.Element {
+    return (
+        <div className="mx_ShareDialog_social">
+            {SOCIALS.map((social) => (
+                <a
+                    key={social.name}
+                    href={social.url(url)}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    title={social.name}
+                >
+                    <img src={social.img} alt={social.name} />
+                </a>
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Get the title, url and checkbox label for the dialog based on the target.
+ * @param target
+ * @param linkToSpecificEvent
+ * @param permalinkCreator
+ */
+function useTargetValues(
+    target: ShareDialogProps["target"],
+    linkToSpecificEvent: boolean,
+    permalinkCreator?: RoomPermalinkCreator,
+): { title: string; url: string; checkboxLabel?: string } {
+    return useMemo(() => {
+        if (target instanceof URL) return { title: _t("share|title_link"), url: target.toString() };
+        if (target instanceof User || target instanceof RoomMember)
+            return {
+                title: _t("share|title_user"),
+                url: makeUserPermalink(target.userId),
+            };
+
+        if (target instanceof Room) {
+            const title = _t("share|title_room");
+            const newPermalinkCreator = new RoomPermalinkCreator(target);
+            newPermalinkCreator.load();
+
+            const events = target.getLiveTimeline().getEvents();
+            return {
+                title,
+                url: linkToSpecificEvent
+                    ? newPermalinkCreator.forEvent(events[events.length - 1].getId()!)
+                    : newPermalinkCreator.forShareableRoom(),
+                ...(events.length > 0 && { checkboxLabel: _t("share|permalink_most_recent") }),
+            };
         }
 
-        this.state = {
-            // MatrixEvent defaults to share linkSpecificEvent
-            linkSpecificEvent: this.props.target instanceof MatrixEvent,
-            permalinkCreator,
+        // MatrixEvent is remaining and should have a permalinkCreator
+        const url = linkToSpecificEvent
+            ? permalinkCreator!.forEvent(target.getId()!)
+            : permalinkCreator!.forShareableRoom();
+        return {
+            title: _t("share|title_message"),
+            url,
+            checkboxLabel: _t("share|permalink_message"),
         };
-    }
-
-    public static onLinkClick(e: React.MouseEvent): void {
-        e.preventDefault();
-        selectText(e.currentTarget);
-    }
-
-    private onLinkSpecificEventCheckboxClick = (): void => {
-        this.setState({
-            linkSpecificEvent: !this.state.linkSpecificEvent,
-        });
-    };
-
-    private getUrl(): string {
-        if (this.props.target instanceof URL) {
-            return this.props.target.toString();
-        } else if (this.props.target instanceof Room) {
-            if (this.state.linkSpecificEvent) {
-                const events = this.props.target.getLiveTimeline().getEvents();
-                return this.state.permalinkCreator!.forEvent(events[events.length - 1].getId()!);
-            } else {
-                return this.state.permalinkCreator!.forShareableRoom();
-            }
-        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
-            return makeUserPermalink(this.props.target.userId);
-        } else if (this.state.linkSpecificEvent) {
-            return this.props.permalinkCreator!.forEvent(this.props.target.getId()!);
-        } else {
-            return this.props.permalinkCreator!.forShareableRoom();
-        }
-    }
-
-    public render(): React.ReactNode {
-        let title: string | undefined;
-        let checkbox: JSX.Element | undefined;
-
-        if (this.props.target instanceof URL) {
-            title = this.props.customTitle ?? _t("share|title_link");
-        } else if (this.props.target instanceof Room) {
-            title = this.props.customTitle ?? _t("share|title_room");
-
-            const events = this.props.target.getLiveTimeline().getEvents();
-            if (events.length > 0) {
-                checkbox = (
-                    <div>
-                        <StyledCheckbox
-                            checked={this.state.linkSpecificEvent}
-                            onChange={this.onLinkSpecificEventCheckboxClick}
-                        >
-                            {_t("share|permalink_most_recent")}
-                        </StyledCheckbox>
-                    </div>
-                );
-            }
-        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
-            title = this.props.customTitle ?? _t("share|title_user");
-        } else if (this.props.target instanceof MatrixEvent) {
-            title = this.props.customTitle ?? _t("share|title_message");
-            checkbox = (
-                <div>
-                    <StyledCheckbox
-                        checked={this.state.linkSpecificEvent}
-                        onChange={this.onLinkSpecificEventCheckboxClick}
-                    >
-                        {_t("share|permalink_message")}
-                    </StyledCheckbox>
-                </div>
-            );
-        }
-
-        const matrixToUrl = this.getUrl();
-        const encodedUrl = encodeURIComponent(matrixToUrl);
-
-        const showQrCode = SettingsStore.getValue(UIFeature.ShareQRCode);
-        const showSocials = SettingsStore.getValue(UIFeature.ShareSocial);
-
-        let qrSocialSection;
-        if (showQrCode || showSocials) {
-            qrSocialSection = (
-                <>
-                    <hr />
-                    <div className="mx_ShareDialog_split">
-                        {showQrCode && (
-                            <div className="mx_ShareDialog_qrcode_container">
-                                <QRCode data={matrixToUrl} width={256} />
-                            </div>
-                        )}
-                        {showSocials && (
-                            <div className="mx_ShareDialog_social_container">
-                                {socials.map((social) => (
-                                    <a
-                                        rel="noreferrer noopener"
-                                        target="_blank"
-                                        key={social.name}
-                                        title={social.name}
-                                        href={social.url(encodedUrl)}
-                                        className="mx_ShareDialog_social_icon"
-                                    >
-                                        <img src={social.img} alt={social.name} height={64} width={64} />
-                                    </a>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                </>
-            );
-        }
-
-        return (
-            <BaseDialog
-                title={title}
-                className="mx_ShareDialog"
-                contentId="mx_Dialog_content"
-                onFinished={this.props.onFinished}
-            >
-                {this.props.subtitle && <p>{this.props.subtitle}</p>}
-                <div className="mx_ShareDialog_content">
-                    <CopyableText getTextToCopy={() => matrixToUrl}>
-                        <a title={_t("share|link_title")} href={matrixToUrl} onClick={ShareDialog.onLinkClick}>
-                            {matrixToUrl}
-                        </a>
-                    </CopyableText>
-                    {checkbox}
-                    {qrSocialSection}
-                </div>
-            </BaseDialog>
-        );
-    }
+    }, [target, linkToSpecificEvent, permalinkCreator]);
 }

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -47,7 +47,7 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import Modal from "../../../Modal";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";

src/components/views/right_panel/UserInfo.tsx

@@ -63,7 +63,7 @@ import PowerSelector from "../elements/PowerSelector";
 import MemberAvatar from "../avatars/MemberAvatar";
 import PresenceLabel from "../rooms/PresenceLabel";
 import BulkRedactDialog from "../dialogs/BulkRedactDialog";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";

src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx

@@ -12,12 +12,12 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
 
 import Modal from "../../../../Modal";
-import ShareDialog from "../../dialogs/ShareDialog";
+import { ShareDialog } from "../../dialogs/ShareDialog";
 import { _t } from "../../../../languageHandler";
-import SettingsStore from "../../../../settings/SettingsStore";
 import { calculateRoomVia } from "../../../../utils/permalinks/Permalinks";
 import BaseDialog from "../../dialogs/BaseDialog";
 import { useGuestAccessInformation } from "../../../../hooks/room/useGuestAccessInformation";
+import JoinRuleSettings from "../../settings/JoinRuleSettings";
 
 /**
  * Display a button to open a dialog to share a link to the call using a element call guest spa url (`element_call:guest_spa_url` in the EW config).
@@ -99,7 +99,6 @@ export const JoinRuleDialog: React.FC<{
     room: Room;
     canInvite: boolean;
 }> = ({ onFinished, room, canInvite }) => {
-    const askToJoinEnabled = SettingsStore.getValue("feature_ask_to_join");
     const [isUpdating, setIsUpdating] = React.useState<undefined | JoinRule>(undefined);
     const changeJoinRule = useCallback(
         async (newRule: JoinRule) => {
@@ -120,27 +119,24 @@ export const JoinRuleDialog: React.FC<{
     );
     return (
         <BaseDialog title={_t("update_room_access_modal|title")} onFinished={onFinished} className="mx_JoinRuleDialog">
-            <p>{_t("update_room_access_modal|description")}</p>
-            <div className="mx_JoinRuleDialogButtons">
-                {askToJoinEnabled && canInvite && (
-                    <Button
-                        kind="secondary"
-                        className="mx_Dialog_nonDialogButton"
-                        disabled={isUpdating === JoinRule.Knock}
-                        onClick={() => changeJoinRule(JoinRule.Knock)}
-                    >
-                        {_t("action|ask_to_join")}
-                    </Button>
-                )}
-                <Button
-                    className="mx_Dialog_nonDialogButton"
-                    kind="destructive"
-                    disabled={isUpdating === JoinRule.Public}
-                    onClick={() => changeJoinRule(JoinRule.Public)}
-                >
-                    {_t("common|public")}
-                </Button>
-            </div>
+            <p>{_t("update_room_access_modal|description", {}, { b: (sub) => <strong>{sub}</strong> })}</p>
+            <p>
+                {_t("update_room_access_modal|revert_access_description", {}, { b: (sub) => <strong>{sub}</strong> })}
+            </p>
+            <JoinRuleSettings
+                recommendedOption={JoinRule.Knock}
+                room={room}
+                disabledOptions={new Set([JoinRule.Invite, JoinRule.Private, JoinRule.Restricted])}
+                hiddenOptions={new Set([JoinRule.Restricted])}
+                beforeChange={async (newRule) => {
+                    await changeJoinRule(newRule).catch(() => {
+                        return false;
+                    });
+                    return true;
+                }}
+                closeSettingsFn={() => {}}
+                onError={(error: unknown) => logger.error("Could not generate change access level:", error)}
+            />
             <p>{_t("update_room_access_modal|dont_change_description")}</p>
             <div className="mx_JoinRuleDialogButtons">
                 <Button

src/components/views/settings/JoinRuleSettings.tsx

@@ -36,6 +36,9 @@ export interface JoinRuleSettingsProps {
     onError(error: unknown): void;
     beforeChange?(joinRule: JoinRule): Promise<boolean>; // if returns false then aborts the change
     aliasWarning?: ReactNode;
+    disabledOptions?: Set<JoinRule>;
+    hiddenOptions?: Set<JoinRule>;
+    recommendedOption?: JoinRule;
 }
 
 const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
@@ -45,6 +48,9 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
     onError,
     beforeChange,
     closeSettingsFn,
+    disabledOptions,
+    hiddenOptions,
+    recommendedOption,
 }) => {
     const cli = room.client;
 
@@ -147,7 +153,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                     }
                 });
 
-                closeSettingsFn();
+                closeSettingsFn?.();
 
                 // switch to the new room in the background
                 dis.dispatch<ViewRoomPayload>({
@@ -170,18 +176,26 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
             {_t("room_settings|security|join_rule_upgrade_required")}
         </span>
     );
+    const withRecommendLabel = (label: string, rule: JoinRule): React.ReactNode =>
+        rule === recommendedOption ? (
+            <>
+                {label} (<span className="mx_JoinRuleSettings_recommended">{_t("common|recommended")}</span>)
+            </>
+        ) : (
+            label
+        );
 
     const definitions: IDefinition<JoinRule>[] = [
         {
             value: JoinRule.Invite,
-            label: _t("room_settings|security|join_rule_invite"),
+            label: withRecommendLabel(_t("room_settings|security|join_rule_invite"), JoinRule.Invite),
             description: _t("room_settings|security|join_rule_invite_description"),
             checked:
                 joinRule === JoinRule.Invite || (joinRule === JoinRule.Restricted && !restrictedAllowRoomIds?.length),
         },
         {
             value: JoinRule.Public,
-            label: _t("common|public"),
+            label: withRecommendLabel(_t("common|public"), JoinRule.Public),
             description: (
                 <>
                     {_t("room_settings|security|join_rule_public_description")}
@@ -292,7 +306,7 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
             value: JoinRule.Restricted,
             label: (
                 <>
-                    {_t("room_settings|security|join_rule_restricted")}
+                    {withRecommendLabel(_t("room_settings|security|join_rule_restricted"), JoinRule.Restricted)}
                     {preferredRestrictionVersion && upgradeRequiredPill}
                 </>
             ),
@@ -303,11 +317,11 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
     }
 
     if (askToJoinEnabled && (roomSupportsKnock || preferredKnockVersion)) {
-        definitions.push({
+        definitions.splice(Math.max(0, definitions.length - 1), 0, {
             value: JoinRule.Knock,
             label: (
                 <>
-                    {_t("room_settings|security|join_rule_knock")}
+                    {withRecommendLabel(_t("room_settings|security|join_rule_knock"), JoinRule.Knock)}
                     {preferredKnockVersion && upgradeRequiredPill}
                 </>
             ),
@@ -397,7 +411,9 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
             name="joinRule"
             value={joinRule}
             onChange={onChange}
-            definitions={definitions}
+            definitions={definitions
+                .map((d) => (disabledOptions?.has(d.value) ? { ...d, disabled: true } : d))
+                .filter((d) => !hiddenOptions?.has(d.value))}
             disabled={disabled}
             className="mx_JoinRuleSettings_radioButton"
         />

src/i18n/strings/de_DE.json

@@ -3516,6 +3516,13 @@
         "toast_title": "Aktualisiere %(brand)s",
         "unavailable": "Nicht verfügbar"
     },
+    "update_room_access_modal": {
+        "description": "Um einen Konferenzlink zu erstellen, mache diesen Raum <b>öffentlich</b> oder aktiviere die Option, dass Benutzer eine <b>Beitrittsanfrage</b> stellen können. So können Gäste ohne direkte Einladung beitreten.",
+        "dont_change_description": "Wenn die Zugriffsrechte dieses Raums unverändert bleiben sollen, erstelle einen neuen Raum für den Element-Anruf.",
+        "revert_access_description": "(In den Raum Einstellungen kann die Zutrittseinstellung zurückgesetzt werden: <b>Sicherheit</b> / <b>Zutritt</b>)",
+        "no_change": "Ich möchte die Raum Zutrittseinstellung nicht ändern.",
+        "title": "Erlaube Gastbenutzern, diesen Raum beizutreten"
+    },
     "upload_failed_generic": "Die Datei „%(fileName)s“ konnte nicht hochgeladen werden.",
     "upload_failed_size": "Die Datei „%(fileName)s“ überschreitet das Hochladelimit deines Heim-Servers",
     "upload_failed_title": "Hochladen fehlgeschlagen",

src/i18n/strings/en_EN.json

@@ -542,6 +542,7 @@
         "qr_code": "QR Code",
         "random": "Random",
         "reactions": "Reactions",
+        "recommended": "Recommended",
         "report_a_bug": "Report a bug",
         "room": "Room",
         "room_name": "Room name",
@@ -2952,7 +2953,7 @@
         "warning": "<w>WARNING:</w> <description/>"
     },
     "share": {
-        "link_title": "Link to room",
+        "link_copied": "Link copied",
         "permalink_message": "Link to selected message",
         "permalink_most_recent": "Link to most recent message",
         "share_call": "Conference invite link",
@@ -3730,10 +3731,11 @@
         "unavailable": "Unavailable"
     },
     "update_room_access_modal": {
-        "description": "To create a share link, you need to allow guests to join this room. This may make the room less secure. When you're done with the call, you can make the room private again.",
-        "dont_change_description": "Alternatively, you can hold the call in a separate room.",
+        "description": "To create a share link, make this room <b>public</b> or enable the option for users to <b>ask to join</b>. This allows guests to join without being invited.",
+        "dont_change_description": "If you don't want to change the access of this room, you can create a new room for the call link.",
         "no_change": "I don't want to change the access level.",
-        "title": "Change the room access level"
+        "revert_access_description": "(This can be reverted to the previous value in the Room Settings: <b>Security & Privacy</b> / <b>Access</b>)",
+        "title": "Allow guest users to join this room"
     },
     "upload_failed_generic": "The file '%(fileName)s' failed to upload.",
     "upload_failed_size": "The file '%(fileName)s' exceeds this homeserver's size limit for uploads",

src/stores/widgets/StopGapWidget.ts

@@ -6,7 +6,14 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { Room, MatrixEvent, MatrixEventEvent, MatrixClient, ClientEvent } from "matrix-js-sdk/src/matrix";
+import {
+    Room,
+    MatrixEvent,
+    MatrixEventEvent,
+    MatrixClient,
+    ClientEvent,
+    RoomStateEvent,
+} from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import {
     ClientWidgetApi,
@@ -333,6 +340,7 @@ export class StopGapWidget extends EventEmitter {
         // Attach listeners for feeding events - the underlying widget classes handle permissions for us
         this.client.on(ClientEvent.Event, this.onEvent);
         this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        this.client.on(RoomStateEvent.Events, this.onStateEvent);
         this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
 
         this.messaging.on(
@@ -463,15 +471,33 @@ export class StopGapWidget extends EventEmitter {
 
         this.client.off(ClientEvent.Event, this.onEvent);
         this.client.off(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        this.client.off(RoomStateEvent.Events, this.onStateEvent);
         this.client.off(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
     }
 
     private onEvent = (ev: MatrixEvent): void => {
         this.client.decryptEventIfNeeded(ev);
-        this.feedEvent(ev);
+        // Only process non-state events here; we don't want to confuse the
+        // widget with a state event from the timeline that might not have
+        // actually updated the room's state
+        if (!ev.isState()) this.handleEvent(ev);
     };
 
     private onEventDecrypted = (ev: MatrixEvent): void => {
+        this.handleEvent(ev);
+    };
+
+    private onStateEvent = (ev: MatrixEvent): void => {
+        // State events get to skip all the checks of handleEvent and be fed
+        // directly to the widget. When it comes to state events, we don't care
+        // so much about getting the order and contents of the timeline right as
+        // we care about state updates reliably getting through to the widget so
+        // that it sees the same state as what the server calculated.
+        // TODO: We can provide widgets with a more complete timeline stream
+        // while also getting state updates right if we create a separate widget
+        // action for communicating state deltas, similar to how the 'state'
+        // sections of sync responses in Simplified Sliding Sync and MSC4222
+        // work.
         this.feedEvent(ev);
     };
 
@@ -544,8 +570,7 @@ export class StopGapWidget extends EventEmitter {
         return false;
     }
 
-    private feedEvent(ev: MatrixEvent): void {
-        if (this.messaging === null) return;
+    private handleEvent(ev: MatrixEvent): void {
         if (
             // If we had decided earlier to feed this event to the widget, but
             // it just wasn't ready, give it another try
@@ -573,11 +598,16 @@ export class StopGapWidget extends EventEmitter {
             if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
                 this.eventsToFeed.add(ev);
             } else {
-                const raw = ev.getEffectiveEvent();
-                this.messaging.feedEvent(raw as IRoomEvent, this.eventListenerRoomId!).catch((e) => {
-                    logger.error("Error sending event to widget: ", e);
-                });
+                this.feedEvent(ev);
             }
         }
     }
+
+    private feedEvent(ev: MatrixEvent): void {
+        if (this.messaging === null) return;
+        const raw = ev.getEffectiveEvent();
+        this.messaging.feedEvent(raw as IRoomEvent, this.eventListenerRoomId!).catch((e) => {
+            logger.error("Error sending event to widget: ", e);
+        });
+    }
 }

test/unit-tests/components/views/dialogs/ShareDialog-test.tsx

@@ -7,111 +7,139 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { EventTimeline, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
-import { render, RenderOptions } from "jest-matrix-react";
+import { MatrixClient, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
+import { render, screen, act } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { waitFor } from "@testing-library/dom";
 
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { _t } from "../../../../../src/languageHandler";
-import ShareDialog from "../../../../../src/components/views/dialogs/ShareDialog";
+import { ShareDialog } from "../../../../../src/components/views/dialogs/ShareDialog";
 import { UIFeature } from "../../../../../src/settings/UIFeature";
-import { stubClient } from "../../../../test-utils";
-jest.mock("../../../../../src/utils/ShieldUtils");
-
-function getWrapper(): RenderOptions {
-    return {
-        wrapper: ({ children }) => (
-            <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>{children}</MatrixClientContext.Provider>
-        ),
-    };
-}
+import { stubClient, withClientContextRenderOptions } from "../../../../test-utils";
+import * as StringsModule from "../../../../../src/utils/strings";
+import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks.ts";
 
 describe("ShareDialog", () => {
+    let client: MatrixClient;
     let room: Room;
-
-    const ROOM_ID = "!1:example.org";
+    const copyTextFunc = jest.fn();
 
     beforeEach(async () => {
-        stubClient();
-        room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org");
+        client = stubClient();
+        room = new Room("!1:example.org", client, "@alice:example.org");
+        jest.spyOn(StringsModule, "copyPlaintext").mockImplementation(copyTextFunc);
     });
 
     afterEach(() => {
         jest.restoreAllMocks();
+        copyTextFunc.mockClear();
     });
 
-    it("renders room share dialog", () => {
-        const { container: withoutEvents } = render(<ShareDialog target={room} onFinished={jest.fn()} />, getWrapper());
-        expect(withoutEvents).toHaveTextContent(_t("share|title_room"));
+    function renderComponent(target: Room | RoomMember | URL) {
+        return render(<ShareDialog target={target} onFinished={jest.fn()} />, withClientContextRenderOptions(client));
+    }
 
-        jest.spyOn(room, "getLiveTimeline").mockReturnValue({ getEvents: () => [{} as MatrixEvent] } as EventTimeline);
-        const { container: withEvents } = render(<ShareDialog target={room} onFinished={jest.fn()} />, getWrapper());
-        expect(withEvents).toHaveTextContent(_t("share|permalink_most_recent"));
+    const getUrl = () => new URL("https://matrix.org/");
+    const getRoomMember = () => new RoomMember(room.roomId, "@alice:example.org");
+
+    test.each([
+        { name: "an URL", title: "Share Link", url: "https://matrix.org/", getTarget: getUrl },
+        {
+            name: "a room member",
+            title: "Share User",
+            url: "https://matrix.to/#/@alice:example.org",
+            getTarget: getRoomMember,
+        },
+    ])("should render a share dialog for $name", async ({ title, url, getTarget }) => {
+        const { asFragment } = renderComponent(getTarget());
+
+        expect(screen.getByRole("heading", { name: title })).toBeInTheDocument();
+        expect(screen.getByText(url)).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+
+        await userEvent.click(screen.getByRole("button", { name: "Copy link" }));
+        expect(copyTextFunc).toHaveBeenCalledWith(url);
     });
 
-    it("renders user share dialog", () => {
-        mockRoomMembers(room, 1);
-        const { container } = render(
-            <ShareDialog target={room.getJoinedMembers()[0]} onFinished={jest.fn()} />,
-            getWrapper(),
+    it("should render a share dialog for a room", async () => {
+        const expectedURL = "https://matrix.to/#/!1:example.org";
+        jest.spyOn(room.getLiveTimeline(), "getEvents").mockReturnValue([new MatrixEvent({ event_id: "!eventId" })]);
+
+        const { asFragment } = renderComponent(room);
+        expect(screen.getByRole("heading", { name: "Share Room" })).toBeInTheDocument();
+        expect(screen.getByText(expectedURL)).toBeInTheDocument();
+        expect(screen.getByRole("checkbox", { name: "Link to most recent message" })).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+
+        await userEvent.click(screen.getByRole("button", { name: "Copy link" }));
+        expect(copyTextFunc).toHaveBeenCalledWith(expectedURL);
+
+        // Click on the checkbox to link to the most recent message
+        await userEvent.click(screen.getByRole("checkbox", { name: "Link to most recent message" }));
+        const newExpectedURL = "https://matrix.to/#/!1:example.org/!eventId";
+        expect(screen.getByText(newExpectedURL)).toBeInTheDocument();
+    });
+
+    it("should render a share dialog for a matrix event", async () => {
+        const matrixEvent = new MatrixEvent({ event_id: "!eventId" });
+        const permalinkCreator = new RoomPermalinkCreator(room);
+        const expectedURL = "https://matrix.to/#/!1:example.org/!eventId";
+
+        const { asFragment } = render(
+            <ShareDialog target={matrixEvent} permalinkCreator={permalinkCreator} onFinished={jest.fn()} />,
+            withClientContextRenderOptions(client),
         );
-        expect(container).toHaveTextContent(_t("share|title_user"));
+        expect(screen.getByRole("heading", { name: "Share Room Message" })).toBeInTheDocument();
+        expect(screen.getByText(expectedURL)).toBeInTheDocument();
+        expect(screen.getByRole("checkbox", { name: "Link to selected message" })).toBeChecked();
+        expect(asFragment()).toMatchSnapshot();
+
+        await userEvent.click(screen.getByRole("button", { name: "Copy link" }));
+        expect(copyTextFunc).toHaveBeenCalledWith(expectedURL);
+
+        // Click on the checkbox to link to the room
+        await userEvent.click(screen.getByRole("checkbox", { name: "Link to selected message" }));
+        expect(screen.getByText("https://matrix.to/#/!1:example.org")).toBeInTheDocument();
     });
 
-    it("renders link share dialog", () => {
-        mockRoomMembers(room, 1);
-        const { container } = render(
-            <ShareDialog target={new URL("https://matrix.org")} onFinished={jest.fn()} />,
-            getWrapper(),
-        );
-        expect(container).toHaveTextContent(_t("share|title_link"));
+    it("should change the copy button text when clicked", async () => {
+        jest.useFakeTimers();
+        const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+        // To not be bother with rtl warnings about QR code state update
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+
+        renderComponent(room);
+        await user.click(screen.getByRole("button", { name: "Copy link" }));
+        // Move after `copyPlaintext`
+        await jest.advanceTimersToNextTimerAsync();
+        expect(screen.getByRole("button", { name: "Link copied" })).toBeInTheDocument();
+
+        // 2 sec after the button should be back to normal
+        act(() => jest.advanceTimersByTime(2000));
+        await waitFor(() => expect(screen.getByRole("button", { name: "Copy link" })).toBeInTheDocument());
     });
 
-    it("renders the QR code if configured", () => {
+    it("should not render the QR code if disabled", () => {
         const originalGetValue = SettingsStore.getValue;
         jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => {
-            if (feature === UIFeature.ShareQRCode) return true;
+            if (feature === UIFeature.ShareQRCode) return false;
             return originalGetValue(feature);
         });
-        const { container } = render(<ShareDialog target={room} onFinished={jest.fn()} />, getWrapper());
-        const qrCodesVisible = container.getElementsByClassName("mx_ShareDialog_qrcode_container").length > 0;
-        expect(qrCodesVisible).toBe(true);
+
+        const { asFragment } = renderComponent(room);
+        expect(screen.queryByRole("img", { name: "QR code" })).toBeNull();
+        expect(asFragment()).toMatchSnapshot();
     });
 
-    it("renders the social button if configured", () => {
+    it("should not render the socials if disabled", () => {
         const originalGetValue = SettingsStore.getValue;
         jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => {
-            if (feature === UIFeature.ShareSocial) return true;
+            if (feature === UIFeature.ShareSocial) return false;
             return originalGetValue(feature);
         });
-        const { container } = render(<ShareDialog target={room} onFinished={jest.fn()} />, getWrapper());
-        const qrCodesVisible = container.getElementsByClassName("mx_ShareDialog_social_container").length > 0;
-        expect(qrCodesVisible).toBe(true);
-    });
-    it("renders custom title and subtitle", () => {
-        const { container } = render(
-            <ShareDialog
-                target={room}
-                customTitle="test_title_123"
-                subtitle="custom_subtitle_1234"
-                onFinished={jest.fn()}
-            />,
-            getWrapper(),
-        );
-        expect(container).toHaveTextContent("test_title_123");
-        expect(container).toHaveTextContent("custom_subtitle_1234");
+
+        const { asFragment } = renderComponent(room);
+        expect(screen.queryByRole("link", { name: "Reddit" })).toBeNull();
+        expect(asFragment()).toMatchSnapshot();
     });
 });
-/**
- *
- * @param count the number of users to create
- */
-function mockRoomMembers(room: Room, count: number) {
-    const members = Array(count)
-        .fill(0)
-        .map((_, index) => new RoomMember(room.roomId, "@alice:example.org"));
-
-    room.currentState.setJoinedMemberCount(members.length);
-    room.getJoinedMembers = jest.fn().mockReturnValue(members);
-}

test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap

@@ -0,0 +1,852 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShareDialog should not render the QR code if disabled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ShareDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Share Room
+      </h1>
+    </div>
+    <div
+      class="mx_ShareDialog_content"
+    >
+      <div
+        class="mx_ShareDialog_top"
+      >
+        <span>
+          https://matrix.to/#/!1:example.org
+        </span>
+      </div>
+      <button
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
+        Copy link
+      </button>
+      <div
+        class="mx_ShareDialog_social"
+      >
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Facebook"
+        >
+          <img
+            alt="Facebook"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://twitter.com/home?status=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Twitter"
+        >
+          <img
+            alt="Twitter"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="LinkedIn"
+        >
+          <img
+            alt="LinkedIn"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.reddit.com/submit?url=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Reddit"
+        >
+          <img
+            alt="Reddit"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="mailto:?body=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="email"
+        >
+          <img
+            alt="email"
+            src="image-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ShareDialog should not render the socials if disabled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ShareDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Share Room
+      </h1>
+    </div>
+    <div
+      class="mx_ShareDialog_content"
+    >
+      <div
+        class="mx_ShareDialog_top"
+      >
+        <div
+          class="mx_QRCode"
+        >
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading…"
+              class="mx_Spinner_icon"
+              data-testid="spinner"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+        <span>
+          https://matrix.to/#/!1:example.org
+        </span>
+      </div>
+      <button
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
+        Copy link
+      </button>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ShareDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Share Room Message
+      </h1>
+    </div>
+    <div
+      class="mx_ShareDialog_content"
+    >
+      <div
+        class="mx_ShareDialog_top"
+      >
+        <div
+          class="mx_QRCode"
+        >
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading…"
+              class="mx_Spinner_icon"
+              data-testid="spinner"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+        <span>
+          https://matrix.to/#/!1:example.org/!eventId
+        </span>
+      </div>
+      <label>
+        <div
+          class="_container_1wloq_18"
+        >
+          <input
+            checked=""
+            class="_input_1wloq_26"
+            type="checkbox"
+          />
+          <div
+            class="_ui_1wloq_27"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+              />
+            </svg>
+          </div>
+        </div>
+        Link to selected message
+      </label>
+      <button
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
+        Copy link
+      </button>
+      <div
+        class="mx_ShareDialog_social"
+      >
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.to/#/!1:example.org/!eventId"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Facebook"
+        >
+          <img
+            alt="Facebook"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://twitter.com/home?status=https://matrix.to/#/!1:example.org/!eventId"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Twitter"
+        >
+          <img
+            alt="Twitter"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.to/#/!1:example.org/!eventId"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="LinkedIn"
+        >
+          <img
+            alt="LinkedIn"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.reddit.com/submit?url=https://matrix.to/#/!1:example.org/!eventId"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Reddit"
+        >
+          <img
+            alt="Reddit"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="mailto:?body=https://matrix.to/#/!1:example.org/!eventId"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="email"
+        >
+          <img
+            alt="email"
+            src="image-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ShareDialog should render a share dialog for a room 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ShareDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Share Room
+      </h1>
+    </div>
+    <div
+      class="mx_ShareDialog_content"
+    >
+      <div
+        class="mx_ShareDialog_top"
+      >
+        <div
+          class="mx_QRCode"
+        >
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading…"
+              class="mx_Spinner_icon"
+              data-testid="spinner"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+        <span>
+          https://matrix.to/#/!1:example.org
+        </span>
+      </div>
+      <label>
+        <div
+          class="_container_1wloq_18"
+        >
+          <input
+            class="_input_1wloq_26"
+            type="checkbox"
+          />
+          <div
+            class="_ui_1wloq_27"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+              />
+            </svg>
+          </div>
+        </div>
+        Link to most recent message
+      </label>
+      <button
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
+        Copy link
+      </button>
+      <div
+        class="mx_ShareDialog_social"
+      >
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Facebook"
+        >
+          <img
+            alt="Facebook"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://twitter.com/home?status=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Twitter"
+        >
+          <img
+            alt="Twitter"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="LinkedIn"
+        >
+          <img
+            alt="LinkedIn"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.reddit.com/submit?url=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Reddit"
+        >
+          <img
+            alt="Reddit"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="mailto:?body=https://matrix.to/#/!1:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="email"
+        >
+          <img
+            alt="email"
+            src="image-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ShareDialog should render a share dialog for a room member 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ShareDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Share User
+      </h1>
+    </div>
+    <div
+      class="mx_ShareDialog_content"
+    >
+      <div
+        class="mx_ShareDialog_top"
+      >
+        <div
+          class="mx_QRCode"
+        >
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading…"
+              class="mx_Spinner_icon"
+              data-testid="spinner"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+        <span>
+          https://matrix.to/#/@alice:example.org
+        </span>
+      </div>
+      <button
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
+        Copy link
+      </button>
+      <div
+        class="mx_ShareDialog_social"
+      >
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.to/#/@alice:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Facebook"
+        >
+          <img
+            alt="Facebook"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://twitter.com/home?status=https://matrix.to/#/@alice:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Twitter"
+        >
+          <img
+            alt="Twitter"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.to/#/@alice:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="LinkedIn"
+        >
+          <img
+            alt="LinkedIn"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.reddit.com/submit?url=https://matrix.to/#/@alice:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Reddit"
+        >
+          <img
+            alt="Reddit"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="mailto:?body=https://matrix.to/#/@alice:example.org"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="email"
+        >
+          <img
+            alt="email"
+            src="image-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ShareDialog should render a share dialog for an URL 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_ShareDialog"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Share Link
+      </h1>
+    </div>
+    <div
+      class="mx_ShareDialog_content"
+    >
+      <div
+        class="mx_ShareDialog_top"
+      >
+        <div
+          class="mx_QRCode"
+        >
+          <div
+            class="mx_Spinner"
+          >
+            <div
+              aria-label="Loading…"
+              class="mx_Spinner_icon"
+              data-testid="spinner"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+            />
+          </div>
+        </div>
+        <span>
+          https://matrix.org/
+        </span>
+      </div>
+      <button
+        class="_button_i91xf_17 _has-icon_i91xf_66"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+          />
+        </svg>
+        Copy link
+      </button>
+      <div
+        class="mx_ShareDialog_social"
+      >
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u=https://matrix.org/"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Facebook"
+        >
+          <img
+            alt="Facebook"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://twitter.com/home?status=https://matrix.org/"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Twitter"
+        >
+          <img
+            alt="Twitter"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.linkedin.com/shareArticle?mini=true&url=https://matrix.org/"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="LinkedIn"
+        >
+          <img
+            alt="LinkedIn"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="https://www.reddit.com/submit?url=https://matrix.org/"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="Reddit"
+        >
+          <img
+            alt="Reddit"
+            src="image-file-stub"
+          />
+        </a>
+        <a
+          href="mailto:?body=https://matrix.org/"
+          rel="noreferrer noopener"
+          target="_blank"
+          title="email"
+        >
+          <img
+            alt="email"
+            src="image-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;

test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -15,7 +15,7 @@ import userEvent from "@testing-library/user-event";
 
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import RoomSummaryCard from "../../../../../src/components/views/right_panel/RoomSummaryCard";
-import ShareDialog from "../../../../../src/components/views/dialogs/ShareDialog";
+import { ShareDialog } from "../../../../../src/components/views/dialogs/ShareDialog";
 import ExportDialog from "../../../../../src/components/views/dialogs/ExportDialog";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";

test/unit-tests/components/views/right_panel/UserInfo-test.tsx

@@ -49,7 +49,7 @@ import ErrorDialog from "../../../../../src/components/views/dialogs/ErrorDialog
 import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../../src/settings/UIFeature";
 import { Action } from "../../../../../src/dispatcher/actions";
-import ShareDialog from "../../../../../src/components/views/dialogs/ShareDialog";
+import { ShareDialog } from "../../../../../src/components/views/dialogs/ShareDialog";
 import BulkRedactDialog from "../../../../../src/components/views/dialogs/BulkRedactDialog";
 
 jest.mock("../../../../../src/utils/direct-messages", () => ({

test/unit-tests/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx

@@ -19,7 +19,7 @@ import {
 } from "../../../../../../src/components/views/rooms/RoomHeader/CallGuestLinkButton";
 import Modal from "../../../../../../src/Modal";
 import SdkConfig from "../../../../../../src/SdkConfig";
-import ShareDialog from "../../../../../../src/components/views/dialogs/ShareDialog";
+import { ShareDialog } from "../../../../../../src/components/views/dialogs/ShareDialog";
 import { _t } from "../../../../../../src/languageHandler";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
 

yarn.lock

@@ -8341,7 +8341,7 @@ matrix-events-sdk@0.0.1:
 
 "matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
   version "34.12.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/544ac86d2080da8e55d0b727cae826e42600c490"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8fc77c595aa651db9f402df798b868ed076590e3"
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm" "^9.0.0"