box-ui-elements 23.3.0-beta.5 → 23.3.0-beta.7

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

@@ -1,6 +1,9 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { InlineNotice, TooltipProvider } from '@box/blueprint-web';
+import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
 import Toggle from '../../components/toggle';
 import { RadioButton, RadioGroup } from '../../components/radio';
 import Link from '../../components/link/Link';
@@ -8,11 +11,25 @@ import IconAlertDefault from '../../icons/general/IconAlertDefault';
 import messages from './messages';
 import './CascadePolicy.scss';
 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 PRICING_LINK = 'https://www.box.com/pricing';
+const agents = [{
+  id: '1',
+  name: 'Basic',
+  isEnterpriseDefault: true
+}, {
+  id: '2',
+  name: 'Enhanced (Gemini 2.5 Pro)',
+  isEnterpriseDefault: false
+}];
 const CascadePolicy = ({
   canEdit,
+  canUseAIFolderExtraction,
   isCascadingEnabled,
   isCascadingOverwritten,
   isCustomMetadata,
+  isAIFolderExtractionEnabled,
+  onAIFolderExtractionToggle,
   onCascadeToggle,
   onCascadeModeChange,
   shouldShowCascadeOptions
@@ -34,7 +51,7 @@ const CascadePolicy = ({
   })), !isCustomMetadata ? /*#__PURE__*/React.createElement("div", {
     className: "cascade-policy-text"
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.applyCascadePolicyText), "\xA0", /*#__PURE__*/React.createElement(Link, {
-    className: "cascade-policy-learnmore-link",
+    className: "cascade-policy-link",
     href: COMMUNITY_LINK,
     target: "_blank"
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cascadePolicyLearnMore))) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.cannotApplyCascadePolicyText)))), shouldShowCascadeOptions && /*#__PURE__*/React.createElement("div", {
@@ -53,7 +70,48 @@ const CascadePolicy = ({
   }), /*#__PURE__*/React.createElement(RadioButton, {
     label: /*#__PURE__*/React.createElement(FormattedMessage, messages.cascadePolicyOverwriteMode),
     value: "overwrite"
-  }))))) : readOnlyState;
+  })))), shouldShowCascadeOptions && canUseAIFolderExtraction && /*#__PURE__*/React.createElement("div", {
+    className: "metadata-cascade-editor",
+    "data-testid": "ai-folder-extraction"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "metadata-cascade-enable"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BoxAiLogo, {
+    className: "metadata-cascade-ai-logo",
+    width: 16,
+    height: 16
+  }), /*#__PURE__*/React.createElement(FormattedMessage, _extends({
+    tagName: "strong"
+  }, messages.enableAIAutofill)), /*#__PURE__*/React.createElement(Toggle, {
+    className: "metadata-cascade-toggle",
+    isOn: isAIFolderExtractionEnabled,
+    label: "",
+    onChange: e => onAIFolderExtractionToggle(e.target.checked)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "cascade-policy-text"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillDescription), "\xA0", /*#__PURE__*/React.createElement(Link, {
+    className: "cascade-policy-link",
+    href: AI_LINK,
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillLearnMore))), /*#__PURE__*/React.createElement("div", {
+    className: "metadata-cascade-ai-agent-selector"
+  }, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(BoxAiAgentSelector, {
+    agents: agents,
+    onErrorAction: () => {},
+    requestState: "success",
+    selectedAgent: agents[0],
+    variant: "sidebar"
+  }))), /*#__PURE__*/React.createElement(InlineNotice, {
+    className: "metadata-cascade-ai-notice",
+    variant: "info"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.aiAutofillNotice, {
+    values: {
+      pricingLink: /*#__PURE__*/React.createElement(Link, {
+        className: "cascade-policy-link",
+        href: PRICING_LINK,
+        target: "_blank"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillPricingDetails))
+    }
+  })))))) : readOnlyState;
 };
 export default CascadePolicy;
 //# sourceMappingURL=CascadePolicy.js.map

package/es/features/metadata-instance-editor/CascadePolicy.js.flow

@@ -2,6 +2,10 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { InlineNotice, TooltipProvider } from '@box/blueprint-web';
+import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
+
 import Toggle from '../../components/toggle';
 import { RadioButton, RadioGroup } from '../../components/radio';
 import Link from '../../components/link/Link';
@@ -10,12 +14,30 @@ import messages from './messages';
 import './CascadePolicy.scss';
 
 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 PRICING_LINK = 'https://www.box.com/pricing';
+
+const agents = [
+    {
+        id: '1',
+        name: 'Basic',
+        isEnterpriseDefault: true,
+    },
+    {
+        id: '2',
+        name: 'Enhanced (Gemini 2.5 Pro)',
+        isEnterpriseDefault: false,
+    },
+];
 
 type Props = {
     canEdit: boolean,
+    canUseAIFolderExtraction: boolean,
+    isAIFolderExtractionEnabled: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
     isCustomMetadata: boolean,
+    onAIFolderExtractionToggle: (value: boolean) => void,
     onCascadeModeChange: (value: boolean) => void,
     onCascadeToggle: (value: boolean) => void,
     shouldShowCascadeOptions: boolean,
@@ -23,9 +45,12 @@ type Props = {
 
 const CascadePolicy = ({
     canEdit,
+    canUseAIFolderExtraction,
     isCascadingEnabled,
     isCascadingOverwritten,
     isCustomMetadata,
+    isAIFolderExtractionEnabled,
+    onAIFolderExtractionToggle,
     onCascadeToggle,
     onCascadeModeChange,
     shouldShowCascadeOptions,
@@ -57,7 +82,7 @@ const CascadePolicy = ({
                         <div className="cascade-policy-text">
                             <FormattedMessage {...messages.applyCascadePolicyText} />
                             &nbsp;
-                            <Link className="cascade-policy-learnmore-link" href={COMMUNITY_LINK} target="_blank">
+                            <Link className="cascade-policy-link" href={COMMUNITY_LINK} target="_blank">
                                 <FormattedMessage {...messages.cascadePolicyLearnMore} />
                             </Link>
                         </div>
@@ -96,6 +121,52 @@ const CascadePolicy = ({
                     </div>
                 </div>
             )}
+            {shouldShowCascadeOptions && canUseAIFolderExtraction && (
+                <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} />
+                            <FormattedMessage tagName="strong" {...messages.enableAIAutofill} />
+                            <Toggle
+                                className="metadata-cascade-toggle"
+                                isOn={isAIFolderExtractionEnabled}
+                                label=""
+                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}
+                            />
+                        </div>
+                        <div className="cascade-policy-text">
+                            <FormattedMessage {...messages.aiAutofillDescription} />
+                            &nbsp;
+                            <Link className="cascade-policy-link" href={AI_LINK} target="_blank">
+                                <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>
+                        <InlineNotice className="metadata-cascade-ai-notice" variant="info">
+                            <FormattedMessage
+                                {...messages.aiAutofillNotice}
+                                values={{
+                                    pricingLink: (
+                                        <Link className="cascade-policy-link" href={PRICING_LINK} target="_blank">
+                                            <FormattedMessage {...messages.aiAutofillPricingDetails} />
+                                        </Link>
+                                    ),
+                                }}
+                            />
+                        </InlineNotice>
+                    </div>
+                </div>
+            )}
         </>
     ) : (
         readOnlyState

package/es/features/metadata-instance-editor/CascadePolicy.js.map

@@ -1 +1 @@
-{"version":3,"file":"CascadePolicy.js","names":["React","FormattedMessage","Toggle","RadioButton","RadioGroup","Link","IconAlertDefault","messages","COMMUNITY_LINK","CascadePolicy","canEdit","isCascadingEnabled","isCascadingOverwritten","isCustomMetadata","onCascadeToggle","onCascadeModeChange","shouldShowCascadeOptions","readOnlyState","createElement","className","metadataCascadePolicyEnabledInfo","Fragment","_extends","tagName","enableCascadePolicy","isOn","label","onChange","e","target","checked","applyCascadePolicyText","href","cascadePolicyLearnMore","cannotApplyCascadePolicyText","cascadePolicyModeQuestion","operationNotImmediate","value","cascadePolicySkipMode","cascadePolicyOverwriteMode"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport Toggle from '../../components/toggle';\nimport { RadioButton, RadioGroup } from '../../components/radio';\nimport Link from '../../components/link/Link';\nimport IconAlertDefault from '../../icons/general/IconAlertDefault';\nimport messages from './messages';\nimport './CascadePolicy.scss';\n\nconst COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';\n\ntype Props = {\n    canEdit: boolean,\n    isCascadingEnabled: boolean,\n    isCascadingOverwritten: boolean,\n    isCustomMetadata: boolean,\n    onCascadeModeChange: (value: boolean) => void,\n    onCascadeToggle: (value: boolean) => void,\n    shouldShowCascadeOptions: boolean,\n};\n\nconst CascadePolicy = ({\n    canEdit,\n    isCascadingEnabled,\n    isCascadingOverwritten,\n    isCustomMetadata,\n    onCascadeToggle,\n    onCascadeModeChange,\n    shouldShowCascadeOptions,\n}: Props) => {\n    const readOnlyState = isCascadingEnabled ? (\n        <div className=\"metadata-cascade-notice\">\n            <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />\n        </div>\n    ) : null;\n\n    return canEdit ? (\n        <>\n            <div className=\"metadata-cascade-editor\">\n                <div className=\"metadata-cascade-enable\">\n                    <div>\n                        <FormattedMessage tagName=\"strong\" {...messages.enableCascadePolicy} />\n                        {!isCustomMetadata && (\n                            <Toggle\n                                className={`metadata-cascade-toggle ${\n                                    isCascadingEnabled ? 'cascade-on' : 'cascade-off'\n                                }`}\n                                isOn={isCascadingEnabled}\n                                label=\"\"\n                                onChange={e => onCascadeToggle(e.target.checked)}\n                            />\n                        )}\n                    </div>\n                    {!isCustomMetadata ? (\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.applyCascadePolicyText} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-learnmore-link\" href={COMMUNITY_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.cascadePolicyLearnMore} />\n                            </Link>\n                        </div>\n                    ) : (\n                        <div>\n                            <FormattedMessage {...messages.cannotApplyCascadePolicyText} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {shouldShowCascadeOptions && (\n                <div className=\"metadata-cascade-editor\">\n                    <div className=\"metadata-cascading-mode\">\n                        <FormattedMessage {...messages.cascadePolicyModeQuestion} />\n\n                        <div className=\"metadata-operation-not-immediate\">\n                            <IconAlertDefault />\n                            <span>\n                                <FormattedMessage {...messages.operationNotImmediate} />\n                            </span>\n                        </div>\n                        <RadioGroup\n                            className=\"metadata-cascading-options\"\n                            onChange={e => onCascadeModeChange(e.target.value === 'overwrite')}\n                            value={isCascadingOverwritten ? 'overwrite' : 'skip'}\n                        >\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicySkipMode} />}\n                                value=\"skip\"\n                            />\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}\n                                value=\"overwrite\"\n                            />\n                        </RadioGroup>\n                    </div>\n                </div>\n            )}\n        </>\n    ) : (\n        readOnlyState\n    );\n};\n\nexport default CascadePolicy;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CascadePolicy.js","names":["React","FormattedMessage","BoxAiAgentSelector","InlineNotice","TooltipProvider","BoxAiLogo","Toggle","RadioButton","RadioGroup","Link","IconAlertDefault","messages","COMMUNITY_LINK","AI_LINK","PRICING_LINK","agents","id","name","isEnterpriseDefault","CascadePolicy","canEdit","canUseAIFolderExtraction","isCascadingEnabled","isCascadingOverwritten","isCustomMetadata","isAIFolderExtractionEnabled","onAIFolderExtractionToggle","onCascadeToggle","onCascadeModeChange","shouldShowCascadeOptions","readOnlyState","createElement","className","metadataCascadePolicyEnabledInfo","Fragment","_extends","tagName","enableCascadePolicy","isOn","label","onChange","e","target","checked","applyCascadePolicyText","href","cascadePolicyLearnMore","cannotApplyCascadePolicyText","cascadePolicyModeQuestion","operationNotImmediate","value","cascadePolicySkipMode","cascadePolicyOverwriteMode","width","height","enableAIAutofill","aiAutofillDescription","aiAutofillLearnMore","onErrorAction","requestState","selectedAgent","variant","aiAutofillNotice","values","pricingLink","aiAutofillPricingDetails"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { BoxAiAgentSelector } from '@box/box-ai-agent-selector';\nimport { InlineNotice, TooltipProvider } from '@box/blueprint-web';\nimport BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';\n\nimport Toggle from '../../components/toggle';\nimport { RadioButton, RadioGroup } from '../../components/radio';\nimport Link from '../../components/link/Link';\nimport IconAlertDefault from '../../icons/general/IconAlertDefault';\nimport messages from './messages';\nimport './CascadePolicy.scss';\n\nconst COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';\nconst AI_LINK = 'https://www.box.com/ai';\nconst PRICING_LINK = 'https://www.box.com/pricing';\n\nconst agents = [\n    {\n        id: '1',\n        name: 'Basic',\n        isEnterpriseDefault: true,\n    },\n    {\n        id: '2',\n        name: 'Enhanced (Gemini 2.5 Pro)',\n        isEnterpriseDefault: false,\n    },\n];\n\ntype Props = {\n    canEdit: boolean,\n    canUseAIFolderExtraction: boolean,\n    isAIFolderExtractionEnabled: boolean,\n    isCascadingEnabled: boolean,\n    isCascadingOverwritten: boolean,\n    isCustomMetadata: boolean,\n    onAIFolderExtractionToggle: (value: boolean) => void,\n    onCascadeModeChange: (value: boolean) => void,\n    onCascadeToggle: (value: boolean) => void,\n    shouldShowCascadeOptions: boolean,\n};\n\nconst CascadePolicy = ({\n    canEdit,\n    canUseAIFolderExtraction,\n    isCascadingEnabled,\n    isCascadingOverwritten,\n    isCustomMetadata,\n    isAIFolderExtractionEnabled,\n    onAIFolderExtractionToggle,\n    onCascadeToggle,\n    onCascadeModeChange,\n    shouldShowCascadeOptions,\n}: Props) => {\n    const readOnlyState = isCascadingEnabled ? (\n        <div className=\"metadata-cascade-notice\">\n            <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />\n        </div>\n    ) : null;\n\n    return canEdit ? (\n        <>\n            <div className=\"metadata-cascade-editor\">\n                <div className=\"metadata-cascade-enable\">\n                    <div>\n                        <FormattedMessage tagName=\"strong\" {...messages.enableCascadePolicy} />\n                        {!isCustomMetadata && (\n                            <Toggle\n                                className={`metadata-cascade-toggle ${\n                                    isCascadingEnabled ? 'cascade-on' : 'cascade-off'\n                                }`}\n                                isOn={isCascadingEnabled}\n                                label=\"\"\n                                onChange={e => onCascadeToggle(e.target.checked)}\n                            />\n                        )}\n                    </div>\n                    {!isCustomMetadata ? (\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.applyCascadePolicyText} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={COMMUNITY_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.cascadePolicyLearnMore} />\n                            </Link>\n                        </div>\n                    ) : (\n                        <div>\n                            <FormattedMessage {...messages.cannotApplyCascadePolicyText} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {shouldShowCascadeOptions && (\n                <div className=\"metadata-cascade-editor\">\n                    <div className=\"metadata-cascading-mode\">\n                        <FormattedMessage {...messages.cascadePolicyModeQuestion} />\n\n                        <div className=\"metadata-operation-not-immediate\">\n                            <IconAlertDefault />\n                            <span>\n                                <FormattedMessage {...messages.operationNotImmediate} />\n                            </span>\n                        </div>\n                        <RadioGroup\n                            className=\"metadata-cascading-options\"\n                            onChange={e => onCascadeModeChange(e.target.value === 'overwrite')}\n                            value={isCascadingOverwritten ? 'overwrite' : 'skip'}\n                        >\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicySkipMode} />}\n                                value=\"skip\"\n                            />\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}\n                                value=\"overwrite\"\n                            />\n                        </RadioGroup>\n                    </div>\n                </div>\n            )}\n            {shouldShowCascadeOptions && canUseAIFolderExtraction && (\n                <div className=\"metadata-cascade-editor\" data-testid=\"ai-folder-extraction\">\n                    <div className=\"metadata-cascade-enable\">\n                        <div>\n                            <BoxAiLogo className=\"metadata-cascade-ai-logo\" width={16} height={16} />\n                            <FormattedMessage tagName=\"strong\" {...messages.enableAIAutofill} />\n                            <Toggle\n                                className=\"metadata-cascade-toggle\"\n                                isOn={isAIFolderExtractionEnabled}\n                                label=\"\"\n                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}\n                            />\n                        </div>\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.aiAutofillDescription} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={AI_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.aiAutofillLearnMore} />\n                            </Link>\n                        </div>\n                        <div className=\"metadata-cascade-ai-agent-selector\">\n                            <TooltipProvider>\n                                <BoxAiAgentSelector\n                                    agents={agents}\n                                    onErrorAction={() => {}}\n                                    requestState=\"success\"\n                                    selectedAgent={agents[0]}\n                                    variant=\"sidebar\"\n                                />\n                            </TooltipProvider>\n                        </div>\n                        <InlineNotice className=\"metadata-cascade-ai-notice\" variant=\"info\">\n                            <FormattedMessage\n                                {...messages.aiAutofillNotice}\n                                values={{\n                                    pricingLink: (\n                                        <Link className=\"cascade-policy-link\" href={PRICING_LINK} target=\"_blank\">\n                                            <FormattedMessage {...messages.aiAutofillPricingDetails} />\n                                        </Link>\n                                    ),\n                                }}\n                            />\n                        </InlineNotice>\n                    </div>\n                </div>\n            )}\n        </>\n    ) : (\n        readOnlyState\n    );\n};\n\nexport default CascadePolicy;\n"],"mappings":"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","ignoreList":[]}

package/es/features/metadata-instance-editor/CascadePolicy.scss

@@ -40,6 +40,16 @@ $cascade-policy-background: #f1e2fd;
 .metadata-cascade-enable {
     margin: 10px 0;
     padding: 14px 15px;
+
+    .metadata-cascade-ai-logo {
+        position: relative;
+        top: 3px;
+        margin-right: 3px;
+    }
+
+    .metadata-cascade-ai-notice {
+        margin-top: 12px;
+    }
 }
 
 .toggle-container.metadata-cascade-toggle {
@@ -52,7 +62,7 @@ $cascade-policy-background: #f1e2fd;
     clear: left;
 }
 
-.cascade-policy-learnmore-link {
+.cascade-policy-link {
     color: $bdl-box-blue;
 }
 
@@ -68,3 +78,7 @@ $cascade-policy-background: #f1e2fd;
         }
     }
 }
+
+.metadata-cascade-ai-agent-selector {
+    margin-top: 4px;
+}

package/es/features/metadata-instance-editor/CascadePolicy.stories.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import CascadePolicy from './CascadePolicy';
+export const withoutAIMetadataExtraction = () => /*#__PURE__*/React.createElement(CascadePolicy, {
+  canEdit: true,
+  isCascadingEnabled: true,
+  onCascadeModeChange: () => {},
+  onCascadeToggle: () => {},
+  shouldShowCascadeOptions: true
+});
+export const withAIMetadataExtraction = () => /*#__PURE__*/React.createElement(CascadePolicy, {
+  canEdit: true,
+  canUseAIFolderExtraction: true,
+  isAIFolderExtractionEnabled: true,
+  isCascadingEnabled: true,
+  onAIFolderExtractionToggle: () => {},
+  onCascadeModeChange: () => {},
+  onCascadeToggle: () => {},
+  shouldShowCascadeOptions: true
+});
+export default {
+  title: 'Features/Metadata Instance Editor/CascadePolicy',
+  component: CascadePolicy
+};
+//# sourceMappingURL=CascadePolicy.stories.js.map

package/es/features/metadata-instance-editor/CascadePolicy.stories.js.flow

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import CascadePolicy from './CascadePolicy';
+
+export const withoutAIMetadataExtraction = () => (
+    <CascadePolicy
+        canEdit
+        isCascadingEnabled
+        onCascadeModeChange={() => {}}
+        onCascadeToggle={() => {}}
+        shouldShowCascadeOptions
+    />
+);
+
+export const withAIMetadataExtraction = () => (
+    <CascadePolicy
+        canEdit
+        canUseAIFolderExtraction
+        isAIFolderExtractionEnabled
+        isCascadingEnabled
+        onAIFolderExtractionToggle={() => {}}
+        onCascadeModeChange={() => {}}
+        onCascadeToggle={() => {}}
+        shouldShowCascadeOptions
+    />
+);
+
+export default {
+    title: 'Features/Metadata Instance Editor/CascadePolicy',
+    component: CascadePolicy,
+};

package/es/features/metadata-instance-editor/CascadePolicy.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CascadePolicy.stories.js","names":["React","CascadePolicy","withoutAIMetadataExtraction","createElement","canEdit","isCascadingEnabled","onCascadeModeChange","onCascadeToggle","shouldShowCascadeOptions","withAIMetadataExtraction","canUseAIFolderExtraction","isAIFolderExtractionEnabled","onAIFolderExtractionToggle","title","component"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.stories.js"],"sourcesContent":["import * as React from 'react';\n\nimport CascadePolicy from './CascadePolicy';\n\nexport const withoutAIMetadataExtraction = () => (\n    <CascadePolicy\n        canEdit\n        isCascadingEnabled\n        onCascadeModeChange={() => {}}\n        onCascadeToggle={() => {}}\n        shouldShowCascadeOptions\n    />\n);\n\nexport const withAIMetadataExtraction = () => (\n    <CascadePolicy\n        canEdit\n        canUseAIFolderExtraction\n        isAIFolderExtractionEnabled\n        isCascadingEnabled\n        onAIFolderExtractionToggle={() => {}}\n        onCascadeModeChange={() => {}}\n        onCascadeToggle={() => {}}\n        shouldShowCascadeOptions\n    />\n);\n\nexport default {\n    title: 'Features/Metadata Instance Editor/CascadePolicy',\n    component: CascadePolicy,\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAOC,aAAa,MAAM,iBAAiB;AAE3C,OAAO,MAAMC,2BAA2B,GAAGA,CAAA,kBACvCF,KAAA,CAAAG,aAAA,CAACF,aAAa;EACVG,OAAO;EACPC,kBAAkB;EAClBC,mBAAmB,EAAEA,CAAA,KAAM,CAAC,CAAE;EAC9BC,eAAe,EAAEA,CAAA,KAAM,CAAC,CAAE;EAC1BC,wBAAwB;AAAA,CAC3B,CACJ;AAED,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,kBACpCT,KAAA,CAAAG,aAAA,CAACF,aAAa;EACVG,OAAO;EACPM,wBAAwB;EACxBC,2BAA2B;EAC3BN,kBAAkB;EAClBO,0BAA0B,EAAEA,CAAA,KAAM,CAAC,CAAE;EACrCN,mBAAmB,EAAEA,CAAA,KAAM,CAAC,CAAE;EAC9BC,eAAe,EAAEA,CAAA,KAAM,CAAC,CAAE;EAC1BC,wBAAwB;AAAA,CAC3B,CACJ;AAED,eAAe;EACXK,KAAK,EAAE,iDAAiD;EACxDC,SAAS,EAAEb;AACf,CAAC","ignoreList":[]}

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

@@ -239,6 +239,11 @@ class Instance extends React.PureComponent {
         isCascadingOverwritten: value
       }, this.setDirty);
     });
+    _defineProperty(this, "onAIFolderExtractionToggle", value => {
+      this.setState({
+        isAIFolderExtractionEnabled: value
+      }, this.setDirty);
+    });
     /**
      * Render the correct delete message to show based on custom metadata and file/folder metadata
      */
@@ -382,15 +387,17 @@ class Instance extends React.PureComponent {
    * @return {Object} - react state
    */
   getState(props) {
+    const isCascadingEnabled = this.isCascadingEnabled(props);
     return {
       data: cloneDeep(props.data),
       errors: {},
+      isAIFolderExtractionEnabled: false,
       isBusy: false,
-      isCascadingEnabled: this.isCascadingEnabled(props),
+      isCascadingEnabled,
       isCascadingOverwritten: false,
       isEditing: false,
       shouldConfirmRemove: false,
-      shouldShowCascadeOptions: false
+      shouldShowCascadeOptions: isCascadingEnabled
     };
   }
 
@@ -538,6 +545,7 @@ class Instance extends React.PureComponent {
   }
   render() {
     const {
+      canUseAIFolderExtraction = false,
       cascadePolicy = {},
       isDirty,
       isCascadingPolicyApplicable,
@@ -551,6 +559,7 @@ class Instance extends React.PureComponent {
       data,
       errors,
       isBusy,
+      isAIFolderExtractionEnabled,
       isCascadingEnabled,
       shouldConfirmRemove,
       shouldShowCascadeOptions,
@@ -590,9 +599,12 @@ class Instance extends React.PureComponent {
       className: "metadata-instance-editor-instance"
     }, isCascadingPolicyApplicable && /*#__PURE__*/React.createElement(CascadePolicy, {
       canEdit: isEditing && !!cascadePolicy.canEdit,
+      canUseAIFolderExtraction: canUseAIFolderExtraction,
+      isAIFolderExtractionEnabled: isAIFolderExtractionEnabled,
       isCascadingEnabled: isCascadingEnabled,
       isCascadingOverwritten: isCascadingOverwritten,
       isCustomMetadata: isProperties,
+      onAIFolderExtractionToggle: this.onAIFolderExtractionToggle,
       onCascadeModeChange: this.onCascadeModeChange,
       onCascadeToggle: this.onCascadeToggle,
       shouldShowCascadeOptions: shouldShowCascadeOptions

package/es/features/metadata-instance-editor/Instance.js.flow

@@ -47,6 +47,7 @@ import './Instance.scss';
 
 type Props = {
     canEdit: boolean,
+    canUseAIFolderExtraction?: boolean,
     cascadePolicy?: MetadataCascadePolicy, // eslint-disable-line
     data: MetadataFields,
     hasError: boolean,
@@ -69,6 +70,7 @@ type Props = {
 type State = {
     data: Object,
     errors: { [string]: React.Node },
+    isAIFolderExtractionEnabled: boolean,
     isBusy: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
@@ -327,21 +329,28 @@ class Instance extends React.PureComponent<Props, State> {
         );
     };
 
+    onAIFolderExtractionToggle = (value: boolean) => {
+        this.setState({ isAIFolderExtractionEnabled: value }, this.setDirty);
+    };
+
     /**
      * Returns the state from props
      *
      * @return {Object} - react state
      */
     getState(props: Props): State {
+        const isCascadingEnabled = this.isCascadingEnabled(props);
+
         return {
             data: cloneDeep(props.data),
             errors: {},
+            isAIFolderExtractionEnabled: false,
             isBusy: false,
-            isCascadingEnabled: this.isCascadingEnabled(props),
+            isCascadingEnabled,
             isCascadingOverwritten: false,
             isEditing: false,
             shouldConfirmRemove: false,
-            shouldShowCascadeOptions: false,
+            shouldShowCascadeOptions: isCascadingEnabled,
         };
     }
 
@@ -579,12 +588,20 @@ class Instance extends React.PureComponent<Props, State> {
     };
 
     render() {
-        const { cascadePolicy = {}, isDirty, isCascadingPolicyApplicable, isOpen, template }: Props = this.props;
+        const {
+            canUseAIFolderExtraction = false,
+            cascadePolicy = {},
+            isDirty,
+            isCascadingPolicyApplicable,
+            isOpen,
+            template,
+        }: Props = this.props;
         const { fields = [] } = template;
         const {
             data,
             errors,
             isBusy,
+            isAIFolderExtractionEnabled,
             isCascadingEnabled,
             shouldConfirmRemove,
             shouldShowCascadeOptions,
@@ -629,9 +646,12 @@ class Instance extends React.PureComponent<Props, State> {
                                     {isCascadingPolicyApplicable && (
                                         <CascadePolicy
                                             canEdit={isEditing && !!cascadePolicy.canEdit}
+                                            canUseAIFolderExtraction={canUseAIFolderExtraction}
+                                            isAIFolderExtractionEnabled={isAIFolderExtractionEnabled}
                                             isCascadingEnabled={isCascadingEnabled}
                                             isCascadingOverwritten={isCascadingOverwritten}
                                             isCustomMetadata={isProperties}
+                                            onAIFolderExtractionToggle={this.onAIFolderExtractionToggle}
                                             onCascadeModeChange={this.onCascadeModeChange}
                                             onCascadeToggle={this.onCascadeToggle}
                                             shouldShowCascadeOptions={shouldShowCascadeOptions}