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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import TextInput from '../../components/text-input';
 import messages from './messages';
 import './TextMetadataField.scss';
@@ -9,11 +9,14 @@ const TextMetadataField = ({
   displayName,
   description,
   error,
-  intl,
+  isDisabled,
   onChange,
   onRemove,
   type = 'text'
 }) => {
+  const {
+    formatMessage
+  } = useIntl();
   let value = '';
   if (typeof dataValue === 'number') {
     value = dataValue;
@@ -25,6 +28,7 @@ const TextMetadataField = ({
     description: description,
     error: error,
     hideOptionalLabel: true,
+    disabled: isDisabled,
     label: displayName,
     name: dataKey,
     onChange: event => {
@@ -35,11 +39,10 @@ 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;
 //# sourceMappingURL=TextMetadataField.js.map

package/es/features/metadata-instance-fields/TextMetadataField.js.flow

@@ -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/es/features/metadata-instance-fields/TextMetadataField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextMetadataField.js","names":["React","injectIntl","TextInput","messages","TextMetadataField","dataKey","dataValue","displayName","description","error","intl","onChange","onRemove","type","value","createElement","className","hideOptionalLabel","label","name","event","currentTarget","placeholder","formatMessage","metadataFieldSetValue","TextMetadataFieldBase"],"sources":["../../../src/features/metadata-instance-fields/TextMetadataField.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\n\nimport TextInput from '../../components/text-input';\n\nimport messages from './messages';\nimport type { MetadataFieldValue } from '../../common/types/metadata';\nimport './TextMetadataField.scss';\n\ntype Props = {\n    dataKey: string,\n    dataValue?: MetadataFieldValue,\n    description?: string,\n    displayName: string,\n    error?: React.Node,\n    intl: any,\n    onChange: (key: string, value: MetadataFieldValue) => void,\n    onRemove: (key: string) => void,\n    type?: string,\n};\n\nconst TextMetadataField = ({\n    dataKey,\n    dataValue,\n    displayName,\n    description,\n    error,\n    intl,\n    onChange,\n    onRemove,\n    type = 'text',\n}: Props) => {\n    let value = '';\n\n    if (typeof dataValue === 'number') {\n        value = dataValue;\n    } else if (dataValue) {\n        value = dataValue;\n    }\n\n    return (\n        <TextInput\n            className=\"bdl-TextMetadataField\"\n            description={description}\n            error={error}\n            hideOptionalLabel\n            label={displayName}\n            name={dataKey}\n            onChange={(event: SyntheticKeyboardEvent<HTMLInputElement>) => {\n                const currentTarget = (event.currentTarget: HTMLInputElement);\n                if (currentTarget.value) {\n                    onChange(dataKey, currentTarget.value);\n                } else {\n                    onRemove(dataKey);\n                }\n            }}\n            placeholder={intl.formatMessage(messages.metadataFieldSetValue)}\n            type={type}\n            value={value}\n        />\n    );\n};\n\nexport { TextMetadataField as TextMetadataFieldBase };\nexport default injectIntl(TextMetadataField);\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,YAAY;AAEvC,OAAOC,SAAS,MAAM,6BAA6B;AAEnD,OAAOC,QAAQ,MAAM,YAAY;AAEjC,OAAO,0BAA0B;AAcjC,MAAMC,iBAAiB,GAAGA,CAAC;EACvBC,OAAO;EACPC,SAAS;EACTC,WAAW;EACXC,WAAW;EACXC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI,GAAG;AACJ,CAAC,KAAK;EACT,IAAIC,KAAK,GAAG,EAAE;EAEd,IAAI,OAAOR,SAAS,KAAK,QAAQ,EAAE;IAC/BQ,KAAK,GAAGR,SAAS;EACrB,CAAC,MAAM,IAAIA,SAAS,EAAE;IAClBQ,KAAK,GAAGR,SAAS;EACrB;EAEA,oBACIN,KAAA,CAAAe,aAAA,CAACb,SAAS;IACNc,SAAS,EAAC,uBAAuB;IACjCR,WAAW,EAAEA,WAAY;IACzBC,KAAK,EAAEA,KAAM;IACbQ,iBAAiB;IACjBC,KAAK,EAAEX,WAAY;IACnBY,IAAI,EAAEd,OAAQ;IACdM,QAAQ,EAAGS,KAA+C,IAAK;MAC3D,MAAMC,aAAa,GAAID,KAAK,CAACC,aAAgC;MAC7D,IAAIA,aAAa,CAACP,KAAK,EAAE;QACrBH,QAAQ,CAACN,OAAO,EAAEgB,aAAa,CAACP,KAAK,CAAC;MAC1C,CAAC,MAAM;QACHF,QAAQ,CAACP,OAAO,CAAC;MACrB;IACJ,CAAE;IACFiB,WAAW,EAAEZ,IAAI,CAACa,aAAa,CAACpB,QAAQ,CAACqB,qBAAqB,CAAE;IAChEX,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA;EAAM,CAChB,CAAC;AAEV,CAAC;AAED,SAASV,iBAAiB,IAAIqB,qBAAqB;AACnD,eAAexB,UAAU,CAACG,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"file":"TextMetadataField.js","names":["React","useIntl","TextInput","messages","TextMetadataField","dataKey","dataValue","displayName","description","error","isDisabled","onChange","onRemove","type","formatMessage","value","createElement","className","hideOptionalLabel","disabled","label","name","event","currentTarget","placeholder","metadataFieldSetValue"],"sources":["../../../src/features/metadata-instance-fields/TextMetadataField.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { useIntl } from 'react-intl';\n\nimport TextInput from '../../components/text-input';\n\nimport messages from './messages';\nimport type { MetadataFieldValue } from '../../common/types/metadata';\nimport './TextMetadataField.scss';\n\ntype Props = {\n    dataKey: string,\n    dataValue?: MetadataFieldValue,\n    description?: string,\n    displayName: string,\n    error?: React.Node,\n    isDisabled?: boolean,\n    onChange: (key: string, value: MetadataFieldValue) => void,\n    onRemove: (key: string) => void,\n    type?: string,\n};\n\nconst TextMetadataField = ({\n    dataKey,\n    dataValue,\n    displayName,\n    description,\n    error,\n    isDisabled,\n    onChange,\n    onRemove,\n    type = 'text',\n}: Props) => {\n    const { formatMessage } = useIntl();\n\n    let value = '';\n\n    if (typeof dataValue === 'number') {\n        value = dataValue;\n    } else if (dataValue) {\n        value = dataValue;\n    }\n\n    return (\n        <TextInput\n            className=\"bdl-TextMetadataField\"\n            description={description}\n            error={error}\n            hideOptionalLabel\n            disabled={isDisabled}\n            label={displayName}\n            name={dataKey}\n            onChange={(event: SyntheticKeyboardEvent<HTMLInputElement>) => {\n                const currentTarget = (event.currentTarget: HTMLInputElement);\n                if (currentTarget.value) {\n                    onChange(dataKey, currentTarget.value);\n                } else {\n                    onRemove(dataKey);\n                }\n            }}\n            placeholder={formatMessage(messages.metadataFieldSetValue)}\n            type={type}\n            value={value}\n        />\n    );\n};\n\nexport default TextMetadataField;\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAQ,YAAY;AAEpC,OAAOC,SAAS,MAAM,6BAA6B;AAEnD,OAAOC,QAAQ,MAAM,YAAY;AAEjC,OAAO,0BAA0B;AAcjC,MAAMC,iBAAiB,GAAGA,CAAC;EACvBC,OAAO;EACPC,SAAS;EACTC,WAAW;EACXC,WAAW;EACXC,KAAK;EACLC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,IAAI,GAAG;AACJ,CAAC,KAAK;EACT,MAAM;IAAEC;EAAc,CAAC,GAAGb,OAAO,CAAC,CAAC;EAEnC,IAAIc,KAAK,GAAG,EAAE;EAEd,IAAI,OAAOT,SAAS,KAAK,QAAQ,EAAE;IAC/BS,KAAK,GAAGT,SAAS;EACrB,CAAC,MAAM,IAAIA,SAAS,EAAE;IAClBS,KAAK,GAAGT,SAAS;EACrB;EAEA,oBACIN,KAAA,CAAAgB,aAAA,CAACd,SAAS;IACNe,SAAS,EAAC,uBAAuB;IACjCT,WAAW,EAAEA,WAAY;IACzBC,KAAK,EAAEA,KAAM;IACbS,iBAAiB;IACjBC,QAAQ,EAAET,UAAW;IACrBU,KAAK,EAAEb,WAAY;IACnBc,IAAI,EAAEhB,OAAQ;IACdM,QAAQ,EAAGW,KAA+C,IAAK;MAC3D,MAAMC,aAAa,GAAID,KAAK,CAACC,aAAgC;MAC7D,IAAIA,aAAa,CAACR,KAAK,EAAE;QACrBJ,QAAQ,CAACN,OAAO,EAAEkB,aAAa,CAACR,KAAK,CAAC;MAC1C,CAAC,MAAM;QACHH,QAAQ,CAACP,OAAO,CAAC;MACrB;IACJ,CAAE;IACFmB,WAAW,EAAEV,aAAa,CAACX,QAAQ,CAACsB,qBAAqB,CAAE;IAC3DZ,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA;EAAM,CAChB,CAAC;AAEV,CAAC;AAED,eAAeX,iBAAiB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.1",
+    "version": "23.4.0-beta.2",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/common/types/metadata.js

@@ -90,6 +90,7 @@ type MetadataType = {
 type MetadataCascadePolicy = {
     canEdit?: boolean,
     id?: string,
+    cascadePolicyType?: string,
 };
 
 type MetadataCascadingPolicyData = {

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