WIP: Implement Knocking

cypress/e2e/knocking/knocking.spec.ts

@@ -0,0 +1,79 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/// <reference types="cypress" />
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+import Chainable = Cypress.Chainable;
+
+function openCreateRoomDialog(): Chainable<JQuery<HTMLElement>> {
+    cy.get('[aria-label="Add room"]').click();
+    cy.get('.mx_ContextualMenu [aria-label="New room"]').click();
+    return cy.get(".mx_CreateRoomDialog");
+}
+
+describe("Knocking", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+
+            cy.initTestUser(synapse, "Tom");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it("should be able to create a room with knock JoinRule", () => {
+        // Enables labs flag feature
+        cy.enableLabsFeature("feature_knocking");
+        const name = "Test room 1";
+        const topic = "This is a test room";
+
+        // Create a room with knock JoinRule
+        openCreateRoomDialog().within(() => {
+            cy.get('[label="Name"]').type(name);
+            cy.get('[label="Topic (optional)"]').type(topic);
+            cy.get(".mx_JoinRuleDropdown").click();
+            cy.get(".mx_JoinRuleDropdown_knock").click();
+            cy.startMeasuring("from-submit-to-room");
+            cy.get(".mx_Dialog_primary").click();
+        });
+
+        // The room settings initially are set to Ask to join
+        cy.openRoomSettings("Security & Privacy");
+        cy.closeDialog();
+
+        //Check if the room settings are visible if labs flag is disabled
+        cy.openUserSettings("Labs").within(() => {
+            //disables labs flag feature
+            cy.get("[aria-label='Knocking']").click();
+            // cy.disableLabsFeature("feature_knocking");
+        });
+        cy.closeDialog();
+
+        //the default joinRule is set to Private (invite only) when the labs flag is disabled
+        cy.openRoomSettings("Security & Privacy");
+        cy.closeDialog();
+
+        // Click the expand link button to get more detailed view
+        cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+
+        cy.stopMeasuring("from-submit-to-room");
+        cy.get(".mx_RoomHeader_nametext").contains(name);
+        cy.get(".mx_RoomHeader_topic").contains(topic);
+    });
+});

cypress/support/labs.ts

@@ -28,6 +28,7 @@ declare global {
              * @param feature labsFeature to enable (e.g. "feature_spotlight")
              */
             enableLabsFeature(feature: string): Chainable<null>;
+            disableLabsFeature(feature: string): Chainable<null>;
         }
     }
 }
@@ -38,5 +39,12 @@ Cypress.Commands.add("enableLabsFeature", (feature: string): Chainable<null> =>
     }).then(() => null);
 });
 
+Cypress.Commands.add("disableLabsFeature", (feature: string): Chainable<null> => {
+    return cy.window({ log: false }).then(win => {
+        win.localStorage.removeItem(`mx_labs_feature_${feature}`);
+        win.localStorage.setItem(`mx_labs_feature_${feature}`, "false");
+    }).then(() => null);
+});
+
 // Needed to make this file a module
 export { };

res/css/views/dialogs/_JoinRuleDropdown.pcss

@@ -54,6 +54,11 @@ limitations under the License.
         mask-size: contain;
     }
 
+    .mx_JoinRuleDropdown_knock::before {
+        mask-image: url('$(res)/img/element-icons/knocking.svg');
+        mask-size: contain;
+    }
+
     .mx_JoinRuleDropdown_public::before {
         mask-image: url('$(res)/img/globe.svg');
         mask-size: 12px;

src/TextForEvent.tsx

@@ -235,6 +235,10 @@ function textForJoinRulesEvent(ev: MatrixEvent, allowJSX: boolean): () => Render
             return () => _t('%(senderDisplayName)s made the room invite only.', {
                 senderDisplayName,
             });
+        case JoinRule.Knock:
+            return () => _t('%(senderDisplayName)s made the room knock only.', {
+                senderDisplayName,
+            });
         case JoinRule.Restricted:
             if (allowJSX) {
                 return () => <span>

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -20,6 +20,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomType } from "matrix-js-sdk/src/@types/event";
 import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
 
+import SettingsStore from '../../../settings/SettingsStore';
 import SdkConfig from '../../../SdkConfig';
 import withValidation, { IFieldState } from '../elements/Validation';
 import { _t } from '../../../languageHandler';
@@ -59,13 +60,15 @@ interface IState {
 
 export default class CreateRoomDialog extends React.Component<IProps, IState> {
     private readonly supportsRestricted: boolean;
+    private readonly knockingEnabled: boolean;
     private nameField = createRef<Field>();
     private aliasField = createRef<RoomAliasField>();
 
     constructor(props) {
         super(props);
 
         this.supportsRestricted = !!this.props.parentSpace;
+        this.knockingEnabled = SettingsStore.getValue("feature_knocking");
 
         let joinRule = JoinRule.Invite;
         if (this.props.defaultPublic) {
@@ -120,6 +123,9 @@ 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;
     }
 
@@ -265,9 +271,13 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             </p>;
         } else if (this.state.joinRule === JoinRule.Invite) {
             publicPrivateLabel = <p>
-                { _t(
-                    "Only people invited will be able to find and join this room.",
-                ) }
+                { _t("Only people invited will be able to find and join this room.") }
+                &nbsp;
+                { _t("You can change this at any time from room settings.") }
+            </p>;
+        } else if (this.state.joinRule === JoinRule.Knock && this.knockingEnabled) {
+            publicPrivateLabel = <p>
+                { _t("This room type requires users to be granted access in order to join.") }
                 &nbsp;
                 { _t("You can change this at any time from room settings.") }
             </p>;
@@ -349,6 +359,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
                         <JoinRuleDropdown
                             label={_t("Room visibility")}
                             labelInvite={_t("Private room (invite only)")}
+                            labelKnock={this.knockingEnabled ? _t("Ask to join (Anyone can knock 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

@@ -24,6 +24,7 @@ interface IProps {
     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;
@@ -32,6 +33,7 @@ interface IProps {
 const JoinRuleDropdown = ({
     label,
     labelInvite,
+    labelKnock,
     labelPublic,
     labelRestricted,
     value,
@@ -51,6 +53,10 @@ const JoinRuleDropdown = ({
         options.unshift(<div key={JoinRule.Restricted} className="mx_JoinRuleDropdown_restricted">
             { labelRestricted }
         </div>);
+    } else if (labelKnock) {
+        options.unshift(<div key={JoinRule.Knock} className="mx_JoinRuleDropdown_knock">
+            { labelKnock }
+        </div>);
     }
 
     return <Dropdown

src/components/views/settings/JoinRuleSettings.tsx

@@ -24,6 +24,7 @@ import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
+import SettingsStore from "../../../settings/SettingsStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import ManageRestrictedJoinRuleDialog from "../dialogs/ManageRestrictedJoinRuleDialog";
@@ -49,13 +50,17 @@ interface IProps {
 const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeChange, closeSettingsFn }: IProps) => {
     const cli = room.client;
 
+    const roomSupportsKnocking = doesRoomVersionSupport(room.getVersion(), PreferredRoomVersions.KnockingRooms);
+
     const roomSupportsRestricted = doesRoomVersionSupport(room.getVersion(), PreferredRoomVersions.RestrictedRooms);
     const preferredRestrictionVersion = !roomSupportsRestricted && promptUpgrade
         ? PreferredRoomVersions.RestrictedRooms
         : undefined;
 
     const disabled = !room.currentState.mayClientSendStateEvent(EventType.RoomJoinRules, cli);
 
+    const knockingEnabled = SettingsStore.getValue("feature_knocking");
+
     const [content, setContent] = useLocalEcho<IJoinRuleEventContent>(
         () => room.currentState.getStateEvents(EventType.RoomJoinRules, "")?.getContent(),
         content => cli.sendStateEvent(room.roomId, EventType.RoomJoinRules, content, ""),
@@ -89,6 +94,11 @@ const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeCh
         label: _t("Private (invite only)"),
         description: _t("Only invited people can join."),
         checked: joinRule === JoinRule.Invite || (joinRule === JoinRule.Restricted && !restrictedAllowRoomIds?.length),
+    }, {
+        value: JoinRule.Knock,
+        label: _t("Ask to join"),
+        description: _t("Requires users to be granted access in order to join"),
+        checked: joinRule === JoinRule.Knock && knockingEnabled && roomSupportsKnocking,
     }, {
         value: JoinRule.Public,
         label: _t("Public"),
@@ -98,6 +108,17 @@ const JoinRuleSettings = ({ room, promptUpgrade, aliasWarning, onError, beforeCh
         </>,
     }];
 
+    if (!knockingEnabled || !roomSupportsKnocking) {
+        // removes the knock option if the room isn't compatible for the same
+        for (let i = 0; i < definitions.length; i++) {
+            if (definitions[i].value === JoinRule.Knock) {
+                definitions.splice(i, 1);
+                break;
+            }
+        }
+        definitions[0].checked = true; //makes invite only room as default
+    }
+
     if (roomSupportsRestricted || preferredRestrictionVersion || joinRule === JoinRule.Restricted) {
         let upgradeRequiredPill;
         if (preferredRestrictionVersion) {

src/i18n/strings/en_EN.json

@@ -504,6 +504,7 @@
     "%(senderDisplayName)s upgraded this room.": "%(senderDisplayName)s upgraded this room.",
     "%(senderDisplayName)s made the room public to whoever knows the link.": "%(senderDisplayName)s made the room public to whoever knows the link.",
     "%(senderDisplayName)s made the room invite only.": "%(senderDisplayName)s made the room invite only.",
+    "%(senderDisplayName)s made the room knock only.": "%(senderDisplayName)s made the room knock only.",
     "%(senderDisplayName)s changed who can join this room. <a>View settings</a>.": "%(senderDisplayName)s changed who can join this room. <a>View settings</a>.",
     "%(senderDisplayName)s changed who can join this room.": "%(senderDisplayName)s changed who can join this room.",
     "%(senderDisplayName)s changed the join rule to %(rule)s": "%(senderDisplayName)s changed the join rule to %(rule)s",
@@ -884,6 +885,8 @@
     "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
     "Message Pinning": "Message Pinning",
+    "Knocking": "Knocking",
+    "Let users knock on a room to join it.": "Let users knock on a room to join it.",
     "Threaded messaging": "Threaded messaging",
     "Keep discussions organised with threads.": "Keep discussions organised with threads.",
     "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.",
@@ -1326,6 +1329,8 @@
     "Integration manager": "Integration manager",
     "Private (invite only)": "Private (invite only)",
     "Only invited people can join.": "Only invited people can join.",
+    "Ask to join": "Ask to join",
+    "Requires users to be granted access in order to join": "Requires users to be granted access in order to join",
     "Anyone can find and join.": "Anyone can find and join.",
     "Upgrade required": "Upgrade required",
     "& %(count)s more|other": "& %(count)s more",
@@ -2555,6 +2560,7 @@
     "Anyone will be able to find and join this room, not just members of <SpaceName/>.": "Anyone will be able to find and join this room, not just members of <SpaceName/>.",
     "Anyone will be able to find and join this room.": "Anyone will be able to find and join this room.",
     "Only people invited will be able to find and join this room.": "Only people invited will be able to find and join this room.",
+    "This room type requires users to be granted access in order to join.": "This room type requires users to be granted access in order to join.",
     "You can't disable this later. The room will be encrypted but the embedded call will not.": "You can't disable this later. The room will be encrypted but the embedded call will not.",
     "You can't disable this later. Bridges & most bots won't work yet.": "You can't disable this later. Bridges & most bots won't work yet.",
     "Your server requires encryption to be enabled in private rooms.": "Your server requires encryption to be enabled in private rooms.",
@@ -2568,6 +2574,7 @@
     "Topic (optional)": "Topic (optional)",
     "Room visibility": "Room visibility",
     "Private room (invite only)": "Private room (invite only)",
+    "Ask to join (Anyone can knock to join)": "Ask to join (Anyone can knock to join)",
     "Visible to space members": "Visible to space members",
     "Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.",
     "Create video room": "Create video room",

src/settings/Settings.tsx

@@ -256,6 +256,14 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_knocking": {
+        isFeature: true,
+        labsGroup: LabGroup.Rooms,
+        supportedLevels: LEVELS_FEATURE,
+        displayName: _td("Knocking"),
+        description: _td("Let users knock on a room to join it."),
+        default: false,
+    },
     "feature_thread": {
         isFeature: true,
         labsGroup: LabGroup.Messaging,

src/utils/PreferredRoomVersions.ts

@@ -28,6 +28,11 @@ export class PreferredRoomVersions {
      */
     public static readonly RestrictedRooms = "9";
 
+    /**
+     * The room version to use when creating "knocking" rooms.
+     */
+    public static readonly KnockingRooms = "9";
+
     private constructor() {
         // readonly, static, class
     }