box-ui-elements 23.4.0-beta.1 → 23.4.0-beta.3

package/src/features/metadata-instance-fields/FloatMetadataField.js

@@ -11,6 +11,7 @@ type Props = {
     description?: string,
     displayName: string,
     error?: React.Node,
+    isDisabled?: boolean,
     onChange: (key: string, value: MetadataFieldValue) => void,
     onRemove: (key: string) => void,
     type: string,
@@ -22,6 +23,7 @@ const FloatMetadataField = ({
     displayName,
     description,
     error,
+    isDisabled,
     onChange,
     onRemove,
     type,
@@ -32,6 +34,7 @@ const FloatMetadataField = ({
         description={description}
         displayName={displayName}
         error={error}
+        isDisabled={isDisabled}
         onChange={(key: string, value: MetadataFieldValue) => {
             if (isValidValue(type, value)) {
                 onChange(key, value);

package/src/features/metadata-instance-fields/IntegerMetadataField.js

@@ -11,6 +11,7 @@ type Props = {
     description?: string,
     displayName: string,
     error?: React.Node,
+    isDisabled?: boolean,
     onChange: (key: string, value: MetadataFieldValue) => void,
     onRemove: (key: string) => void,
     type: string,
@@ -22,6 +23,7 @@ const IntegerMetadataField = ({
     displayName,
     description,
     error,
+    isDisabled,
     onChange,
     onRemove,
     type,
@@ -32,6 +34,7 @@ const IntegerMetadataField = ({
         description={description}
         displayName={displayName}
         error={error}
+        isDisabled={isDisabled}
         onChange={(key: string, value: MetadataFieldValue) => {
             if (isValidValue(type, value)) {
                 onChange(key, value);

package/src/features/metadata-instance-fields/MetadataField.js

@@ -31,6 +31,7 @@ type Props = {
     description?: string,
     displayName: string,
     error?: React.Node,
+    isDisabled?: boolean,
     isHidden?: boolean,
     onChange?: (key: string, value: MetadataFieldValue) => void,
     onRemove?: (key: string) => void,
@@ -45,6 +46,7 @@ const MetadataField = ({
     displayName,
     description,
     error,
+    isDisabled,
     isHidden,
     canEdit,
     onChange,
@@ -79,6 +81,7 @@ const MetadataField = ({
                     dataValue={dataValue}
                     description={description}
                     displayName={displayName}
+                    isDisabled={isDisabled}
                     onChange={onChange}
                     onRemove={onRemove}
                 />
@@ -92,6 +95,7 @@ const MetadataField = ({
                     description={description}
                     displayName={displayName}
                     error={error}
+                    isDisabled={isDisabled}
                     onChange={onChange}
                     onRemove={onRemove}
                     type={type}
@@ -106,6 +110,7 @@ const MetadataField = ({
                     description={description}
                     displayName={displayName}
                     error={error}
+                    isDisabled={isDisabled}
                     onChange={onChange}
                     onRemove={onRemove}
                     type={type}
@@ -120,6 +125,7 @@ const MetadataField = ({
                     dataValue={dataValue}
                     description={description}
                     displayName={displayName}
+                    isDisabled={isDisabled}
                     onChange={onChange}
                     onRemove={onRemove}
                     options={options}
@@ -134,6 +140,7 @@ const MetadataField = ({
                     dataValue={dataValue}
                     description={description}
                     displayName={displayName}
+                    isDisabled={isDisabled}
                     onChange={onChange}
                     onRemove={onRemove}
                     options={options}
@@ -147,6 +154,7 @@ const MetadataField = ({
                     dataValue={dataValue}
                     description={description}
                     displayName={displayName}
+                    isDisabled={isDisabled}
                     onChange={onChange}
                     onRemove={onRemove}
                 />

package/src/features/metadata-instance-fields/MultiSelectMetadataField.js

@@ -18,6 +18,7 @@ type Props = {
     dataValue?: MetadataFieldValue,
     description?: string,
     displayName: string,
+    isDisabled?: boolean,
     onChange: (key: string, value: MetadataFieldValue) => void,
     onRemove: (key: string) => void,
     options?: Array<MetadataTemplateFieldOption>,
@@ -29,6 +30,7 @@ const MultiSelectMetadataField = ({
     dataValue,
     displayName,
     description,
+    isDisabled,
     onChange,
     onRemove,
     options = [],
@@ -41,6 +43,7 @@ const MultiSelectMetadataField = ({
                 {!!description && <i className="bdl-MultiSelectMetadataField-desc">{description}</i>}
                 <MultiSelect
                     blurExceptionClassNames={blurExceptionClassNames}
+                    isDisabled={isDisabled}
                     isEscapedWithReference
                     isScrollable
                     onChange={(selectedOptions: Array<SelectOptionProp>) => {

package/src/features/metadata-instance-fields/TextMetadataField.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import TextInput from '../../components/text-input';
 
@@ -14,7 +14,7 @@ type Props = {
     description?: string,
     displayName: string,
     error?: React.Node,
-    intl: any,
+    isDisabled?: boolean,
     onChange: (key: string, value: MetadataFieldValue) => void,
     onRemove: (key: string) => void,
     type?: string,
@@ -26,11 +26,13 @@ const TextMetadataField = ({
     displayName,
     description,
     error,
-    intl,
+    isDisabled,
     onChange,
     onRemove,
     type = 'text',
 }: Props) => {
+    const { formatMessage } = useIntl();
+
     let value = '';
 
     if (typeof dataValue === 'number') {
@@ -45,6 +47,7 @@ const TextMetadataField = ({
             description={description}
             error={error}
             hideOptionalLabel
+            disabled={isDisabled}
             label={displayName}
             name={dataKey}
             onChange={(event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -55,12 +58,11 @@ const TextMetadataField = ({
                     onRemove(dataKey);
                 }
             }}
-            placeholder={intl.formatMessage(messages.metadataFieldSetValue)}
+            placeholder={formatMessage(messages.metadataFieldSetValue)}
             type={type}
             value={value}
         />
     );
 };
 
-export { TextMetadataField as TextMetadataFieldBase };
-export default injectIntl(TextMetadataField);
+export default TextMetadataField;

package/src/features/metadata-instance-fields/__tests__/DateMetadataField.test.js

@@ -1,14 +1,65 @@
 import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
 
-import { DateMetadataFieldBase as DateMetadataField } from '../DateMetadataField';
+import DateMetadataField from '../DateMetadataField';
 
-describe('features/metadata-instance-editor/fields/DateMetadataField', () => {
-    const intl = {
-        formatMessage: jest.fn(),
-    };
+describe('DateMetadataField', () => {
+    const getDateFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyDate',
+        displayName: 'Test Date Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        dataValue: '2023-01-15T00:00:00.000Z',
+        canEdit: true,
+        ...props,
+    });
+
+    test('should correctly render a date field with its value', () => {
+        const testDate = '2024-07-26T00:00:00.000Z';
+        render(
+            <DateMetadataField
+                {...getDateFieldBaseProps({
+                    dataValue: testDate,
+                    displayName: 'My Test Date',
+                })}
+            />,
+        );
+
+        const dateInput = screen.getByRole('textbox', { name: 'My Test Date' });
+        expect(dateInput).toBeInTheDocument();
+        expect(dateInput).toHaveValue('July 26, 2024');
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a date field description.';
+        render(
+            <DateMetadataField
+                {...getDateFieldBaseProps({
+                    displayName: 'My Date With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+
+        const dateInput = screen.getByRole('textbox', { name: 'My Date With Desc This is a date field description.' });
+        expect(dateInput).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        render(<DateMetadataField {...getDateFieldBaseProps({ isDisabled: true })} />);
+        expect(screen.getByRole('textbox', { name: 'Test Date Field' })).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        render(<DateMetadataField {...getDateFieldBaseProps({ isDisabled: false })} />);
+        expect(screen.getByRole('textbox', { name: 'Test Date Field' })).not.toBeDisabled();
+    });
 
-    test('should correctly render a date field', () => {
-        const wrapper = shallow(<DateMetadataField dataValue="2018-06-13T00:00:00.000Z" intl={intl} />);
-        expect(wrapper).toMatchSnapshot();
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getDateFieldBaseProps();
+        delete props.isDisabled;
+        render(<DateMetadataField {...props} />);
+        expect(screen.getByRole('textbox', { name: 'Test Date Field' })).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/EnumMetadataField.test.js

@@ -1,31 +1,76 @@
 import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
 
-import { EnumMetadataFieldBase as EnumMetadataField } from '../EnumMetadataField';
+import EnumMetadataField from '../EnumMetadataField';
 
-describe('features/metadata-instance-editor/fields/EnumMetadataField', () => {
-    const intl = {
-        formatMessage: jest.fn(),
-    };
+describe('EnumMetadataField', () => {
+    const defaultOptions = [
+        { key: 'opt1', displayName: 'Option 1' },
+        { key: 'opt2', displayName: 'Option 2' },
+        { key: 'opt3', displayName: 'Option 3' },
+    ];
 
-    test('should correctly render an enum field', () => {
-        const wrapper = shallow(
+    const getEnumFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyEnum',
+        displayName: 'Test Enum Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        options: defaultOptions,
+        dataValue: 'opt1',
+        canEdit: true,
+        ...props,
+    });
+
+    test('should display options and reflect selected value', async () => {
+        render(
             <EnumMetadataField
-                dataValue="value"
-                intl={intl}
-                options={[{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]}
+                {...getEnumFieldBaseProps({
+                    dataValue: 'opt2',
+                    displayName: 'My Test Enum',
+                })}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+
+        const listbox = screen.getByRole('listbox', { name: 'My Test Enum' });
+        await userEvent.click(listbox);
+
+        expect(listbox).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt2', selected: true })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt1' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt3' })).toBeInTheDocument();
     });
-    test('should correctly render an enum field with description', () => {
-        const wrapper = shallow(
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a test description.';
+        render(
             <EnumMetadataField
-                dataValue="value"
-                description="description"
-                intl={intl}
-                options={[{ key: 'foo' }, { key: 'bar' }, { key: 'baz' }]}
+                {...getEnumFieldBaseProps({
+                    displayName: 'My Enum With Desc',
+                    description: descriptionText,
+                })}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+
+        const listbox = screen.getByRole('listbox', { name: 'My Enum With Desc This is a test description.' });
+        expect(listbox).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        render(<EnumMetadataField {...getEnumFieldBaseProps({ isDisabled: true })} />);
+        expect(screen.getByRole('listbox', { name: 'Test Enum Field' })).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        render(<EnumMetadataField {...getEnumFieldBaseProps({ isDisabled: false })} />);
+        expect(screen.getByRole('listbox', { name: 'Test Enum Field' })).not.toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getEnumFieldBaseProps();
+        delete props.isDisabled;
+        render(<EnumMetadataField {...props} />);
+        expect(screen.getByRole('listbox', { name: 'Test Enum Field' })).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/FloatMetadataField.test.js

@@ -1,10 +1,74 @@
 import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import FloatMetadataField from '../FloatMetadataField';
 
-describe('features/metadata-instance-editor/fields/FloatMetadataField', () => {
-    test('should correctly render a float field', () => {
-        const wrapper = shallow(<FloatMetadataField dataValue="value" />);
-        expect(wrapper).toMatchSnapshot();
+describe('FloatMetadataField', () => {
+    const getFloatFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyFloat',
+        displayName: 'Test Float Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        type: 'float',
+        dataValue: 123.45,
+        canEdit: true,
+        ...props,
+    });
+
+    test('should correctly render a float field with its value', () => {
+        render(
+            <FloatMetadataField
+                {...getFloatFieldBaseProps({
+                    dataValue: 987.65,
+                    displayName: 'My Test Float',
+                })}
+            />,
+        );
+        const floatInput = screen.getByRole('textbox', { name: 'My Test Float' });
+        expect(floatInput).toBeInTheDocument();
+        expect(floatInput).toHaveValue('987.65');
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a float field description.';
+        render(
+            <FloatMetadataField
+                {...getFloatFieldBaseProps({
+                    displayName: 'My Float With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const floatInput = screen.getByRole('textbox', {
+            name: 'My Float With Desc This is a float field description.',
+        });
+        expect(floatInput).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'A description for the float field.';
+        render(<FloatMetadataField {...getFloatFieldBaseProps({ isDisabled: true, description: descriptionText })} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Float Field A description for the float field.' }),
+        ).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'A description for the float field.';
+        render(<FloatMetadataField {...getFloatFieldBaseProps({ isDisabled: false, description: descriptionText })} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Float Field A description for the float field.' }),
+        ).not.toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getFloatFieldBaseProps();
+        props.description = 'A description for the float field.';
+        delete props.isDisabled;
+        render(<FloatMetadataField {...props} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Test Float Field A description for the float field.' }),
+        ).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/IntegerMetadataField.test.js

@@ -1,10 +1,96 @@
 import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import IntegerMetadataField from '../IntegerMetadataField';
 
-describe('features/metadata-instance-editor/fields/IntegerMetadataField', () => {
-    test('should correctly render an integer field', () => {
-        const wrapper = shallow(<IntegerMetadataField dataValue="value" />);
-        expect(wrapper).toMatchSnapshot();
+describe('IntegerMetadataField', () => {
+    const getIntegerFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyInteger',
+        displayName: 'Test Integer Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        type: 'integer',
+        dataValue: 123,
+        canEdit: true,
+        ...props,
+    });
+
+    test('should correctly render an integer field with its value', () => {
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    dataValue: 456,
+                    displayName: 'My Test Integer',
+                })}
+            />,
+        );
+        const integerInput = screen.getByRole('textbox', { name: 'My Test Integer' });
+        expect(integerInput).toBeInTheDocument();
+        expect(integerInput).toHaveValue('456');
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is an integer field description.';
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    displayName: 'My Integer With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const integerInput = screen.getByRole('textbox', {
+            name: 'My Integer With Desc This is an integer field description.',
+        });
+        expect(integerInput).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'An integer field description for disabled test.';
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    isDisabled: true,
+                    description: descriptionText,
+                    displayName: 'Disabled Integer Field',
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('textbox', {
+                name: 'Disabled Integer Field An integer field description for disabled test.',
+            }),
+        ).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'An integer field description for enabled test.';
+        render(
+            <IntegerMetadataField
+                {...getIntegerFieldBaseProps({
+                    isDisabled: false,
+                    description: descriptionText,
+                    displayName: 'Enabled Integer Field',
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('textbox', {
+                name: 'Enabled Integer Field An integer field description for enabled test.',
+            }),
+        ).not.toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getIntegerFieldBaseProps({
+            description: 'An integer field for default enabled test.',
+            displayName: 'Default Enabled Integer',
+        });
+        delete props.isDisabled;
+        render(<IntegerMetadataField {...props} />);
+        expect(
+            screen.getByRole('textbox', { name: 'Default Enabled Integer An integer field for default enabled test.' }),
+        ).not.toBeDisabled();
     });
 });

package/src/features/metadata-instance-fields/__tests__/MultiSelectMetadataField.test.js

@@ -1,15 +1,103 @@
 import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import MultiSelectMetadataField from '../MultiSelectMetadataField';
 
-describe('features/metadata-instance-editor/fields/MultiSelectMetadataField', () => {
-    test('should correctly render', () => {
-        const wrapper = shallow(<MultiSelectMetadataField dataValue={['value']} />);
-        expect(wrapper).toMatchSnapshot();
+describe('MultiSelectMetadataField', () => {
+    const defaultOptions = [
+        { key: 'opt1', displayName: 'Option 1' },
+        { key: 'opt2', displayName: 'Option 2' },
+        { key: 'opt3', displayName: 'Option 3' },
+        { key: 'opt4', displayName: 'Option 4' },
+    ];
+
+    const getMultiSelectFieldBaseProps = (props = {}) => ({
+        dataKey: 'testKeyMultiSelect',
+        displayName: 'Test MultiSelect Field',
+        onChange: jest.fn(),
+        onRemove: jest.fn(),
+        options: defaultOptions,
+        dataValue: ['opt1', 'opt3'],
+        canEdit: true,
+        ...props,
+    });
+
+    test('should display options and reflect selected values', async () => {
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    dataValue: ['opt2', 'opt4'],
+                    displayName: 'My Test MultiSelect',
+                })}
+            />,
+        );
+
+        const listbox = screen.getByRole('listbox', { name: 'My Test MultiSelect' });
+        expect(listbox).toBeInTheDocument();
+        await userEvent.click(listbox);
+
+        expect(screen.getByRole('option', { name: 'opt2', selected: true })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt4', selected: true })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt1', selected: false })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'opt3', selected: false })).toBeInTheDocument();
+    });
+
+    test('should display description when provided', () => {
+        const descriptionText = 'This is a multi-select field description.';
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    displayName: 'My MultiSelect With Desc',
+                    description: descriptionText,
+                })}
+            />,
+        );
+        const listbox = screen.getByRole('listbox', {
+            name: 'My MultiSelect With Desc This is a multi-select field description.',
+        });
+        expect(listbox).toBeInTheDocument();
+        expect(screen.getByText(descriptionText)).toBeInTheDocument();
+    });
+
+    test('should render as disabled when isDisabled is true', () => {
+        const descriptionText = 'A description for the multi-select field.';
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    isDisabled: true,
+                    description: descriptionText,
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('listbox', { name: 'Test MultiSelect Field A description for the multi-select field.' }),
+        ).toBeDisabled();
+    });
+
+    test('should render as enabled when isDisabled is false', () => {
+        const descriptionText = 'A description for the multi-select field.';
+        render(
+            <MultiSelectMetadataField
+                {...getMultiSelectFieldBaseProps({
+                    isDisabled: false,
+                    description: descriptionText,
+                })}
+            />,
+        );
+        expect(
+            screen.getByRole('listbox', { name: 'Test MultiSelect Field A description for the multi-select field.' }),
+        ).not.toBeDisabled();
     });
 
-    test('should correctly render with description', () => {
-        const wrapper = shallow(<MultiSelectMetadataField dataValue={['value']} description="description" />);
-        expect(wrapper).toMatchSnapshot();
+    test('should render as enabled when isDisabled is not provided', () => {
+        const props = getMultiSelectFieldBaseProps({
+            description: 'A description for the multi-select field.',
+        });
+        delete props.isDisabled;
+        render(<MultiSelectMetadataField {...props} />);
+        expect(
+            screen.getByRole('listbox', { name: 'Test MultiSelect Field A description for the multi-select field.' }),
+        ).not.toBeDisabled();
     });
 });