Separate labs and betas more clearly (#8969)

* Separate labs and betas more clearly Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix tests Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Capitalize `L` in `Labs` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Use `labsSections` instead of `SdkConfig.get("show_labs_settings")` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Link to `betas.md` instead of `labs.md` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Change labs label back to `Labs` Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve labs section copy Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve labs flags copy Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * i18n Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix cypress tests Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Reduce diff Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove empty line Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix comment Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove margin-bottom for the last child Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve code based on review Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix ts Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve ts Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Fix ts Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve code Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Improve TS Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2022-11-30 22:20:26 +01:00 · 2022-11-30 22:20:26 +01:00 · b0dfb2262e
commit b0dfb2262e
parent 5cbb748843
8 changed files with 128 additions and 70 deletions
--- a/res/css/views/beta/_BetaCard.pcss
+++ b/res/css/views/beta/_BetaCard.pcss
@ -114,6 +114,10 @@ limitations under the License.
            }
        }
    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
 }

 .mx_BetaCard_betaPill {
--- a/res/css/views/elements/_SettingsFlag.pcss
+++ b/res/css/views/elements/_SettingsFlag.pcss
@ -60,4 +60,8 @@ limitations under the License.
        font-family: $monospace-font-family !important;
        background-color: $rte-code-bg-color;
    }
+
+    .mx_SettingsTab_microcopy_warning::before {
+        content: "⚠️ ";
+    }
 }
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@ -80,12 +80,13 @@ export default class SettingsFlag extends React.Component<IProps, IState> {

        if (!canChange && this.props.hideIfCannotSet) return null;

-        const label = this.props.label
+        const label = (this.props.label
            ? _t(this.props.label)
-            : SettingsStore.getDisplayName(this.props.name, this.props.level);
+            : SettingsStore.getDisplayName(this.props.name, this.props.level)) ?? undefined;
        const description = SettingsStore.getDescription(this.props.name);
+        const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name);

-        let disabledDescription: JSX.Element;
+        let disabledDescription: JSX.Element | null = null;
        if (this.props.disabled && this.props.disabledDescription) {
            disabledDescription = <div className="mx_SettingsFlag_microcopy">
                { this.props.disabledDescription }
@ -106,7 +107,20 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                    <label className="mx_SettingsFlag_label">
                        <span className="mx_SettingsFlag_labelText">{ label }</span>
                        { description && <div className="mx_SettingsFlag_microcopy">
-                            { description }
+                            { shouldWarn
+                                ? _t(
+                                    "<w>WARNING:</w> <description/>", {},
+                                    {
+                                        "w": (sub) => (
+                                            <span className="mx_SettingsTab_microcopy_warning">
+                                                { sub }
+                                            </span>
+                                        ),
+                                        "description": description,
+                                    },
+                                )
+                                : description
+                            }
                        </div> }
                        { disabledDescription }
                    </label>
--- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx
@ -19,7 +19,6 @@ import { sortBy } from "lodash";

 import { _t } from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
-import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SdkConfig from "../../../../../SdkConfig";
 import BetaCard from "../../../beta/BetaCard";
@ -28,24 +27,6 @@ import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import { LabGroup, labGroupNames } from "../../../../../settings/Settings";
 import { EnhancedMap } from "../../../../../utils/maps";

-interface ILabsSettingToggleProps {
-    featureId: string;
-}
-
-export class LabsSettingToggle extends React.Component<ILabsSettingToggleProps> {
-    private onChange = async (checked: boolean): Promise<void> => {
-        await SettingsStore.setValue(this.props.featureId, null, SettingLevel.DEVICE, checked);
-        this.forceUpdate();
-    };
-
-    public render(): JSX.Element {
-        const label = SettingsStore.getDisplayName(this.props.featureId);
-        const value = SettingsStore.getValue(this.props.featureId);
-        const canChange = SettingsStore.canSetValue(this.props.featureId, null, SettingLevel.DEVICE);
-        return <LabelledToggleSwitch value={value} label={label} onChange={this.onChange} disabled={!canChange} />;
-    }
-}
-
 interface IState {
    showJumpToDate: boolean;
    showExploringPublicSpaces: boolean;
@ -93,7 +74,7 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
            const groups = new EnhancedMap<LabGroup, JSX.Element[]>();
            labs.forEach(f => {
                groups.getOrCreate(SettingsStore.getLabGroup(f), []).push(
-                    <LabsSettingToggle featureId={f} key={f} />,
+                    <SettingsFlag level={SettingLevel.DEVICE} name={f} key={f} />,
                );
            });

@ -154,24 +135,42 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {

        return (
            <div className="mx_SettingsTab mx_LabsUserSettingsTab">
-                <div className="mx_SettingsTab_heading">{ _t("Labs") }</div>
+                <div className="mx_SettingsTab_heading">{ _t("Upcoming features") }</div>
                <div className='mx_SettingsTab_subsectionText'>
                    {
-                        _t('Feeling experimental? Labs are the best way to get things early, ' +
-                            'test out new features and help shape them before they actually launch. ' +
-                            '<a>Learn more</a>.', {}, {
-                            'a': (sub) => {
-                                return <a
-                                    href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
-                                    rel='noreferrer noopener'
-                                    target='_blank'
-                                >{ sub }</a>;
-                            },
-                        })
+                        _t(
+                            "What's next for %(brand)s? "
+                            + "Labs are the best way to get things early, "
+                            + "test out new features and help shape them before they actually launch.",
+                            { brand: SdkConfig.get("brand") },
+                        )
                    }
                </div>
                { betaSection }
-                { labsSections }
+                { labsSections && <>
+                    <div className="mx_SettingsTab_heading">{ _t("Early previews") }</div>
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {
+                            _t(
+                                "Feeling experimental? "
+                                + "Try out our latest ideas in development. "
+                                + "These features are not finalised; "
+                                + "they may be unstable, may change, or may be dropped altogether. "
+                                + "<a>Learn more</a>.",
+                                {},
+                                {
+                                    'a': (sub) => {
+                                        return <a
+                                            href="https://github.com/vector-im/element-web/blob/develop/docs/labs.md"
+                                            rel='noreferrer noopener'
+                                            target='_blank'
+                                        >{ sub }</a>;
+                                    },
+                                })
+                        }
+                    </div>
+                    { labsSections }
+                </> }
            </div>
        );
    }
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@ -909,7 +909,8 @@
    "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
    "Explore public spaces in the new search dialog": "Explore public spaces in the new search dialog",
    "Let moderators hide messages pending moderation.": "Let moderators hide messages pending moderation.",
-    "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators",
+    "Report to moderators": "Report to moderators",
+    "In rooms that support moderation, the “Report” button will let you report abuse to room moderators.": "In rooms that support moderation, the “Report” button will let you report abuse to room moderators.",
    "Render LaTeX maths in messages": "Render LaTeX maths in messages",
    "Message Pinning": "Message Pinning",
    "Threaded messaging": "Threaded messaging",
@ -921,9 +922,11 @@
    "How can I leave the beta?": "How can I leave the beta?",
    "To leave, return to this page and use the “%(leaveTheBeta)s” button.": "To leave, return to this page and use the “%(leaveTheBeta)s” button.",
    "Leave the beta": "Leave the beta",
-    "Try out the rich text editor (plain text mode coming soon)": "Try out the rich text editor (plain text mode coming soon)",
+    "Rich text editor": "Rich text editor",
+    "Use rich text instead of Markdown in the message composer. Plain text mode coming soon.": "Use rich text instead of Markdown in the message composer. Plain text mode coming soon.",
    "Render simple counters in room header": "Render simple counters in room header",
-    "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
+    "New ways to ignore people": "New ways to ignore people",
+    "Currently experimental.": "Currently experimental.",
    "Support adding custom themes": "Support adding custom themes",
    "Show message previews for reactions in DMs": "Show message previews for reactions in DMs",
    "Show message previews for reactions in all rooms": "Show message previews for reactions in all rooms",
@ -933,15 +936,19 @@
    "Show HTML representation of room topics": "Show HTML representation of room topics",
    "Show info about bridges in room settings": "Show info about bridges in room settings",
    "Use new room breadcrumbs": "Use new room breadcrumbs",
-    "Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
+    "Right panel stays open": "Right panel stays open",
+    "Defaults to room member list.": "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)",
    "Send read receipts": "Send read receipts",
-    "Sliding Sync mode (under active development, cannot be disabled)": "Sliding Sync mode (under active development, cannot be disabled)",
+    "Sliding Sync mode": "Sliding Sync mode",
+    "Under active development, cannot be disabled.": "Under active development, cannot be disabled.",
    "Element Call video rooms": "Element Call video rooms",
    "New group call experience": "New group call experience",
-    "Live Location Sharing (temporary implementation: locations persist in room history)": "Live Location Sharing (temporary implementation: locations persist in room history)",
-    "Favourite Messages (under active development)": "Favourite Messages (under active development)",
-    "Voice broadcast (under active development)": "Voice broadcast (under active development)",
+    "Live Location Sharing": "Live Location Sharing",
+    "Temporary implementation. Locations persist in room history.": "Temporary implementation. Locations persist in room history.",
+    "Favourite Messages": "Favourite Messages",
+    "Under active development.": "Under active development.",
+    "Under active development": "Under active development",
    "Use new session manager": "Use new session manager",
    "New session manager": "New session manager",
    "Have greater visibility and control over all your sessions.": "Have greater visibility and control over all your sessions.",
@ -1002,7 +1009,8 @@
    "Show shortcuts to recently viewed rooms above the room list": "Show shortcuts to recently viewed rooms above the room list",
    "Show shortcut to welcome checklist above the room list": "Show shortcut to welcome checklist above the room list",
    "Show hidden events in timeline": "Show hidden events in timeline",
-    "Low bandwidth mode (requires compatible homeserver)": "Low bandwidth mode (requires compatible homeserver)",
+    "Low bandwidth mode": "Low bandwidth mode",
+    "Requires compatible homeserver.": "Requires compatible homeserver.",
    "Allow fallback call assist server (turn.matrix.org)": "Allow fallback call assist server (turn.matrix.org)",
    "Only applies if your homeserver does not offer one. Your IP address would be shared during a call.": "Only applies if your homeserver does not offer one. Your IP address would be shared during a call.",
    "Show previews/thumbnails for images": "Show previews/thumbnails for images",
@ -1540,8 +1548,10 @@
    "Your access token gives full access to your account. Do not share it with anyone.": "Your access token gives full access to your account. Do not share it with anyone.",
    "Clear cache and reload": "Clear cache and reload",
    "Keyboard": "Keyboard",
-    "Labs": "Labs",
-    "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.",
+    "Upcoming features": "Upcoming features",
+    "What's next for %(brand)s? Labs are the best way to get things early, test out new features and help shape them before they actually launch.": "What's next for %(brand)s? Labs are the best way to get things early, test out new features and help shape them before they actually launch.",
+    "Early previews": "Early previews",
+    "Feeling experimental? Try out our latest ideas in development. These features are not finalised; they may be unstable, may change, or may be dropped altogether. <a>Learn more</a>.": "Feeling experimental? Try out our latest ideas in development. These features are not finalised; they may be unstable, may change, or may be dropped altogether. <a>Learn more</a>.",
    "Ignored/Blocked": "Ignored/Blocked",
    "Error adding ignored user/server": "Error adding ignored user/server",
    "Something went wrong. Please try again or view your console for hints.": "Something went wrong. Please try again or view your console for hints.",
@ -2563,6 +2573,7 @@
    "Join millions for free on the largest public server": "Join millions for free on the largest public server",
    "Homeserver": "Homeserver",
    "Help": "Help",
+    "<w>WARNING:</w> <description/>": "<w>WARNING:</w> <description/>",
    "Choose a locale": "Choose a locale",
    "Continue with %(provider)s": "Continue with %(provider)s",
    "Sign in with single sign-on": "Sign in with single sign-on",
@ -2995,6 +3006,7 @@
    "Upload %(count)s other files|one": "Upload %(count)s other file",
    "Cancel All": "Cancel All",
    "Upload Error": "Upload Error",
+    "Labs": "Labs",
    "Verify other device": "Verify other device",
    "Verification Request": "Verification Request",
    "Approve widget permissions": "Approve widget permissions",
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@ -122,13 +122,13 @@ export const labGroupNames: Record<LabGroup, string> = {
    [LabGroup.Developer]: _td("Developer"),
 };

-export type SettingValueType = boolean |
-    number |
-    string |
-    number[] |
-    string[] |
-    Record<string, unknown> |
-    null;
+export type SettingValueType = boolean
+    | number
+    | string
+    | number[]
+    | string[]
+    | Record<string, unknown>
+    | null;

 export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
    isFeature?: false | undefined;
@ -180,6 +180,9 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
        extraSettings?: string[];
        requiresRefresh?: boolean;
    };
+
+    // Whether the setting should have a warning sign in the microcopy
+    shouldWarn?: boolean;
 }

 export interface IFeature extends Omit<IBaseSetting<boolean>, "isFeature"> {
@ -245,8 +248,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
    "feature_report_to_moderators": {
        isFeature: true,
        labsGroup: LabGroup.Moderation,
-        displayName: _td("Report to moderators prototype. " +
-            "In rooms that support moderation, the `report` button will let you report abuse to room moderators"),
+        displayName: _td("Report to moderators"),
+        description: _td(
+            "In rooms that support moderation, "
+            +"the “Report” button will let you report abuse to room moderators.",
+        ),
        supportedLevels: LEVELS_FEATURE,
        default: false,
    },
@ -307,7 +313,8 @@ export const SETTINGS: {[setting: string]: ISetting} = {
    "feature_wysiwyg_composer": {
        isFeature: true,
        labsGroup: LabGroup.Messaging,
-        displayName: _td("Try out the rich text editor (plain text mode coming soon)"),
+        displayName: _td("Rich text editor"),
+        description: _td("Use rich text instead of Markdown in the message composer. Plain text mode coming soon."),
        supportedLevels: LEVELS_FEATURE,
        default: false,
    },
@ -321,7 +328,8 @@ export const SETTINGS: {[setting: string]: ISetting} = {
    "feature_mjolnir": {
        isFeature: true,
        labsGroup: LabGroup.Moderation,
-        displayName: _td("Try out new ways to ignore people (experimental)"),
+        displayName: _td("New ways to ignore people"),
+        description: _td("Currently experimental."),
        supportedLevels: LEVELS_FEATURE,
        default: false,
    },
@ -400,7 +408,8 @@ export const SETTINGS: {[setting: string]: ISetting} = {
        isFeature: true,
        labsGroup: LabGroup.Rooms,
        supportedLevels: LEVELS_FEATURE,
-        displayName: _td("Right panel stays open (defaults to room member list)"),
+        displayName: _td("Right panel stays open"),
+        description: _td("Defaults to room member list."),
        default: false,
    },
    "feature_jump_to_date": {
@ -425,7 +434,9 @@ export const SETTINGS: {[setting: string]: ISetting} = {
        isFeature: true,
        labsGroup: LabGroup.Developer,
        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
-        displayName: _td('Sliding Sync mode (under active development, cannot be disabled)'),
+        displayName: _td('Sliding Sync mode'),
+        description: _td("Under active development, cannot be disabled."),
+        shouldWarn: true,
        default: false,
        controller: new SlidingSyncController(),
    },
@ -453,23 +464,25 @@ export const SETTINGS: {[setting: string]: ISetting} = {
        isFeature: true,
        labsGroup: LabGroup.Messaging,
        supportedLevels: LEVELS_FEATURE,
-        displayName: _td(
-            "Live Location Sharing (temporary implementation: locations persist in room history)",
-        ),
+        displayName: _td("Live Location Sharing"),
+        description: _td("Temporary implementation. Locations persist in room history."),
+        shouldWarn: true,
        default: false,
    },
    "feature_favourite_messages": {
        isFeature: true,
        labsGroup: LabGroup.Messaging,
        supportedLevels: LEVELS_FEATURE,
-        displayName: _td("Favourite Messages (under active development)"),
+        displayName: _td("Favourite Messages"),
+        description: _td("Under active development."),
        default: false,
    },
    [Features.VoiceBroadcast]: {
        isFeature: true,
        labsGroup: LabGroup.Messaging,
        supportedLevels: LEVELS_FEATURE,
-        displayName: _td("Voice broadcast (under active development)"),
+        displayName: _td("Voice broadcast"),
+        description: _td("Under active development"),
        default: false,
    },
    "feature_new_device_manager": {
@ -910,9 +923,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
    },
    "lowBandwidth": {
        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
-        displayName: _td('Low bandwidth mode (requires compatible homeserver)'),
+        displayName: _td('Low bandwidth mode'),
+        description: _td("Requires compatible homeserver."),
        default: false,
        controller: new ReloadOnChangeController(),
+        shouldWarn: true,
    },
    "fallbackICEServerAllowed": {
        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
--- a/src/settings/SettingsStore.ts
+++ b/src/settings/SettingsStore.ts
@ -295,6 +295,16 @@ export default class SettingsStore {
        return SETTINGS[settingName].isFeature;
    }

+    /**
+     * Determines if a setting should have a warning sign in the microcopy
+     * @param {string} settingName The setting to look up.
+     * @return {boolean} True if the setting should have a warning sign.
+     */
+    public static shouldHaveWarning(settingName: string): boolean {
+        if (!SETTINGS[settingName]) return false;
+        return SETTINGS[settingName].shouldWarn ?? false;
+    }
+
    public static getBetaInfo(settingName: string): ISetting["betaInfo"] {
        // consider a beta disabled if the config is explicitly set to false, in which case treat as normal Labs flag
        if (SettingsStore.isFeature(settingName)
@ -355,7 +365,7 @@ export default class SettingsStore {
    public static getValueAt(
        level: SettingLevel,
        settingName: string,
-        roomId: string = null,
+        roomId: string | null = null,
        explicit = false,
        excludeDefault = false,
    ): any {
@ -420,7 +430,7 @@ export default class SettingsStore {
    private static getFinalValue(
        setting: ISetting,
        level: SettingLevel,
-        roomId: string,
+        roomId: string | null,
        calculatedValue: any,
        calculatedAtLevel: SettingLevel,
    ): any {
--- a/src/settings/controllers/SettingController.ts
+++ b/src/settings/controllers/SettingController.ts
@ -39,7 +39,7 @@ export default abstract class SettingController {
     */
    public getValueOverride(
        level: SettingLevel,
-        roomId: string,
+        roomId: string | null,
        calculatedValue: any,
        calculatedAtLevel: SettingLevel,
    ): any {