Integrate searching public rooms and people into the new search experience (#8707)

* Implement searching for public rooms and users in new search experience
* Implement loading indicator for spotlight results
* Moved spotlight dialog into own subfolder
* Extract search result avatar into separate component
* Build generic new dropdown menu component
* Build new network menu based on new network dropdown component
* Switch roomdirectory to use new network dropdown
* Replace old networkdropdown with new networkdropdown
* Added component for public room result details
* Extract hooks and subcomponents from SpotlightDialog
* Create new hook to get profile info based for an mxid
* Add hook to automatically re-request search results
* Add hook to prevent out-of-order search results
* Extract member sort algorithm from InviteDialog
* Keep sorting for non-room results stable
* Sort people suggestions using sort algorithm from InviteDialog
* Add copy/copied tooltip for invite link option in spotlight
* Clamp length of topic for public room results
* Add unit test for useDebouncedSearch
* Add unit test for useProfileInfo
* Create cypress test cases for spotlight dialog
* Add test for useLatestResult to prevent out-of-order results

src/hooks/useSpaceResults.ts

@@ -0,0 +1,69 @@
+/*
+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.
+*/
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Room, RoomType } from "matrix-js-sdk/src/matrix";
+import { IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces";
+import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
+import { normalize } from "matrix-js-sdk/src/utils";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+
+export const useSpaceResults = (space?: Room, query?: string): [IHierarchyRoom[], boolean] => {
+    const [rooms, setRooms] = useState<IHierarchyRoom[]>([]);
+    const [hierarchy, setHierarchy] = useState<RoomHierarchy>();
+
+    const resetHierarchy = useCallback(() => {
+        setHierarchy(space ? new RoomHierarchy(space, 50) : null);
+    }, [space]);
+    useEffect(resetHierarchy, [resetHierarchy]);
+
+    useEffect(() => {
+        if (!space || !hierarchy) return; // nothing to load
+
+        let unmounted = false;
+
+        (async () => {
+            while (hierarchy?.canLoadMore && !unmounted && space === hierarchy.root) {
+                await hierarchy.load();
+                if (hierarchy.canLoadMore) hierarchy.load(); // start next load so that the loading attribute is right
+                setRooms(hierarchy.rooms);
+            }
+        })();
+
+        return () => {
+            unmounted = true;
+        };
+    }, [space, hierarchy]);
+
+    const results = useMemo(() => {
+        const trimmedQuery = query.trim();
+        const lcQuery = trimmedQuery.toLowerCase();
+        const normalizedQuery = normalize(trimmedQuery);
+
+        const cli = MatrixClientPeg.get();
+        return rooms?.filter(r => {
+            return r.room_type !== RoomType.Space &&
+                cli.getRoom(r.room_id)?.getMyMembership() !== "join" &&
+                (
+                    normalize(r.name || "").includes(normalizedQuery) ||
+                    (r.canonical_alias || "").includes(lcQuery)
+                );
+        });
+    }, [rooms, query]);
+
+    return [results, hierarchy?.loading ?? false];
+};