Skip to content

Commit c8806e1

Browse files
myarmolinskymyarmolinsky
committed
Address RJSF breaking changes
Change-type: patch
1 parent 8d45265 commit c8806e1

File tree

5 files changed

+100
-88
lines changed

5 files changed

+100
-88
lines changed

‎src/components/Form/FieldTemplates/ObjectFieldTemplate.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ export const ObjectFieldTemplate = <
2828
disabled,
2929
readonly,
3030
uiSchema,
31-
idSchema,
31+
fieldPathId,
3232
schema,
3333
formData,
34-
onAddClick,
34+
onAddProperty,
3535
registry,
3636
} = props;
3737
const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -54,7 +54,7 @@ export const ObjectFieldTemplate = <
5454
<>
5555
{title && (
5656
<TitleFieldTemplate
57-
id={titleId<T>(idSchema)}
57+
id={titleId(fieldPathId)}
5858
title={title}
5959
required={required}
6060
schema={schema}
@@ -64,7 +64,7 @@ export const ObjectFieldTemplate = <
6464
)}
6565
{description && (
6666
<DescriptionFieldTemplate
67-
id={descriptionId<T>(idSchema)}
67+
id={descriptionId(fieldPathId)}
6868
description={description}
6969
schema={schema}
7070
uiSchema={uiSchema}
@@ -100,7 +100,7 @@ export const ObjectFieldTemplate = <
100100
<Grid>
101101
<AddButton
102102
className="object-property-expand"
103-
onClick={onAddClick(schema)}
103+
onClick={onAddProperty}
104104
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- If `disabled` is false, we still want to disable the button if `readonly` is true
105105
disabled={disabled || readonly}
106106
uiSchema={uiSchema}

‎src/components/Form/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const internalWidgets: {
2929

3030
const FormWrapper = styled('div')({
3131
// Target the Paper component within the array container
32-
'& .field-array .MuiPaper-root.MuiPaper-elevation': {
32+
'& .rjsf-field-array .MuiPaper-root.MuiPaper-elevation': {
3333
boxShadow: 'none',
3434
},
3535
});

‎src/components/RJST/components/Filters/FilterDescription.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const transformToReadableValue = (
2323
const schemaEnum: JSONSchema['enum'] = findInObject(schema, 'enum');
2424
const schemaEnumNames: string[] | undefined = findInObject(
2525
schema,
26-
'enumNames',
26+
'ui:enumNames',
2727
);
2828
if (schemaEnum && schemaEnumNames) {
2929
const index = schemaEnum.findIndex((a) => isEqual(a, value));

‎src/components/RJST/components/Filters/FiltersDialog.tsx‎

Lines changed: 83 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1515
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
1616
import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
1717
import validator from '@rjsf/validator-ajv8';
18-
import type { ArrayFieldTemplateProps, UiSchema } from '@rjsf/utils';
18+
import type {
19+
ArrayFieldTemplateProps,
20+
ArrayFieldItemTemplateProps,
21+
UiSchema,
22+
} from '@rjsf/utils';
1923
import {
2024
Box,
2125
Button,
@@ -30,81 +34,89 @@ import type { IChangeEvent } from '@rjsf/core';
3034
import { DialogWithCloseButton } from '../../../DialogWithCloseButton';
3135
import { RJSForm } from '../../../Form';
3236

33-
const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps> = ({
37+
const ArrayFieldTemplate = ({
3438
items,
3539
canAdd,
3640
onAddClick,
37-
}) => {
41+
}: ArrayFieldTemplateProps) => {
3842
const { t } = useTranslation();
3943
return (
40-
<>
41-
{items?.map((element, index) => {
42-
return (
43-
<Box key={element.key}>
44-
{index > 0 && (
45-
<Typography
46-
sx={{
47-
width: 'calc(100% - 50px)',
48-
textAlign: 'center',
49-
fontWeight: 'bold',
50-
}}
51-
>
52-
{t('commons.or').toUpperCase()}
53-
</Typography>
54-
)}
55-
<Box
56-
sx={{
57-
display: 'flex',
58-
'& .form-group.field.field-object': {
59-
display: 'flex',
60-
flex: 1,
61-
},
62-
'& label': {
63-
display: 'none',
64-
},
65-
// This is necessary to remove the gap of Tags label. RJSF render nested objects with multi label levels.
66-
'.MuiGrid-root > .form-group.field.field-object > .MuiFormControl-root > .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2':
67-
{
68-
marginTop: '-8px!important',
69-
},
70-
}}
44+
<Box className="array">
45+
{items}
46+
{canAdd && (
47+
<Box className="rjsf-array-item-add">
48+
<Button
49+
aria-label={t('aria_labels.add_filter_in_or')}
50+
variant="text"
51+
color="primary"
52+
onClick={onAddClick}
53+
startIcon={<FontAwesomeIcon icon={faPlus} />}
54+
>
55+
{t('actions.add_alternative')}
56+
</Button>
57+
</Box>
58+
)}
59+
</Box>
60+
);
61+
};
62+
63+
const ArrayFieldItemTemplate = ({
64+
children,
65+
buttonsProps,
66+
itemKey,
67+
index,
68+
}: ArrayFieldItemTemplateProps) => {
69+
const { t } = useTranslation();
70+
return (
71+
<Box key={itemKey} className="rjsf-array-item">
72+
{index > 0 && (
73+
<Typography
74+
sx={{
75+
width: 'calc(100% - 50px)',
76+
textAlign: 'center',
77+
fontWeight: 'bold',
78+
}}
79+
>
80+
{t('commons.or').toUpperCase()}
81+
</Typography>
82+
)}
83+
<Box
84+
sx={{
85+
display: 'flex',
86+
'& .rjsf-field.rjsf-field-object': {
87+
display: 'flex',
88+
flex: 1,
89+
},
90+
'& label': {
91+
display: 'none',
92+
},
93+
// This is necessary to remove the gap of Tags label. RJSF render nested objects with multi label levels.
94+
'.MuiGrid-root > .rjsf-field.rjsf-field-object > .MuiFormControl-root > .MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2':
95+
{
96+
marginTop: '-8px!important',
97+
},
98+
}}
99+
>
100+
{children}
101+
<Box
102+
display="flex"
103+
width="50px"
104+
alignItems="center"
105+
justifyContent="center"
106+
>
107+
{index !== 0 && (
108+
<IconButton
109+
aria-label={t('actions.remove_filter')}
110+
onClick={buttonsProps.onRemoveItem}
111+
sx={{ mt: 2 }}
112+
className="rjsf-array-item-remove"
71113
>
72-
{element.children}
73-
<Box
74-
display="flex"
75-
width="50px"
76-
alignItems="center"
77-
justifyContent="center"
78-
>
79-
{index !== 0 && (
80-
<IconButton
81-
aria-label={t('actions.remove_filter')}
82-
// @ts-expect-error The typing of the current version of @rjsf/utils does not show that `onDropIndexClick` exists, even though it does
83-
onClick={element.onDropIndexClick(element.index)}
84-
sx={{ mt: 2 }}
85-
>
86-
<FontAwesomeIcon icon={faTimes} />
87-
</IconButton>
88-
)}
89-
</Box>
90-
</Box>
91-
<Box display="flex" my={2}>
92-
{canAdd && index === items.length - 1 && (
93-
<Button
94-
aria-label={t('aria_labels.add_filter_in_or')}
95-
variant="text"
96-
color="primary"
97-
onClick={onAddClick}
98-
startIcon={<FontAwesomeIcon icon={faPlus} />}
99-
>
100-
{t('actions.add_alternative')}
101-
</Button>
102-
)}
103-
</Box>
104-
</Box>
105-
);
106-
})}
107-
</>
114+
<FontAwesomeIcon icon={faTimes} />
115+
</IconButton>
116+
)}
117+
</Box>
118+
</Box>
119+
</Box>
108120
);
109121
};
110122

@@ -286,6 +298,7 @@ export const FiltersDialog = ({
286298

287299
const uiSchema = {
288300
'ui:ArrayFieldTemplate': ArrayFieldTemplate,
301+
'ui:ArrayFieldItemTemplate': ArrayFieldItemTemplate,
289302
items: {
290303
'ui:grid': {
291304
field: { size: { xs: 4, sm: 4 } },

‎src/theme.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import type {
66
} from '@mui/material';
77
import { createTheme, tableCellClasses } from '@mui/material';
88
import type {} from '@mui/x-data-grid/themeAugmentation';
9-
import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
109
import { color, typography, shape, spacing } from '@balena/design-tokens';
1110
import type {
1211
ColorTokens,
@@ -78,16 +77,16 @@ declare module '@mui/material/styles' {
7877
}
7978

8079
interface TypographyVariantsOptions {
81-
bodyLg: TypographyStyleOptions | undefined;
82-
body: TypographyStyleOptions | undefined;
83-
bodySm: TypographyStyleOptions | undefined;
84-
titleLg: TypographyStyleOptions | undefined;
85-
title: TypographyStyleOptions | undefined;
86-
titleSm: TypographyStyleOptions | undefined;
87-
display: TypographyStyleOptions | undefined;
88-
codeLg: TypographyStyleOptions | undefined;
89-
code: TypographyStyleOptions | undefined;
90-
codeSm: TypographyStyleOptions | undefined;
80+
bodyLg: TypographyStyle | undefined;
81+
body: TypographyStyle | undefined;
82+
bodySm: TypographyStyle | undefined;
83+
titleLg: TypographyStyle | undefined;
84+
title: TypographyStyle | undefined;
85+
titleSm: TypographyStyle | undefined;
86+
display: TypographyStyle | undefined;
87+
codeLg: TypographyStyle | undefined;
88+
code: TypographyStyle | undefined;
89+
codeSm: TypographyStyle | undefined;
9190
}
9291

9392
interface TypeText {

0 commit comments

Comments
 (0)