diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx index 341ec1014a..34b8955499 100644 --- a/packages/desktop-client/src/components/settings/Experimental.tsx +++ b/packages/desktop-client/src/components/settings/Experimental.tsx @@ -5,14 +5,22 @@ import { Text } from '@actual-app/components/text'; import { theme } from '@actual-app/components/theme'; import { View } from '@actual-app/components/view'; -import type { FeatureFlag, SyncedPrefs } from 'loot-core/types/prefs'; +import type { FeatureFlag, ServerPrefs } from 'loot-core/types/prefs'; import { Setting } from './UI'; +import { useAuth } from '@desktop-client/auth/AuthProvider'; +import { Permissions } from '@desktop-client/auth/types'; import { Link } from '@desktop-client/components/common/Link'; import { Checkbox } from '@desktop-client/components/forms'; +import { + useLoginMethod, + useMultiuserEnabled, +} from '@desktop-client/components/ServerContext'; import { useFeatureFlag } from '@desktop-client/hooks/useFeatureFlag'; +import { useServerPref } from '@desktop-client/hooks/useServerPref'; import { useSyncedPref } from '@desktop-client/hooks/useSyncedPref'; +import { useSyncServerStatus } from '@desktop-client/hooks/useSyncServerStatus'; type FeatureToggleProps = { flag: FeatureFlag; @@ -68,22 +76,42 @@ function FeatureToggle({ ); } -type GlobalFeatureToggleProps = { - prefName: keyof SyncedPrefs; +type ServerFeatureToggleProps = { + prefName: keyof ServerPrefs; disableToggle?: boolean; error?: ReactNode; children: ReactNode; feedbackLink?: string; }; -function GlobalFeatureToggle({ +function ServerFeatureToggle({ prefName, disableToggle = false, feedbackLink, error, children, -}: GlobalFeatureToggleProps) { - const [enabled, setEnabled] = useSyncedPref(prefName); +}: ServerFeatureToggleProps) { + const [enabled, setEnabled] = useServerPref(prefName); + + const syncServerStatus = useSyncServerStatus(); + const isUsingServer = syncServerStatus !== 'no-server'; + const isServerOffline = syncServerStatus === 'offline'; + const { hasPermission } = useAuth(); + const loginMethod = useLoginMethod(); + const multiuserEnabled = useMultiuserEnabled(); + + if (!isUsingServer || isServerOffline) { + return null; + } + + // Show to admins if OIDC is enabled, or to everyone if multi-user is not enabled + const isAdmin = hasPermission(Permissions.ADMINISTRATOR); + const oidcEnabled = loginMethod === 'openid'; + const shouldShow = (oidcEnabled && isAdmin) || !multiuserEnabled; + + if (!shouldShow) { + return null; + } return (