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/components/views/dialogs/spotlight/Option.tsx

@@ -0,0 +1,43 @@
+/*
+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 classNames from "classnames";
+import React, { ComponentProps, ReactNode } from "react";
+
+import { RovingAccessibleButton } from "../../../../accessibility/roving/RovingAccessibleButton";
+import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
+import AccessibleButton from "../../elements/AccessibleButton";
+
+interface OptionProps extends ComponentProps<typeof RovingAccessibleButton> {
+    endAdornment?: ReactNode;
+}
+
+export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, ...props }) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    return <AccessibleButton
+        {...props}
+        className={classNames(className, "mx_SpotlightDialog_option")}
+        onFocus={onFocus}
+        inputRef={ref}
+        tabIndex={-1}
+        aria-selected={isActive}
+        role="option"
+    >
+        { children }
+        <div className="mx_SpotlightDialog_enterPrompt" aria-hidden>↵</div>
+        { endAdornment }
+    </AccessibleButton>;
+};

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

@@ -0,0 +1,67 @@
+/*
+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 React from "react";
+import { IPublicRoomsChunkRoom } from "matrix-js-sdk/src/matrix";
+
+import { linkifyAndSanitizeHtml } from "../../../../HtmlUtils";
+import { _t } from "../../../../languageHandler";
+import { getDisplayAliasForRoom } from "../../../structures/RoomDirectory";
+
+const MAX_NAME_LENGTH = 80;
+const MAX_TOPIC_LENGTH = 800;
+
+export function PublicRoomResultDetails({ room }: { room: IPublicRoomsChunkRoom }): JSX.Element {
+    let name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
+    if (name.length > MAX_NAME_LENGTH) {
+        name = `${name.substring(0, MAX_NAME_LENGTH)}...`;
+    }
+
+    let topic = room.topic || '';
+    // Additional truncation based on line numbers is done via CSS,
+    // but to ensure that the DOM is not polluted with a huge string
+    // we give it a hard limit before rendering.
+    if (topic.length > MAX_TOPIC_LENGTH) {
+        topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`;
+    }
+
+    return (
+        <div className="mx_SpotlightDialog_result_publicRoomDetails">
+            <div className="mx_SpotlightDialog_result_publicRoomHeader">
+                <span className="mx_SpotlightDialog_result_publicRoomName">{ name }</span>
+                <span className="mx_SpotlightDialog_result_publicRoomAlias">
+                    { room.canonical_alias ?? room.room_id }
+                </span>
+            </div>
+            <div className="mx_SpotlightDialog_result_publicRoomDescription">
+                <span className="mx_SpotlightDialog_result_publicRoomMemberCount">
+                    { _t("%(count)s Members", {
+                        count: room.num_joined_members,
+                    }) }
+                </span>
+                { topic && (
+                    <>
+                        &nbsp;·&nbsp;
+                        <span
+                            className="mx_SpotlightDialog_result_publicRoomTopic"
+                            dangerouslySetInnerHTML={{ __html: linkifyAndSanitizeHtml(topic) }}
+                        />
+                    </>
+                ) }
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,31 @@
+/*
+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 React from "react";
+import { Room } from "matrix-js-sdk/src/matrix";
+
+import { roomContextDetailsText, spaceContextDetailsText } from "../../../../utils/i18n-helpers";
+
+export const RoomResultDetails = ({ room }: { room: Room }) => {
+    const contextDetails = room.isSpaceRoom() ? spaceContextDetailsText(room) : roomContextDetailsText(room);
+    if (contextDetails) {
+        return <div className="mx_SpotlightDialog_result_details">
+            { contextDetails }
+        </div>;
+    }
+
+    return null;
+};

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

@@ -0,0 +1,39 @@
+/*
+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 classNames from "classnames";
+import React, { ComponentProps, ReactNode } from "react";
+
+import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton";
+import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
+import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
+
+interface TooltipOptionProps extends ComponentProps<typeof RovingAccessibleTooltipButton> {
+    endAdornment?: ReactNode;
+}
+
+export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, className, ...props }) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+    return <AccessibleTooltipButton
+        {...props}
+        className={classNames(className, "mx_SpotlightDialog_option")}
+        onFocus={onFocus}
+        inputRef={ref}
+        tabIndex={-1}
+        aria-selected={isActive}
+        role="option"
+    />;
+};