From c65ef83592d809d2261665ecc4225351b48918da Mon Sep 17 00:00:00 2001 From: Sascha Steffen Date: Tue, 12 Dec 2023 16:05:32 +0100 Subject: [PATCH 1/7] extend example schemas --- packages/examples/src/examples/arrays-with-detail.ts | 1 + packages/examples/src/examples/stringArray.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/examples/src/examples/arrays-with-detail.ts b/packages/examples/src/examples/arrays-with-detail.ts index a21c408531..9c78624cbb 100644 --- a/packages/examples/src/examples/arrays-with-detail.ts +++ b/packages/examples/src/examples/arrays-with-detail.ts @@ -32,6 +32,7 @@ export const schema = { occupation: { type: 'string' }, comments: { type: 'array', + description: 'Description for array with details', minItems: 2, maxItems: 8, items: { diff --git a/packages/examples/src/examples/stringArray.ts b/packages/examples/src/examples/stringArray.ts index cfd0986257..940a46b9ad 100644 --- a/packages/examples/src/examples/stringArray.ts +++ b/packages/examples/src/examples/stringArray.ts @@ -28,6 +28,7 @@ export const schema = { type: 'object', properties: { comments: { + description: 'Description for array of String Type', type: 'array', items: { type: 'string', From b40f366c161775ec7b6f362857440446091a2829 Mon Sep 17 00:00:00 2001 From: Sascha Steffen Date: Tue, 12 Dec 2023 17:43:21 +0100 Subject: [PATCH 2/7] #2122 add description to MaterialListWithDetailRenderer --- .../MaterialListWithDetailRenderer.tsx | 2 + .../src/layouts/ArrayToolbar.tsx | 95 +++++++++++-------- .../src/layouts/MaterialArrayLayout.tsx | 2 + 3 files changed, 58 insertions(+), 41 deletions(-) diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx index 9b1f3a2624..f04f425958 100644 --- a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx +++ b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx @@ -64,6 +64,7 @@ export const MaterialListWithDetailRenderer = ({ config, rootSchema, translations, + description, }: ArrayLayoutProps) => { const [selectedIndex, setSelectedIndex] = useState(undefined); const handleRemoveItem = useCallback( @@ -113,6 +114,7 @@ export const MaterialListWithDetailRenderer = ({ required, appliedUiSchemaOptions.hideRequiredAsterisk )} + description={description} errors={errors} path={path} enabled={enabled} diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx index 99ab8f0857..f7443beb23 100644 --- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx +++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx @@ -1,10 +1,19 @@ -import { Grid, IconButton, Toolbar, Tooltip, Typography } from '@mui/material'; -import { Add as AddIcon } from '@mui/icons-material'; +import { + FormHelperText, + Grid, + IconButton, + Stack, + Toolbar, + Tooltip, + Typography, +} from '@mui/material'; +import AddIcon from '@mui/icons-material/Add'; import React from 'react'; import ValidationIcon from '../complex/ValidationIcon'; import { ArrayTranslations } from '@jsonforms/core'; export interface ArrayLayoutToolbarProps { label: string; + description: string; errors: string; path: string; enabled: boolean; @@ -14,6 +23,7 @@ export interface ArrayLayoutToolbarProps { } export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, + description, errors, addItem, path, @@ -23,51 +33,54 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ }: ArrayLayoutToolbarProps) { return ( - - - - - {label} + + + + + + {label} + + + {errors.length !== 0 && ( + + + + )} + + + {enabled && ( - {errors.length !== 0 && ( + - - - )} - - - - {enabled && ( - - - - - - - - + + + + + - - )} - + )} + + {description} + ); }); diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx index 40b7cbef2e..50ba23ed77 100644 --- a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx +++ b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx @@ -66,6 +66,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => { config, uischemas, translations, + description, } = props; const appliedUiSchemaOptions = merge({}, config, props.uischema.options); @@ -78,6 +79,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => { required, appliedUiSchemaOptions.hideRequiredAsterisk )} + description={description} errors={errors} path={path} enabled={enabled} From 14bc4a1aeb7eba4b9b9f825bf10011f13fad02b7 Mon Sep 17 00:00:00 2001 From: Sascha Steffen Date: Tue, 12 Dec 2023 17:52:37 +0100 Subject: [PATCH 3/7] #2122 add description to MaterialTableControl --- .../src/complex/MaterialTableControl.tsx | 2 + .../src/complex/TableToolbar.tsx | 53 ++++++++++++------- .../src/layouts/ArrayToolbar.tsx | 2 +- 3 files changed, 36 insertions(+), 21 deletions(-) diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx index d8f8dca5a3..a85b4182f3 100644 --- a/packages/material-renderers/src/complex/MaterialTableControl.tsx +++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx @@ -433,6 +433,7 @@ export class MaterialTableControl extends React.Component< render() { const { label, + description, path, schema, rootSchema, @@ -458,6 +459,7 @@ export class MaterialTableControl extends React.Component< - - - {label} - - - {errors.length !== 0 && ( - - - - )} + + + + {label} + + + {errors.length !== 0 && ( + + + + )} + - + {description ?? {description}} + {enabled ? ( diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx index f7443beb23..aed28a1c7b 100644 --- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx +++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx @@ -79,7 +79,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ )} - {description} + {description ?? {description}} ); From 457808fbbfaff2a6c22eda37bf09d73b0731f87e Mon Sep 17 00:00:00 2001 From: Sascha Steffen Date: Tue, 9 Jan 2024 09:21:24 +0100 Subject: [PATCH 4/7] #2122 added tests --- .../renderers/MaterialArrayControl.test.tsx | 22 ++++++++++++++++++ .../MaterialListWithDetailRenderer.test.tsx | 23 +++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx index 5584b14944..74a849fc7b 100644 --- a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx @@ -283,6 +283,28 @@ describe('Material array control', () => { expect(rows).toHaveLength(3); }); + it('should render description', () => { + const descriptionSchema = { + ...fixture.schema, + description: 'This is an array description', + }; + + const core = initCore(descriptionSchema, fixture.uischema, fixture.data); + wrapper = mount( + + + + ); + expect( + wrapper.text().includes('This is an array description') + ).toBeTruthy(); + }); + it('should delete an item', () => { const core = initCore(fixture.schema, fixture.uischema, fixture.data); const onChangeData: any = { diff --git a/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx index f11dc75de7..3d2eb8beec 100644 --- a/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx @@ -258,6 +258,29 @@ describe('Material list with detail renderer', () => { expect(label.text()).toBe('Schema Title'); }); + it('should render description', () => { + const descriptionSchema = { + ...schema, + description: 'This is an array description', + }; + + const core = initCore(schema, uischema, data); + wrapper = mount( + + + + ); + + expect( + wrapper.text().includes('This is an array description') + ).toBeTruthy(); + }); + it('add data to the array', () => { const core = initCore(schema, uischema, data); wrapper = mount( From 244415e205b50af1fb0c4c6dd7157275ac6761f0 Mon Sep 17 00:00:00 2001 From: Sascha Steffen <93011641+SaSteffen@users.noreply.github.com> Date: Tue, 9 Jan 2024 11:56:18 +0100 Subject: [PATCH 5/7] Update packages/material-renderers/src/layouts/ArrayToolbar.tsx Co-authored-by: Stefan Dirix --- packages/material-renderers/src/layouts/ArrayToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx index aed28a1c7b..1f68dec324 100644 --- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx +++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx @@ -79,7 +79,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ )} - {description ?? {description}} + {description && {description}} ); From cbd5cd690d7c23ea848804bebe0318c37c50e439 Mon Sep 17 00:00:00 2001 From: Sascha Steffen <93011641+SaSteffen@users.noreply.github.com> Date: Tue, 9 Jan 2024 11:56:24 +0100 Subject: [PATCH 6/7] Update packages/material-renderers/src/complex/TableToolbar.tsx Co-authored-by: Stefan Dirix --- packages/material-renderers/src/complex/TableToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx index edbd30d292..7e6b941331 100644 --- a/packages/material-renderers/src/complex/TableToolbar.tsx +++ b/packages/material-renderers/src/complex/TableToolbar.tsx @@ -97,7 +97,7 @@ const TableToolbar = React.memo(function TableToolbar({ )} - {description ?? {description}} + {description && {description}} {enabled ? ( From 9c0780d002539a0d00c0e1cd8f3971e0ec0631ad Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Tue, 9 Jan 2024 17:36:25 +0100 Subject: [PATCH 7/7] add more tests --- .../renderers/MaterialArrayControl.test.tsx | 22 +++++++++ .../renderers/MaterialArrayLayout.test.tsx | 48 +++++++++++++++++-- .../MaterialListWithDetailRenderer.test.tsx | 33 +++++++++++-- 3 files changed, 97 insertions(+), 6 deletions(-) diff --git a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx index 74a849fc7b..56bb4b99ef 100644 --- a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx @@ -303,6 +303,28 @@ describe('Material array control', () => { expect( wrapper.text().includes('This is an array description') ).toBeTruthy(); + expect(wrapper.find('thead .MuiFormHelperText-root').exists()).toBeTruthy(); + }); + + it('should not render description container if there is none', () => { + const descriptionSchema = { + ...fixture.schema, + }; + // make sure there is no description + delete descriptionSchema.description; + + const core = initCore(descriptionSchema, fixture.uischema, fixture.data); + wrapper = mount( + + + + ); + expect(wrapper.find('thead .MuiFormHelperText-root').exists()).toBeFalsy(); }); it('should delete an item', () => { diff --git a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx index 65723c5304..015a039eb0 100644 --- a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx @@ -23,7 +23,7 @@ THE SOFTWARE. */ import './MatchMediaMock'; -import { ControlElement } from '@jsonforms/core'; +import { ControlElement, JsonSchema7 } from '@jsonforms/core'; import * as React from 'react'; import { materialRenderers } from '../../src'; @@ -50,7 +50,7 @@ const data = [ message2: 'Yolo 2', }, ]; -const schema = { +const schema: JsonSchema7 = { type: 'array', items: { type: 'object', @@ -66,7 +66,7 @@ const schema = { }, }; -const nestedSchema = { +const nestedSchema: JsonSchema7 = { type: 'array', items: { ...schema, @@ -568,4 +568,46 @@ describe('Material array layout', () => { expect(getChildLabel(wrapper, 0)).toBe('El Barto was here 2'); expect(getChildLabel(wrapper, 1)).toBe('Yolo 2'); }); + + it('should render description', () => { + const descriptionSchema = { + ...nestedSchema, + description: 'This is an array description', + }; + + wrapper = mount( + + ); + expect( + wrapper.text().includes('This is an array description') + ).toBeTruthy(); + expect( + wrapper.find('.MuiToolbar-root .MuiFormHelperText-root').exists() + ).toBeTruthy(); + }); + + it('should not render description container if there is none', () => { + const descriptionSchema = { + ...nestedSchema, + }; + // make sure there is no description + delete descriptionSchema.description; + + wrapper = mount( + + ); + expect( + wrapper.find('.MuiToolbar-root .MuiFormHelperText-root').exists() + ).toBeFalsy(); + }); }); diff --git a/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx index 3d2eb8beec..f55dad99dc 100644 --- a/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx +++ b/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx @@ -23,7 +23,7 @@ THE SOFTWARE. */ import './MatchMediaMock'; -import { ControlElement } from '@jsonforms/core'; +import { ControlElement, JsonSchema7 } from '@jsonforms/core'; import * as React from 'react'; import { materialRenderers } from '../../src'; @@ -47,7 +47,7 @@ const data = [ message: 'Yolo', }, ]; -const schema = { +const schema: JsonSchema7 = { type: 'array', items: { type: 'object', @@ -69,7 +69,7 @@ const uischema: ControlElement = { scope: '#', }; -const nestedSchema = { +const nestedSchema: JsonSchema7 = { type: 'array', items: { ...schema, @@ -279,6 +279,33 @@ describe('Material list with detail renderer', () => { expect( wrapper.text().includes('This is an array description') ).toBeTruthy(); + expect( + wrapper.find('.MuiToolbar-root .MuiFormHelperText-root').exists() + ).toBeTruthy(); + }); + + it('should not render description container if there is none', () => { + const descriptionSchema = { + ...schema, + }; + // make sure there is no description + delete descriptionSchema.description; + + const core = initCore(schema, uischema, data); + wrapper = mount( + + + + ); + + expect( + wrapper.find('.MuiToolbar-root .MuiFormHelperText-root').exists() + ).toBeFalsy(); }); it('add data to the array', () => {