Fix wrong buttons being used when exploring public rooms (#9062)

cypress/e2e/12-spotlight/spotlight.spec.ts

@@ -139,6 +139,9 @@ describe("Spotlight", () => {
     const room2Name = "Lounge";
     let room2Id: string;
 
+    const room3Name = "Public";
+    let room3Id: string;
+
     beforeEach(() => {
         cy.startSynapse("default").then(data => {
             synapse = data;
@@ -163,6 +166,19 @@ describe("Spotlight", () => {
                             room2Id = _room2Id;
                             bot2.invite(room2Id, bot1.getUserId());
                         });
+                    bot2.createRoom({
+                        name: room3Name,
+                        visibility: Visibility.Public, initial_state: [{
+                            type: "m.room.history_visibility",
+                            state_key: "",
+                            content: {
+                                history_visibility: "world_readable",
+                            },
+                        }],
+                    }).then(({ room_id: _room3Id }) => {
+                        room3Id = _room3Id;
+                        bot2.invite(room3Id, bot1.getUserId());
+                    });
                 }),
             ).then(() =>
                 cy.get('.mx_RoomSublist_skeletonUI').should('not.exist'),
@@ -212,6 +228,7 @@ describe("Spotlight", () => {
             cy.spotlightSearch().clear().type(room1Name);
             cy.spotlightResults().should("have.length", 1);
             cy.spotlightResults().eq(0).should("contain", room1Name);
+            cy.spotlightResults().eq(0).should("contain", "View");
             cy.spotlightResults().eq(0).click();
             cy.url().should("contain", room1Id);
         }).then(() => {
@@ -225,6 +242,7 @@ describe("Spotlight", () => {
             cy.spotlightSearch().clear().type(room2Name);
             cy.spotlightResults().should("have.length", 1);
             cy.spotlightResults().eq(0).should("contain", room2Name);
+            cy.spotlightResults().eq(0).should("contain", "Join");
             cy.spotlightResults().eq(0).click();
             cy.url().should("contain", room2Id);
         }).then(() => {
@@ -233,6 +251,21 @@ describe("Spotlight", () => {
         });
     });
 
+    it("should find unknown public world readable rooms", () => {
+        cy.openSpotlightDialog().within(() => {
+            cy.spotlightFilter(Filter.PublicRooms);
+            cy.spotlightSearch().clear().type(room3Name);
+            cy.spotlightResults().should("have.length", 1);
+            cy.spotlightResults().eq(0).should("contain", room3Name);
+            cy.spotlightResults().eq(0).should("contain", "View");
+            cy.spotlightResults().eq(0).click();
+            cy.url().should("contain", room3Id);
+        }).then(() => {
+            cy.get(".mx_RoomPreviewBar_actions .mx_AccessibleButton").click();
+            cy.roomHeaderName().should("contain", room3Name);
+        });
+    });
+
     // TODO: We currently can’t test finding rooms on other homeservers/other protocols
     // We obviously don’t have federation or bridges in cypress tests
     /*

src/components/views/dialogs/spotlight/SpotlightDialog.tsx

@@ -607,6 +607,16 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
             }
             if (isPublicRoomResult(result)) {
                 const clientRoom = cli.getRoom(result.publicRoom.room_id);
+                // Element Web currently does not allow guests to join rooms, so we
+                // instead show them view buttons for all rooms. If the room is not
+                // world readable, a modal will appear asking you to register first. If
+                // it is readable, the preview appears as normal.
+                const showViewButton = (
+                    clientRoom?.getMyMembership() === "join" ||
+                    result.publicRoom.world_readable ||
+                    cli.isGuest()
+                );
+
                 const listener = (ev) => {
                     const { publicRoom } = result;
                     viewRoom({
@@ -622,11 +632,11 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         onClick={listener}
                         endAdornment={
                             <AccessibleButton
-                                kind={clientRoom ? "primary" : "primary_outline"}
+                                kind={showViewButton ? "primary_outline" : "primary"}
                                 onClick={listener}
                                 tabIndex={-1}
                             >
-                                { _t(clientRoom ? "View" : "Join") }
+                                { showViewButton ? _t("View") : _t("Join") }
                             </AccessibleButton>}
                         aria-labelledby={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_name`}
                         aria-describedby={`mx_SpotlightDialog_button_result_${result.publicRoom.room_id}_alias`}