feat(plugins UI): add error handling for plugin enable/disable actions

Signed-off-by: Deluan <deluan@navidrome.org>
This commit is contained in:
Deluan 2025-12-28 01:09:01 -05:00
parent dd6d18de0a
commit 064e73f958
3 changed files with 55 additions and 28 deletions

View File

@ -361,7 +361,8 @@
},
"actions": {
"enable": "Enable",
"disable": "Disable"
"disable": "Disable",
"disabledDueToError": "Fix the error before enabling"
},
"notifications": {
"enabled": "Plugin enabled",

View File

@ -78,19 +78,24 @@ const ToggleEnabledInput = ({ props }) => {
[toggleEnabled],
)
const hasError = !!record.lastError
const isDisabled = loading || hasError
return (
<Tooltip
title={translate(
record.enabled
? 'resources.plugin.actions.disable'
: 'resources.plugin.actions.enable',
hasError
? 'resources.plugin.actions.disabledDueToError'
: record.enabled
? 'resources.plugin.actions.disable'
: 'resources.plugin.actions.enable',
)}
>
<span>
<Switch
checked={record.enabled}
onClick={handleClick}
disabled={loading}
disabled={isDisabled}
className={classes.enabledSwitch}
size="small"
/>

View File

@ -215,30 +215,50 @@ const ErrorSection = ({ error, translate }) => {
}
// Status card with enable/disable toggle
const StatusCard = ({ record, classes, translate, onToggle, loading }) => (
<Card className={classes.section}>
<CardContent>
<Typography variant="h6" className={classes.sectionTitle}>
{translate('resources.plugin.sections.status')}
</Typography>
<FormControlLabel
control={
<Switch
checked={record.enabled}
onChange={onToggle}
disabled={loading}
color="primary"
const StatusCard = ({
record,
classes,
translate,
onToggle,
loading,
hasError,
}) => {
const isDisabled = loading || hasError
return (
<Card className={classes.section}>
<CardContent>
<Typography variant="h6" className={classes.sectionTitle}>
{translate('resources.plugin.sections.status')}
</Typography>
<Tooltip
title={
hasError
? translate('resources.plugin.actions.disabledDueToError')
: ''
}
disableHoverListener={!hasError}
>
<FormControlLabel
control={
<Switch
checked={record.enabled}
onChange={onToggle}
disabled={isDisabled}
color="primary"
/>
}
label={translate(
record.enabled
? 'resources.plugin.actions.disable'
: 'resources.plugin.actions.enable',
)}
/>
}
label={translate(
record.enabled
? 'resources.plugin.actions.disable'
: 'resources.plugin.actions.enable',
)}
/>
</CardContent>
</Card>
)
</Tooltip>
</CardContent>
</Card>
)
}
// Plugin information card
const InfoCard = ({ record, manifest, classes, translate, isSmall }) => (
@ -570,6 +590,7 @@ const PluginShowLayout = () => {
translate={translate}
onToggle={handleToggleEnabled}
loading={loading}
hasError={!!record.lastError}
/>
<InfoCard