box-ui-elements 23.3.1-beta.1 → 23.4.0-beta.2

package/src/features/metadata-instance-editor/TemplatedInstance.js

@@ -13,12 +13,21 @@ type Props = {
     canEdit: boolean,
     data: MetadataFields,
     errors: { [string]: React.Node },
+    isDisabled?: boolean,
     onFieldChange?: (key: string, value: MetadataFieldValue, type: string) => void,
     onFieldRemove?: (key: string) => void,
     template: MetadataTemplate,
 };
 
-const TemplatedInstance = ({ canEdit, data = {}, errors, onFieldChange, onFieldRemove, template }: Props) => {
+const TemplatedInstance = ({
+    canEdit,
+    data = {},
+    errors,
+    isDisabled,
+    onFieldChange,
+    onFieldRemove,
+    template,
+}: Props) => {
     const { fields = [] } = template;
     const hasFields = fields.length > 0;
     const hasVisibleFields = hasFields && fields.some(field => !isHidden(field));
@@ -39,6 +48,7 @@ const TemplatedInstance = ({ canEdit, data = {}, errors, onFieldChange, onFieldR
                         description={field.description}
                         displayName={field.displayName}
                         error={errors[field.key]}
+                        isDisabled={isDisabled}
                         isHidden={isHidden(field)} // Checking both isHidden and hidden attributes due to differences in V2 and V3 APIs
                         onChange={(key: string, value: MetadataFieldValue) => {
                             if (canEdit && onFieldChange) {

package/src/features/metadata-instance-editor/__tests__/CascadePolicy.test.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import userEvent from '@testing-library/user-event';
+
 import { screen, render, within } from '../../../test-utils/testing-library';
 
 import CascadePolicy from '../CascadePolicy';
@@ -95,8 +97,97 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
 
     describe('AI Agent Selector', () => {
         test('should render AI agent selector with default to basic when AI features are enabled', () => {
-            render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    canUseAIFolderExtractionAgentSelector
+                    shouldShowCascadeOptions
+                />,
+            );
             expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
         });
+
+        test('should not render AI agent selector when canUseAIFolderExtractionAgentSelector is false', () => {
+            render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
+            expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+        });
+    });
+
+    describe('AI Autofill Toggle', () => {
+        test('should disable toggle when isExistingAIExtractionCascadePolicy is true', () => {
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    shouldShowCascadeOptions
+                    isExistingAIExtractionCascadePolicy
+                />,
+            );
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const toggle = within(aiSection).getByRole('switch');
+
+            expect(toggle).toBeDisabled();
+        });
+
+        test('should enable toggle when isExistingAIExtractionCascadePolicy is false', () => {
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    shouldShowCascadeOptions
+                    isExistingAIExtractionCascadePolicy={false}
+                />,
+            );
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const toggle = within(aiSection).getByRole('switch');
+
+            expect(toggle).not.toBeDisabled();
+        });
+
+        test('should call onAIFolderExtractionToggle when toggle is clicked and enabled', async () => {
+            const onAIFolderExtractionToggle = jest.fn();
+
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    shouldShowCascadeOptions
+                    isExistingAIExtractionCascadePolicy={false}
+                    onAIFolderExtractionToggle={onAIFolderExtractionToggle}
+                />,
+            );
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const toggle = within(aiSection).getByRole('switch');
+
+            await userEvent.click(toggle);
+
+            expect(onAIFolderExtractionToggle).toHaveBeenCalledTimes(1);
+            expect(onAIFolderExtractionToggle).toHaveBeenCalledWith(true);
+        });
+
+        test('should not call onAIFolderExtractionToggle when toggle is clicked but disabled', async () => {
+            const onAIFolderExtractionToggle = jest.fn();
+
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    shouldShowCascadeOptions
+                    isExistingAIExtractionCascadePolicy={true}
+                    onAIFolderExtractionToggle={onAIFolderExtractionToggle}
+                />,
+            );
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const toggle = within(aiSection).getByRole('switch');
+
+            await userEvent.click(toggle);
+
+            expect(onAIFolderExtractionToggle).not.toHaveBeenCalled();
+        });
     });
 });

package/src/features/metadata-instance-editor/__tests__/Instance.test.js

@@ -1,9 +1,13 @@
 import * as React from 'react';
-
-import TEMPLATE_CUSTOM_PROPERTIES from '../constants';
+import userEvent from '@testing-library/user-event';
+import { createIntl } from 'react-intl';
+import { render, screen, within } from '../../../test-utils/testing-library';
+import { CASCADE_POLICY_TYPE_AI_EXTRACT, TEMPLATE_CUSTOM_PROPERTIES } from '../constants';
 import { InstanceBase as Instance } from '../Instance';
 import { isValidValue } from '../../metadata-instance-fields/validateMetadataField';
 
+// Add RTL imports
+
 jest.mock('../../metadata-instance-fields/validateMetadataField');
 
 const data = {
@@ -718,3 +722,204 @@ describe('features/metadata-instance-editor/fields/Instance', () => {
         });
     });
 });
+
+// New RTL tests
+const testFields = [
+    {
+        id: 'field1',
+        type: 'string',
+        key: 'stringfield',
+        displayName: 'String Field',
+        description: 'example of a string field',
+    },
+    {
+        id: 'field2',
+        type: 'float',
+        key: 'floatfield',
+        displayName: 'Float Field',
+        description: 'example of a float field',
+    },
+];
+
+const testData = {
+    stringfield: 'some string',
+    floatfield: 1.0,
+};
+
+const getBaseProps = (props = {}) => ({
+    id: 'test-instance',
+    canEdit: true,
+    data: { ...testData },
+    template: {
+        id: 'template-1',
+        displayName: 'Test Template',
+        fields: [...testFields],
+        templateKey: 'testTemplateKey',
+    },
+    intl: createIntl({ locale: 'en' }),
+    onSave: jest.fn(),
+    onModification: jest.fn(),
+    onRemove: jest.fn(),
+    isDirty: false,
+    hasError: false,
+    isCascadingPolicyApplicable: true,
+    cascadePolicy: {
+        id: 'policy-1',
+        canEdit: true,
+        isEnabled: true,
+        scope: 'enterprise_123',
+        cascadePolicyType: 'regular', // default to non-AI
+    },
+    canUseAIFolderExtraction: true, // Assume feature flag is on
+    canUseAIFolderExtractionAgentSelector: false,
+    ...props,
+});
+
+describe('Instance Component - React Testing Library', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        isValidValue.mockReturnValue(true); // Default mock for isValidValue
+    });
+
+    describe('Initialization based on cascadePolicy.cascadePolicyType', () => {
+        test('should initialize with AI folder extraction enabled and fields disabled if cascadePolicyType is "ai_extract"', async () => {
+            render(
+                <Instance
+                    {...getBaseProps({
+                        cascadePolicy: {
+                            id: 'policy-ai',
+                            canEdit: true,
+                            isEnabled: true,
+                            scope: 'enterprise_123',
+                            cascadePolicyType: CASCADE_POLICY_TYPE_AI_EXTRACT,
+                        },
+                    })}
+                />,
+            );
+
+            // Click Edit button to enable editing
+            const editButton = screen.getByRole('button', { name: 'Edit Metadata' }); // Assuming 'Edit Metadata' is the rendered name
+            await userEvent.click(editButton);
+
+            // Fields should be disabled because AI extraction is on by default from policy
+            // Input fields are part of TemplatedInstance, which is only rendered if Collapsible is open.
+            // Default state has isOpen true if not specified or based on single field length.
+            // Let's assume it's open.
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).toBeDisabled();
+            expect(screen.getByRole('textbox', { name: 'Float Field example of a float field' })).toBeDisabled();
+        });
+
+        test('should initialize with AI folder extraction disabled and fields enabled if cascadePolicyType is not "ai_extract"', async () => {
+            render(<Instance {...getBaseProps()} />); // default policy is not 'ai_extract'
+
+            // Click Edit button to enable editing
+            const editButton = screen.getByRole('button', { name: 'Edit Metadata' }); // Assuming 'Edit Metadata' is the rendered name
+            await userEvent.click(editButton);
+
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).not.toBeDisabled();
+            expect(screen.getByRole('textbox', { name: 'Float Field example of a float field' })).not.toBeDisabled();
+        });
+
+        test('should initialize with AI folder extraction disabled if cascadePolicy is undefined', async () => {
+            render(<Instance {...getBaseProps({ cascadePolicy: undefined, isCascadingPolicyApplicable: false })} />);
+
+            // Click Edit button to enable editing
+            const editButton = screen.getByRole('button', { name: 'Edit Metadata' }); // Assuming 'Edit Metadata' is the rendered name
+            await userEvent.click(editButton);
+
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).not.toBeDisabled();
+            expect(screen.getByRole('textbox', { name: 'Float Field example of a float field' })).not.toBeDisabled();
+        });
+    });
+
+    describe('AI Folder Extraction Toggle Interaction', () => {
+        test('should toggle AI folder extraction, disable/enable fields', async () => {
+            render(<Instance {...getBaseProps()} />);
+
+            // Click Edit button to enable editing
+            const editButton = screen.getByRole('button', { name: 'Edit Metadata' }); // Assuming 'Edit Metadata' is the rendered name
+            await userEvent.click(editButton);
+
+            // Initially, fields are enabled as default policy is not 'ai_extract'
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).not.toBeDisabled();
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const aiToggle = within(aiSection).getByRole('switch');
+
+            // Turn AI toggle ON
+            await userEvent.click(aiToggle);
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).toBeDisabled();
+
+            // Turn AI toggle OFF
+            await userEvent.click(aiToggle);
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).not.toBeDisabled();
+        });
+    });
+
+    describe('Props passed to CascadePolicy', () => {
+        test('should pass canUseAIFolderExtractionAgentSelector to CascadePolicy', async () => {
+            render(<Instance {...getBaseProps({ canUseAIFolderExtractionAgentSelector: true })} />);
+
+            const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
+            if (editButton) await userEvent.click(editButton); // Enter edit mode to ensure CascadePolicy options are visible
+
+            expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+        });
+
+        test('should pass isExistingAIExtractionCascadePolicy=true to CascadePolicy if policy is ai_extract', async () => {
+            render(
+                <Instance
+                    {...getBaseProps({
+                        cascadePolicy: {
+                            id: 'policy-ai',
+                            canEdit: true,
+                            isEnabled: true,
+                            scope: 'enterprise_123',
+                            cascadePolicyType: CASCADE_POLICY_TYPE_AI_EXTRACT,
+                        },
+                    })}
+                />,
+            );
+            const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
+            if (editButton) await userEvent.click(editButton);
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const aiToggle = within(aiSection).getByRole('switch');
+            expect(aiToggle).toBeDisabled();
+        });
+
+        test('should pass isExistingAIExtractionCascadePolicy=false to CascadePolicy if policy is not ai_extract', async () => {
+            render(<Instance {...getBaseProps()} />);
+            const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
+            if (editButton) await userEvent.click(editButton);
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const aiToggle = within(aiSection).getByRole('switch');
+            expect(aiToggle).not.toBeDisabled();
+        });
+    });
+
+    describe('Props passed to TemplatedInstance', () => {
+        test('should pass isDisabled=true to TemplatedInstance when AI folder extraction is enabled', async () => {
+            render(<Instance {...getBaseProps()} />);
+            const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
+            await userEvent.click(editButton);
+
+            const aiSection = screen.getByTestId('ai-folder-extraction');
+            const aiToggle = within(aiSection).getByRole('switch');
+
+            await userEvent.click(aiToggle); // Turn AI ON
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).toBeDisabled();
+        });
+
+        test('should pass isDisabled=false to TemplatedInstance when AI folder extraction is disabled', async () => {
+            render(<Instance {...getBaseProps()} />);
+            const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
+            // If instance starts in non-edit mode, fields might not be interactive until edit is clicked
+            if (editButton) await userEvent.click(editButton);
+
+            // AI is off by default
+            expect(screen.getByRole('textbox', { name: 'String Field example of a string field' })).not.toBeDisabled();
+        });
+    });
+});

package/src/features/metadata-instance-editor/__tests__/Instances.test.js

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import Instances from '../Instances';
 
@@ -182,6 +184,50 @@ const editor2 = {
 // State of editors from server
 const editorsOnServer = [editor1, editor2];
 
+const testInstanceFields = [
+    {
+        id: 'field1',
+        type: 'string',
+        key: 'stringfield',
+        displayName: 'String Field',
+        description: 'example of a string field',
+    },
+];
+
+const getInstancesBaseProps = (props = {}) => ({
+    editors: [
+        {
+            instance: {
+                id: 'test-instance-1',
+                canEdit: true,
+                data: { stringfield: 'value1' },
+                isDirty: false,
+                hasError: false,
+                isCascadingPolicyApplicable: true,
+                cascadePolicy: {
+                    id: 'policy-1',
+                    canEdit: true,
+                    isEnabled: true,
+                    scope: 'enterprise_123',
+                    cascadePolicyType: 'regular',
+                },
+            },
+            template: {
+                id: 'template-1',
+                displayName: 'Test Template Editor',
+                fields: testInstanceFields,
+                templateKey: 'editorTemplateKey',
+            },
+        },
+    ],
+    onSave: jest.fn(),
+    onModification: jest.fn(),
+    onRemove: jest.fn(),
+    canUseAIFolderExtraction: true,
+    isCascadingPolicyApplicable: true,
+    ...props,
+});
+
 describe('features/metadata-editor-editor/Instances', () => {
     test('should correctly render editors', () => {
         const wrapper = shallow(<Instances editors={editorsOnServer} />);
@@ -190,18 +236,61 @@ describe('features/metadata-editor-editor/Instances', () => {
 
     test('should correctly render instances with editors and a selected template', () => {
         const wrapper = shallow(<Instances editors={editorsOnServer} selectedTemplateKey="template1" />);
-        const selectedTemplate = wrapper.find('Instance').at(0);
+        const selectedTemplate = wrapper.find('injectIntl(Instance)').at(0);
         expect(selectedTemplate.prop('isOpen')).toBe(true);
         expect(selectedTemplate.prop('id')).toBe('editor1');
     });
 
     test('should correctly render instances with a selected template and multiple editors', () => {
         const wrapper = shallow(<Instances editors={editorsOnServer} selectedTemplateKey="template2" />);
-        const selectedTemplate = wrapper.find('Instance').at(1);
+        const selectedTemplate = wrapper.find('injectIntl(Instance)').at(1);
         expect(selectedTemplate.prop('isOpen')).toBe(true);
         expect(selectedTemplate.prop('id')).toBe('editor2');
-        const unselectedTemplate = wrapper.find('Instance').at(0);
+        const unselectedTemplate = wrapper.find('injectIntl(Instance)').at(0);
         expect(unselectedTemplate.prop('isOpen')).toBe(false);
         expect(unselectedTemplate.prop('id')).toBe('editor1');
     });
 });
+
+describe('Instances component - canUseAIFolderExtractionAgentSelector prop', () => {
+    test('should pass canUseAIFolderExtractionAgentSelector to child Instance components, showing agent selector', async () => {
+        render(
+            <Instances
+                {...getInstancesBaseProps({
+                    canUseAIFolderExtractionAgentSelector: true,
+                })}
+            />,
+        );
+
+        const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
+        await userEvent.click(editButton);
+
+        expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+    });
+
+    test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is false', async () => {
+        render(
+            <Instances
+                {...getInstancesBaseProps({
+                    canUseAIFolderExtractionAgentSelector: false,
+                })}
+            />,
+        );
+
+        const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
+        await userEvent.click(editButton);
+
+        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+    });
+
+    test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is undefined', async () => {
+        const props = getInstancesBaseProps();
+        delete props.canUseAIFolderExtractionAgentSelector;
+        render(<Instances {...props} />);
+
+        const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
+        await userEvent.click(editButton);
+
+        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+    });
+});

package/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
 
 import MetadataInstanceEditor from '../MetadataInstanceEditor';
 import Instances from '../Instances';
@@ -443,6 +445,66 @@ const templatesOnServer = [template1, template2, template3, template4, template5
 // State of editors from server
 const editorsOnServer = [editor1, editor2, editor3, editor4, editor5];
 
+const testGrandchildInstanceFields = [
+    {
+        id: 'field1',
+        type: 'string',
+        key: 'stringfield',
+        displayName: 'String Field',
+        description: 'example of a string field',
+    },
+];
+
+const getMetadataEditorBaseProps = (props = {}) => ({
+    editors: [
+        {
+            instance: {
+                id: 'test-instance-editor-child-1',
+                canEdit: true,
+                data: { stringfield: 'valueForEditor' },
+                isDirty: false,
+                hasError: false,
+                isCascadingPolicyApplicable: true,
+                cascadePolicy: {
+                    id: 'policy-for-editor-1',
+                    canEdit: true,
+                    isEnabled: true,
+                    scope: 'enterprise_123',
+                    cascadePolicyType: 'regular',
+                },
+            },
+            template: {
+                id: 'template-for-editor-1',
+                displayName: 'Test Template In Editor',
+                fields: testGrandchildInstanceFields,
+                templateKey: 'editorChildTemplateKey',
+            },
+        },
+    ],
+    templates: [
+        {
+            id: 'template-for-editor-1',
+            templateKey: 'editorChildTemplateKey',
+            displayName: 'Test Template In Editor',
+            fields: testGrandchildInstanceFields,
+        },
+        {
+            id: 'template-for-editor-2',
+            templateKey: 'anotherEditorTemplateKey',
+            displayName: 'Another Test Template',
+            fields: [],
+        },
+    ],
+    onSave: jest.fn(),
+    onModification: jest.fn(),
+    onRemove: jest.fn(),
+    onAdd: jest.fn(),
+    canAdd: true,
+    canUseAIFolderExtraction: true,
+    isCascadingPolicyApplicable: true,
+    ...props,
+});
+
 describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
     test('should correctly render editors', () => {
         const wrapper = shallow(<MetadataInstanceEditor editors={editorsOnServer} templates={templatesOnServer} />);
@@ -471,3 +533,46 @@ describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
         expect(instances.prop('selectedTemplateKey')).toBe(selectedTemplateKey);
     });
 });
+
+describe('MetadataInstanceEditor - canUseAIFolderExtractionAgentSelector prop', () => {
+    test('should propagate canUseAIFolderExtractionAgentSelector, showing agent selector', async () => {
+        render(
+            <MetadataInstanceEditor
+                {...getMetadataEditorBaseProps({
+                    canUseAIFolderExtractionAgentSelector: true,
+                })}
+            />,
+        );
+
+        const editButton = await screen.findByRole('button', { name: 'Edit Metadata' }, { timeout: 3000 });
+        await userEvent.click(editButton);
+
+        expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+    });
+
+    test('should not show agent selector if canUseAIFolderExtractionAgentSelector is false', async () => {
+        render(
+            <MetadataInstanceEditor
+                {...getMetadataEditorBaseProps({
+                    canUseAIFolderExtractionAgentSelector: false,
+                })}
+            />,
+        );
+
+        const editButton = await screen.findByRole('button', { name: 'Edit Metadata' });
+        await userEvent.click(editButton);
+
+        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+    });
+
+    test('should not show agent selector if canUseAIFolderExtractionAgentSelector is undefined', async () => {
+        const props = getMetadataEditorBaseProps();
+        delete props.canUseAIFolderExtractionAgentSelector;
+        render(<MetadataInstanceEditor {...props} />);
+
+        const editButton = await screen.findByRole('button', { name: 'Edit Metadata' });
+        await userEvent.click(editButton);
+
+        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+    });
+});