react-material: Add Form Label and description to enum array renderer (#2297)

- Add form labels and description to MaterialEnumArrayRenderer
- Improve ids to be unique for checkboxes and their labels
- Add example for enum array with label and description
- Remove various obsolete  `as` typecasts for FormLabel components

Author: Maxouwell

packages/examples/src/examples/enum-multi-with-label-and-desc.ts

@@ -0,0 +1,86 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2020 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    oneOfMultiEnum: {
+      type: 'array',
+      uniqueItems: true,
+      description: 'Description',
+      items: {
+        oneOf: [
+          { const: 'foo', title: 'My Foo' },
+          { const: 'bar', title: 'My Bar' },
+          { const: 'foobar', title: 'My FooBar' },
+        ],
+      },
+    },
+    multiEnum: {
+      type: 'array',
+      uniqueItems: true,
+      description: 'Description',
+      items: {
+        type: 'string',
+        enum: ['foo', 'bar', 'foobar'],
+      },
+    },
+  },
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/oneOfMultiEnum',
+      label: 'Form Label',
+      options: {
+        showUnfocusedDescription: true,
+      },
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/multiEnum',
+      label: 'Form Label',
+      options: {
+        showUnfocusedDescription: true,
+      },
+    },
+  ],
+};
+
+export const data = { oneOfMultiEnum: ['foo'], multiEnum: ['bar'] };
+
+registerExamples([
+  {
+    name: 'multi-enum-with-label-and-desc',
+    label: 'Enum - Multi selection with label and desc',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/index.ts

@@ -71,6 +71,7 @@ import * as readonly from './examples/readonly';
 import * as listWithDetailPrimitives from './examples/list-with-detail-primitives';
 import * as conditionalSchemaComposition from './examples/conditional-schema-compositions';
 import * as additionalErrors from './examples/additional-errors';
+import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
 export * from './register';
 export * from './example';
 
@@ -120,6 +121,7 @@ export {
   enumExample,
   radioGroupExample,
   multiEnum,
+  multiEnumWithLabelAndDesc,
   enumInArray,
   readonly,
   listWithDetailPrimitives,

packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx

@@ -3,6 +3,7 @@ import {
   ControlProps,
   DispatchPropsOfMultiEnumControl,
   hasType,
+  isDescriptionHidden,
   JsonSchema,
   OwnPropsOfEnum,
   Paths,
@@ -11,6 +12,7 @@ import {
   resolveSchema,
   schemaMatches,
   schemaSubPathMatches,
+  showAsRequired,
   uiTypeIs,
 } from '@jsonforms/core';
 
@@ -21,15 +23,23 @@ import {
   FormControlLabel,
   FormGroup,
   FormHelperText,
+  FormLabel,
   Hidden,
 } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
+import merge from 'lodash/merge';
+import { useFocus } from '../util';
 
 export const MaterialEnumArrayRenderer = ({
+  config,
+  id,
   schema,
   visible,
   errors,
+  description,
+  label,
+  required,
   path,
   options,
   data,
@@ -38,9 +48,34 @@ export const MaterialEnumArrayRenderer = ({
   handleChange: _handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
+  const [focused, onFocus, onBlur] = useFocus();
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, otherProps.uischema.options);
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
   return (
     <Hidden xsUp={!visible}>
-      <FormControl component='fieldset'>
+      <FormControl
+        component='fieldset'
+        fullWidth={!appliedUiSchemaOptions.trim}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
+        <FormLabel
+          error={!isValid}
+          component='legend'
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
+        >
+          {label}
+        </FormLabel>
         <FormGroup row>
           {options.map((option: any, index: number) => {
             const optionPath = Paths.compose(path, `${index}`);
@@ -49,10 +84,11 @@ export const MaterialEnumArrayRenderer = ({
               : undefined;
             return (
               <FormControlLabel
-                id={option.value}
+                id={id + '-label-' + option.value}
                 key={option.value}
                 control={
                   <MuiCheckbox
+                    id={id + '-' + option.value}
                     key={'checkbox-' + option.value}
                     isValid={isEmpty(errors)}
                     path={optionPath}
@@ -73,7 +109,9 @@ export const MaterialEnumArrayRenderer = ({
             );
           })}
         </FormGroup>
-        <FormHelperText error>{errors}</FormHelperText>
+        <FormHelperText error={!isValid}>
+          {!isValid ? errors : showDescription ? description : null}
+        </FormHelperText>
       </FormControl>
     </Hidden>
   );

packages/material-renderers/src/controls/MaterialRadioGroup.tsx

@@ -45,7 +45,6 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
   const [focused, onFocus, onBlur] = useFocus();
   const {
     config,
-    id,
     label,
     required,
     description,
@@ -69,15 +68,14 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
   return (
     <Hidden xsUp={!visible}>
       <FormControl
-        component={'fieldset' as 'div'}
+        component='fieldset'
         fullWidth={!appliedUiSchemaOptions.trim}
         onFocus={onFocus}
         onBlur={onBlur}
       >
         <FormLabel
-          htmlFor={id}
           error={!isValid}
-          component={'legend' as 'label'}
+          component='legend'
           required={showAsRequired(
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk

packages/material-renderers/src/controls/MaterialSliderControl.tsx

@@ -101,7 +101,7 @@ export const MaterialSliderControl = (props: ControlProps) => {
         <FormLabel
           htmlFor={id}
           error={!isValid}
-          component={'legend' as 'label'}
+          component='legend'
           required={showAsRequired(
             required,
             appliedUiSchemaOptions.hideRequiredAsterisk

packages/material-renderers/test/renderers/MaterialEnumArrayRenderer.test.tsx

@@ -8,6 +8,7 @@ import {
   materialEnumArrayRendererTester,
   MaterialEnumArrayRenderer,
 } from '../../src';
+import { FormHelperText, FormLabel } from '@mui/material';
 
 const MaterialEnumArrayRendererRegistration = {
   tester: materialEnumArrayRendererTester,
@@ -41,6 +42,10 @@ const enumSchema = {
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#',
+  label: 'Label',
+  options: {
+    showUnfocusedDescription: true,
+  },
 };
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -212,4 +217,58 @@ describe('EnumArrayControl', () => {
       done();
     }, 50);
   });
+
+  test('oneOf items - renders label for the form group', () => {
+    wrapper = mount(
+      <JsonForms
+        schema={oneOfSchema}
+        uischema={uischema}
+        data={data}
+        renderers={[MaterialEnumArrayRendererRegistration]}
+      />
+    );
+    expect(wrapper.find(FormLabel).text()).toBe('Label');
+  });
+
+  test('enum items - renders label for the form group', () => {
+    wrapper = mount(
+      <JsonForms
+        schema={enumSchema}
+        uischema={uischema}
+        data={data}
+        renderers={[MaterialEnumArrayRendererRegistration]}
+      />
+    );
+    expect(wrapper.find(FormLabel).text()).toBe('Label');
+  });
+
+  test('oneOf items - renders description for the form group', () => {
+    wrapper = mount(
+      <JsonForms
+        schema={{
+          ...oneOfSchema,
+          description: 'Description',
+        }}
+        uischema={uischema}
+        data={data}
+        renderers={[MaterialEnumArrayRendererRegistration]}
+      />
+    );
+    expect(wrapper.find(FormHelperText).text()).toBe('Description');
+  });
+
+  test('enum items - renders description for the form group', () => {
+    wrapper = mount(
+      <JsonForms
+        schema={{
+          ...enumSchema,
+          description: 'Description',
+        }}
+        uischema={uischema}
+        data={data}
+        renderers={[MaterialEnumArrayRendererRegistration]}
+      />
+    );
+    expect(wrapper.find(FormHelperText).text()).toBe('Description');
+  });
 });