Allow creating knock rooms (#11182)

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -34,6 +34,7 @@ import JoinRuleDropdown from "../elements/JoinRuleDropdown";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
+import SettingsStore from "../../../settings/SettingsStore";
 
 interface IProps {
     type?: RoomType;
@@ -59,6 +60,7 @@ interface IState {
 }
 
 export default class CreateRoomDialog extends React.Component<IProps, IState> {
+    private readonly askToJoinEnabled: boolean;
     private readonly supportsRestricted: boolean;
     private nameField = createRef<Field>();
     private aliasField = createRef<RoomAliasField>();
@@ -66,6 +68,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
 
+        this.askToJoinEnabled = SettingsStore.getValue("feature_ask_to_join");
         this.supportsRestricted = !!this.props.parentSpace;
 
         let joinRule = JoinRule.Invite;
@@ -126,6 +129,10 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             opts.joinRule = JoinRule.Restricted;
         }
 
+        if (this.state.joinRule === JoinRule.Knock) {
+            opts.joinRule = JoinRule.Knock;
+        }
+
         return opts;
     }
 
@@ -283,6 +290,14 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                     {_t("You can change this at any time from room settings.")}
                 </p>
             );
+        } else if (this.state.joinRule === JoinRule.Knock) {
+            publicPrivateLabel = (
+                <p>
+                    {_t(
+                        "Anyone can request to join, but admins or moderators need to grant access. You can change this later.",
+                    )}
+                </p>
+            );
         }
 
         let e2eeSection: JSX.Element | undefined;
@@ -332,7 +347,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         let title: string;
         if (isVideoRoom) {
             title = _t("Create a video room");
-        } else if (this.props.parentSpace) {
+        } else if (this.props.parentSpace || this.state.joinRule === JoinRule.Knock) {
             title = _t("Create a room");
         } else {
             title = this.state.joinRule === JoinRule.Public ? _t("Create a public room") : _t("Create a private room");
@@ -365,6 +380,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                         <JoinRuleDropdown
                             label={_t("Room visibility")}
                             labelInvite={_t("Private room (invite only)")}
+                            labelKnock={this.askToJoinEnabled ? _t("Ask to join") : undefined}
                             labelPublic={_t("Public room")}
                             labelRestricted={this.supportsRestricted ? _t("Visible to space members") : undefined}
                             value={this.state.joinRule}

src/components/views/elements/JoinRuleDropdown.tsx

@@ -19,12 +19,14 @@ import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 import Dropdown from "./Dropdown";
 import { NonEmptyArray } from "../../../@types/common";
+import { Icon as AskToJoinIcon } from "../../../../res/img/element-icons/ask-to-join.svg";
 
 interface IProps {
     value: JoinRule;
     label: string;
     width?: number;
     labelInvite: string;
+    labelKnock?: string;
     labelPublic: string;
     labelRestricted?: string; // if omitted then this option will be hidden, e.g if unsupported
     onChange(value: JoinRule): void;
@@ -33,6 +35,7 @@ interface IProps {
 const JoinRuleDropdown: React.FC<IProps> = ({
     label,
     labelInvite,
+    labelKnock,
     labelPublic,
     labelRestricted,
     value,
@@ -48,6 +51,17 @@ const JoinRuleDropdown: React.FC<IProps> = ({
         </div>,
     ] as NonEmptyArray<ReactElement & { key: string }>;
 
+    if (labelKnock) {
+        options.unshift(
+            (
+                <div key={JoinRule.Knock} className="mx_JoinRuleDropdown_knock">
+                    <AskToJoinIcon className="mx_Icon mx_Icon_16 mx_JoinRuleDropdown_icon" />
+                    {labelKnock}
+                </div>
+            ) as ReactElement & { key: string },
+        );
+    }
+
     if (labelRestricted) {
         options.unshift(
             (