Show all labs flags if developerMode enabled (#11746)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Author: t3chguy

src/IConfigOptions.ts

@@ -95,7 +95,7 @@ export interface IConfigOptions {
  integrations_rest_url?: string;
  integrations_widgets_urls?: string[];
 
- show_labs_settings?: boolean;
+ show_labs_settings: boolean;
  features?: Record<string, boolean>; // <FeatureName, EnabledBool>
 
  bug_report_endpoint_url?: string; // omission disables bug reporting

src/SdkConfig.ts

@@ -31,6 +31,7 @@ export const DEFAULTS: DeepReadonly<IConfigOptions> = {
  integrations_ui_url: "https://scalar.vector.im/",
  integrations_rest_url: "https://scalar.vector.im/api",
  uisi_autorageshake_app: "element-auto-uisi",
+ show_labs_settings: false,
 
  jitsi: {
  preferred_domain: "meet.element.io",

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -21,14 +21,13 @@ import TabbedView, { Tab } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore, { CallbackFn } from "../../../settings/SettingsStore";
-import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import LabsUserSettingsTab, { showLabsFlags } from "../settings/tabs/user/LabsUserSettingsTab";
 import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
 import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
 import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
 import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
 import VoiceUserSettingsTab from "../settings/tabs/user/VoiceUserSettingsTab";
 import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
-import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
@@ -161,10 +160,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
  ),
  );
  // 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 (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
  tabs.push(
  new Tab(
  UserTab.Labs,

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

@@ -18,7 +18,6 @@ limitations under the License.
 import React from "react";
 
 import { ICategory, CATEGORIES, CategoryName, KeyBindingAction } from "../../../../../accessibility/KeyboardShortcuts";
-import SdkConfig from "../../../../../SdkConfig";
 import { _t } from "../../../../../languageHandler";
 import {
  getKeyboardShortcutDisplayName,
@@ -28,14 +27,15 @@ import { KeyboardShortcut } from "../../KeyboardShortcut";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection from "../../shared/SettingsSubsection";
+import { showLabsFlags } from "./LabsUserSettingsTab";
 
 interface IKeyboardShortcutRowProps {
  name: KeyBindingAction;
 }
 
 // Filter out the labs section if labs aren't enabled.
 const visibleCategories = (Object.entries(CATEGORIES) as [CategoryName, ICategory][]).filter(
- ([categoryName]) => categoryName !== CategoryName.LABS || SdkConfig.get("show_labs_settings"),
+ ([categoryName]) => categoryName !== CategoryName.LABS || showLabsFlags(),
 );
 
 const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {

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

@@ -29,6 +29,10 @@ import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection, { SettingsSubsectionText } from "../../shared/SettingsSubsection";
 import SettingsTab from "../SettingsTab";
 
+export const showLabsFlags = (): boolean => {
+ return SdkConfig.get("show_labs_settings") || SettingsStore.getValue("developerMode");
+};
+
 export default class LabsUserSettingsTab extends React.Component<{}> {
  private readonly labs: string[];
  private readonly betas: string[];
@@ -48,7 +52,7 @@ export default class LabsUserSettingsTab extends React.Component<{}> {
  this.labs = labs;
  this.betas = betas;
 
- if (!SdkConfig.get("show_labs_settings")) {
+ if (!showLabsFlags()) {
  this.labs = [];
  }
  }