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

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

@@ -34,10 +34,12 @@ const agents = [
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
+    canUseAIFolderExtractionAgentSelector: boolean,
     isAIFolderExtractionEnabled: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
     isCustomMetadata: boolean,
+    isExistingAIExtractionCascadePolicy: boolean,
     onAIFolderExtractionToggle: (value: boolean) => void,
     onCascadeModeChange: (value: boolean) => void,
     onCascadeToggle: (value: boolean) => void,
@@ -47,10 +49,12 @@ type Props = {
 const CascadePolicy = ({
     canEdit,
     canUseAIFolderExtraction,
+    canUseAIFolderExtractionAgentSelector,
     isCascadingEnabled,
     isCascadingOverwritten,
     isCustomMetadata,
     isAIFolderExtractionEnabled,
+    isExistingAIExtractionCascadePolicy,
     onAIFolderExtractionToggle,
     onCascadeToggle,
     onCascadeModeChange,
@@ -65,7 +69,7 @@ const CascadePolicy = ({
     return canEdit ? (
         <>
             <div className="metadata-cascade-editor">
-                <div className="metadata-cascade-enable">
+                <div className="metadata-cascade-enable" data-testid="metadata-cascade-enable">
                     <div>
                         <FormattedMessage tagName="strong" {...messages.enableCascadePolicy} />
                         {!isCustomMetadata && (
@@ -131,6 +135,7 @@ const CascadePolicy = ({
                             <Toggle
                                 className="metadata-cascade-toggle"
                                 isOn={isAIFolderExtractionEnabled}
+                                isDisabled={isExistingAIExtractionCascadePolicy}
                                 label=""
                                 onChange={e => onAIFolderExtractionToggle(e.target.checked)}
                             />
@@ -142,17 +147,19 @@ const CascadePolicy = ({
                                 <FormattedMessage {...messages.aiAutofillLearnMore} />
                             </Link>
                         </div>
-                        <div className="metadata-cascade-ai-agent-selector">
-                            <TooltipProvider>
-                                <BoxAiAgentSelector
-                                    agents={agents}
-                                    onErrorAction={() => {}}
-                                    requestState="success"
-                                    selectedAgent={agents[0]}
-                                    variant="sidebar"
-                                />
-                            </TooltipProvider>
-                        </div>
+                        {canUseAIFolderExtractionAgentSelector && (
+                            <div className="metadata-cascade-ai-agent-selector">
+                                <TooltipProvider>
+                                    <BoxAiAgentSelector
+                                        agents={agents}
+                                        onErrorAction={() => {}}
+                                        requestState="success"
+                                        selectedAgent={agents[0]}
+                                        variant="sidebar"
+                                    />
+                                </TooltipProvider>
+                            </div>
+                        )}
                         <InlineNotice className="metadata-cascade-ai-notice" variant="info">
                             <FormattedMessage
                                 {...messages.aiAutofillNotice}

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

@@ -24,7 +24,7 @@ import MetadataInstanceConfirmDialog from './MetadataInstanceConfirmDialog';
 import Footer from './Footer';
 import messages from './messages';
 import { FIELD_TYPE_FLOAT, FIELD_TYPE_INTEGER } from '../metadata-instance-fields/constants';
-import TEMPLATE_CUSTOM_PROPERTIES from './constants';
+import { CASCADE_POLICY_TYPE_AI_EXTRACT, TEMPLATE_CUSTOM_PROPERTIES } from './constants';
 import {
     JSON_PATCH_OP_REMOVE,
     JSON_PATCH_OP_ADD,
@@ -48,6 +48,7 @@ import './Instance.scss';
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction?: boolean,
+    canUseAIFolderExtractionAgentSelector?: boolean,
     cascadePolicy?: MetadataCascadePolicy, // eslint-disable-line
     data: MetadataFields,
     hasError: boolean,
@@ -210,7 +211,13 @@ class Instance extends React.PureComponent<Props, State> {
             isCascadingPolicyApplicable,
             onSave,
         }: Props = this.props;
-        const { data: currentData, errors, isCascadingEnabled, isCascadingOverwritten }: State = this.state;
+        const {
+            data: currentData,
+            errors,
+            isAIFolderExtractionEnabled,
+            isCascadingEnabled,
+            isCascadingOverwritten,
+        }: State = this.state;
 
         if (!this.isEditing() || !isDirty || !onSave || Object.keys(errors).length) {
             return;
@@ -219,7 +226,8 @@ class Instance extends React.PureComponent<Props, State> {
         this.setState({
             isBusy: true,
             isEditing: false,
-            shouldShowCascadeOptions: false,
+            // reset state if cascading policy is removed
+            isAIFolderExtractionEnabled: isCascadingEnabled ? isAIFolderExtractionEnabled : false,
         });
         onSave(
             id,
@@ -230,6 +238,7 @@ class Instance extends React.PureComponent<Props, State> {
                       id: cascadePolicy ? cascadePolicy.id : undefined,
                       isEnabled: isCascadingEnabled,
                       overwrite: isCascadingOverwritten,
+                      isAIFolderExtractionEnabled,
                   }
                 : undefined,
             cloneDeep(currentData),
@@ -339,12 +348,12 @@ class Instance extends React.PureComponent<Props, State> {
      * @return {Object} - react state
      */
     getState(props: Props): State {
-        const isCascadingEnabled = this.isCascadingEnabled(props);
+        const isCascadingEnabled = this.isCascadingEnabledThroughProps(props);
 
         return {
             data: cloneDeep(props.data),
             errors: {},
-            isAIFolderExtractionEnabled: false,
+            isAIFolderExtractionEnabled: this.isAIFolderExtractionEnabledThroughProps(props),
             isBusy: false,
             isCascadingEnabled,
             isCascadingOverwritten: false,
@@ -420,13 +429,16 @@ class Instance extends React.PureComponent<Props, State> {
      */
     setDirty = (type?: string): void => {
         const { id, isCascadingPolicyApplicable, onModification }: Props = this.props;
-        const { data, isCascadingEnabled, isCascadingOverwritten } = this.state;
+        const { data, isCascadingEnabled, isCascadingOverwritten, isAIFolderExtractionEnabled } = this.state;
         const hasDataChanged = !isEqual(data, this.props.data);
         let hasCascadingChanged = false;
 
         if (isCascadingPolicyApplicable) {
             // isCascadingOverwritten always starts out as false, so true signifies a change
-            hasCascadingChanged = isCascadingOverwritten || isCascadingEnabled !== this.isCascadingEnabled(this.props);
+            hasCascadingChanged =
+                isCascadingOverwritten ||
+                isCascadingEnabled !== this.isCascadingEnabledThroughProps(this.props) ||
+                isAIFolderExtractionEnabled !== this.isAIFolderExtractionEnabledThroughProps(this.props);
         }
 
         // Callback to parent to tell that something is dirty
@@ -442,19 +454,30 @@ class Instance extends React.PureComponent<Props, State> {
     fieldKeyToTypeMap: Object;
 
     /**
-     * Determines if cascading policy is enabled based on
+     * Determines if cascading policy is enabled through props based on
      * whether it has an id or not.
      *
      * @param {Object} props - component props
      * @return {boolean} true if cascading policy is enabled
      */
-    isCascadingEnabled(props: Props) {
+    isCascadingEnabledThroughProps(props: Props) {
         if (props.cascadePolicy) {
             return !!props.cascadePolicy.id;
         }
         return false;
     }
 
+    /**
+     * Determines if ai extraction is enabled based on
+     * if cascade policy type is ai_extract
+     *
+     * @param {Object} props - component props
+     * @return {boolean} true if ai extraction is enabled
+     */
+    isAIFolderExtractionEnabledThroughProps({ cascadePolicy }: Props) {
+        return cascadePolicy?.cascadePolicyType === CASCADE_POLICY_TYPE_AI_EXTRACT;
+    }
+
     /**
      * Toggles the edit mode
      *
@@ -590,6 +613,7 @@ class Instance extends React.PureComponent<Props, State> {
     render() {
         const {
             canUseAIFolderExtraction = false,
+            canUseAIFolderExtractionAgentSelector = false,
             cascadePolicy = {},
             isDirty,
             isCascadingPolicyApplicable,
@@ -617,6 +641,9 @@ class Instance extends React.PureComponent<Props, State> {
         // Animate short and tall cards at consistent speeds.
         const animationDuration = (fields.length + 1) * 50;
 
+        const isExistingAIExtractionCascadePolicy =
+            this.isCascadingEnabledThroughProps(this.props) && this.isAIFolderExtractionEnabledThroughProps(this.props);
+
         return (
             <div ref={this.collapsibleRef}>
                 <Collapsible
@@ -647,10 +674,14 @@ class Instance extends React.PureComponent<Props, State> {
                                         <CascadePolicy
                                             canEdit={isEditing && !!cascadePolicy.canEdit}
                                             canUseAIFolderExtraction={canUseAIFolderExtraction}
+                                            canUseAIFolderExtractionAgentSelector={
+                                                canUseAIFolderExtractionAgentSelector
+                                            }
                                             isAIFolderExtractionEnabled={isAIFolderExtractionEnabled}
                                             isCascadingEnabled={isCascadingEnabled}
                                             isCascadingOverwritten={isCascadingOverwritten}
                                             isCustomMetadata={isProperties}
+                                            isExistingAIExtractionCascadePolicy={isExistingAIExtractionCascadePolicy}
                                             onAIFolderExtractionToggle={this.onAIFolderExtractionToggle}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}
@@ -669,6 +700,7 @@ class Instance extends React.PureComponent<Props, State> {
                                             canEdit={isEditing}
                                             data={data}
                                             errors={errors}
+                                            isDisabled={isAIFolderExtractionEnabled}
                                             onFieldChange={this.onFieldChange}
                                             onFieldRemove={this.onFieldRemove}
                                             template={template}

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

@@ -7,6 +7,7 @@ import type { JSONPatchOperations } from '../../common/types/api';
 
 type Props = {
     canUseAIFolderExtraction?: boolean,
+    canUseAIFolderExtractionAgentSelector?: boolean,
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
@@ -22,6 +23,7 @@ type Props = {
 
 const Instances = ({
     canUseAIFolderExtraction = false,
+    canUseAIFolderExtractionAgentSelector = false,
     isCascadingPolicyApplicable = false,
     editors = [],
     onModification,
@@ -37,6 +39,7 @@ const Instances = ({
                 <Instance
                     canEdit={instance.canEdit}
                     canUseAIFolderExtraction={canUseAIFolderExtraction}
+                    canUseAIFolderExtractionAgentSelector={canUseAIFolderExtractionAgentSelector}
                     cascadePolicy={instance.cascadePolicy}
                     data={instance.data}
                     hasError={hasError}

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

@@ -15,6 +15,7 @@ type Props = {
     blurExceptionClassNames?: Array<string>,
     canAdd: boolean,
     canUseAIFolderExtraction?: boolean,
+    canUseAIFolderExtractionAgentSelector?: boolean,
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
@@ -37,6 +38,7 @@ const MetadataInstanceEditor = ({
     blurExceptionClassNames,
     canAdd,
     canUseAIFolderExtraction = false,
+    canUseAIFolderExtractionAgentSelector = false,
     isCascadingPolicyApplicable = false,
     isDropdownBusy,
     editors = [],
@@ -64,6 +66,7 @@ const MetadataInstanceEditor = ({
                 <ScrollWrapper>
                     <Instances
                         canUseAIFolderExtraction={canUseAIFolderExtraction}
+                        canUseAIFolderExtractionAgentSelector={canUseAIFolderExtractionAgentSelector}
                         editors={editors}
                         isCascadingPolicyApplicable={isCascadingPolicyApplicable}
                         onModification={onModification}

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

@@ -13,7 +13,7 @@ import { Flyout, Overlay } from '../../components/flyout';
 
 import MenuToggle from '../../components/dropdown-menu/MenuToggle';
 import messages from './messages';
-import TEMPLATE_CUSTOM_PROPERTIES from './constants';
+import { TEMPLATE_CUSTOM_PROPERTIES } from './constants';
 import type { MetadataTemplate } from '../../common/types/metadata';
 import './TemplateDropdown.scss';
 

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();
+        });
+    });
+});