Move new search experience to a Beta (#7718)

src/components/views/beta/BetaCard.tsx

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import classNames from "classnames";
+import { sleep } from "matrix-js-sdk/src/utils";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -26,6 +27,8 @@ import Modal from "../../../Modal";
 import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../../SdkConfig";
 import SettingsFlag from "../elements/SettingsFlag";
+import { useFeatureEnabled } from "../../../hooks/useSettings";
+import InlineSpinner from "../elements/InlineSpinner";
 
 // XXX: Keep this around for re-use in future Betas
 
@@ -42,10 +45,10 @@ export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
             })}
             tooltip={<div>
                 <div className="mx_Tooltip_title">
-                    { _t("Spaces is a beta feature") }
+                    { _t("This is a beta feature") }
                 </div>
                 <div className="mx_Tooltip_sub">
-                    { _t("Tap for more info") }
+                    { _t("Click for more info") }
                 </div>
             </div>}
             onClick={onClick}
@@ -67,10 +70,20 @@ export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
 
 const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     const info = SettingsStore.getBetaInfo(featureId);
+    const value = useFeatureEnabled(featureId);
+    const [busy, setBusy] = useState(false);
     if (!info) return null; // Beta is invalid/disabled
 
-    const { title, caption, disclaimer, image, feedbackLabel, feedbackSubheading, extraSettings } = info;
-    const value = SettingsStore.getValue(featureId);
+    const {
+        title,
+        caption,
+        disclaimer,
+        image,
+        feedbackLabel,
+        feedbackSubheading,
+        extraSettings,
+        requiresRefresh,
+    } = info;
 
     let feedbackButton;
     if (value && feedbackLabel && feedbackSubheading && SdkConfig.get().bug_report_endpoint_url) {
@@ -84,6 +97,15 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
         </AccessibleButton>;
     }
 
+    let content: ReactNode;
+    if (busy) {
+        content = <InlineSpinner />;
+    } else if (value) {
+        content = _t("Leave the beta");
+    } else {
+        content = _t("Join the beta");
+    }
+
     return <div className="mx_BetaCard">
         <div className="mx_BetaCard_columns">
             <div>
@@ -91,14 +113,26 @@ 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
-                        onClick={() => SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value)}
+                        onClick={async () => {
+                            setBusy(true);
+                            // make it look like we're doing something for two seconds,
+                            // otherwise users think clicking did nothing
+                            if (!requiresRefresh) {
+                                await sleep(2000);
+                            }
+                            await SettingsStore.setValue(featureId, null, SettingLevel.DEVICE, !value);
+                            if (!requiresRefresh) {
+                                setBusy(false);
+                            }
+                        }}
                         kind={feedbackButton ? "primary_outline" : "primary"}
+                        disabled={busy}
                     >
-                        { value ? _t("Leave the beta") : _t("Join the beta") }
+                        { content }
                     </AccessibleButton>
                 </div>
                 { disclaimer && <div className="mx_BetaCard_disclaimer">