Make Collapsible Sections controlled in Form

VolkovLabs · Jun 12, 2024 · d961ff6 · d961ff6
1 parent 476ff19
commit d961ff6
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 11 deletions.
diff --git a/packages/components/src/components/Form/Form.test.tsx b/packages/components/src/components/Form/Form.test.tsx
@@ -561,6 +561,9 @@ describe('Form', () => {
         getComponent<{
           group1: {
             field: string;
+            subGroup1: {
+              field: string;
+            };
           };
           group2: {
             field: string;
@@ -574,10 +577,22 @@ describe('Form', () => {
                   label: '',
                 },
                 (builder) =>
-                  builder.addInput({
-                    path: 'field',
-                    defaultValue: '',
-                  })
+                  builder
+                    .addInput({
+                      path: 'field',
+                      defaultValue: '',
+                    })
+                    .addGroup(
+                      {
+                        path: 'subGroup1',
+                        label: '',
+                      },
+                      (builder) =>
+                        builder.addInput({
+                          path: 'field',
+                          defaultValue: '',
+                        })
+                    )
               )
               .addGroup(
                 {
@@ -600,6 +615,13 @@ describe('Form', () => {
       expect(selectors.sectionContent(false, 'group1')).toBeInTheDocument();
       expect(selectors.fieldInput(false, 'group1.field')).toBeInTheDocument();
 
+      /**
+       * Check subGroup 1
+       */
+      expect(selectors.sectionHeader(false, 'group1.subGroup1')).toBeInTheDocument();
+      expect(selectors.sectionContent(false, 'group1.subGroup1')).toBeInTheDocument();
+      expect(selectors.fieldInput(false, 'group1.subGroup1.field')).toBeInTheDocument();
+
       /**
        * Check group 2
        */
@@ -625,6 +647,9 @@ describe('Form', () => {
         getComponent<{
           group1: {
             field: string;
+            subGroup1: {
+              field: string;
+            };
           };
           group2: {
             field: string;
@@ -638,10 +663,22 @@ describe('Form', () => {
                   label: '',
                 },
                 (builder) =>
-                  builder.addInput({
-                    path: 'field',
-                    defaultValue: '',
-                  })
+                  builder
+                    .addInput({
+                      path: 'field',
+                      defaultValue: '',
+                    })
+                    .addGroup(
+                      {
+                        path: 'subGroup1',
+                        label: '',
+                      },
+                      (builder) =>
+                        builder.addInput({
+                          path: 'field',
+                          defaultValue: '',
+                        })
+                    )
               )
               .addGroup(
                 {
@@ -656,6 +693,7 @@ describe('Form', () => {
               ),
           expanded: {
             group1: false,
+            'group1.subGroup1': false,
           },
           onToggleExpanded,
         })
@@ -679,7 +717,29 @@ describe('Form', () => {
       fireEvent.click(selectors.sectionHeader(false, 'group1'));
       expect(onToggleExpanded).toHaveBeenCalledWith({
         group1: true,
+        'group1.subGroup1': false,
+      });
+
+      /**
+       * Check if subGroup1 is collapsed
+       */
+      expect(selectors.sectionHeader(false, 'group1.subGroup1')).toBeInTheDocument();
+      expect(selectors.sectionContent(true, 'group1.subGroup1')).not.toBeInTheDocument();
+
+      /**
+       * Expand subGroup 1
+       */
+      fireEvent.click(selectors.sectionHeader(false, 'group1.subGroup1'));
+      expect(onToggleExpanded).toHaveBeenCalledWith({
+        group1: false,
+        'group1.subGroup1': true,
       });
+
+      /**
+       * Check if subGroup1 is expanded
+       */
+      expect(selectors.sectionHeader(false, 'group1.subGroup1')).toBeInTheDocument();
+      expect(selectors.sectionContent(false, 'group1.subGroup1')).toBeInTheDocument();
     });
 
     it('Should hide field', () => {

diff --git a/packages/components/src/components/Form/Form.tsx b/packages/components/src/components/Form/Form.tsx
@@ -1,6 +1,5 @@
 import { dateTime, dateTimeFormat } from '@grafana/data';
 import {
-  CollapsableSection,
   ColorPicker,
   DateTimePicker,
   Field,
@@ -15,6 +14,7 @@ import React from 'react';
 
 import { TEST_IDS } from '../../constants';
 import { FormFieldType, RenderFormField } from '../../types';
+import { CollapsableSection } from '../CollapsableSection';
 import { NumberInput } from '../NumberInput';
 import { RangeSlider } from '../RangeSlider';
 import { Slider } from '../Slider';
@@ -139,11 +139,11 @@ export const Form = <TValue extends object>({
           headerDataTestId={TEST_IDS.form.sectionHeader(field.fullPath)}
           contentDataTestId={TEST_IDS.form.sectionContent(field.fullPath)}
           contentClassName={styles.section}
-          isOpen={expanded[field.path] ?? true}
+          isOpen={expanded[field.fullPath] ?? true}
           onToggle={(isOpen) =>
             onToggleExpanded({
               ...expanded,
-              [field.path]: isOpen,
+              [field.fullPath]: isOpen,
             })
           }
         >