feat: add CheckboxTree component

splunk_add_on_ucc_framework/schema/schema.json

@@ -1449,6 +1449,115 @@
       ],
       "additionalProperties": false
     },
+    "CheckboxTreeEntity": {
+      "type": "object",
+      "properties": {
+        "field": {
+          "$ref": "#/definitions/Field"
+        },
+        "label": {
+          "type": "string",
+          "maxLength": 30,
+          "description": "Text displayed next to entity field"
+        },
+        "type": {
+          "const": "CheckboxTree",
+          "type": "string",
+          "description": "Exactly: CheckboxTree"
+        },
+        "options": {
+          "type": "object",
+          "properties": {
+            "groups": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "label": {
+                    "type": "string",
+                    "maxLength": 30,
+                    "description": "Text displayed next to entity field"
+                  },
+                  "options": {
+                    "type": "object",
+                    "properties": {
+                      "isExpandable": {
+                        "type": "boolean",
+                        "default": false
+                      },
+                      "expand": {
+                        "type": "boolean",
+                        "default": false
+                      }
+                    },
+                    "additionalProperties": false
+                  },
+                  "fields": {
+                    "type": "array",
+                    "minItems": 1,
+                    "items": {
+                      "type": "string"
+                    },
+                    "uniqueItems": true
+                  }
+                },
+                "required": ["label", "fields"],
+                "additionalProperties": false
+              }
+            },
+            "rows": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "field": {
+                    "type": "string"
+                  },
+                  "checkbox": {
+                    "type": "object",
+                    "properties": {
+                      "label": {
+                        "type": "string",
+                        "maxLength": 30,
+                        "description": "Text displayed next to entity field"
+                      },
+                      "defaultValue": {
+                        "type": "boolean",
+                        "description": "The initial input value."
+                      }
+                    },
+                    "additionalProperties": false
+                  }
+                },
+                "required": ["field"],
+                "additionalProperties": false
+              },
+              "minItems": 1
+            },
+            "disableonEdit": {
+              "$ref": "#/definitions/disableonEdit"
+            }
+          },
+          "required": ["rows"],
+          "additionalProperties": false
+        },
+        "validators": {
+          "type": "array",
+          "items": {
+            "anyOf": [
+              {
+                "$ref": "#/definitions/RegexValidator"
+              }
+            ]
+          }
+        },
+        "required": {
+          "type": "boolean"
+        }
+      },
+      "required": ["field", "label", "type", "options"],
+      "additionalProperties": false
+    },
     "RadioEntity": {
       "type": "object",
       "properties": {
@@ -1864,6 +1973,9 @@
           {
             "$ref": "#/definitions/CheckboxGroupEntity"
           },
+          {
+            "$ref": "#/definitions/CheckboxTreeEntity"
+          },
           {
             "$ref": "#/definitions/TextEntity"
           },

tests/testdata/expected_addons/expected_output_global_config_everything/Splunk_TA_UCCExample/bin/splunk_ta_uccexample_rh_three_custom.py

@@ -30,6 +30,14 @@
         validator=None
     )
 
+    field.RestField(
+        'apis',
+        required=False,
+        encrypted=False,
+        default=None,
+        validator=None
+    ),
+
 ]
 model = RestModel(fields, name=None)
 

tests/testdata/test_addons/package_global_config_everything/globalConfig.json

@@ -1571,6 +1571,81 @@
                             "label": "Interval",
                             "help": "Time interval of the data input, in seconds.",
                             "required": true
+                        },
+                        {
+                            "type": "CheckboxTree",
+                            "label": "Event Filters",
+                            "field": "apis",
+                            "required": true,
+                            "options": {
+                                "groups": [
+                                    {
+                                        "label": "Transactions",
+                                        "options": {
+                                            "isExpandable": true,
+                                            "expand": true
+                                        },
+                                        "fields": [
+                                            "slow_request",
+                                            "transaction_stall"
+                                        ]
+                                    },
+                                    {
+                                        "label": "others",
+                                        "options": {
+                                            "isExpandable": true,
+                                            "expand": true
+                                        },
+                                        "fields": [
+                                            "custom_events",
+                                            "cluster_events",
+                                            "network_events"
+                                        ]
+                                    }
+                                ],
+                                "rows": [
+                                    {
+                                        "field": "code_problems",
+                                        "checkbox": {
+                                            "label": "Code Problems",
+                                            "defaultValue": true
+                                        }
+                                    },
+                                    {
+                                        "field": "slow_request",
+                                        "checkbox": {
+                                            "label": "Slow Request",
+                                            "defaultValue": true
+                                        }
+                                    },
+                                    {
+                                        "field": "transaction_stall",
+                                        "checkbox": {
+                                            "label": "Transactions Stall",
+                                            "defaultValue": false
+                                        }
+                                    },
+                                    {
+                                        "field": "custom_events",
+                                        "checkbox": {
+                                            "label": "Custom Events",
+                                            "defaultValue": true
+                                        }
+                                    },
+                                    {
+                                        "field": "cluster_events",
+                                        "checkbox": {
+                                            "label": "Cluster Events"
+                                        }
+                                    },
+                                    {
+                                        "field": "network_events",
+                                        "checkbox": {
+                                            "label": "Network Events"
+                                        }
+                                    }
+                                ]
+                            }
                         }
                     ],
                     "title": "Example Input Three"

tests/testdata/test_addons/package_global_config_everything/package/bin/splunk_ta_uccexample_rh_three_custom.py

@@ -28,7 +28,15 @@
         'disabled',
         required=False,
         validator=None
-    )
+    ),
+
+    field.RestField(
+        'apis',
+        required=False,
+        encrypted=False,
+        default=None,
+        validator=None
+    ),
 
 ]
 model = RestModel(fields, name=None)

ui/src/components/CheckboxTree/CheckboxSubTree.tsx

@@ -0,0 +1,110 @@
+import React, { useMemo, useState } from 'react';
+import CheckboxRowWrapper from './CheckboxTreeRowWrapper';
+import { getCheckedCheckboxesCount } from './CheckboxTree.utils';
+import {
+    CheckboxContainer,
+    CheckboxWrapper,
+    Description,
+    GroupLabel,
+    RowContainer,
+    StyledCollapsiblePanel,
+} from './StyledComponent';
+import { GroupWithRows, ValueByField } from './types';
+
+interface CheckboxSubTreeProps {
+    group: GroupWithRows;
+    values: ValueByField;
+    handleRowChange: (newValue: { field: string; checkbox: boolean; text?: string }) => void;
+    disabled?: boolean;
+    handleParentCheckboxTree: (groupLabel: string, newCheckboxValue: boolean) => void;
+}
+
+const CheckboxSubTree: React.FC<CheckboxSubTreeProps> = ({
+    group,
+    values,
+    handleRowChange,
+    disabled,
+    handleParentCheckboxTree,
+}) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const isParentChecked = useMemo(
+        () => group.rows.every((row) => values.get(row.field)?.checkbox),
+        [group.rows, values]
+    );
+
+    const isIndeterminate = useMemo(
+        () => group.rows.some((row) => values.get(row.field)?.checkbox) && !isParentChecked,
+        [group.rows, values, isParentChecked]
+    );
+
+    const checkedCheckboxesCount = useMemo(
+        () => getCheckedCheckboxesCount(group, values),
+        [group, values]
+    );
+
+    const toggleCollapse = () => setIsExpanded((prev) => !prev);
+
+    const ParentCheckbox = (
+        <CheckboxWrapper>
+            <input
+                type="checkbox"
+                checked={isParentChecked}
+                ref={(el) => {
+                    const inputElement = el as HTMLInputElement | null;
+                    if (inputElement) {
+                        inputElement.indeterminate = isIndeterminate;
+                    }
+                }}
+                onChange={() => handleParentCheckboxTree(group.label, !isParentChecked)}
+                disabled={disabled}
+            />
+            <span>{group.label}</span>
+        </CheckboxWrapper>
+    );
+
+    const childRows = (
+        <RowContainer>
+            {group.rows.map((row) => (
+                <CheckboxRowWrapper
+                    key={`row_${row.field}`}
+                    disabled={disabled}
+                    row={row}
+                    values={values}
+                    handleRowChange={handleRowChange}
+                />
+            ))}
+        </RowContainer>
+    );
+
+    const description = (
+        <Description>
+            {checkedCheckboxesCount} of {group.fields.length}
+        </Description>
+    );
+
+    return (
+        <CheckboxContainer>
+            {group.options?.isExpandable ? (
+                <StyledCollapsiblePanel
+                    open={isExpanded}
+                    onChange={toggleCollapse}
+                    title={ParentCheckbox}
+                    actions={description}
+                >
+                    {childRows}
+                </StyledCollapsiblePanel>
+            ) : (
+                <>
+                    <GroupLabel>
+                        {ParentCheckbox}
+                        {description}
+                    </GroupLabel>
+                    {childRows}
+                </>
+            )}
+        </CheckboxContainer>
+    );
+};
+
+export default CheckboxSubTree;