Implemet developer mode

src/i18n/locales/en/messages.json

@@ -207,7 +207,9 @@
  "SettingsView": {
  "Settings": "Settings",
  "LanguageSelector": "Language selector",
- "CurrentLanguage": "Current language"
+ "CurrentLanguage": "Current language",
+ "DeveloperMode": "Developer Mode",
+ "DeveloperOptions": "Developer Options"
  },
  "SupportView": {
  "Support": "Support",

src/ui/components/DeviceOptionsForm/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../gql/generated/types';
 import ShowAlerts from '../ShowAlerts';
 import Loader from '../Loader';
+import useDeveloperMode from '../../hooks/useDeveloperMode';
 
 const styles: Record<string, SxProps<Theme>> = {
  categoryTitle: {
@@ -242,29 +243,33 @@ const DeviceOptionsForm: FunctionComponent<DeviceOptionsFormProps> = (
  });
  };
 
+ const { isDeveloperModeEnabled } = useDeveloperMode();
+
  return (
  <>
- <FormControl component="fieldset" sx={styles.userDefinesMode}>
- <RadioGroup
- row
- value={deviceOptions.userDefinesMode}
- onChange={onUserDefinesMode}
- defaultValue="top"
- >
- <FormControlLabel
- value={UserDefinesMode.UserInterface}
- sx={styles.radioControl}
- control={<Radio sx={styles.radio} color="primary" />}
- label={t('DeviceOptionsForm.StandardMode')}
- />
- <FormControlLabel
- value={UserDefinesMode.Manual}
- sx={styles.radioControl}
- control={<Radio sx={styles.radio} color="primary" />}
- label={t('DeviceOptionsForm.ManualMode')}
- />
- </RadioGroup>
- </FormControl>
+ {isDeveloperModeEnabled && (
+ <FormControl component="fieldset" sx={styles.userDefinesMode}>
+ <RadioGroup
+ row
+ value={deviceOptions.userDefinesMode}
+ onChange={onUserDefinesMode}
+ defaultValue="top"
+ >
+ <FormControlLabel
+ value={UserDefinesMode.UserInterface}
+ sx={styles.radioControl}
+ control={<Radio sx={styles.radio} color="primary" />}
+ label={t('DeviceOptionsForm.StandardMode')}
+ />
+ <FormControlLabel
+ value={UserDefinesMode.Manual}
+ sx={styles.radioControl}
+ control={<Radio sx={styles.radio} color="primary" />}
+ label={t('DeviceOptionsForm.ManualMode')}
+ />
+ </RadioGroup>
+ </FormControl>
+ )}
  {deviceOptions.userDefinesMode === UserDefinesMode.Manual && (
  <Grid container spacing={3}>
  <Grid item xs>

src/ui/components/FirmwareVersionForm/index.tsx

@@ -29,6 +29,7 @@
 import { ChooseFolderResponseBody, IpcRequest } from '../../../ipc';
 import ApplicationStorage from '../../storage';
 import GitRepository from '../../models/GitRepository';
+import useDeveloperMode from '../../hooks/useDeveloperMode';
 
 const styles: Record<string, SxProps<Theme>> = {
  tabs: {
@@ -293,7 +294,7 @@
  .catch((err) => {
  console.error('failed to get firmware source', err);
  });
  }, []);
 
  const onChooseFolder = () => {
  ipcRenderer
@@ -405,6 +406,8 @@
  const showBetaFpvAlert =
  localPath?.toLocaleLowerCase()?.indexOf('betafpv') > -1;
 
+ const { isDeveloperModeEnabled } = useDeveloperMode();
+
  return (
  <>
  <Tabs
@@ -417,22 +420,30 @@
  label={t('FirmwareVersionForm.OfficialReleases')}
  value={FirmwareSource.GitTag}
  />
- <Tab
- label={t('FirmwareVersionForm.GitBranch')}
- value={FirmwareSource.GitBranch}
- />
- <Tab
- label={t('FirmwareVersionForm.GitCommit')}
- value={FirmwareSource.GitCommit}
- />
- <Tab
- label={t('FirmwareVersionForm.Local')}
- value={FirmwareSource.Local}
- />
- <Tab
- label={t('FirmwareVersionForm.GitPullRequest')}
- value={FirmwareSource.GitPullRequest}
- />
+ {isDeveloperModeEnabled && (
+ <Tab
+ label={t('FirmwareVersionForm.GitBranch')}
+ value={FirmwareSource.GitBranch}
+ />
+ )}
+ {isDeveloperModeEnabled && (
+ <Tab
+ label={t('FirmwareVersionForm.GitCommit')}
+ value={FirmwareSource.GitCommit}
+ />
+ )}
+ {isDeveloperModeEnabled && (
+ <Tab
+ label={t('FirmwareVersionForm.Local')}
+ value={FirmwareSource.Local}
+ />
+ )}
+ {isDeveloperModeEnabled && (
+ <Tab
+ label={t('FirmwareVersionForm.GitPullRequest')}
+ value={FirmwareSource.GitPullRequest}
+ />
+ )}
  </Tabs>
  {firmwareSource === FirmwareSource.GitTag && gitTags !== undefined && (
  <Box sx={styles.tabContents}>

src/ui/hooks/useDeveloperMode.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import ApplicationStorage from '../storage';
+
+export default function useDeveloperMode() {
+ const [isDeveloperModeEnabled, setDeveloperModeEnabled] = useState(false);
+
+ useEffect(() => {
+ (async () => {
+ const storage = new ApplicationStorage();
+ setDeveloperModeEnabled(
+ (await storage.getDeveloperModeEnabled()) ?? false
+ );
+ })();
+ }, []);
+
+ const setDeveloperMode = () => {
+ setDeveloperModeEnabled(() => {
+ const storage = new ApplicationStorage();
+ storage.setDeveloperModeEnabled(!isDeveloperModeEnabled);
+ return !isDeveloperModeEnabled;
+ });
+ };
+
+ return {
+ isDeveloperModeEnabled,
+ setDeveloperMode,
+ };
+}

src/ui/storage/index.ts

@@ -58,6 +58,10 @@ export interface IApplicationStorage {
  setShowSensitiveFieldData(field: string, value: boolean): Promise<void>;
 
  getShowSensitiveFieldData(field: string): Promise<boolean | null>;
+
+ setDeveloperModeEnabled(value: boolean): Promise<void>;
+
+ getDeveloperModeEnabled(): Promise<boolean | null>;
 }
 
 const DEVICE_OPTIONS_BY_TARGET_KEYSPACE = 'device_options';
@@ -68,6 +72,7 @@ const WIFI_SSID_KEY = 'wifi_ssid';
 const WIFI_PASSWORD_KEY = 'wifi_password';
 const REGULATORY_DOMAIN_900_KEY = 'regulatory_domain_900';
 const REGULATORY_DOMAIN_2400_KEY = 'regulatory_domain_2400';
+const DEVELOPER_MODE = 'developer_mode';
 
 export default class ApplicationStorage implements IApplicationStorage {
  async saveDeviceOptions(
@@ -217,4 +222,22 @@ export default class ApplicationStorage implements IApplicationStorage {
  }
  return null;
  }
+
+ async setDeveloperModeEnabled(value: boolean): Promise<void> {
+ localStorage.setItem(DEVELOPER_MODE, JSON.stringify(value));
+ }
+
+ async getDeveloperModeEnabled(): Promise<boolean | null> {
+ const value = localStorage.getItem(DEVELOPER_MODE);
+
+ if (value) {
+ try {
+ return JSON.parse(value);
+ } catch (e) {
+ console.error(`failed to parse state for ${DEVELOPER_MODE}`, e);
+ return null;
+ }
+ }
+ return null;
+ }
 }

src/ui/views/SettingsView/index.tsx

@@ -1,12 +1,20 @@
-import { Card, CardContent, Divider } from '@mui/material';
+import {
+ Card,
+ CardContent,
+ Checkbox,
+ Divider,
+ FormControlLabel,
+} from '@mui/material';
 import React, { FunctionComponent } from 'react';
 import SettingsIcon from '@mui/icons-material/Settings';
 import LanguageIcon from '@mui/icons-material/Language';
+import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
 import { useTranslation } from 'react-i18next';
 import CardTitle from '../../components/CardTitle';
 import MainLayout from '../../layouts/MainLayout';
 import Omnibox, { Option } from '../../components/Omnibox';
 import locales from '../../../i18n/locales.json';
+import useDeveloperMode from '../../hooks/useDeveloperMode';
 
 const SettingsView: FunctionComponent = () => {
  const { t, i18n } = useTranslation();
@@ -28,6 +36,9 @@ const SettingsView: FunctionComponent = () => {
  ?.label ?? '',
  };
  }
+
+ const { isDeveloperModeEnabled, setDeveloperMode } = useDeveloperMode();
+
  return (
  <MainLayout>
  <Card>
@@ -45,6 +56,24 @@ const SettingsView: FunctionComponent = () => {
  options={languages}
  />
  </CardContent>
+ <Divider />
+ <CardTitle
+ icon={<DeveloperModeIcon />}
+ title={t('SettingsView.DeveloperOptions')}
+ />
+ <CardContent style={{ paddingLeft: 26, marginTop: -18 }}>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={isDeveloperModeEnabled}
+ onChange={() => {
+ setDeveloperMode();
+ }}
+ />
+ }
+ label={t('SettingsView.DeveloperMode')}
+ />
+ </CardContent>
  </Card>
  </MainLayout>
  );