Separate labs and betas more clearly

cypress/integration/5-threads/threads.spec.ts

@@ -48,7 +48,7 @@ describe("Threads", () => {
         markWindowBeforeReload();
 
         // Turn off
-        cy.openUserSettings("Labs").within(() => {
+        cy.openUserSettings("Betas").within(() => {
             // initially the new property is there
             cy.window().should("have.prop", "beforeReload", true);
 
@@ -61,7 +61,7 @@ describe("Threads", () => {
         markWindowBeforeReload();
 
         // Turn on
-        cy.openUserSettings("Labs").within(() => {
+        cy.openUserSettings("Betas").within(() => {
             // initially the new property is there
             cy.window().should("have.prop", "beforeReload", true);
 

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -37,6 +37,20 @@ import SidebarUserSettingsTab from "../settings/tabs/user/SidebarUserSettingsTab
 import KeyboardUserSettingsTab from "../settings/tabs/user/KeyboardUserSettingsTab";
 import { UserTab } from "./UserTab";
 
+/**
+ * Returns null if labs are disabled and no betas exist
+ */
+const getLabsTabLabel = (): string | null => {
+    const showLabs = SdkConfig.get("show_labs_settings");
+    const showBetas = SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k));
+
+    if (showBetas && showLabs) return _td("Betas & Labs");
+    else if (showBetas) return _td("Betas");
+    else if (showLabs) return _td("Labs");
+
+    return null;
+};
+
 interface IProps extends IDialogProps {
     initialTabId?: UserTab;
 }
@@ -114,7 +128,6 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
             <SidebarUserSettingsTab />,
             "UserSettingsSidebar",
         ));
-
         if (SettingsStore.getValue(UIFeature.Voip)) {
             tabs.push(new Tab(
                 UserTab.Voice,
@@ -124,21 +137,17 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
                 "UserSettingsVoiceVideo",
             ));
         }
-
         tabs.push(new Tab(
             UserTab.Security,
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
             <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
             "UserSettingsSecurityPrivacy",
         ));
-        // Show the Labs tab if enabled or if there are any active betas
-        if (SdkConfig.get("show_labs_settings")
-            || SettingsStore.getFeatureSettingNames().some(k => SettingsStore.getBetaInfo(k))
-        ) {
+        if (getLabsTabLabel()) {
             tabs.push(new Tab(
                 UserTab.Labs,
-                _td("Labs"),
+                getLabsTabLabel(),
                 "mx_UserSettingsDialog_labsIcon",
                 <LabsUserSettingsTab />,
                 "UserSettingsLabs",

src/components/views/settings/tabs/user/LabsUserSettingsTab.tsx

@@ -163,10 +163,10 @@ 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("Betas") }</div>
                 <div className='mx_SettingsTab_subsectionText'>
                     {
-                        _t('Feeling experimental? Labs are the best way to get things early, ' +
+                        _t('Feeling experimental? Betas 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) => {
@@ -180,7 +180,10 @@ export default class LabsUserSettingsTab extends React.Component<{}, IState> {
                     }
                 </div>
                 { betaSection }
-                { labsSections }
+                { SdkConfig.get("show_labs_settings") && <>
+                    <div className="mx_SettingsTab_heading">{ _t("Labs") }</div>
+                    { labsSections }
+                </> }
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -1448,8 +1448,9 @@
     "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",
+    "Betas": "Betas",
+    "Feeling experimental? Betas 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? Betas are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.",
     "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>.",
     "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.",
@@ -2776,6 +2777,7 @@
     "Upload %(count)s other files|one": "Upload %(count)s other file",
     "Cancel All": "Cancel All",
     "Upload Error": "Upload Error",
+    "Betas & Labs": "Betas & Labs",
     "Verify other device": "Verify other device",
     "Verification Request": "Verification Request",
     "Approve widget permissions": "Approve widget permissions",