react-vanilla: Disable array buttons when readonly (#2303)

* Add toggling readonly state to the example app
* Disable array control and array table control buttons when the controls are disabled.
  This is the case when controls are readonly
* Add unit tests for the controls' button enablement

Co-authored-by: Lucas Koehler <lkoehler@eclipsesource.com>

Author: joefreeman

packages/examples/src/example.ts

@@ -41,6 +41,7 @@ export interface ExampleDescription {
   config?: any;
   actions?: { label: string; apply: (props: StateProps) => any }[];
   i18n?: JsonFormsI18nState;
+  readonly?: boolean;
 }
 
 export interface StateProps {
@@ -51,4 +52,5 @@ export interface StateProps {
   cells?: JsonFormsCellRendererRegistryEntry[];
   config?: any;
   uischemas?: JsonFormsUISchemaRegistryEntry[];
+  readonly?: boolean;
 }

packages/examples/src/examples/arrays-with-detail.ts

@@ -24,6 +24,7 @@
 */
 import { registerExamples } from '../register';
 import { personCoreSchema } from './person';
+import { StateProps } from '../example';
 
 export const schema = {
   type: 'object',
@@ -93,12 +94,22 @@ export const data = {
   ],
 };
 
+const actions = [
+  {
+    label: 'Toggle readonly',
+    apply: (props: StateProps) => {
+      return { ...props, readonly: !props.readonly };
+    },
+  },
+];
+
 registerExamples([
   {
     name: 'array-with-detail',
     label: 'Array with detail',
     data,
     schema,
     uischema,
+    actions,
   },
 ]);

packages/examples/src/examples/arrays.ts

@@ -123,6 +123,12 @@ const actions = [
       };
     },
   },
+  {
+    label: 'Toggle readonly',
+    apply: (props: StateProps) => {
+      return { ...props, readonly: !props.readonly };
+    },
+  },
 ];
 
 registerExamples([

packages/vanilla-renderers/src/complex/TableArrayControl.tsx

@@ -83,6 +83,7 @@ class TableArrayControl extends React.Component<
       getStyleAsClassName,
       childErrors,
       translations,
+      enabled,
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -112,6 +113,7 @@ class TableArrayControl extends React.Component<
           <label className={labelClass}>{label}</label>
           <button
             type='button'
+            disabled={!enabled}
             className={buttonClass}
             onClick={addItem(path, createDefaultValue(schema, rootSchema))}
           >
@@ -216,6 +218,7 @@ class TableArrayControl extends React.Component<
                     <td>
                       <button
                         type='button'
+                        disabled={!enabled}
                         aria-label={translations.removeAriaLabel}
                         onClick={() => {
                           if (

packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx

@@ -58,6 +58,7 @@ export const ArrayControl = ({
   renderers,
   rootSchema,
   translations,
+  enabled,
 }: ArrayControlProps & VanillaRendererProps) => {
   const controlElement = uischema as ControlElement;
   const childUiSchema = useMemo(
@@ -98,6 +99,7 @@ export const ArrayControl = ({
         <button
           type='button'
           className={buttonClassAdd}
+          disabled={!enabled}
           onClick={addItem(path, createDefaultValue(schema, rootSchema))}
         >
           Add to {label}
@@ -121,6 +123,7 @@ export const ArrayControl = ({
                   <button
                     type='button'
                     className={buttonClassUp}
+                    disabled={!enabled}
                     aria-label={translations.upAriaLabel}
                     onClick={() => {
                       moveUp(path, index)();
@@ -131,6 +134,7 @@ export const ArrayControl = ({
                   <button
                     type='button'
                     className={buttonClassDown}
+                    disabled={!enabled}
                     aria-label={translations.downAriaLabel}
                     onClick={() => {
                       moveDown(path, index)();
@@ -141,6 +145,7 @@ export const ArrayControl = ({
                   <button
                     type='button'
                     className={buttonClassDelete}
+                    disabled={!enabled}
                     aria-label={translations.removeAriaLabel}
                     onClick={() => {
                       if (

packages/vanilla-renderers/test/renderers/ArrayControl.test.tsx

@@ -75,4 +75,54 @@ describe('Array control renderer', () => {
 
     expect(controls).toHaveLength(3);
   });
+
+  test('renders buttons', () => {
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+    const wrapper = mount(
+      <JsonFormsStateProvider
+        initState={{
+          renderers: vanillaRenderers,
+          cells,
+          core,
+          uischemas: [{ tester: () => 1, uischema: { type: 'Control' } }],
+        }}
+      >
+        <ArrayControl schema={fixture.schema} uischema={fixture.uischema} />
+      </JsonFormsStateProvider>
+    );
+
+    const buttons = wrapper.find('button');
+    expect(buttons).toHaveLength(4);
+    buttons.forEach((button) => {
+      expect(button.prop('disabled')).toBe(false);
+    });
+  });
+
+  test('disabled control renders disabled buttons', () => {
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+    const wrapper = mount(
+      <JsonFormsStateProvider
+        initState={{
+          renderers: vanillaRenderers,
+          cells,
+          core,
+          uischemas: [{ tester: () => 1, uischema: { type: 'Control' } }],
+        }}
+      >
+        <ArrayControl
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const buttons = wrapper.find('button');
+    expect(buttons).toHaveLength(4);
+    buttons.forEach((button) => {
+      expect(button.prop('disabled')).toBe(true);
+    });
+  });
 });

packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx

@@ -91,6 +91,47 @@ const fixture2 = {
   },
 };
 
+describe('Table array control', () => {
+  test('renders buttons', () => {
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, cells }}>
+        <TableArrayControl
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const buttons = wrapper.find('button');
+    expect(buttons).toHaveLength(2);
+    buttons.forEach((button) => {
+      expect(button.prop('disabled')).toBe(false);
+    });
+  });
+
+  test('disabled control renders disabled buttons', () => {
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    const cells = [{ tester: integerCellTester, cell: IntegerCell }];
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, cells }}>
+        <TableArrayControl
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const buttons = wrapper.find('button');
+    expect(buttons).toHaveLength(2);
+    buttons.forEach((button) => {
+      expect(button.prop('disabled')).toBe(true);
+    });
+  });
+});
+
 describe('Table array tester', () => {
   test('tester with recursive document ref only', () => {
     const control: ControlElement = {