Merge pull request #616 from ExpressLRS/expert-mode

Expert mode

src/i18n/locales/en/messages.json

@@ -209,8 +209,9 @@
     "Settings": "Settings",
     "LanguageSelector": "Language selector",
     "CurrentLanguage": "Current language",
-    "DeveloperMode": "Developer Mode",
-    "DeveloperOptions": "Developer Options"
+    "ExpertMode": "Expert Mode",
+    "ApplicationOptions": "Application Options",
+    "ExpertModeDescription": "Enable Expert Mode to unlock advanced features including additional firmware sources, the ability to build firmware with manual user-defined parameters, and access to serial monitor screen for detailed diagnostics."
   },
   "SupportView": {
     "Support": "Support",

src/main/main.ts

@@ -574,7 +574,8 @@ ipcMain.on(
 
 ipcMain.handle(
   IpcRequest.SaveFile,
-  async (_, arg: SaveFileRequestBody): Promise<SaveFileResponseBody> => {
+  async (_, args: [SaveFileRequestBody]): Promise<SaveFileResponseBody> => {
+    const arg = args[0];
     const result = await dialog.showSaveDialog({
       title: 'Save File',
       defaultPath: arg.defaultPath,

src/ui/components/DeviceOptionsForm/index.tsx

@@ -20,7 +20,7 @@ import {
 } from '../../gql/generated/types';
 import ShowAlerts from '../ShowAlerts';
 import Loader from '../Loader';
-import useDeveloperMode from '../../hooks/useDeveloperMode';
+import useAppState from '../../hooks/useAppState';
 
 const styles: Record<string, SxProps<Theme>> = {
   categoryTitle: {
@@ -243,11 +243,11 @@ const DeviceOptionsForm: FunctionComponent<DeviceOptionsFormProps> = (
       });
   };
 
-  const { isDeveloperModeEnabled } = useDeveloperMode();
+  const { isExpertModeEnabled } = useAppState();
 
   return (
     <>
-      {isDeveloperModeEnabled && (
+      {isExpertModeEnabled && (
         <FormControl component="fieldset" sx={styles.userDefinesMode}>
           <RadioGroup
             row

src/ui/components/FirmwareVersionForm/index.tsx

@@ -28,7 +28,7 @@ import {
 import { ChooseFolderResponseBody, IpcRequest } from '../../../ipc';
 import ApplicationStorage from '../../storage';
 import GitRepository from '../../models/GitRepository';
-import useDeveloperMode from '../../hooks/useDeveloperMode';
+import useAppState from '../../hooks/useAppState';
 
 const styles: Record<string, SxProps<Theme>> = {
   tabs: {
@@ -405,7 +405,7 @@ const FirmwareVersionForm: FunctionComponent<FirmwareVersionCardProps> = (
   const showBetaFpvAlert =
     localPath?.toLocaleLowerCase()?.indexOf('betafpv') > -1;
 
-  const { isDeveloperModeEnabled } = useDeveloperMode();
+  const { isExpertModeEnabled } = useAppState();
 
   return (
     <>
@@ -419,25 +419,25 @@ const FirmwareVersionForm: FunctionComponent<FirmwareVersionCardProps> = (
           label={t('FirmwareVersionForm.OfficialReleases')}
           value={FirmwareSource.GitTag}
         />
-        {isDeveloperModeEnabled && (
+        {isExpertModeEnabled && (
           <Tab
             label={t('FirmwareVersionForm.GitBranch')}
             value={FirmwareSource.GitBranch}
           />
         )}
-        {isDeveloperModeEnabled && (
+        {isExpertModeEnabled && (
           <Tab
             label={t('FirmwareVersionForm.GitCommit')}
             value={FirmwareSource.GitCommit}
           />
         )}
-        {isDeveloperModeEnabled && (
+        {isExpertModeEnabled && (
           <Tab
             label={t('FirmwareVersionForm.Local')}
             value={FirmwareSource.Local}
           />
         )}
-        {isDeveloperModeEnabled && (
+        {isExpertModeEnabled && (
           <Tab
             label={t('FirmwareVersionForm.GitPullRequest')}
             value={FirmwareSource.GitPullRequest}

src/ui/components/Sidebar/index.tsx

@@ -20,7 +20,6 @@ import { SxProps, Theme } from '@mui/system';
 import { useTranslation } from 'react-i18next';
 import useAppState from '../../hooks/useAppState';
 import AppStatus from '../../models/enum/AppStatus';
-import useDeveloperMode from '../../hooks/useDeveloperMode';
 
 const drawerWidth = 215;
 
@@ -43,7 +42,6 @@ const styles: Record<string, SxProps<Theme>> = {
 
 const Sidebar: FunctionComponent = () => {
   const location = useLocation();
-  const { isDeveloperModeEnabled } = useDeveloperMode();
   const configuratorActive =
     matchPath(location.pathname, '/configurator') !== null;
   const backpackActive = matchPath(location.pathname, '/backpack') !== null;
@@ -53,7 +51,7 @@ const Sidebar: FunctionComponent = () => {
     matchPath(location.pathname, '/serial-monitor') !== null;
   const settingsActive = matchPath(location.pathname, '/settings') !== null;
   const supportActive = matchPath(location.pathname, '/support') !== null;
-  const { appStatus } = useAppState();
+  const { appStatus, isExpertModeEnabled } = useAppState();
 
   const navigationEnabled = appStatus !== AppStatus.Busy;
 
@@ -103,7 +101,7 @@ const Sidebar: FunctionComponent = () => {
             <ListItemText primary={t('Sidebar.Logs')} />
           </ListItemButton>
 
-          {isDeveloperModeEnabled && (
+          {isExpertModeEnabled && (
             <ListItemButton
               component={Link}
               to="/serial-monitor"

src/ui/context/AppStateProvider.tsx

@@ -1,12 +1,16 @@
 import React, { FunctionComponent, useMemo, useState } from 'react';
 import AppState from '../models/AppState';
 import AppStatus from '../models/enum/AppStatus';
+import ApplicationStorage from '../storage';
 
 export const AppStateContext = React.createContext<{
   appState: AppState;
   setAppState: (appState: AppState) => void;
 }>({
-  appState: { appStatus: AppStatus.Interactive },
+  appState: {
+    appStatus: AppStatus.Interactive,
+    isExpertModeEnabled: false,
+  },
   setAppState: () => {},
 });
 
@@ -17,10 +21,22 @@ interface AppStateProviderContextProps {
 const AppStateProvider: FunctionComponent<AppStateProviderContextProps> = ({
   children,
 }) => {
-  const [appState, setAppState] = useState<AppState>({
-    appStatus: AppStatus.Interactive,
+  const [appState, setAppState] = useState<AppState>(() => {
+    const storage = new ApplicationStorage();
+    return {
+      appStatus: AppStatus.Interactive,
+      isExpertModeEnabled: storage.getExpertModeEnabled() ?? false,
+    };
   });
-  const value = useMemo(() => ({ appState, setAppState }), [appState]);
+  const preSetAppState = (state: AppState) => {
+    const storage = new ApplicationStorage();
+    storage.setExpertModeEnabled(state.isExpertModeEnabled);
+    setAppState(state);
+  };
+  const value = useMemo(
+    () => ({ appState, setAppState: preSetAppState }),
+    [appState]
+  );
   return (
     <AppStateContext.Provider value={value}>
       {children}

src/ui/hooks/useAppState.tsx

@@ -13,5 +13,5 @@ export default function useAppState() {
     setAppState({ ...appState, appStatus: mode });
   };
 
-  return { ...appState, setAppStatus };
+  return { ...appState, appState, setAppStatus, setAppState };
 }

src/ui/models/AppState.tsx

@@ -2,4 +2,5 @@ import AppStatus from './enum/AppStatus';
 
 export default interface AppState {
   appStatus: AppStatus;
+  isExpertModeEnabled: boolean;
 }

src/ui/storage/index.ts

@@ -59,9 +59,9 @@ export interface IApplicationStorage {
 
   getShowSensitiveFieldData(field: string): Promise<boolean | null>;
 
-  setDeveloperModeEnabled(value: boolean): Promise<void>;
+  setExpertModeEnabled(value: boolean): void;
 
-  getDeveloperModeEnabled(): Promise<boolean | null>;
+  getExpertModeEnabled(): boolean | null;
 }
 
 const DEVICE_OPTIONS_BY_TARGET_KEYSPACE = 'device_options';
@@ -72,7 +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';
+const EXPERT_MODE = 'expert_mode';
 
 export default class ApplicationStorage implements IApplicationStorage {
   async saveDeviceOptions(
@@ -223,18 +223,18 @@ export default class ApplicationStorage implements IApplicationStorage {
     return null;
   }
 
-  async setDeveloperModeEnabled(value: boolean): Promise<void> {
-    localStorage.setItem(DEVELOPER_MODE, JSON.stringify(value));
+  setExpertModeEnabled(value: boolean): void {
+    localStorage.setItem(EXPERT_MODE, JSON.stringify(value));
   }
 
-  async getDeveloperModeEnabled(): Promise<boolean | null> {
-    const value = localStorage.getItem(DEVELOPER_MODE);
+  getExpertModeEnabled(): boolean | null {
+    const value = localStorage.getItem(EXPERT_MODE);
 
     if (value) {
       try {
         return JSON.parse(value);
       } catch (e) {
-        console.error(`failed to parse state for ${DEVELOPER_MODE}`, e);
+        console.error(`failed to parse state for ${EXPERT_MODE}`, e);
         return null;
       }
     }

src/ui/views/SettingsView/index.tsx

@@ -14,7 +14,7 @@ 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';
+import useAppState from '../../hooks/useAppState';
 
 const SettingsView: FunctionComponent = () => {
   const { t, i18n } = useTranslation();
@@ -47,8 +47,13 @@ const SettingsView: FunctionComponent = () => {
     };
   }
 
-  const { isDeveloperModeEnabled, setDeveloperMode } = useDeveloperMode();
-
+  const { appState, setAppState } = useAppState();
+  const setExpertMode = () => {
+    setAppState({
+      ...appState,
+      isExpertModeEnabled: !appState.isExpertModeEnabled,
+    });
+  };
   return (
     <MainLayout>
       <Card>
@@ -69,20 +74,21 @@ const SettingsView: FunctionComponent = () => {
         <Divider />
         <CardTitle
           icon={<DeveloperModeIcon />}
-          title={t('SettingsView.DeveloperOptions')}
+          title={t('SettingsView.ApplicationOptions')}
         />
         <CardContent style={{ paddingLeft: 26, marginTop: -18 }}>
           <FormControlLabel
             control={
               <Checkbox
-                checked={isDeveloperModeEnabled}
+                checked={appState.isExpertModeEnabled}
                 onChange={() => {
-                  setDeveloperMode();
+                  setExpertMode();
                 }}
               />
             }
-            label={t('SettingsView.DeveloperMode')}
+            label={<>{t('SettingsView.ExpertMode')}</>}
           />
+          <p>{t('SettingsView.ExpertModeDescription')}</p>
         </CardContent>
       </Card>
     </MainLayout>