Move new search experience to a Beta

res/css/views/beta/_BetaCard.scss

@@ -56,6 +56,14 @@ limitations under the License.
                 line-height: $font-15px;
                 color: $secondary-content;
                 margin-top: 20px;
+
+                > h4 {
+                    margin: 0;
+                }
+
+                > p {
+                    margin-top: 0;
+                }
             }
         }
 

src/components/views/beta/BetaCard.tsx

@@ -26,6 +26,7 @@ import Modal from "../../../Modal";
 import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../../SdkConfig";
 import SettingsFlag from "../elements/SettingsFlag";
+import { useFeatureEnabled } from "../../../hooks/useSettings";
 
 // XXX: Keep this around for re-use in future Betas
 
@@ -67,10 +68,10 @@ export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
 
 const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     const info = SettingsStore.getBetaInfo(featureId);
+    const value = useFeatureEnabled(featureId);
     if (!info) return null; // Beta is invalid/disabled
 
     const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading, extraSettings } = info;
-    const value = SettingsStore.getValue(featureId);
 
     let feedbackButton;
     if (value && feedbackLabel && feedbackSubheading && SdkConfig.get().bug_report_endpoint_url) {
@@ -91,7 +92,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                     { titleOverride || _t(title) }
                     <BetaPill />
                 </h3>
-                <span className="mx_BetaCard_caption">{ _t(caption) }</span>
+                <span className="mx_BetaCard_caption">{ caption() }</span>
                 <div className="mx_BetaCard_buttons">
                     { feedbackButton }
                     <AccessibleButton

src/i18n/strings/en_EN.json

@@ -885,7 +885,13 @@
     "Show extensible event representation of events": "Show extensible event representation of events",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Use new room breadcrumbs": "Use new room breadcrumbs",
-    "New spotlight search experience": "New spotlight search experience",
+    "New search experience": "New search experience",
+    "A new quick way to search spaces and rooms you're in.": "A new quick way to search spaces and rooms you're in.",
+    "This feature is a work in progress, so all feedback is very welcome.": "This feature is a work in progress, so all feedback is very welcome.",
+    "Leave beta": "Leave beta",
+    "Just return to this page or tap on the beta badge when you search.": "Just return to this page or tap on the beta badge when you search.",
+    "Feedback": "Feedback",
+    "Search and click on feedback": "Search and click on feedback",
     "Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
     "Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
     "Don't send read receipts": "Don't send read receipts",
@@ -2552,7 +2558,6 @@
     "Feedback sent": "Feedback sent",
     "Comment": "Comment",
     "Your platform and username will be noted to help us use your feedback as much as we can.": "Your platform and username will be noted to help us use your feedback as much as we can.",
-    "Feedback": "Feedback",
     "You may contact me if you want to follow up or to let me test out upcoming ideas": "You may contact me if you want to follow up or to let me test out upcoming ideas",
     "Rate %(brand)s": "Rate %(brand)s",
     "Tell us below how you feel about %(brand)s so far.": "Tell us below how you feel about %(brand)s so far.",

src/settings/Settings.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 */
 
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
-import { _td } from '../languageHandler';
+import { _t, _td } from '../languageHandler';
 import {
     NotificationBodyEnabledController,
     NotificationsEnabledController,
@@ -155,7 +155,7 @@ interface IBaseSetting {
     // XXX: Keep this around for re-use in future Betas
     betaInfo?: {
         title: string; // _td
-        caption: string; // _td
+        caption: () => ReactNode;
         disclaimer?: (enabled: boolean) => ReactNode;
         image: string; // require(...)
         feedbackSubheading?: string;
@@ -336,8 +336,28 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         isFeature: true,
         labsGroup: LabGroup.Rooms,
         supportedLevels: LEVELS_FEATURE,
-        displayName: _td("New spotlight search experience"),
-        default: false,
+        displayName: _td("New search experience"),
+        default: false,
+        betaInfo: {
+            title: _td("New search experience"),
+            caption: () => <>
+                <p>{ _t("A new quick way to search spaces and rooms you're in.") }</p>
+                <p>{ _t("This feature is a work in progress, so all feedback is very welcome.") }</p>
+            </>,
+            disclaimer: enabled => enabled
+                ? <>
+                    <h4>{ _t("Leave beta") }</h4>
+                    <p>{ _t("Just return to this page or tap on the beta badge when you search.") }</p>
+                    <h4>{ _t("Feedback") }</h4>
+                    <p>{ _t("Search and click on feedback") }</p>
+                </>
+                : <>
+                    <h4>{ _t("Feedback") }</h4>
+                    <p>{ _t("Search and click on feedback") }</p>
+                </>,
+            feedbackLabel: "spotlight-feedback",
+            image: require("../../res/img/betas/new_search_experience.png"),
+        },
     },
     "feature_right_panel_default_open": {
         isFeature: true,