Consolidate public room search experience (#9605)

Author: Germain

cypress/e2e/room-directory/room-directory.spec.ts

@@ -88,15 +88,16 @@ describe("Room Directory", () => {
 
         cy.get('[role="button"][aria-label="Explore rooms"]').click();
 
-        cy.get('.mx_RoomDirectory_dialogWrapper [name="dirsearch"]').type("Unknown Room");
-        cy.get(".mx_RoomDirectory_dialogWrapper h5").should("contain", 'No results for "Unknown Room"');
-        cy.get(".mx_RoomDirectory_dialogWrapper").percySnapshotElement("Room Directory - filtered no results");
-
-        cy.get('.mx_RoomDirectory_dialogWrapper [name="dirsearch"]').type("{selectAll}{backspace}test1234");
-        cy.contains(".mx_RoomDirectory_dialogWrapper .mx_RoomDirectory_listItem", name)
-            .should("exist").as("resultRow");
-        cy.get(".mx_RoomDirectory_dialogWrapper").percySnapshotElement("Room Directory - filtered one result");
-        cy.get("@resultRow").find(".mx_AccessibleButton").contains("Join").click();
+        cy.get('.mx_SpotlightDialog [aria-label="Search"]').type("Unknown Room");
+        cy.get(".mx_SpotlightDialog .mx_SpotlightDialog_otherSearches_messageSearchText")
+            .should("contain", "can't find the room you're looking for");
+        cy.get(".mx_SpotlightDialog_wrapper").percySnapshotElement("Room Directory - filtered no results");
+
+        cy.get('.mx_SpotlightDialog [aria-label="Search"]').type("{selectAll}{backspace}test1234");
+        cy.contains(".mx_SpotlightDialog .mx_SpotlightDialog_result_publicRoomName", name)
+            .should("exist");
+        cy.get(".mx_SpotlightDialog_wrapper").percySnapshotElement("Room Directory - filtered one result");
+        cy.get(".mx_SpotlightDialog .mx_SpotlightDialog_option").find(".mx_AccessibleButton").contains("Join").click();
 
         cy.url().should('contain', `/#/room/#test1234:localhost`);
     });

res/css/_components.pcss

@@ -64,7 +64,6 @@
 @import "./structures/_NotificationPanel.pcss";
 @import "./structures/_QuickSettingsButton.pcss";
 @import "./structures/_RightPanel.pcss";
-@import "./structures/_RoomDirectory.pcss";
 @import "./structures/_RoomSearch.pcss";
 @import "./structures/_RoomStatusBar.pcss";
 @import "./structures/_RoomView.pcss";
@@ -171,7 +170,6 @@
 @import "./views/elements/_CopyableText.pcss";
 @import "./views/elements/_DesktopCapturerSourcePicker.pcss";
 @import "./views/elements/_DialPadBackspaceButton.pcss";
-@import "./views/elements/_DirectorySearchBox.pcss";
 @import "./views/elements/_Dropdown.pcss";
 @import "./views/elements/_EditableItemList.pcss";
 @import "./views/elements/_ErrorBoundary.pcss";

res/css/structures/_RoomDirectory.pcss

@@ -29,7 +29,7 @@ import AliasCustomisations from './customisations/Alias';
  * @param {Object} room The room object
  * @returns {string} A display alias for the given room
  */
-export function getDisplayAliasForRoom(room: Room): string {
+export function getDisplayAliasForRoom(room: Room): string | undefined {
     return getDisplayAliasForAliasSet(
         room.getCanonicalAlias(), room.getAltAliases(),
     );
@@ -41,7 +41,7 @@ export function getDisplayAliasForAliasSet(canonicalAlias: string, altAliases: s
     if (AliasCustomisations.getDisplayAliasForAliasSet) {
         return AliasCustomisations.getDisplayAliasForAliasSet(canonicalAlias, altAliases);
     }
-    return canonicalAlias || altAliases?.[0];
+    return (canonicalAlias || altAliases?.[0]) ?? "";
 }
 
 export function guessAndSetDMRoom(room: Room, isDirect: boolean): Promise<void> {

res/css/views/elements/_DirectorySearchBox.pcss

@@ -95,7 +95,6 @@ import Spinner from "../views/elements/Spinner";
 import QuestionDialog from "../views/dialogs/QuestionDialog";
 import UserSettingsDialog from '../views/dialogs/UserSettingsDialog';
 import CreateRoomDialog from '../views/dialogs/CreateRoomDialog';
-import RoomDirectory from './RoomDirectory';
 import KeySignatureUploadFailedDialog from "../views/dialogs/KeySignatureUploadFailedDialog";
 import IncomingSasDialog from "../views/dialogs/IncomingSasDialog";
 import CompleteSecurity from "./auth/CompleteSecurity";
@@ -141,6 +140,7 @@ import { viewUserDeviceSettings } from '../../actions/handlers/viewUserDeviceSet
 import { VoiceBroadcastResumer } from '../../voice-broadcast';
 import GenericToast from "../views/toasts/GenericToast";
 import { Linkify } from "../views/elements/Linkify";
+import RovingSpotlightDialog, { Filter } from '../views/dialogs/spotlight/SpotlightDialog';
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -716,9 +716,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.viewSomethingBehindModal();
                 break;
             case Action.ViewRoomDirectory: {
-                Modal.createDialog(RoomDirectory, {
+                Modal.createDialog(RovingSpotlightDialog, {
                     initialText: payload.initialText,
-                }, 'mx_RoomDirectory_dialogWrapper', false, true);
+                    initialFilter: Filter.PublicRooms,
+                }, 'mx_SpotlightDialog_wrapper', false, true);
 
                 // View the welcome or home page if we need something to look at
                 this.viewSomethingBehindModal();