box-ui-elements 23.4.0-beta.30 → 23.4.0-beta.32

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

@@ -1,10 +1,16 @@
 // @flow
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
 
-import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { InlineNotice } from '@box/blueprint-web';
+import { useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+// $FlowFixMe
+import { BoxAiAdvancedColor, BoxAiColor } from '@box/blueprint-web-assets/icons/Medium';
+import { type AgentType } from '@box/box-ai-agent-selector';
+
 // $FlowFixMe
-import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
+import { BoxAiAgentSelectorWithApiContainer } from '@box/box-ai-agent-selector';
 
 import Toggle from '../../components/toggle';
 import { RadioButton, RadioGroup } from '../../components/radio';
@@ -12,23 +18,11 @@ import Link from '../../components/link/Link';
 import IconAlertDefault from '../../icons/general/IconAlertDefault';
 import messages from './messages';
 import './CascadePolicy.scss';
+import { STANDARD_AGENT_ID, ENHANCED_AGENT_ID } from './constants';
 
 const COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';
 const AI_LINK = 'https://www.box.com/ai';
 
-const agents = [
-    {
-        id: '1',
-        name: 'Basic',
-        isEnterpriseDefault: true,
-    },
-    {
-        id: '2',
-        name: 'Enhanced (Gemini 2.5 Pro)',
-        isEnterpriseDefault: false,
-    },
-];
-
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
@@ -37,8 +31,9 @@ type Props = {
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
     isCustomMetadata: boolean,
-    isExistingAIExtractionCascadePolicy: boolean,
+    isExistingCascadePolicy: boolean,
     onAIFolderExtractionToggle: (value: boolean) => void,
+    onAIAgentSelect?: (agent: AgentType | null) => void,
     onCascadeModeChange: (value: boolean) => void,
     onCascadeToggle: (value: boolean) => void,
     shouldShowCascadeOptions: boolean,
@@ -52,26 +47,71 @@ const CascadePolicy = ({
     isCascadingOverwritten,
     isCustomMetadata,
     isAIFolderExtractionEnabled,
-    isExistingAIExtractionCascadePolicy,
+    isExistingCascadePolicy,
     onAIFolderExtractionToggle,
+    onAIAgentSelect,
     onCascadeToggle,
     onCascadeModeChange,
     shouldShowCascadeOptions,
 }: Props) => {
+    const { formatMessage } = useIntl();
+
     const readOnlyState = isCascadingEnabled ? (
         <div className="metadata-cascade-notice">
             <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />
         </div>
     ) : null;
 
+    const agents = React.useMemo(
+        () => [
+            {
+                id: STANDARD_AGENT_ID,
+                name: formatMessage(messages.standardAgentName),
+                isEnterpriseDefault: true,
+            },
+            {
+                id: ENHANCED_AGENT_ID,
+                name: formatMessage(messages.enhancedAgentName),
+                isEnterpriseDefault: false,
+                customIcon: BoxAiAdvancedColor,
+            },
+        ],
+        [formatMessage],
+    );
+
+    // BoxAiAgentSelectorWithApiContainer expects a function that returns a Promise<AgentListResponse>
+    // Since we're passing in our own agents, we don't need to make an API call,
+    // so we wrap the store data in a Promise to satisfy the component's interface requirements.
+    const agentFetcher = useCallback(() => {
+        return Promise.resolve({ agents });
+    }, [agents]);
+
+    const handleAgentSelect = useCallback(
+        (agent: AgentType | null) => {
+            if (onAIAgentSelect) {
+                onAIAgentSelect(agent);
+            }
+        },
+        [onAIAgentSelect],
+    );
+
     return canEdit ? (
         <>
+            {isExistingCascadePolicy && (
+                <InlineNotice
+                    variant="info"
+                    variantIconAriaLabel={formatMessage(messages.cascadePolicyOptionsDisabledNoticeIconAriaLabel)}
+                >
+                    <FormattedMessage {...messages.cascadePolicyOptionsDisabledNotice} />
+                </InlineNotice>
+            )}
             <div className="metadata-cascade-editor">
                 <div className="metadata-cascade-enable" data-testid="metadata-cascade-enable">
                     <div>
                         <FormattedMessage tagName="strong" {...messages.enableCascadePolicy} />
                         {!isCustomMetadata && (
                             <Toggle
+                                aria-label={formatMessage(messages.enableCascadePolicy)}
                                 className={`metadata-cascade-toggle ${
                                     isCascadingEnabled ? 'cascade-on' : 'cascade-off'
                                 }`}
@@ -113,10 +153,12 @@ const CascadePolicy = ({
                             value={isCascadingOverwritten ? 'overwrite' : 'skip'}
                         >
                             <RadioButton
+                                isDisabled={isExistingCascadePolicy}
                                 label={<FormattedMessage {...messages.cascadePolicySkipMode} />}
                                 value="skip"
                             />
                             <RadioButton
+                                isDisabled={isExistingCascadePolicy}
                                 label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}
                                 value="overwrite"
                             />
@@ -128,12 +170,13 @@ const CascadePolicy = ({
                 <div className="metadata-cascade-editor" data-testid="ai-folder-extraction">
                     <div className="metadata-cascade-enable">
                         <div>
-                            <BoxAiLogo className="metadata-cascade-ai-logo" width={16} height={16} />
+                            <BoxAiColor className="metadata-cascade-ai-logo" width={16} height={16} />
                             <FormattedMessage tagName="strong" {...messages.enableAIAutofill} />
                             <Toggle
+                                aria-label={formatMessage(messages.enableAIAutofill)}
                                 className="metadata-cascade-toggle"
                                 isOn={isAIFolderExtractionEnabled}
-                                isDisabled={isExistingAIExtractionCascadePolicy}
+                                isDisabled={isExistingCascadePolicy}
                                 label=""
                                 onChange={e => onAIFolderExtractionToggle(e.target.checked)}
                             />
@@ -145,14 +188,13 @@ const CascadePolicy = ({
                                 <FormattedMessage {...messages.aiAutofillLearnMore} />
                             </Link>
                         </div>
-                        {canUseAIFolderExtractionAgentSelector && (
+                        {canUseAIFolderExtractionAgentSelector && isAIFolderExtractionEnabled && (
                             <div className="metadata-cascade-ai-agent-selector">
-                                <BoxAiAgentSelector
-                                    agents={agents}
-                                    onErrorAction={() => {}}
-                                    requestState="success"
-                                    selectedAgent={agents[0]}
-                                    variant="sidebar"
+                                <BoxAiAgentSelectorWithApiContainer
+                                    disabled={isExistingCascadePolicy}
+                                    fetcher={agentFetcher}
+                                    onSelectAgent={handleAgentSelect}
+                                    recordAction={() => {}}
                                 />
                             </div>
                         )}

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

@@ -6,6 +6,7 @@ import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import noop from 'lodash/noop';
 
+import type { AgentType } from '@box/box-ai-agent-selector';
 import Collapsible from '../../components/collapsible/Collapsible';
 import Form from '../../components/form-elements/form/Form';
 import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper';
@@ -24,7 +25,12 @@ 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 { CASCADE_POLICY_TYPE_AI_EXTRACT, TEMPLATE_CUSTOM_PROPERTIES } from './constants';
+import {
+    CASCADE_POLICY_TYPE_AI_EXTRACT,
+    TEMPLATE_CUSTOM_PROPERTIES,
+    ENHANCED_AGENT_CONFIGURATION,
+    ENHANCED_AGENT_ID,
+} from './constants';
 import {
     JSON_PATCH_OP_REMOVE,
     JSON_PATCH_OP_ADD,
@@ -38,6 +44,7 @@ import type {
     MetadataFields,
     MetadataTemplate,
     MetadataCascadePolicy,
+    MetadataCascadePolicyConfiguration,
     MetadataCascadingPolicyData,
     MetadataTemplateField,
     MetadataFieldValue,
@@ -69,6 +76,7 @@ type Props = {
 };
 
 type State = {
+    cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,
     data: Object,
     errors: { [string]: React.Node },
     isAIFolderExtractionEnabled: boolean,
@@ -212,6 +220,7 @@ class Instance extends React.PureComponent<Props, State> {
             onSave,
         }: Props = this.props;
         const {
+            cascadePolicyConfiguration,
             data: currentData,
             errors,
             isAIFolderExtractionEnabled,
@@ -229,6 +238,7 @@ class Instance extends React.PureComponent<Props, State> {
             // reset state if cascading policy is removed
             isAIFolderExtractionEnabled: isCascadingEnabled ? isAIFolderExtractionEnabled : false,
         });
+
         onSave(
             id,
             this.createJSONPatch(currentData, originalData),
@@ -239,6 +249,7 @@ class Instance extends React.PureComponent<Props, State> {
                       isEnabled: isCascadingEnabled,
                       overwrite: isCascadingOverwritten,
                       isAIFolderExtractionEnabled,
+                      cascadePolicyConfiguration,
                   }
                 : undefined,
             cloneDeep(currentData),
@@ -342,6 +353,23 @@ class Instance extends React.PureComponent<Props, State> {
         this.setState({ isAIFolderExtractionEnabled: value }, this.setDirty);
     };
 
+    /**
+     * Handles the selection of an AI agent
+     * @param {AgentType | null} agent - The selected agent
+     */
+    onAIAgentSelect = (agent: AgentType | null): void => {
+        // '2' is the id for the enhanced agent
+        if (agent && agent.id === ENHANCED_AGENT_ID) {
+            this.setState({
+                cascadePolicyConfiguration: {
+                    agent: ENHANCED_AGENT_CONFIGURATION,
+                },
+            });
+        } else {
+            this.setState({ cascadePolicyConfiguration: null });
+        }
+    };
+
     /**
      * Returns the state from props
      *
@@ -351,6 +379,7 @@ class Instance extends React.PureComponent<Props, State> {
         const isCascadingEnabled = this.isCascadingEnabledThroughProps(props);
 
         return {
+            cascadePolicyConfiguration: null,
             data: cloneDeep(props.data),
             errors: {},
             isAIFolderExtractionEnabled: this.isAIFolderExtractionEnabledThroughProps(props),
@@ -641,8 +670,7 @@ 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);
+        const isExistingCascadePolicy = this.isCascadingEnabledThroughProps(this.props);
 
         return (
             <div ref={this.collapsibleRef}>
@@ -681,7 +709,8 @@ class Instance extends React.PureComponent<Props, State> {
                                             isCascadingEnabled={isCascadingEnabled}
                                             isCascadingOverwritten={isCascadingOverwritten}
                                             isCustomMetadata={isProperties}
-                                            isExistingAIExtractionCascadePolicy={isExistingAIExtractionCascadePolicy}
+                                            isExistingCascadePolicy={isExistingCascadePolicy}
+                                            onAIAgentSelect={this.onAIAgentSelect}
                                             onAIFolderExtractionToggle={this.onAIFolderExtractionToggle}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}

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

@@ -13,49 +13,66 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
     });
 
     test('should correctly render cascade policy read only mode', () => {
-        const wrapper = shallow(<CascadePolicy id="fakeId" isCascadingEnabled shouldShowCascadeOptions />);
-        expect(wrapper).toMatchSnapshot();
+        render(<CascadePolicy isCascadingEnabled shouldShowCascadeOptions canEdit={false} />);
+        expect(
+            screen.getByText(
+                'This template and its values are being cascaded to all items in this folder and its subfolders.',
+            ),
+        ).toBeInTheDocument();
     });
+
     test('should correctly render cascade policy in edit mode', () => {
-        const wrapper = shallow(
+        render(
             <CascadePolicy
-                id="fakeId"
+                canEdit
                 isCascadingEnabled
-                isEditable
                 onCascadeModeChange={jest.fn()}
                 onCascadeToggle={jest.fn()}
                 shouldShowCascadeOptions
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.getByTestId('metadata-cascade-enable')).toBeInTheDocument();
+        expect(screen.getByText('Enable Cascade Policy')).toBeInTheDocument();
     });
+
     test('should correctly render cascade policy in edit mode and overwrite is on', () => {
-        const wrapper = shallow(
+        render(
             <CascadePolicy
-                id="fakeId"
+                canEdit
                 isCascadingEnabled
-                isEditable
+                isCascadingOverwritten
                 onCascadeModeChange={jest.fn()}
                 onCascadeToggle={jest.fn()}
-                shouldCascadeOverwrite
                 shouldShowCascadeOptions
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.getByTestId('metadata-cascade-enable')).toBeInTheDocument();
+        expect(screen.getByText('Enable Cascade Policy')).toBeInTheDocument();
+        expect(screen.getByLabelText('Overwrite all existing template values')).toBeInTheDocument();
     });
+
     test('should correctly render cascade policy when the template is Custom Metadata', () => {
-        const wrapper = shallow(
+        render(
             <CascadePolicy
                 canEdit
-                id="fakeId"
                 isCustomMetadata
-                isEditable
                 onCascadeModeChange={jest.fn()}
                 onCascadeToggle={jest.fn()}
                 shouldShowCascadeOptions
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(
+            screen.getByText('Cascade policy cannot be applied to custom metadata at this time.'),
+        ).toBeInTheDocument();
+    });
+
+    test('should render InlineNotice when isExistingCascadePolicy is true', () => {
+        render(<CascadePolicy canEdit isExistingCascadePolicy shouldShowCascadeOptions />);
+        expect(
+            screen.getByText(
+                'This cascade policy cannot be edited. To modify it, deactivate the current policy and then re-enable it to set up a new one.',
+            ),
+        ).toBeInTheDocument();
     });
 
     test('should render AI folder extraction toggle when canEdit, canUseAIFolderExtraction, and shouldShowCascadeOptions are true', () => {
@@ -96,60 +113,74 @@ 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', () => {
+        test('should render AI agent selector with default to basic when AI features are enabled', async () => {
             render(
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
                     canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
+                    isAIFolderExtractionEnabled
+                    onAIFolderExtractionToggle={jest.fn()}
                 />,
             );
-            expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
+
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            await userEvent.click(aiToggle); // Enable AI
+
+            expect(aiToggle).toBeChecked();
+
+            expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
         });
 
         test('should not render AI agent selector when canUseAIFolderExtractionAgentSelector is false', () => {
             render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
-            expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
+            expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
         });
-    });
 
-    describe('AI Autofill Toggle', () => {
-        test('should disable toggle when isExistingAIExtractionCascadePolicy is true', () => {
+        test('should call onAIAgentSelect when an agent is selected', async () => {
+            const onAIAgentSelect = jest.fn();
             render(
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
+                    canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
-                    isExistingAIExtractionCascadePolicy
+                    isAIFolderExtractionEnabled
+                    onAIAgentSelect={onAIAgentSelect}
+                    onAIFolderExtractionToggle={jest.fn()}
                 />,
             );
 
-            const aiSection = screen.getByTestId('ai-folder-extraction');
-            const toggle = within(aiSection).getByRole('switch');
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            await userEvent.click(aiToggle); // Enable AI
 
-            expect(toggle).toBeDisabled();
-        });
+            expect(aiToggle).toBeChecked();
 
-        test('should enable toggle when isExistingAIExtractionCascadePolicy is false', () => {
-            render(
-                <CascadePolicy
-                    canEdit
-                    canUseAIFolderExtraction
-                    shouldShowCascadeOptions
-                    isExistingAIExtractionCascadePolicy={false}
-                />,
-            );
+            // Find the combobox by its accessible name
+            const combobox = screen.getByRole('combobox', { name: 'Standard' });
 
-            const aiSection = screen.getByTestId('ai-folder-extraction');
-            const toggle = within(aiSection).getByRole('switch');
+            // Open the combobox (simulate user click)
+            await userEvent.click(combobox);
 
-            expect(toggle).not.toBeDisabled();
+            // Find the option for "Advanced" and select it
+            const option = await screen.findByRole('option', { name: 'Enhanced' });
+            await userEvent.click(option);
+
+            // The expected agent object (should match the one in CascadePolicy.js)
+            const expectedAgent = {
+                id: '1',
+                name: 'Standard',
+                isEnterpriseDefault: true,
+            };
+
+            expect(onAIAgentSelect).toHaveBeenCalledWith(expectedAgent);
         });
+    });
 
+    describe('AI Autofill Toggle', () => {
         test('should call onAIFolderExtractionToggle when toggle is clicked and enabled', async () => {
             const onAIFolderExtractionToggle = jest.fn();
-
             render(
                 <CascadePolicy
                     canEdit
@@ -159,35 +190,11 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
                     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

@@ -834,12 +834,17 @@ describe('Instance Component - React Testing Library', () => {
 
     describe('AI Folder Extraction Toggle Interaction', () => {
         test('should toggle AI folder extraction, disable/enable fields', async () => {
-            render(<Instance {...getBaseProps()} />);
+            render(<Instance {...getBaseProps({ cascadePolicy: { canEdit: true } })} />);
 
             // 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);
 
+            // Click Enable Cascade Policy
+            const metadataCascadeEnable = await screen.findByTestId('metadata-cascade-enable');
+            const enableCascadePolicy = await within(metadataCascadeEnable).findByRole('switch');
+            await userEvent.click(enableCascadePolicy);
+
             // 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();
 
@@ -858,53 +863,63 @@ describe('Instance Component - React Testing Library', () => {
 
     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('combobox', { name: 'Basic' })).toBeInTheDocument();
-        });
-
-        test('should pass isExistingAIExtractionCascadePolicy=true to CascadePolicy if policy is ai_extract', async () => {
             render(
                 <Instance
                     {...getBaseProps({
+                        canUseAIFolderExtractionAgentSelector: true,
                         cascadePolicy: {
-                            id: 'policy-ai',
+                            id: 'policy-1',
                             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);
+            if (editButton) await userEvent.click(editButton); // Enter edit mode to ensure CascadePolicy options are visible
 
-            const aiSection = screen.getByTestId('ai-folder-extraction');
-            const aiToggle = within(aiSection).getByRole('switch');
-            expect(aiToggle).toBeDisabled();
+            const cascadeToggle = screen.getByRole('switch', { name: 'Enable Cascade Policy' });
+            expect(cascadeToggle).toBeChecked();
+
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            expect(aiToggle).toBeChecked();
+
+            expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
         });
 
-        test('should pass isExistingAIExtractionCascadePolicy=false to CascadePolicy if policy is not ai_extract', async () => {
+        test('should disable CascadePolicy options when a cascade already exists', async () => {
             render(<Instance {...getBaseProps()} />);
+
+            // Enter edit mode
             const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
             if (editButton) await userEvent.click(editButton);
 
+            // Cascade options should be disabled
+            const skipRadio = screen.getByLabelText(/skip/i);
+            const overwriteRadio = screen.getByLabelText(/overwrite/i);
+            expect(skipRadio).toBeDisabled();
+            expect(overwriteRadio).toBeDisabled();
+
+            // AI toggle should be disabled
             const aiSection = screen.getByTestId('ai-folder-extraction');
             const aiToggle = within(aiSection).getByRole('switch');
-            expect(aiToggle).not.toBeDisabled();
+            expect(aiToggle).toBeDisabled();
         });
     });
 
     describe('Props passed to TemplatedInstance', () => {
         test('should pass isDisabled=true to TemplatedInstance when AI folder extraction is enabled', async () => {
-            render(<Instance {...getBaseProps()} />);
+            render(<Instance {...getBaseProps({ cascadePolicy: { canEdit: true } })} />);
             const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
             await userEvent.click(editButton);
 
+            // Click Enable Cascade Policy
+            const metadataCascadeEnable = await screen.findByTestId('metadata-cascade-enable');
+            const enableCascadePolicy = await within(metadataCascadeEnable).findByRole('switch');
+            await userEvent.click(enableCascadePolicy);
+
             const aiSection = screen.getByTestId('ai-folder-extraction');
             const aiToggle = within(aiSection).getByRole('switch');
 

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from '../../../test-utils/testing-library';
 
 import Instances from '../Instances';
+import { CASCADE_POLICY_TYPE_AI_EXTRACT } from '../constants';
 
 // Templates
 
@@ -254,18 +255,22 @@ describe('features/metadata-editor-editor/Instances', () => {
 
 describe('Instances component - canUseAIFolderExtractionAgentSelector prop', () => {
     test('should pass canUseAIFolderExtractionAgentSelector to child Instance components, showing agent selector', async () => {
-        render(
-            <Instances
-                {...getInstancesBaseProps({
-                    canUseAIFolderExtractionAgentSelector: true,
-                })}
-            />,
-        );
+        const props = getInstancesBaseProps({
+            canUseAIFolderExtractionAgentSelector: true,
+        });
+        props.editors[0].instance.cascadePolicy.cascadePolicyType = CASCADE_POLICY_TYPE_AI_EXTRACT;
+        render(<Instances {...props} />);
 
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
+        const cascadeToggle = screen.getByRole('switch', { name: 'Enable Cascade Policy' });
+        expect(cascadeToggle).toBeChecked();
+
+        const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+        expect(aiToggle).toBeChecked();
+
+        expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
     });
 
     test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is false', async () => {
@@ -280,7 +285,7 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
     });
 
     test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is undefined', async () => {
@@ -291,6 +296,6 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
     });
 });