feat: add CheckboxTree component

[rohanm-crest]

Issue number: ADDON-76198

PR Type

What kind of change does this PR introduce?

• Feature
• Bug Fix
• Refactoring (no functional or API changes)
• Documentation Update
• Maintenance (dependency updates, CI, etc.)

Summary

Changes

A new component CheckboxTree has been introduced to define hierarchical checkbox structures with support of search functionality.

User experience

User can use the new component for handling the list of checkboxes with better UI including the expanding/collapsing, grouping and searching within the checkbox list.

Checklist

If an item doesn't apply to your changes, leave it unchecked.

• I have performed a self-review of this change according to the development guidelines
• Tests have been added/modified to cover the changes (testing doc)
• Changes are documented
• PR title and description follows the contributing principles

[soleksy-splunk]

still reviewing but will post just after adding, feel free to close if something seems like a bad/worse idea

[soleksy-splunk]

can you create similar test when group is collapsed by default?

[soleksy-splunk]

fort this one i needed some more time while reading it wdyt about refactoring it into sth like this

Suggested change

	export function getFlattenRowsWithGroups({ groups, rows }: CheckboxTreeProps['controlOptions']) {
	const flattenRowsMixedWithGroups: Array<GroupWithRows | Row> = [];
	rows.forEach((row) => {
	const groupForThisRow = groups?.find((group) => group.fields.includes(row.field));
	if (groupForThisRow) {
	const addedGroup = flattenRowsMixedWithGroups.find(
	(item): item is GroupWithRows =>
	isGroupWithRows(item) && item.label === groupForThisRow.label
	);
	const groupToAdd = addedGroup || {
	...groupForThisRow,
	rows: [],
	};
	groupToAdd.rows.push(row);
	if (!addedGroup) {
	flattenRowsMixedWithGroups.push(groupToAdd);
	}
	return;
	}
	flattenRowsMixedWithGroups.push(row);
	});
	return flattenRowsMixedWithGroups;
	}
	export function getFlattenRowsWithGroups({ groups, rows }: CheckboxTreeProps['controlOptions']) {
	const flattenRowsMixedWithGroups: Array<GroupWithRows | Row> = [];
	rows.forEach((row) => {
	const groupForThisRow = groups?.find((group) => group.fields.includes(row.field));
	if (!groupForThisRow) {
	// no group needed for this row
	flattenRowsMixedWithGroups.push(row);
	return;
	}
	const existingGroup = flattenRowsMixedWithGroups.find(
	(item): item is GroupWithRows =>
	isGroupWithRows(item) && item.label === groupForThisRow.label
	);
	if (!existingGroup) {
	// add new group
	flattenRowsMixedWithGroups.push({
	...groupForThisRow,
	rows: [row],
	});
	return;
	}
	// add to existing group
	existingGroup.rows.push(row);
	});
	return flattenRowsMixedWithGroups;
	}

or even something like this

Suggested change

	export function getFlattenRowsWithGroups({ groups, rows }: CheckboxTreeProps['controlOptions']) {
	const flattenRowsMixedWithGroups: Array<GroupWithRows | Row> = [];
	rows.forEach((row) => {
	const groupForThisRow = groups?.find((group) => group.fields.includes(row.field));
	if (groupForThisRow) {
	const addedGroup = flattenRowsMixedWithGroups.find(
	(item): item is GroupWithRows =>
	isGroupWithRows(item) && item.label === groupForThisRow.label
	);
	const groupToAdd = addedGroup || {
	...groupForThisRow,
	rows: [],
	};
	groupToAdd.rows.push(row);
	if (!addedGroup) {
	flattenRowsMixedWithGroups.push(groupToAdd);
	}
	return;
	}
	flattenRowsMixedWithGroups.push(row);
	});
	return flattenRowsMixedWithGroups;
	}
	export function getFlattenRowsWithGroups({ groups, rows }: CheckboxTreeProps['controlOptions']) {
	return rows.reduce<Array<GroupWithRows | Row>>((flattenRowsMixedWithGroups, row) => {
	const groupForThisRow = groups?.find((group) => group.fields.includes(row.field));
	if (!groupForThisRow) {
	// no group needed for this row
	return [...flattenRowsMixedWithGroups, row];
	}
	const existingGroup = flattenRowsMixedWithGroups.find(
	(item): item is GroupWithRows =>
	isGroupWithRows(item) && item.label === groupForThisRow.label
	);
	if (!existingGroup) {
	// add new group
	return [
	...flattenRowsMixedWithGroups,
	{
	...groupForThisRow,
	rows: [row],
	},
	];
	}
	// add to existing group
	existingGroup.rows.push(row);
	return flattenRowsMixedWithGroups;
	}, []);
	}