Move New Search Experience out of beta (#8859)

Author: justjanne

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

@@ -125,7 +125,6 @@ describe("Spotlight", () => {
     let room2Id: string;
 
     beforeEach(() => {
-        cy.enableLabsFeature("feature_spotlight");
         cy.startSynapse("default").then(data => {
             synapse = data;
             cy.initTestUser(synapse, "Jim").then(() =>

res/css/structures/_RoomSearch.scss

@@ -38,64 +38,11 @@ limitations under the License.
         margin-bottom: 2px;
     }
 
-    .mx_RoomSearch_input {
-        border: none !important; // !important to override default app-wide styles
-        flex: 1 !important; // !important to override default app-wide styles
-        color: $primary-content !important; // !important to override default app-wide styles
-        padding: 0;
-        height: 100%;
-        width: 100%;
-
-        &:not(.mx_RoomSearch_inputExpanded)::placeholder {
-            color: $tertiary-content !important; // !important to override default app-wide styles
-        }
-    }
-
-    .mx_RoomSearch_input,
     .mx_RoomSearch_spotlightTriggerText {
         font-size: $font-12px;
         line-height: $font-16px;
     }
 
-    &.mx_RoomSearch_hasQuery {
-        border-color: $secondary-content;
-    }
-
-    &.mx_RoomSearch_focused {
-        box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
-        border-color: transparent;
-    }
-
-    &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
-        background-color: $background;
-
-        .mx_RoomSearch_clearButton {
-            width: 16px;
-            height: 16px;
-            margin-right: 8px;
-            background-color: $quinary-content;
-            border-radius: 50%;
-            position: relative;
-
-            &::before {
-                content: "";
-                position: absolute;
-                width: inherit;
-                height: inherit;
-                mask-image: url('$(res)/img/feather-customised/x.svg');
-                mask-position: center;
-                mask-size: 12px;
-                mask-repeat: no-repeat;
-                background-color: $secondary-content;
-            }
-        }
-    }
-
-    .mx_RoomSearch_clearButton {
-        width: 0;
-        height: 0;
-    }
-
     &.mx_RoomSearch_minimized {
         height: 32px;
         min-height: 32px;

res/css/views/dialogs/_SpotlightDialog.scss

@@ -465,12 +465,6 @@ limitations under the License.
         display: flex;
         border-top: 1px solid $quinary-content;
 
-        .mx_BetaCard_betaPill {
-            margin-right: 12px;
-            height: min-content;
-            align-self: center;
-        }
-
         > span {
             align-self: center;
 

res/img/betas/new_search_experience.gif

@@ -18,7 +18,6 @@ limitations under the License.
 import { _td } from "../languageHandler";
 import { IS_MAC, Key } from "../Keyboard";
 import { IBaseSetting } from "../settings/Settings";
-import IncompatibleController from "../settings/controllers/IncompatibleController";
 import { KeyCombo } from "../KeyBindingsManager";
 
 export enum KeyBindingAction {
@@ -485,13 +484,6 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
         },
         displayName: _td("Expand room list section"),
     },
-    [KeyBindingAction.ClearRoomFilter]: {
-        default: {
-            key: Key.ESCAPE,
-        },
-        displayName: _td("Clear room list filter field"),
-        controller: new IncompatibleController("feature_spotlight", { key: null }),
-    },
     [KeyBindingAction.NextRoom]: {
         default: {
             key: Key.ARROW_DOWN,

src/accessibility/KeyboardShortcuts.ts

@@ -31,7 +31,7 @@ import SpaceStore from "../../stores/spaces/SpaceStore";
 import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
-import { findSiblingElement, IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
+import { IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
 import RoomListHeader from "../views/rooms/RoomListHeader";
 import RecentlyViewedButton from "../views/rooms/RecentlyViewedButton";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
@@ -64,7 +64,6 @@ interface IState {
 
 export default class LeftPanel extends React.Component<IProps, IState> {
     private listContainerRef = createRef<HTMLDivElement>();
-    private roomSearchRef = createRef<RoomSearch>();
     private roomListRef = createRef<RoomList>();
     private focusedElement = null;
     private isDoingStickyHeaders = false;
@@ -302,32 +301,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                     this.roomListRef.current?.focus();
                 }
                 break;
-
-            case KeyBindingAction.PrevRoom:
-                if (state && state.activeRef === findSiblingElement(state.refs, 0)) {
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                    this.roomSearchRef.current?.focus();
-                }
-                break;
-        }
-    };
-
-    private onRoomListKeydown = (ev: React.KeyboardEvent) => {
-        if (ev.altKey || ev.ctrlKey || ev.metaKey) return;
-        if (SettingsStore.getValue("feature_spotlight")) return;
-
-        const action = getKeyBindingsManager().getAccessibilityAction(ev);
-
-        // we cannot handle Space as that is an activation key for all focusable elements in this widget
-        if (ev.key.length === 1) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.roomSearchRef.current?.appendChar(ev.key);
-        } else if (action === KeyBindingAction.Backspace) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            this.roomSearchRef.current?.backspace();
         }
     };
 
@@ -386,7 +359,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
             >
                 <RoomSearch
                     isMinimized={this.props.isMinimized}
-                    ref={this.roomSearchRef}
                     onSelectRoom={this.selectRoom}
                 />
 
@@ -436,7 +408,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             // Firefox sometimes makes this element focusable due to
                             // overflow:scroll;, so force it out of tab order.
                             tabIndex={-1}
-                            onKeyDown={this.onRoomListKeydown}
                         >
                             { roomList }
                         </div>

src/components/structures/LeftPanel.tsx

@@ -93,7 +93,6 @@ import SecurityCustomisations from "../../customisations/Security";
 import Spinner from "../views/elements/Spinner";
 import QuestionDialog from "../views/dialogs/QuestionDialog";
 import UserSettingsDialog from '../views/dialogs/UserSettingsDialog';
-import { UserTab } from "../views/dialogs/UserTab";
 import CreateRoomDialog from '../views/dialogs/CreateRoomDialog';
 import RoomDirectory from './RoomDirectory';
 import KeySignatureUploadFailedDialog from "../views/dialogs/KeySignatureUploadFailedDialog";
@@ -118,7 +117,6 @@ import { showSpaceInvite } from "../../utils/space";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import { ActionPayload } from "../../dispatcher/payloads";
 import { SummarizedNotificationState } from "../../stores/notifications/SummarizedNotificationState";
-import GenericToast from '../views/toasts/GenericToast';
 import Views from '../../Views';
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { ViewHomePagePayload } from '../../dispatcher/payloads/ViewHomePagePayload';
@@ -738,9 +736,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     this.state.resizeNotifier.notifyLeftHandleResized();
                 });
                 break;
-            case 'focus_room_filter': // for CtrlOrCmd+K to work by expanding the left panel first
-                if (SettingsStore.getValue("feature_spotlight")) break; // don't expand if spotlight enabled
-                // fallthrough
             case 'show_left_panel':
                 this.setState({
                     collapseLhs: false,
@@ -1398,42 +1393,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 showNotificationsToast(false);
             }
 
-            if (!localStorage.getItem("mx_seen_feature_spotlight_toast")) {
-                setTimeout(() => {
-                    // Skip the toast if the beta is already enabled or the user has changed the setting from default
-                    if (SettingsStore.getValue("feature_spotlight") ||
-                        SettingsStore.getValue("feature_spotlight", null, true) !== null) {
-                        return;
-                    }
-
-                    const key = "BETA_SPOTLIGHT_TOAST";
-                    ToastStore.sharedInstance().addOrReplaceToast({
-                        key,
-                        title: _t("New search beta available"),
-                        props: {
-                            description: _t("We're testing a new search to make finding what you want quicker.\n"),
-                            acceptLabel: _t("Learn more"),
-                            onAccept: () => {
-                                dis.dispatch({
-                                    action: Action.ViewUserSettings,
-                                    initialTabId: UserTab.Labs,
-                                });
-                                localStorage.setItem("mx_seen_feature_spotlight_toast", "true");
-                                ToastStore.sharedInstance().dismissToast(key);
-                            },
-                            rejectLabel: _t("Dismiss"),
-                            onReject: () => {
-                                localStorage.setItem("mx_seen_feature_spotlight_toast", "true");
-                                ToastStore.sharedInstance().dismissToast(key);
-                            },
-                        },
-                        icon: "labs",
-                        component: GenericToast,
-                        priority: 9,
-                    });
-                }, 5 * 60 * 1000); // show after 5 minutes to not overload user with toasts on launch
-            }
-
             dis.fire(Action.FocusSendMessageComposer);
             this.setState({
                 ready: true,