Use the JoinRuleSettings component for the guest link access prompt.

Co-authored-by: fkwp <[email protected]>

Author: toger5

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/rooms/RoomHeader/CallGuestLinkButton.tsx

@@ -14,10 +14,10 @@ import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import Modal from "../../../../Modal";
 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/en_EN.json

@@ -3804,10 +3804,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",