diff --git a/packages/desktop-client/src/components/settings/Encryption.js b/packages/desktop-client/src/components/settings/Encryption.js
index 58f9ffc2dd27462868d59b849dbbd5bcf4ef7082..5830ad72eb39160930d92fcef6a9cd5ea9464e2f 100644
--- a/packages/desktop-client/src/components/settings/Encryption.js
+++ b/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>
);
}
diff --git a/packages/desktop-client/src/components/settings/Experimental.js b/packages/desktop-client/src/components/settings/Experimental.js
new file mode 100644
index 0000000000000000000000000000000000000000..f3e96b5ad03ccf3467c1387f8b7b2c30563f413c
--- /dev/null
+++ b/packages/desktop-client/src/components/settings/Experimental.js
@@ -0,0 +1,79 @@
+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>
+ );
+}
diff --git a/packages/desktop-client/src/components/settings/Export.js b/packages/desktop-client/src/components/settings/Export.js
index 9a21cca1cfc59d6a5e8cb50baf79501739dc7265..6f28e95fd0077d135ebb31b0b56ae5f42e9a0a02 100644
--- a/packages/desktop-client/src/components/settings/Export.js
+++ b/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>
);
}
diff --git a/packages/desktop-client/src/components/settings/FixSplits.js b/packages/desktop-client/src/components/settings/FixSplits.js
index 7a9b4ae02ed24c1a321ad5c7e4a016153c03e56d..1aa27cc044b36275a8b8e121563fbfceca9fe9b2 100644
--- a/packages/desktop-client/src/components/settings/FixSplits.js
+++ b/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>
);
}
diff --git a/packages/desktop-client/src/components/settings/Reset.js b/packages/desktop-client/src/components/settings/Reset.js
index 119e9197c17982f05366f1a9e3fc7c86bc06c9c8..91dbefd3991d2b161a40b1da1463d0ca42d38820 100644
--- a/packages/desktop-client/src/components/settings/Reset.js
+++ b/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>
);
}
diff --git a/packages/desktop-client/src/components/settings/UI.js b/packages/desktop-client/src/components/settings/UI.js
index 1a9ea6d46ca819d4ca4fa68d2a1b5cb3fd90bb77..03aaf870d8cb01de154aa9d195480eb9648387d3 100644
--- a/packages/desktop-client/src/components/settings/UI.js
+++ b/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>
);
}
diff --git a/packages/desktop-client/src/components/settings/index.js b/packages/desktop-client/src/components/settings/index.js
index da545a46fd03adc8489b1e19e4617220986a38cb..f9450518eb571ae7a8609406d5ebf3630b92429f 100644
--- a/packages/desktop-client/src/components/settings/index.js
+++ b/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>