Add an “Experimental Features” section in the settings (#467)

* Make ButtonSetting more generic

* Add an “Experimental Features” section in the settings

* Fix text color

* Put experimental features behind another link

* Update Encryption.js

* Update FixSplits.js

* Remove unused variable

* That’s what I get for coding on my phone

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

packages/desktop-client/src/components/settings/Encryption.js

@@ -4,7 +4,7 @@ import { Text, Button } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 
 import { useServerURL } from '../../hooks/useServerURL';
-import { ButtonSetting } from './UI';
+import { Setting } from './UI';
 
 export default function EncryptionSettings({ prefs, pushModal }) {
   const serverURL = useServerURL();
@@ -14,8 +14,8 @@ export default function EncryptionSettings({ prefs, pushModal }) {
   }
 
   return prefs.encryptKeyId ? (
-    <ButtonSetting
-      button={<Button onClick={onChangeKey}>Generate new key</Button>}
+    <Setting
+      primaryAction={<Button onClick={onChangeKey}>Generate new key</Button>}
     >
       <Text>
         <Text style={{ color: colors.g4, fontWeight: 600 }}>
@@ -32,9 +32,9 @@ export default function EncryptionSettings({ prefs, pushModal }) {
           Learn more…
         </a>
       </Text>
-    </ButtonSetting>
+    </Setting>
   ) : serverURL ? (
-    <ButtonSetting
+    <Setting
       button={
         <Button onClick={() => pushModal('create-encryption-key')}>
           Enable encryption…
@@ -55,9 +55,9 @@ export default function EncryptionSettings({ prefs, pushModal }) {
           Learn more…
         </a>
       </Text>
-    </ButtonSetting>
+    </Setting>
   ) : (
-    <ButtonSetting button={<Button disabled>Enable encryption…</Button>}>
+    <Setting button={<Button disabled>Enable encryption…</Button>}>
       <Text>
         <strong>End-to-end encryption</strong> is not available when running
         without a server. Budget files are always kept unencrypted locally, and
@@ -70,6 +70,6 @@ export default function EncryptionSettings({ prefs, pushModal }) {
           Learn more…
         </a>
       </Text>
-    </ButtonSetting>
+    </Setting>
   );
 }

packages/desktop-client/src/components/settings/Experimental.js

+import React from 'react';
+
+import { Link, Text, View } from 'loot-design/src/components/common';
+import { Checkbox } from 'loot-design/src/components/forms';
+import { colors } from 'loot-design/src/style';
+
+import { Setting } from './UI';
+
+export default function ExperimentalFeatures({ prefs, savePrefs }) {
+  let [expanded, setExpanded] = React.useState(false);
+  let flags = Object.fromEntries(
+    Object.entries(prefs)
+      .filter(([key]) => key.startsWith('flags.'))
+      .map(([key, value]) => [key.replace('flags.', ''), value])
+  );
+  let disabled = prefs.budgetType === 'report' && flags.reportBudget;
+  return (
+    <Setting
+      primaryAction={
+        expanded ? (
+          <View style={{ gap: '1em' }}>
+            <label
+              style={{
+                display: 'flex',
+                color: disabled ? colors.n5 : 'inherit'
+              }}
+            >
+              <Checkbox
+                id="report-budget-flag"
+                checked={flags.reportBudget}
+                onChange={() => {
+                  savePrefs({ 'flags.reportBudget': !flags.reportBudget });
+                }}
+                disabled={disabled}
+              />{' '}
+              <View>
+                Enable budget mode toggle
+                {disabled && (
+                  <Text style={{ color: colors.r3, fontWeight: 500 }}>
+                    Switch to a rollover budget before turning off this feature
+                  </Text>
+                )}
+              </View>
+            </label>
+
+            <label style={{ display: 'flex' }}>
+              <Checkbox
+                id="report-budget-flag"
+                checked={flags.syncAccount}
+                onChange={() => {
+                  savePrefs({ 'flags.syncAccount': !flags.syncAccount });
+                }}
+              />{' '}
+              <View>Enable account syncing</View>
+            </label>
+          </View>
+        ) : (
+          <Link
+            onClick={() => setExpanded(true)}
+            style={{
+              flexShrink: 0,
+              alignSelf: 'flex-start',
+              color: colors.p4
+            }}
+          >
+            I understand the risks, show experimental features
+          </Link>
+        )
+      }
+    >
+      <Text>
+        <strong>Experimental features.</strong> These features are not fully
+        tested and may not work as expected. THEY MAY CAUSE IRRECOVERABLE DATA
+        LOSS. They may do nothing at all. Only enable them if you know what you
+        are doing.
+      </Text>
+    </Setting>
+  );
+}

packages/desktop-client/src/components/settings/Export.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { Text, Button } from 'loot-design/src/components/common';
 
-import { ButtonSetting } from './UI';
+import { Setting } from './UI';
 
 export default function ExportBudget({ prefs }) {
   async function onExport() {
@@ -12,7 +12,7 @@ export default function ExportBudget({ prefs }) {
   }
 
   return (
-    <ButtonSetting button={<Button onClick={onExport}>Export data</Button>}>
+    <Setting primaryAction={<Button onClick={onExport}>Export data</Button>}>
       <Text>
         <strong>Export</strong> your data as a zip file containing{' '}
         <code>db.sqlite</code> and <code>metadata.json</code> files. It can be
@@ -25,6 +25,6 @@ export default function ExportBudget({ prefs }) {
           any encryption.
         </Text>
       ) : null}
-    </ButtonSetting>
+    </Setting>
   );
 }

packages/desktop-client/src/components/settings/FixSplits.js

@@ -9,7 +9,7 @@ import {
 } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 
-import { ButtonSetting } from './UI';
+import { Setting } from './UI';
 
 function renderResults(results) {
   let { numBlankPayees, numCleared, numDeleted } = results;
@@ -61,7 +61,7 @@ export default function FixSplitsTool() {
   }
 
   return (
-    <ButtonSetting
+    <Setting
       button={
         <View
           style={{
@@ -104,6 +104,6 @@ export default function FixSplitsTool() {
           </ul>
         </P>
       </View>
-    </ButtonSetting>
+    </Setting>
   );
 }

packages/desktop-client/src/components/settings/Reset.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { Text, ButtonWithLoading } from 'loot-design/src/components/common';
 
-import { ButtonSetting } from './UI';
+import { Setting } from './UI';
 
 export function ResetCache() {
   let [resetting, setResetting] = useState(false);
@@ -15,8 +15,8 @@ export function ResetCache() {
   }
 
   return (
-    <ButtonSetting
-      button={
+    <Setting
+      primaryAction={
         <ButtonWithLoading loading={resetting} onClick={onResetCache}>
           Reset budget cache
         </ButtonWithLoading>
@@ -29,7 +29,7 @@ export function ResetCache() {
         won't see correct values. There is no danger in resetting the cache.
         Hopefully you never have to do this.
       </Text>
-    </ButtonSetting>
+    </Setting>
   );
 }
 
@@ -43,8 +43,8 @@ export function ResetSync({ resetSync }) {
   }
 
   return (
-    <ButtonSetting
-      button={
+    <Setting
+      primaryAction={
         <ButtonWithLoading loading={resetting} onClick={onResetSync}>
           Reset sync
         </ButtonWithLoading>
@@ -56,6 +56,6 @@ export function ResetSync({ resetSync }) {
         on other devices will have to be re-downloaded to use the new sync ID.
         Use this if there is a problem with syncing and you want to start fresh.
       </Text>
-    </ButtonSetting>
+    </Setting>
   );
 }

packages/desktop-client/src/components/settings/UI.js

@@ -24,7 +24,7 @@ export function Section({ title, children, style, titleProps, ...props }) {
   );
 }
 
-export function ButtonSetting({ button, children }) {
+export function Setting({ primaryAction, children }) {
   return (
     <View
       {...css(
@@ -43,11 +43,16 @@ export function ButtonSetting({ button, children }) {
       )}
     >
       <View
-        style={{ marginBottom: 10, maxWidth: 500, lineHeight: 1.5, gap: 10 }}
+        style={{
+          marginBottom: primaryAction ? 10 : 0,
+          maxWidth: 500,
+          lineHeight: 1.5,
+          gap: 10
+        }}
       >
         {children}
       </View>
-      {button}
+      {primaryAction || null}
     </View>
   );
 }

packages/desktop-client/src/components/settings/index.js

@@ -16,6 +16,7 @@ import useServerVersion from '../../hooks/useServerVersion';
 import { isMobile } from '../../util';
 import { Page } from '../Page';
 import EncryptionSettings from './Encryption';
+import ExperimentalFeatures from './Experimental';
 import ExportBudget from './Export';
 import FixSplitsTool from './FixSplits';
 import FormatSettings from './Format';
@@ -109,6 +110,7 @@ function Settings({
             <ResetCache />
             <ResetSync resetSync={resetSync} />
             <FixSplitsTool />
+            <ExperimentalFeatures prefs={prefs} savePrefs={savePrefs} />
           </AdvancedToggle>
         </View>
       </Page>