refactor: optimise and refactored the function

splunk · Jan 17, 2025 · e0427d0 · e0427d0
1 parent 15afc57
commit e0427d0
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 43 deletions.
diff --git a/ui/src/components/CheckboxGroup/checkboxGroup.utils.ts b/ui/src/components/CheckboxGroup/checkboxGroup.utils.ts
@@ -68,7 +68,7 @@ export interface Row {
 
 export type GroupWithRows = Group & { rows: Row[] };
 
-export interface CheckboxGroupProps {
+export interface BaseCheckboxProps {
     field: string;
     value?: string;
     controlOptions: {
@@ -80,10 +80,14 @@ export interface CheckboxGroupProps {
         field: string,
         validator: (submittedField: string, submittedValue: string) => void
     ) => void;
-    handleChange: (field: string, value: string, componentType?: 'checkboxGroup') => void;
+    handleChange: (field: string, value: string, componentType?: string) => void;
     disabled?: boolean;
 }
 
+export interface CheckboxGroupProps extends Omit<BaseCheckboxProps, 'handleChange'> {
+    handleChange: (field: string, value: string, componentType?: 'checkboxGroup') => void;
+}
+
 export function isGroupWithRows(item: GroupWithRows | Row): item is GroupWithRows {
     return 'label' in item;
 }

diff --git a/ui/src/components/CheckboxTree/CheckboxTree.test.tsx b/ui/src/components/CheckboxTree/CheckboxTree.test.tsx
@@ -111,3 +111,61 @@ describe('checkboxTree Component', () => {
         expect(handleChange).toHaveBeenLastCalledWith('checkbox_field', '', 'checkboxTree');
     });
 });
+
+describe('checkboxTree Component - Collapsed Groups', () => {
+    it('renders groups in a collapsed state by default and toggles correctly', async () => {
+        const user = userEvent.setup();
+        renderCheckboxTree({
+            controlOptions: {
+                ...defaultCheckboxProps.controlOptions,
+                groups: [
+                    {
+                        label: 'Group 1',
+                        options: {
+                            isExpandable: true,
+                            expand: false, // Group starts collapsed
+                        },
+                        fields: ['rowUnderGroup1'],
+                    },
+                    {
+                        label: 'Group 3',
+                        options: {
+                            isExpandable: true,
+                            expand: false, // Group starts collapsed
+                        },
+                        fields: ['firstRowUnderGroup3', 'secondRowUnderGroup3'],
+                    },
+                ],
+            },
+        });
+
+        // Verify groups are rendered
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        expect(screen.getByText('Group 3')).toBeInTheDocument();
+
+        // Verify rows under collapsed groups are not visible
+        expect(screen.queryByLabelText('Row under Group 1')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('first row under group 3')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('second row under group 3')).not.toBeInTheDocument();
+
+        // Get all buttons
+        const buttons = screen.getAllByRole('button');
+
+        // Select the first button (for Group 1)
+        const group1Button = buttons[0];
+        expect(group1Button).toHaveAttribute('data-test', 'toggle'); // Verify it's the toggle button
+        await user.click(group1Button); // Click Group 1 toggle button
+
+        // Verify rows under "Group 1" are visible
+        expect(screen.getByLabelText('Row under Group 1')).toBeInTheDocument();
+
+        // Select the second button (for Group 3)
+        const group3Button = buttons[1];
+        expect(group3Button).toHaveAttribute('data-test', 'toggle'); // Verify it's the toggle button
+        await user.click(group3Button); // Click Group 3 toggle button
+
+        // Verify rows under "Group 3" are visible
+        expect(screen.getByLabelText('first row under group 3')).toBeInTheDocument();
+        expect(screen.getByLabelText('second row under group 3')).toBeInTheDocument();
+    });
+});
diff --git a/ui/src/components/CheckboxTree/CheckboxTree.utils.ts b/ui/src/components/CheckboxTree/CheckboxTree.utils.ts
@@ -5,29 +5,29 @@ export function isGroupWithRows(item: GroupWithRows | Row): item is GroupWithRow
 }
 
 export function getFlattenRowsWithGroups({ groups, rows }: CheckboxTreeProps['controlOptions']) {
-    const flattenRowsMixedWithGroups: Array<GroupWithRows | Row> = [];
+    const groupMap = new Map<string, GroupWithRows>();
 
-    rows.forEach((row) => {
+    return rows.reduce<Array<GroupWithRows | Row>>((flattenRowsMixedWithGroups, 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;
+        if (!groupForThisRow) {
+            // no group needed for this row, simply push the row
+            flattenRowsMixedWithGroups.push(row);
+            return flattenRowsMixedWithGroups;
         }
-        flattenRowsMixedWithGroups.push(row);
-    });
 
-    return flattenRowsMixedWithGroups;
+        // Check if the group already exists in the map, otherwise create a new group
+        let existingGroup = groupMap.get(groupForThisRow.label);
+        if (!existingGroup) {
+            existingGroup = { ...groupForThisRow, rows: [row] };
+            groupMap.set(groupForThisRow.label, existingGroup);
+            flattenRowsMixedWithGroups.push(existingGroup);
+        } else {
+            // Add row to the existing group
+            existingGroup.rows.push(row);
+        }
+
+        return flattenRowsMixedWithGroups;
+    }, []);
 }
 
 export function getNewCheckboxValues(
@@ -59,9 +59,6 @@ export function getDefaultValues(rows: Row[]): ValueByField {
     const resultMap = new Map<Field, Value>();
 
     rows.forEach((row) => {
-        if (isGroupWithRows(row)) {
-            return;
-        }
         const checkboxDefaultValue = row.checkbox?.defaultValue;
         if (typeof checkboxDefaultValue !== 'boolean') {
             return;

diff --git a/ui/src/components/CheckboxTree/mocks/CheckboxTreeMocks.json b/ui/src/components/CheckboxTree/mocks/CheckboxTreeMocks.json
@@ -93,8 +93,7 @@
                     "field": "firstRowUnderGroup3",
                     "checkbox": {
                       "label": "first row checked under group 3",
-                      "defaultValue": true,
-                      "disabled": true
+                      "defaultValue": true
                     }
                   },
                   {

diff --git a/ui/src/components/CheckboxTree/mocks/CheckboxTreeRequiredMocks.json b/ui/src/components/CheckboxTree/mocks/CheckboxTreeRequiredMocks.json
@@ -88,8 +88,7 @@
                   {
                     "field": "secondRowUnderGroup3",
                     "checkbox": {
-                      "label": "second row under group 3",
-                      "disabled": true
+                      "label": "second row under group 3"
                     }
                   }
                 ]

diff --git a/ui/src/components/CheckboxTree/types.ts b/ui/src/components/CheckboxTree/types.ts
@@ -1,4 +1,4 @@
-import { Mode } from '../../constants/modes';
+import { BaseCheckboxProps } from '../CheckboxGroup/checkboxGroup.utils';
 
 export type Field = string;
 export type Value = {
@@ -27,20 +27,7 @@ export interface Row {
 
 export type GroupWithRows = Group & { rows: Row[] };
 
-export interface CheckboxTreeProps {
-    field: string;
-    value?: string;
-    required?: boolean;
+export interface CheckboxTreeProps extends Omit<BaseCheckboxProps, 'handleChange'> {
     label: string;
-    controlOptions: {
-        groups?: Group[];
-        rows: Row[];
-    };
-    mode: Mode;
-    addCustomValidator?: (
-        field: string,
-        validator: (submittedField: string, submittedValue: string) => void
-    ) => void;
     handleChange: (field: string, value: string, componentType: 'checkboxTree') => void;
-    disabled?: boolean;
 }