feat(CheckboxGroup): add support for required field (#1131)

- Implemented a new checkboxgroup component named "Required checkbox
example" with required validation.
- Updated "schema.json" and "valid_config.json" to include the
"required" attribute.
- Addressed the issue where the "required" validation was not
functioning correctly when only a single field was present in the form.

---------

Co-authored-by: srv-rr-github-token <[email protected]>
Co-authored-by: Artem Rys <[email protected]>

Author: 3 people

splunk_add_on_ucc_framework/schema/schema.json

@@ -975,6 +975,9 @@
               }
             ]
           }
+        },
+        "required" : {
+          "type": "boolean"
         }
       },
       "required": ["field", "label", "type", "options"],

tests/unit/testdata/valid_config.json

@@ -1000,6 +1000,7 @@
                             "type": "checkboxGroup",
                             "label": "Mixed",
                             "field": "api3",
+                            "required": true,
                             "options": {
                                 "groups": [
                                     {

ui/src/components/BaseFormView.tsx

@@ -944,7 +944,7 @@ class BaseFormView extends PureComponent<BaseFormProps, BaseFormState> {
     ) => {
         const index = this.entities?.findIndex((x) => x.field === field);
         const validator = [{ type: 'custom', validatorFunc }];
-        if (index && this.entities?.[index]) {
+        if (index !== undefined && this.entities?.[index]) {
             // here the validators already exist for entities so new type is created here
             // @ts-expect-error todo create a generalized type to also consider it
             this.entities[index].validators = validator;

ui/src/components/CheckboxGroup/checkboxGroupRequiredMocks.json

@@ -0,0 +1,115 @@
+{
+  "meta": {
+    "name": "Splunk_TA_aws",
+    "displayName": "Splunk Add-on for AWS",
+    "version": "7.1.0",
+    "restRoot": "restRoot",
+    "schemaVersion": "0.0.3"
+  },
+  "pages": {
+    "configuration": {
+      "title": "",
+      "tabs": [
+        {
+          "name": "a",
+          "title": "",
+          "entity": []
+        }
+      ]
+    },
+    "inputs": {
+      "title": "Inputs",
+      "table": {
+        "header": [
+          {
+            "field": "name",
+            "label": "Input Name"
+          }
+        ],
+        "moreInfo": [
+          {
+            "field": "name",
+            "label": "Name"
+          }
+        ],
+        "actions": [
+          "edit",
+          "delete",
+          "clone"
+        ]
+      },
+      "services": [
+        {
+          "name": "example_input_required",
+          "title": "Required checkbox example",
+          "entity": [
+            {
+              "type": "checkboxGroup",
+              "label": "CheckboxGroupRequired",
+              "field": "api3",
+              "required": true,
+              "options": {
+                "groups": [
+                  {
+                    "label": "Group 1",
+                    "fields": [
+                      "collect_collaboration",
+                      "collect_file",
+                      "collect_task",
+                      "collect_folder_metadata"
+                    ],
+                    "options": {
+                      "isExpandable": true,
+                      "expand": true
+                    }
+                  }
+                ],
+                "rows": [
+                  {
+                    "field": "collect_collaboration",
+                    "checkbox": {
+                      "label": "Collect folder collaboration"
+                    },
+                    "input": {
+                      "required": true
+                    }
+                  },
+                  {
+                    "field": "collect_file",
+                    "checkbox": {
+                      "label": "Collect file metadata"
+                    },
+                    "input": {
+                      "defaultValue": 1,
+                      "required": true
+                    }
+                  },
+                  {
+                    "field": "collect_task",
+                    "checkbox": {
+                      "label": "Collect tasks and comments"
+                    },
+                    "input": {
+                      "defaultValue": 1,
+                      "required": true
+                    }
+                  },
+                  {
+                    "field": "collect_folder_metadata",
+                    "checkbox": {
+                      "label": "Collect folder metadata"
+                    },
+                    "input": {
+                      "defaultValue": 3600,
+                      "required": true
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

ui/src/components/CheckboxGroup/stories/CheckboxGroupInputPage.stories.tsx

@@ -5,6 +5,7 @@ import BaseFormView from '../../BaseFormView';
 import { setUnifiedConfig } from '../../../util/util';
 import { serverHandlers } from '../checkboxGroupMocks';
 import checkboxGroupConfig from '../checkboxGroupMocks.json';
+import checkboxGroupRequiredConfig from '../checkboxGroupRequiredMocks.json';
 import InputPage from '../../../pages/Input/InputPage';
 
 const meta = {
@@ -37,3 +38,20 @@ export default meta;
 type Story = StoryObj<typeof BaseFormView>;
 
 export const InputPageView: Story = {};
+
+export const RequiredView: Story = {
+    args: {
+        globalConfig: checkboxGroupRequiredConfig,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const newInputBtn = canvas.getByRole('button', { name: 'Create New Input' });
+        await userEvent.click(newInputBtn);
+
+        const root = within(canvasElement.ownerDocument.body);
+        await expect(await root.findByRole('dialog')).toBeVisible();
+
+        await userEvent.click(await root.findByText('Add'));
+    },
+};