From 801cc8a5f4b487aeb55587787c890eda51fa0503 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Wed, 1 Apr 2026 17:18:48 +0100 Subject: [PATCH] Alpha flag for file storage settings (#6044) ## Summary - Added "Alpha" badge to the File Storage & Sharing nav item in the settings sidebar - Added "Alpha" badge to the File Storage & Sharing page title - Removed the old inline "(Alpha)" text from the Enable Group Signing label - Restructured all toggle cards so the switch is anchored to the right of each row - Tightened spacing between cards for a more compact layout - Extended `ConfigNavItem` interface with optional `badge` and `badgeColor` fields for reuse elsewhere image --- .../core/components/shared/AppConfigModal.tsx | 7 +- .../shared/config/configNavSections.tsx | 2 + .../shared/config/configNavSections.tsx | 4 +- .../AdminStorageSharingSection.tsx | 184 ++++++++++-------- 4 files changed, 112 insertions(+), 85 deletions(-) diff --git a/frontend/src/core/components/shared/AppConfigModal.tsx b/frontend/src/core/components/shared/AppConfigModal.tsx index 30253ea45d..694ec5c737 100644 --- a/frontend/src/core/components/shared/AppConfigModal.tsx +++ b/frontend/src/core/components/shared/AppConfigModal.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react'; -import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core'; +import { Badge, Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core'; import { useNavigate, useLocation } from 'react-router-dom'; import LocalIcon from '@app/components/shared/LocalIcon'; import { useConfigNavSections } from '@app/components/shared/config/configNavSections'; @@ -186,6 +186,11 @@ const AppConfigModalInner: React.FC = ({ opened, onClose }) {item.label} + {item.badge && ( + + {item.badge} + + )} {showPlanWarning && ( , disabled: requiresLogin, - disabledTooltip: requiresLogin ? enableLoginTooltip : undefined + disabledTooltip: requiresLogin ? enableLoginTooltip : undefined, + badge: t('toolPanel.alpha', 'Alpha'), + badgeColor: 'orange', }, { key: 'adminEndpoints', diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx index b7ee40e621..86b858b64c 100644 --- a/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx +++ b/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { Anchor, Group, Loader, Paper, Stack, Switch, Text } from '@mantine/core'; +import { Anchor, Badge, Group, Loader, Paper, Stack, Switch, Text } from '@mantine/core'; import { useNavigate } from 'react-router-dom'; import { alert } from '@app/components/toast'; import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal'; @@ -124,42 +124,50 @@ export default function AdminStorageSharingSection() { return (
- +
- {t('admin.settings.storage.title', 'File Storage & Sharing')} + + {t('admin.settings.storage.title', 'File Storage & Sharing')} + {t('toolPanel.alpha', 'Alpha')} + {t('admin.settings.storage.description', 'Control server storage and sharing options.')}
- - - - {t('admin.settings.storage.enabled.label', 'Enable Server File Storage')} - {isFieldPending('enabled') && } - - - {t('admin.settings.storage.enabled.description', 'Allow users to store files on the server.')} - + + +
+ + {t('admin.settings.storage.enabled.label', 'Enable Server File Storage')} + {isFieldPending('enabled') && } + + + {t('admin.settings.storage.enabled.description', 'Allow users to store files on the server.')} + +
setSettings({ ...settings, enabled: e.currentTarget.checked })} disabled={!loginEnabled} styles={getDisabledStyles()} + style={{ flexShrink: 0 }} /> - + - - - - {t('admin.settings.storage.sharing.enabled.label', 'Enable Sharing')} - {isFieldPending('sharing.enabled') && } - - - {t('admin.settings.storage.sharing.enabled.description', 'Allow users to share stored files.')} - + + +
+ + {t('admin.settings.storage.sharing.enabled.label', 'Enable Sharing')} + {isFieldPending('sharing.enabled') && } + + + {t('admin.settings.storage.sharing.enabled.description', 'Allow users to share stored files.')} + +
@@ -170,35 +178,38 @@ export default function AdminStorageSharingSection() { } disabled={!loginEnabled || !storageEnabled} styles={getDisabledStyles()} + style={{ flexShrink: 0 }} /> - + - - - - {t('admin.settings.storage.sharing.links.label', 'Enable Share Links')} - {isFieldPending('sharing.linkEnabled') && } - - - {t('admin.settings.storage.sharing.links.description', 'Allow sharing via signed-in links.')} - - {!frontendUrlConfigured && ( - - {t('admin.settings.storage.sharing.links.frontendUrlNote', 'Requires a Frontend URL. ')} - { - e.preventDefault(); - navigate('/settings/adminGeneral#frontendUrl'); - }} - c="orange" - td="underline" - > - {t('admin.settings.storage.sharing.links.frontendUrlLink', 'Configure in System Settings')} - + + +
+ + {t('admin.settings.storage.sharing.links.label', 'Enable Share Links')} + {isFieldPending('sharing.linkEnabled') && } + + + {t('admin.settings.storage.sharing.links.description', 'Allow sharing via signed-in links.')} - )} + {!frontendUrlConfigured && ( + + {t('admin.settings.storage.sharing.links.frontendUrlNote', 'Requires a Frontend URL. ')} + { + e.preventDefault(); + navigate('/settings/adminGeneral#frontendUrl'); + }} + c="orange" + td="underline" + > + {t('admin.settings.storage.sharing.links.frontendUrlLink', 'Configure in System Settings')} + + + )} +
@@ -209,35 +220,38 @@ export default function AdminStorageSharingSection() { } disabled={!loginEnabled || !sharingEnabled || !frontendUrlConfigured} styles={getDisabledStyles()} + style={{ flexShrink: 0 }} /> - + - - - - {t('admin.settings.storage.sharing.email.label', 'Enable Email Sharing')} - {isFieldPending('sharing.emailEnabled') && } - - - {t('admin.settings.storage.sharing.email.description', 'Allow sharing with email addresses.')} - - {!mailEnabled && ( - - {t('admin.settings.storage.sharing.email.mailNote', 'Requires mail configuration. ')} - { - e.preventDefault(); - navigate('/settings/adminConnections'); - }} - c="orange" - td="underline" - > - {t('admin.settings.storage.sharing.email.mailLink', 'Configure Mail Settings')} - + + +
+ + {t('admin.settings.storage.sharing.email.label', 'Enable Email Sharing')} + {isFieldPending('sharing.emailEnabled') && } + + + {t('admin.settings.storage.sharing.email.description', 'Allow sharing with email addresses.')} - )} + {!mailEnabled && ( + + {t('admin.settings.storage.sharing.email.mailNote', 'Requires mail configuration. ')} + { + e.preventDefault(); + navigate('/settings/adminConnections'); + }} + c="orange" + td="underline" + > + {t('admin.settings.storage.sharing.email.mailLink', 'Configure Mail Settings')} + + + )} +
@@ -248,19 +262,22 @@ export default function AdminStorageSharingSection() { } disabled={!loginEnabled || !sharingEnabled || !mailEnabled} styles={getDisabledStyles()} + style={{ flexShrink: 0 }} /> - + - - - - {t('admin.settings.storage.signing.enabled.label', 'Enable Group Signing (Alpha)')} - {isFieldPending('signing.enabled') && } - - - {t('admin.settings.storage.signing.enabled.description', 'Allow users to create multi-participant document signing sessions. Requires server file storage to be enabled.')} - + + +
+ + {t('admin.settings.storage.signing.enabled.label', 'Enable Group Signing')} + {isFieldPending('signing.enabled') && } + + + {t('admin.settings.storage.signing.enabled.description', 'Allow users to create multi-participant document signing sessions. Requires server file storage to be enabled.')} + +
@@ -271,8 +288,9 @@ export default function AdminStorageSharingSection() { } disabled={!loginEnabled || !storageEnabled} styles={getDisabledStyles()} + style={{ flexShrink: 0 }} /> - +