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

test/hooks/useDebouncedCallback-test.tsx

@@ -0,0 +1,179 @@
+/*
+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 { mount } from "enzyme";
+import { sleep } from "matrix-js-sdk/src/utils";
+import React from "react";
+import { act } from "react-dom/test-utils";
+
+import { useDebouncedCallback } from "../../src/hooks/spotlight/useDebouncedCallback";
+
+function DebouncedCallbackComponent({ enabled, params, callback }) {
+    useDebouncedCallback(enabled, callback, params);
+    return <div>
+        { JSON.stringify(params) }
+    </div>;
+}
+
+describe("useDebouncedCallback", () => {
+    it("should be able to handle empty parameters", async () => {
+        const params = [];
+        const callback = jest.fn();
+
+        const wrapper = mount(<DebouncedCallbackComponent callback={callback} enabled={true} params={[]} />);
+        await act(async () => {
+            await sleep(1);
+            wrapper.setProps({ enabled: true, params, callback });
+            return act(() => sleep(500));
+        });
+
+        expect(wrapper.text()).toContain(JSON.stringify(params));
+        expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call the callback with the parameters", async () => {
+        const params = ["USER NAME"];
+        const callback = jest.fn();
+
+        const wrapper = mount(<DebouncedCallbackComponent callback={callback} enabled={true} params={[]} />);
+        await act(async () => {
+            await sleep(1);
+            wrapper.setProps({ enabled: true, params, callback });
+            return act(() => sleep(500));
+        });
+
+        expect(wrapper.text()).toContain(JSON.stringify(params));
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback).toHaveBeenCalledWith(...params);
+    });
+
+    it("should handle multiple parameters", async () => {
+        const params = [4, 8, 15, 16, 23, 42];
+        const callback = jest.fn();
+
+        const wrapper = mount(<DebouncedCallbackComponent callback={callback} enabled={true} params={[]} />);
+        await act(async () => {
+            await sleep(1);
+            wrapper.setProps({ enabled: true, params, callback });
+            return act(() => sleep(500));
+        });
+
+        expect(wrapper.text()).toContain(JSON.stringify(params));
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback).toHaveBeenCalledWith(...params);
+    });
+
+    it("should debounce quick changes", async () => {
+        const queries = [
+            "U",
+            "US",
+            "USE",
+            "USER",
+            "USER ",
+            "USER N",
+            "USER NM",
+            "USER NMA",
+            "USER NM",
+            "USER N",
+            "USER NA",
+            "USER NAM",
+            "USER NAME",
+        ];
+        const callback = jest.fn();
+
+        const wrapper = mount(<DebouncedCallbackComponent callback={callback} enabled={true} params={[]} />);
+        await act(async () => {
+            await sleep(1);
+            for (const query of queries) {
+                wrapper.setProps({ enabled: true, params: [query], callback });
+                await sleep(50);
+            }
+            return act(() => sleep(500));
+        });
+
+        const query = queries[queries.length - 1];
+        expect(wrapper.text()).toContain(JSON.stringify(query));
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback).toHaveBeenCalledWith(query);
+    });
+
+    it("should not debounce slow changes", async () => {
+        const queries = [
+            "U",
+            "US",
+            "USE",
+            "USER",
+            "USER ",
+            "USER N",
+            "USER NM",
+            "USER NMA",
+            "USER NM",
+            "USER N",
+            "USER NA",
+            "USER NAM",
+            "USER NAME",
+        ];
+        const callback = jest.fn();
+
+        const wrapper = mount(<DebouncedCallbackComponent callback={callback} enabled={true} params={[]} />);
+        await act(async () => {
+            await sleep(1);
+            for (const query of queries) {
+                wrapper.setProps({ enabled: true, params: [query], callback });
+                await sleep(200);
+            }
+            return act(() => sleep(500));
+        });
+
+        const query = queries[queries.length - 1];
+        expect(wrapper.text()).toContain(JSON.stringify(query));
+        expect(callback).toHaveBeenCalledTimes(queries.length);
+        expect(callback).toHaveBeenCalledWith(query);
+    });
+
+    it("should not call the callback if it’s disabled", async () => {
+        const queries = [
+            "U",
+            "US",
+            "USE",
+            "USER",
+            "USER ",
+            "USER N",
+            "USER NM",
+            "USER NMA",
+            "USER NM",
+            "USER N",
+            "USER NA",
+            "USER NAM",
+            "USER NAME",
+        ];
+        const callback = jest.fn();
+
+        const wrapper = mount(<DebouncedCallbackComponent callback={callback} enabled={false} params={[]} />);
+        await act(async () => {
+            await sleep(1);
+            for (const query of queries) {
+                wrapper.setProps({ enabled: false, params: [query], callback });
+                await sleep(200);
+            }
+            return act(() => sleep(500));
+        });
+
+        const query = queries[queries.length - 1];
+        expect(wrapper.text()).toContain(JSON.stringify(query));
+        expect(callback).toHaveBeenCalledTimes(0);
+    });
+});

test/hooks/useLatestResult-test.tsx

@@ -0,0 +1,91 @@
+/*
+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 { mount } from "enzyme";
+import { sleep } from "matrix-js-sdk/src/utils";
+import React, { useEffect, useState } from "react";
+import { act } from "react-dom/test-utils";
+
+import { useLatestResult } from "../../src/hooks/useLatestResult";
+
+function LatestResultsComponent({ query, doRequest }) {
+    const [value, setValueInternal] = useState<number>(0);
+    const [updateQuery, updateResult] = useLatestResult(setValueInternal);
+    useEffect(() => {
+        updateQuery(query);
+        doRequest(query).then(it => {
+            updateResult(query, it);
+        });
+    }, [doRequest, query, updateQuery, updateResult]);
+
+    return <div>
+        { value }
+    </div>;
+}
+
+describe("useLatestResult", () => {
+    it("should return results", async () => {
+        const doRequest = async (query) => {
+            await sleep(20);
+            return query;
+        };
+
+        const wrapper = mount(<LatestResultsComponent query={0} doRequest={doRequest} />);
+        await act(async () => {
+            await sleep(25);
+        });
+        expect(wrapper.text()).toContain("0");
+        wrapper.setProps({ doRequest, query: 1 });
+        await act(async () => {
+            await sleep(15);
+        });
+        wrapper.setProps({ doRequest, query: 2 });
+        await act(async () => {
+            await sleep(15);
+        });
+        expect(wrapper.text()).toContain("0");
+        await act(async () => {
+            await sleep(15);
+        });
+        expect(wrapper.text()).toContain("2");
+    });
+
+    it("should prevent out-of-order results", async () => {
+        const doRequest = async (query) => {
+            await sleep(query);
+            return query;
+        };
+
+        const wrapper = mount(<LatestResultsComponent query={0} doRequest={doRequest} />);
+        await act(async () => {
+            await sleep(5);
+        });
+        expect(wrapper.text()).toContain("0");
+        wrapper.setProps({ doRequest, query: 50 });
+        await act(async () => {
+            await sleep(5);
+        });
+        wrapper.setProps({ doRequest, query: 1 });
+        await act(async () => {
+            await sleep(5);
+        });
+        expect(wrapper.text()).toContain("1");
+        await act(async () => {
+            await sleep(50);
+        });
+        expect(wrapper.text()).toContain("1");
+    });
+});

test/hooks/useProfileInfo-test.tsx

@@ -0,0 +1,154 @@
+/*
+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 { mount } from "enzyme";
+import { sleep } from "matrix-js-sdk/src/utils";
+import React from "react";
+import { act } from "react-dom/test-utils";
+
+import { useProfileInfo } from "../../src/hooks/useProfileInfo";
+import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { stubClient } from "../test-utils/test-utils";
+
+function ProfileInfoComponent({ onClick }) {
+    const profileInfo = useProfileInfo();
+
+    const {
+        ready,
+        loading,
+        profile,
+    } = profileInfo;
+
+    return <div onClick={() => onClick(profileInfo)}>
+        { (!ready || loading) && `ready: ${ready}, loading: ${loading}` }
+        { profile && (
+            `Name: ${profile.display_name}`
+        ) }
+    </div>;
+}
+
+describe("useProfileInfo", () => {
+    let cli;
+
+    beforeEach(() => {
+        stubClient();
+        cli = MatrixClientPeg.get();
+        cli.getProfileInfo = (query) => {
+            return Promise.resolve({
+                avatar_url: undefined,
+                displayname: query,
+            });
+        };
+    });
+
+    it("should display user profile when searching", async () => {
+        const query = "@user:home.server";
+
+        const wrapper = mount(<ProfileInfoComponent onClick={(hook) => {
+            hook.search({
+                limit: 1,
+                query,
+            });
+        }} />);
+
+        await act(async () => {
+            await sleep(1);
+            wrapper.simulate("click");
+            return act(() => sleep(1));
+        });
+
+        expect(wrapper.text()).toContain(query);
+    });
+
+    it("should work with empty queries", async () => {
+        const wrapper = mount(<ProfileInfoComponent onClick={(hook) => {
+            hook.search({
+                limit: 1,
+                query: "",
+            });
+        }} />);
+
+        await act(async () => {
+            await sleep(1);
+            wrapper.simulate("click");
+            return act(() => sleep(1));
+        });
+
+        expect(wrapper.text()).toBe("");
+    });
+
+    it("should treat invalid mxids as empty queries", async () => {
+        const queries = [
+            "@user",
+            "user@home.server",
+        ];
+
+        for (const query of queries) {
+            const wrapper = mount(<ProfileInfoComponent onClick={(hook) => {
+                hook.search({
+                    limit: 1,
+                    query,
+                });
+            }} />);
+
+            await act(async () => {
+                await sleep(1);
+                wrapper.simulate("click");
+                return act(() => sleep(1));
+            });
+
+            expect(wrapper.text()).toBe("");
+        }
+    });
+
+    it("should recover from a server exception", async () => {
+        cli.getProfileInfo = () => { throw new Error("Oops"); };
+        const query = "@user:home.server";
+
+        const wrapper = mount(<ProfileInfoComponent onClick={(hook) => {
+            hook.search({
+                limit: 1,
+                query,
+            });
+        }} />);
+        await act(async () => {
+            await sleep(1);
+            wrapper.simulate("click");
+            return act(() => sleep(1));
+        });
+
+        expect(wrapper.text()).toBe("");
+    });
+
+    it("should be able to handle an empty result", async () => {
+        cli.getProfileInfo = () => null;
+        const query = "@user:home.server";
+
+        const wrapper = mount(<ProfileInfoComponent onClick={(hook) => {
+            hook.search({
+                limit: 1,
+                query,
+            });
+        }} />);
+        await act(async () => {
+            await sleep(1);
+            wrapper.simulate("click");
+            return act(() => sleep(1));
+        });
+
+        expect(wrapper.text()).toBe("");
+    });
+});

test/hooks/useUserDirectory-test.tsx

@@ -96,7 +96,7 @@ describe("useUserDirectory", () => {
         expect(wrapper.text()).toBe("ready: true, loading: false");
     });
 
-    it("should work with empty queries", async () => {
+    it("should recover from a server exception", async () => {
         cli.searchUserDirectory = () => { throw new Error("Oops"); };
         const query = "Bob";