Fix rejoin of knock rooms (#11980)

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
Co-authored-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

cypress/e2e/knock/knock-into-room.spec.ts

@@ -63,7 +63,7 @@ describe("Knock Into Room", () => {
         cy.stopHomeserver(homeserver);
     });
 
-    it("should knock into the room then knock is approved and user joins the room", () => {
+    it("should knock into the room then knock is approved and user joins the room then user is kicked and joins again", () => {
         cy.viewRoomById(roomId);
 
         cy.get(".mx_RoomPreviewBar").within(() => {
@@ -104,6 +104,124 @@ describe("Knock Into Room", () => {
         cy.findByRole("group", { name: "Rooms" }).findByRole("treeitem", { name: "Cybersecurity" });
 
         cy.findByText("Alice joined the room").should("exist");
+
+        cy.window().then(async (win) => {
+            // bot kicks Alice
+            await bot.kick(roomId, user.userId);
+        });
+
+        cy.get(".mx_RoomPreviewBar").within(() => {
+            cy.findByRole("button", { name: "Re-join" }).click();
+
+            cy.findByRole("heading", { name: "Ask to join Cybersecurity?" });
+            cy.findByRole("button", { name: "Request access" }).click();
+        });
+
+        cy.window().then(async (win) => {
+            // bot waits for knock request from Alice
+            await waitForRoom(win, bot, roomId, (room) => {
+                const events = room.getLiveTimeline().getEvents();
+                return events.some(
+                    (e) =>
+                        e.getType() === "m.room.member" &&
+                        e.getContent()?.membership === "knock" &&
+                        e.getContent()?.displayname === "Alice",
+                );
+            });
+
+            // bot invites Alice
+            await bot.invite(roomId, user.userId);
+        });
+
+        // Alice have to accept invitation in order to join the room.
+        // It will be not needed when homeserver implements auto accept knock requests.
+        cy.get(".mx_RoomView").findByRole("button", { name: "Accept" }).click();
+
+        cy.findByText("Alice was invited, joined, was removed, was invited, and joined").should("exist");
+    });
+
+    it("should knock into the room then knock is approved and user joins the room then user is banned/unbanned and joins again", () => {
+        cy.viewRoomById(roomId);
+
+        cy.get(".mx_RoomPreviewBar").within(() => {
+            cy.findByRole("button", { name: "Join the discussion" }).click();
+
+            cy.findByRole("heading", { name: "Ask to join?" });
+            cy.findByRole("textbox");
+            cy.findByRole("button", { name: "Request access" }).click();
+
+            cy.findByRole("heading", { name: "Request to join sent" });
+        });
+
+        // Knocked room should appear in Rooms
+        cy.findByRole("group", { name: "Rooms" }).findByRole("treeitem", { name: "Cybersecurity" });
+
+        cy.window().then(async (win) => {
+            // bot waits for knock request from Alice
+            await waitForRoom(win, bot, roomId, (room) => {
+                const events = room.getLiveTimeline().getEvents();
+                return events.some(
+                    (e) =>
+                        e.getType() === "m.room.member" &&
+                        e.getContent()?.membership === "knock" &&
+                        e.getContent()?.displayname === "Alice",
+                );
+            });
+
+            // bot invites Alice
+            await bot.invite(roomId, user.userId);
+        });
+
+        cy.findByRole("group", { name: "Invites" }).findByRole("treeitem", { name: "Cybersecurity" });
+
+        // Alice have to accept invitation in order to join the room.
+        // It will be not needed when homeserver implements auto accept knock requests.
+        cy.get(".mx_RoomView").findByRole("button", { name: "Accept" }).click();
+
+        cy.findByRole("group", { name: "Rooms" }).findByRole("treeitem", { name: "Cybersecurity" });
+
+        cy.findByText("Alice joined the room").should("exist");
+
+        cy.window().then(async (win) => {
+            // bot bans Alice
+            await bot.ban(roomId, user.userId);
+        });
+
+        cy.get(".mx_RoomPreviewBar").findByText("You were banned from Cybersecurity by Bob").should("exist");
+
+        cy.window().then(async (win) => {
+            // bot unbans Alice
+            await bot.unban(roomId, user.userId);
+        });
+
+        cy.get(".mx_RoomPreviewBar").within(() => {
+            cy.findByRole("button", { name: "Re-join" }).click();
+
+            cy.findByRole("heading", { name: "Ask to join Cybersecurity?" });
+            cy.findByRole("button", { name: "Request access" }).click();
+        });
+
+        cy.window().then(async (win) => {
+            // bot waits for knock request from Alice
+            await waitForRoom(win, bot, roomId, (room) => {
+                const events = room.getLiveTimeline().getEvents();
+                return events.some(
+                    (e) =>
+                        e.getType() === "m.room.member" &&
+                        e.getContent()?.membership === "knock" &&
+                        e.getContent()?.displayname === "Alice",
+                );
+            });
+
+            // bot invites Alice
+            await bot.invite(roomId, user.userId);
+        });
+
+        // Alice have to accept invitation in order to join the room.
+        // It will be not needed when homeserver implements auto accept knock requests.
+        cy.get(".mx_RoomView").findByRole("button", { name: "Accept" }).click();
+
+        cy.findByText("Alice was invited, joined, was banned, was unbanned, was invited, and joined").should("exist");
     });
 
     it("should knock into the room and knock is cancelled by user himself", () => {

src/components/structures/RoomView.tsx

@@ -2229,8 +2229,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 <div className="mx_RoomView" data-room-header={roomHeaderType}>
                     <ErrorBoundary>
                         <RoomPreviewBar
+                            onJoinClick={this.onJoinButtonClicked}
                             room={this.state.room}
-                            promptAskToJoin={myMembership === "leave" || this.state.promptAskToJoin}
+                            canAskToJoinAndMembershipIsLeave={myMembership === "leave"}
+                            promptAskToJoin={this.state.promptAskToJoin}
                             knocked={myMembership === "knock"}
                             onSubmitAskToJoin={this.onSubmitAskToJoin}
                             onCancelAskToJoin={this.onCancelAskToJoin}

src/components/views/rooms/RoomPreviewBar.tsx

@@ -106,6 +106,7 @@ interface IProps {
     onRejectAndIgnoreClick?(): void;
     onForgetClick?(): void;
 
+    canAskToJoinAndMembershipIsLeave?: boolean;
     promptAskToJoin?: boolean;
     knocked?: boolean;
     onSubmitAskToJoin?(reason?: string): void;
@@ -193,6 +194,8 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             if (myMember.isKicked()) {
                 if (previousMembership === "knock") {
                     return MessageCase.RequestDenied;
+                } else if (this.props.promptAskToJoin) {
+                    return MessageCase.PromptAskToJoin;
                 }
                 return MessageCase.Kicked;
             } else if (myMember.membership === "ban") {
@@ -208,7 +211,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
             return MessageCase.Loading;
         } else if (this.props.knocked) {
             return MessageCase.Knocked;
-        } else if (this.props.promptAskToJoin) {
+        } else if (this.props.canAskToJoinAndMembershipIsLeave || this.props.promptAskToJoin) {
             return MessageCase.PromptAskToJoin;
         }
 

test/components/views/rooms/RoomPreviewBar-test.tsx

@@ -172,7 +172,7 @@ describe("<RoomPreviewBar />", () => {
     it("renders kicked message", () => {
         const room = createRoom(roomId, otherUserId);
         jest.spyOn(room, "getMember").mockReturnValue(makeMockRoomMember({ isKicked: true }));
-        const component = getComponent({ room, promptAskToJoin: true });
+        const component = getComponent({ room, canAskToJoinAndMembershipIsLeave: true, promptAskToJoin: false });
 
         expect(getMessage(component)).toMatchSnapshot();
     });
@@ -458,6 +458,14 @@ describe("<RoomPreviewBar />", () => {
             expect(getMessage(component)).toMatchSnapshot();
         });
 
+        it("renders the corresponding message when kicked", () => {
+            const room = createRoom(roomId, otherUserId);
+            jest.spyOn(room, "getMember").mockReturnValue(makeMockRoomMember({ isKicked: true }));
+            const component = getComponent({ room, promptAskToJoin: true });
+
+            expect(getMessage(component)).toMatchSnapshot();
+        });
+
         it("renders the corresponding message with a generic title", () => {
             const component = render(<RoomPreviewBar promptAskToJoin />);
             expect(getMessage(component)).toMatchSnapshot();

test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap

@@ -39,6 +39,31 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
 </div>
 `;
 
+exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding message when kicked 1`] = `
+<div
+  class="mx_RoomPreviewBar_message"
+>
+  <h3>
+    Ask to join RoomPreviewBar-test-room?
+  </h3>
+  <p>
+    <span
+      class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
+      data-color="4"
+      data-testid="avatar-img"
+      data-type="round"
+      role="presentation"
+      style="--cpd-avatar-size: 36px;"
+    >
+      R
+    </span>
+  </p>
+  <p>
+    You need to be granted access to this room in order to view or participate in the conversation. You can send a request to join below.
+  </p>
+</div>
+`;
+
 exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding message with a generic title 1`] = `
 <div
   class="mx_RoomPreviewBar_message"