admin/fs: make it clearer that you need to select accounts in permissions
Massimo Melina committed
Apr 6, 2025 at 11:25 UTC
2650bd9d01446115bb1505695035b619e258b751
2 files changed
+6
-3
admin/src/FileForm.ts
+3
-1
@@ -285,10 +285,12 @@ function WhoField({ value, onChange, parent, inherit, accounts, helperText, othe
285
}),
286
h(Collapse, { in: arrayMode, timeout },
287
arrayMode && h(MultiSelectField as Field<string[]>, {
288
- label: accounts?.length ? "Accounts for " + rest.label : "You didn't create any account yet",
288
+ label: accounts?.length ? "Accounts " + rest.label : "You didn't create any account yet",
289
value: thisValue,
290
onChange,
291
options: accounts?.map(a => ({ value: a.username, label: a.username, a })) || [],
292
+ placeholder: "none",
293
+ ...thisValue.length === 0 && { helperText: "Select some account", error: true },
294
// show icon only for groups, to save space inside the field (not the list)
295
renderOption: (x: any) => h('span', {}, x.a?.isGroup && account2icon(x.a), ' ', x.label),
296
}) ),
mui-grid-form/SelectField.ts
+3
-2
@@ -70,6 +70,7 @@ export function MultiSelectField<T>({ renderOption, ...props }: MultiSelectField
70
h(Select<string[]>, {
71
...commonSelectProps(props),
72
multiple: true,
73
+ displayEmpty: true,
74
value: valueAsJsons,
75
onChange: event => {
76
let { value: v } = event.target
@@ -79,14 +80,14 @@ export function MultiSelectField<T>({ renderOption, ...props }: MultiSelectField
80
},
81
sx: { '& .MuiSelect-select': { maxHeight: '15em', overflowY: 'auto' } },
82
input: h(FilledInput, {
82
- placeholder,
83
hiddenLabel: !label,
84
'aria-describedby': helperId,
85
}),
86
renderValue: () => h('div', {
87
'aria-label': label + ': ' + valueAsOptions.map(x => x.label ?? String(x.value)),
88
style: { overflow: "hidden", display: "flex", flexWrap: "wrap", gap: ".5em" },
89
- children: valueAsOptions.map((x, i) => h('span', { key: i }, renderOption!(x), i < valueAsOptions.length - 1 && valueSeparator)),
89
+ children: isEmpty ? h(Box, { position: 'relative', top: '.3em', fontSize: 'small', fontStyle: 'italic', color: 'text.secondary' }, placeholder)
90
+ : valueAsOptions.map((x, i) => h('span', { key: i }, renderOption!(x), i < valueAsOptions.length - 1 && valueSeparator)),
91
}),
92
...rest,
93
},