add hint for empty selection in review labels and SwitchesWidget

This commit is contained in:
Josh Hawkins 2026-03-27 09:35:13 -05:00
parent c7054b7211
commit 580332a893
3 changed files with 18 additions and 2 deletions

View File

@ -1433,7 +1433,8 @@
}, },
"reviewLabels": { "reviewLabels": {
"summary": "{{count}} labels selected", "summary": "{{count}} labels selected",
"empty": "No labels available" "empty": "No labels available",
"allNonAlertDetections": "All non-alert activity will be included as detections."
}, },
"filters": { "filters": {
"objectFieldLabel": "{{field}} for {{label}}" "objectFieldLabel": "{{field}} for {{label}}"

View File

@ -35,6 +35,8 @@ const review: SectionConfigOverrides = {
"ui:widget": "reviewLabels", "ui:widget": "reviewLabels",
"ui:options": { "ui:options": {
suppressMultiSchema: true, suppressMultiSchema: true,
emptySelectionHintKey:
"configForm.reviewLabels.allNonAlertDetections",
}, },
}, },
required_zones: { required_zones: {

View File

@ -45,6 +45,8 @@ export type SwitchesWidgetOptions = {
enableSearch?: boolean; enableSearch?: boolean;
/** Allow users to add custom entries not in the predefined list */ /** Allow users to add custom entries not in the predefined list */
allowCustomEntries?: boolean; allowCustomEntries?: boolean;
/** i18n key for a hint shown when no entities are selected */
emptySelectionHintKey?: string;
}; };
function normalizeValue(value: unknown): string[] { function normalizeValue(value: unknown): string[] {
@ -129,6 +131,11 @@ export function SwitchesWidget(props: WidgetProps) {
[props.options], [props.options],
); );
const emptySelectionHintKey = useMemo(
() => props.options?.emptySelectionHintKey as string | undefined,
[props.options],
);
const selectedEntities = useMemo(() => normalizeValue(value), [value]); const selectedEntities = useMemo(() => normalizeValue(value), [value]);
const [isOpen, setIsOpen] = useState(selectedEntities.length > 0); const [isOpen, setIsOpen] = useState(selectedEntities.length > 0);
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
@ -191,7 +198,7 @@ export function SwitchesWidget(props: WidgetProps) {
return ( return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}> <Collapsible open={isOpen} onOpenChange={setIsOpen}>
<div className="space-y-3"> <div className="space-y-2">
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<Button <Button
type="button" type="button"
@ -208,6 +215,12 @@ export function SwitchesWidget(props: WidgetProps) {
</Button> </Button>
</CollapsibleTrigger> </CollapsibleTrigger>
{emptySelectionHintKey && selectedEntities.length === 0 && t && (
<div className="mt-0 pb-2 text-sm text-success">
{t(emptySelectionHintKey, { ns: namespace })}
</div>
)}
<CollapsibleContent className="rounded-lg border border-input bg-secondary pb-1 pr-0 pt-2 md:max-w-md"> <CollapsibleContent className="rounded-lg border border-input bg-secondary pb-1 pr-0 pt-2 md:max-w-md">
{allEntities.length === 0 && !allowCustomEntries ? ( {allEntities.length === 0 && !allowCustomEntries ? (
<div className="text-sm text-muted-foreground">{emptyMessage}</div> <div className="text-sm text-muted-foreground">{emptyMessage}</div>