fix: pass disabled props for radio bar component (#997)

splunk · Jan 10, 2024 · a4eb6f9 · a4eb6f9
1 parent 312c8be
commit a4eb6f9
Show file tree

Hide file tree

Showing 15 changed files with 396 additions and 10 deletions.
diff --git a/splunk_add_on_ucc_framework/schema/schema.json b/splunk_add_on_ucc_framework/schema/schema.json
@@ -936,6 +936,9 @@
                 "additionalProperties": false
               },
               "minItems": 1
+            },
+            "disableonEdit": {
+              "type": "boolean"
             }
           },
           "required": ["rows"],

diff --git a/tests/testdata/test_addons/package_global_config_everything/globalConfig.json b/tests/testdata/test_addons/package_global_config_everything/globalConfig.json
@@ -1375,7 +1375,7 @@
     "meta": {
         "name": "Splunk_TA_UCCExample",
         "restRoot": "splunk_ta_uccexample",
-        "version": "5.35.1Ree62a73b",
+        "version": "5.35.1R7fe3d58d",
         "displayName": "Splunk UCC test Add-on",
         "schemaVersion": "0.0.3"
     }

diff --git a/ui/src/components/CheckboxGroup/CheckboxGroup.test.tsx b/ui/src/components/CheckboxGroup/CheckboxGroup.test.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CheckboxGroup from './CheckboxGroup';
+import { CheckboxGroupProps } from './checkboxGroup.utils';
+import { MODE_CREATE } from '../../constants/modes';
+
+const handleChange = jest.fn();
+
+const defaultCheckboxProps: CheckboxGroupProps = {
+    mode: MODE_CREATE,
+    field: 'api',
+    value: 'collect_collaboration/1200,collect_file/1,collect_task/1',
+    controlOptions: {
+        rows: [
+            {
+                field: 'collect_collaboration',
+                checkbox: {
+                    label: 'Collect folder collaboration',
+                },
+                input: {
+                    defaultValue: 1200,
+                    required: false,
+                },
+            },
+            {
+                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,
+                },
+            },
+        ],
+    },
+    handleChange,
+};
+
+const renderFeature = (additionalProps?: Partial<CheckboxGroupProps>) => {
+    const props = {
+        ...defaultCheckboxProps,
+        ...additionalProps,
+    };
+    render(<CheckboxGroup {...props} />);
+};
+
+it('renders checkbox group correctly', async () => {
+    renderFeature();
+    defaultCheckboxProps.controlOptions.rows.forEach((row) => {
+        const optionWithCorrectText = screen.getByText(row?.checkbox?.label || 'unexisting string');
+        expect(optionWithCorrectText).toBeInTheDocument();
+        expect(optionWithCorrectText.dataset?.disabled).toBeUndefined();
+    });
+});
+
+it('renders disabled checkbox group correctly', async () => {
+    renderFeature({ disabled: true });
+    defaultCheckboxProps.controlOptions.rows.forEach((row) => {
+        const optionWithCorrectText = screen.getByText(row?.checkbox?.label || 'unexisting string');
+        expect(optionWithCorrectText).toBeInTheDocument();
+        expect(optionWithCorrectText.dataset.disabled).toEqual('true');
+    });
+});
+
+it('increment value correctly', async () => {
+    renderFeature();
+    const incrementButtons = screen.getAllByTestId('increment');
+    const [firstIncrementer, secondIncrementer, thirdIncrementer] = incrementButtons;
+
+    await userEvent.click(firstIncrementer);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1201,collect_file/1,collect_task/1',
+        'checkboxGroup'
+    );
+    await userEvent.click(secondIncrementer);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1201,collect_file/2,collect_task/1',
+        'checkboxGroup'
+    );
+    await userEvent.click(thirdIncrementer);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1201,collect_file/2,collect_task/2',
+        'checkboxGroup'
+    );
+});
+
+it('decrement value correctly', async () => {
+    renderFeature();
+    const decrementButtons = screen.getAllByTestId('decrement');
+    const [firstDecrement, secondDecrement, thirdDecrement] = decrementButtons;
+
+    await userEvent.click(firstDecrement);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1199,collect_file/1,collect_task/1',
+        'checkboxGroup'
+    );
+    await userEvent.click(secondDecrement);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1199,collect_file/0,collect_task/1',
+        'checkboxGroup'
+    );
+    await userEvent.click(thirdDecrement);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1199,collect_file/0,collect_task/0',
+        'checkboxGroup'
+    );
+});
+
+it('mixed incrementing and decrementing value correctly', async () => {
+    renderFeature();
+    const incrementButtons = screen.getAllByTestId('increment');
+    const [firstIncrementer, secondIncrementer, thirdIncrementer] = incrementButtons;
+
+    const decrementButtons = screen.getAllByTestId('decrement');
+    const [firstDecrement, secondDecrement, thirdDecrement] = decrementButtons;
+
+    await userEvent.click(firstDecrement);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1199,collect_file/1,collect_task/1',
+        'checkboxGroup'
+    );
+
+    await userEvent.click(thirdIncrementer);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1199,collect_file/1,collect_task/2',
+        'checkboxGroup'
+    );
+
+    await userEvent.click(secondDecrement);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1199,collect_file/0,collect_task/2',
+        'checkboxGroup'
+    );
+
+    await userEvent.click(firstIncrementer);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1200,collect_file/0,collect_task/2',
+        'checkboxGroup'
+    );
+
+    await userEvent.click(thirdDecrement);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        'collect_collaboration/1200,collect_file/0,collect_task/1',
+        'checkboxGroup'
+    );
+
+    await userEvent.click(secondIncrementer);
+    expect(handleChange).toHaveBeenCalledWith(
+        defaultCheckboxProps.field,
+        defaultCheckboxProps.value,
+        'checkboxGroup'
+    );
+});
diff --git a/ui/src/components/CheckboxGroup/CheckboxGroup.tsx b/ui/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -17,8 +17,7 @@ import { useValidation } from './checkboxGroupValidation';
 import { MODE_CREATE } from '../../constants/modes';
 
 function CheckboxGroup(props: CheckboxGroupProps) {
-    const { field, handleChange, controlOptions, addCustomValidator } = props;
-
+    const { field, handleChange, controlOptions, addCustomValidator, disabled } = props;
     const flattenedRowsWithGroups = getFlattenRowsWithGroups(controlOptions);
     const shouldUseDefaultValue = props.mode === MODE_CREATE && props.value === null;
     const value = shouldUseDefaultValue
@@ -71,6 +70,7 @@ function CheckboxGroup(props: CheckboxGroupProps) {
                                     group={row}
                                     values={values}
                                     handleRowChange={handleRowChange}
+                                    disabled={disabled}
                                 />
                             </ColumnLayout.Row>
                         );
@@ -81,6 +81,7 @@ function CheckboxGroup(props: CheckboxGroupProps) {
                                 row={row}
                                 values={values}
                                 handleRowChange={handleRowChange}
+                                disabled={disabled}
                             />
                         </ColumnLayout.Row>
                     );

diff --git a/ui/src/components/CheckboxGroup/CheckboxRowWrapper.tsx b/ui/src/components/CheckboxGroup/CheckboxRowWrapper.tsx
@@ -6,10 +6,12 @@ function CheckboxRowWrapper({
     row,
     values,
     handleRowChange,
+    disabled,
 }: {
     row: Row;
     values: ValueByField;
     handleRowChange: (newValue: { field: string; checkbox: boolean; text?: string }) => void;
+    disabled?: boolean;
 }) {
     const valueForField = values.get(row.field);
     return (
@@ -19,6 +21,7 @@ function CheckboxRowWrapper({
             checkbox={!!valueForField?.checkbox}
             input={valueForField ? valueForField.inputValue : row.input?.defaultValue}
             handleChange={handleRowChange}
+            disabled={disabled}
         />
     );
 }

diff --git a/ui/src/components/CheckboxGroup/CheckboxSubGroup.tsx b/ui/src/components/CheckboxGroup/CheckboxSubGroup.tsx
@@ -14,9 +14,10 @@ interface CheckboxSubGroupProps {
     group: GroupWithRows;
     values: ValueByField;
     handleRowChange: (newValue: { field: string; checkbox: boolean; text?: string }) => void;
+    disabled?: boolean;
 }
 
-function CheckboxSubGroup({ group, values, handleRowChange }: CheckboxSubGroupProps) {
+function CheckboxSubGroup({ group, values, handleRowChange, disabled }: CheckboxSubGroupProps) {
     const checkedCheckboxesCount = getCheckedCheckboxesCount(group, values);
     return (
         <Group
@@ -28,6 +29,7 @@ function CheckboxSubGroup({ group, values, handleRowChange }: CheckboxSubGroupPr
             <StyledCheckboxRowWrapper>
                 {group.rows.map((rowInsideGroup) => (
                     <CheckboxRowWrapper
+                        disabled={disabled}
                         row={rowInsideGroup}
                         values={values}
                         handleRowChange={handleRowChange}

diff --git a/ui/src/components/CheckboxGroup/checkboxGroup.utils.ts b/ui/src/components/CheckboxGroup/checkboxGroup.utils.ts
@@ -81,6 +81,7 @@ export interface CheckboxGroupProps {
         validator: (submittedField: string, submittedValue: string) => void
     ) => void;
     handleChange: (field: string, value: string, componentType?: 'checkboxGroup') => void;
+    disabled?: boolean;
 }
 
 export function isGroupWithRows(item: GroupWithRows | Row): item is GroupWithRows {

diff --git a/ui/src/components/FileInputComponent/FileInputComponent.test.tsx b/ui/src/components/FileInputComponent/FileInputComponent.test.tsx
@@ -316,3 +316,33 @@ test('Default error message disappears when reuploading encrypted file', async (
     const nullHelpElement = await screen.queryByTestId('help');
     expect(nullHelpElement).toBeNull();
 });
+
+it('File input disabled - rendered correctly with disabled attr', () => {
+    // throws error Could not parse CSS styleshee, which only obscures tests
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+    const field = 'testFileField';
+    const disabled = true;
+    const controlOptions = {
+        supportedFileTypes: ['json'],
+        maxFileSize: 10,
+    };
+    const handleChange = jest.fn();
+    const testFileName = 'testFileName.json';
+
+    render(
+        <FileInputComponent
+            field={field}
+            disabled={disabled}
+            controlOptions={controlOptions}
+            handleChange={handleChange}
+            fileNameToDisplay={testFileName}
+            encrypted={false}
+        />
+    );
+
+    const fileComponent = screen.getByTestId('file-input');
+    expect(fileComponent).toBeInTheDocument();
+    expect(fileComponent).toHaveAttribute('disabled');
+    consoleSpy.mockRestore();
+});
diff --git a/...omponents/MultiInputComponent.stories.tsx → ...Component/MultiInputComponent.stories.tsx b/...omponents/MultiInputComponent.stories.tsx → ...Component/MultiInputComponent.stories.tsx
diff --git a/ui/src/components/MultiInputComponent/MultiInputComponent.test.tsx b/ui/src/components/MultiInputComponent/MultiInputComponent.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import MultiInputComponent, { MultiInputComponentProps } from './MultiInputComponent';
+
+const handleChange = jest.fn();
+
+const defaultInputProps: MultiInputComponentProps = {
+    field: 'defaultFieldName',
+    controlOptions: {
+        delimiter: ',',
+        createSearchChoice: true,
+        referenceName: 'referenceName',
+        dependencies: undefined,
+        endpointUrl: undefined,
+        labelField: 'labelField',
+        items: [
+            { label: 'label1', value: 'value1' },
+            { label: 'label2', value: 'value2' },
+            { label: 'label3', value: 'value3' },
+        ],
+    },
+    disabled: false,
+    value: 'defaultValue',
+    error: false,
+    dependencyValues: {},
+    handleChange,
+};
+
+const renderFeature = (additionalProps?: Partial<MultiInputComponentProps>) => {
+    const props = {
+        ...defaultInputProps,
+        ...additionalProps,
+    };
+    render(<MultiInputComponent {...props} />);
+};
+
+it('renders correctly', () => {
+    renderFeature();
+    const inputComponent = screen.getByTestId('multiselect');
+    expect(inputComponent).toBeInTheDocument();
+    expect(inputComponent.getAttribute('data-test-values')).toEqual(
+        // eslint-disable-next-line no-useless-escape
+        `[\"${defaultInputProps.value}\"]`
+    );
+});
+
+it('renders as disabled correctly', () => {
+    renderFeature({ disabled: true });
+    const inputComponent = screen.getByTestId('multiselect');
+    expect(inputComponent).toBeInTheDocument();
+    expect(inputComponent.getAttribute('aria-disabled')).toEqual('true');
+});
diff --git a/ui/src/components/MultiInputComponent.tsx → ...ltiInputComponent/MultiInputComponent.tsx b/ui/src/components/MultiInputComponent.tsx → ...ltiInputComponent/MultiInputComponent.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import axios from 'axios';
 import WaitSpinner from '@splunk/react-ui/WaitSpinner';
 
-import { axiosCallWrapper } from '../util/axiosCallWrapper';
-import { filterResponse } from '../util/util';
+import { axiosCallWrapper } from '../../util/axiosCallWrapper';
+import { filterResponse } from '../../util/util';
 
 const MultiSelectWrapper = styled(Multiselect)`
     width: 320px !important;
@@ -15,7 +15,7 @@ const WaitSpinnerWrapper = styled(WaitSpinner)`
     margin-left: 5px;
 `;
 
-interface MultiInputComponentProps {
+export interface MultiInputComponentProps {
     handleChange: (field: string, data: string) => void;
     field: string;
     controlOptions: {

diff --git a/ui/src/components/RadioComponent.stories.ts → .../RadioComponent/RadioComponent.stories.ts b/ui/src/components/RadioComponent.stories.ts → .../RadioComponent/RadioComponent.stories.ts
@@ -29,5 +29,6 @@ export const Base: Story = {
                 },
             ],
         },
+        disabled: false,
     },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,5 +29,6 @@ export const Base: Story = { @@
                     },
                 ],
             },
+            disabled: false,
         },
     };