box-ui-elements 23.4.0-beta.10 → 23.4.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.10",
+    "version": "23.4.0-beta.11",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -125,14 +125,14 @@
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "^12.7.1",
         "@box/blueprint-web-assets": "^4.48.4",
-        "@box/box-ai-agent-selector": "^0.31.0",
+        "@box/box-ai-agent-selector": "^0.41.10",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.104.2",
+        "@box/metadata-editor": "^0.110.1",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^1.6.1",
@@ -297,12 +297,12 @@
     "peerDependencies": {
         "@box/blueprint-web": "^12.7.1",
         "@box/blueprint-web-assets": "^4.48.4",
-        "@box/box-ai-agent-selector": "^0.31.0",
+        "@box/box-ai-agent-selector": "^0.41.10",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/item-icon": "^0.9.83",
-        "@box/metadata-editor": "^0.104.2",
+        "@box/metadata-editor": "^0.110.1",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",

package/src/elements/content-sidebar/MetadataInstanceEditor.tsx

@@ -29,6 +29,7 @@ export interface MetadataInstanceEditorProps {
     setIsUnsavedChangesModalOpen: (isUnsavedChangesModalOpen: boolean) => void;
     taxonomyOptionsFetcher: TaxonomyOptionsFetcher;
     template: MetadataTemplateInstance;
+    isAdvancedExtractAgentEnabled?: boolean;
 }
 
 const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
@@ -48,6 +49,7 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
     setIsUnsavedChangesModalOpen,
     taxonomyOptionsFetcher,
     template,
+    isAdvancedExtractAgentEnabled = false,
 }) => {
     return (
         <MetadataInstanceForm
@@ -68,6 +70,7 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
             selectedTemplateInstance={template}
             setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
             taxonomyOptionsFetcher={taxonomyOptionsFetcher}
+            isAdvancedExtractAgentEnabled={isAdvancedExtractAgentEnabled}
         />
     );
 };

package/src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -114,6 +114,7 @@ function MetadataSidebarRedesign({
     const isBoxAiSuggestionsEnabled: boolean = useFeatureEnabled('metadata.aiSuggestions.enabled');
     const isBetaLanguageEnabled: boolean = useFeatureEnabled('metadata.betaLanguage.enabled');
     const isMetadataMultiLevelTaxonomyFieldEnabled: boolean = useFeatureEnabled('metadata.multilevelTaxonomy.enabled');
+    const isAdvancedExtractAgentEnabled: boolean = useFeatureEnabled('metadata.extractAdvancedAgents.enabled');
     const isDeleteConfirmationModalCheckboxEnabled: boolean = useFeatureEnabled(
         'metadata.deleteConfirmationModalCheckbox.enabled',
     );
@@ -324,11 +325,13 @@ function MetadataSidebarRedesign({
                             setIsUnsavedChangesModalOpen={setIsUnsavedChangesModalOpen}
                             taxonomyOptionsFetcher={taxonomyOptionsFetcher}
                             template={editingTemplate}
+                            isAdvancedExtractAgentEnabled={isAdvancedExtractAgentEnabled}
                         />
                     )}
                     {showList && (
                         <MetadataInstanceList
                             areAiSuggestionsAvailable={areAiSuggestionsAvailable}
+                            isAdvancedExtractAgentEnabled={isAdvancedExtractAgentEnabled}
                             isAiSuggestionsFeatureEnabled={isBoxAiSuggestionsEnabled}
                             isBetaLanguageEnabled={isBetaLanguageEnabled}
                             onEdit={templateInstance => {

package/src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -425,6 +425,30 @@ export const MetadataInstanceEditorAIEnabled: StoryObj<typeof MetadataSidebarRed
     },
 };
 
+export const MetadataInstanceEditorAIEnabledAdvancedExtractAgent: StoryObj<typeof MetadataSidebarRedesign> = {
+    args: {
+        features: {
+            ...mockFeatures,
+            'metadata.aiSuggestions.enabled': true,
+            'metadata.extractAdvancedAgents.enabled': true,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        // Edit one instance
+        const editButton = await canvas.findByRole('button', { name: 'Edit My Template' });
+        await userEvent.click(editButton);
+
+        // Find the SplitButton
+        const splitButton = await canvas.findByRole('button', { name: /Autofill/ });
+        expect(splitButton).toBeVisible();
+
+        await userEvent.hover(splitButton);
+        const dropdownButton = await canvas.findByRole('button', { name: 'See agent options.' });
+        expect(dropdownButton).toBeVisible();
+    },
+};
+
 export const ShowErrorWhenAIAPIIsUnavailable: StoryObj<typeof MetadataSidebarRedesign> = {
     args: {
         features: {

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

@@ -7,6 +7,11 @@ import { screen, render, within } from '../../../test-utils/testing-library';
 import CascadePolicy from '../CascadePolicy';
 
 describe('features/metadata-instance-editor/CascadePolicy', () => {
+    beforeEach(() => {
+        // reset any previous tests that may have set localStorage
+        localStorage.removeItem('aiAgent');
+    });
+
     test('should correctly render cascade policy read only mode', () => {
         const wrapper = shallow(<CascadePolicy id="fakeId" isCascadingEnabled shouldShowCascadeOptions />);
         expect(wrapper).toMatchSnapshot();
@@ -100,12 +105,12 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
                     shouldShowCascadeOptions
                 />,
             );
-            expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+            expect(screen.getByRole('combobox', { name: '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();
+            expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
         });
     });
 

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

@@ -863,7 +863,7 @@ describe('Instance Component - React Testing Library', () => {
             const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
             if (editButton) await userEvent.click(editButton); // Enter edit mode to ensure CascadePolicy options are visible
 
-            expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+            expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
         });
 
         test('should pass isExistingAIExtractionCascadePolicy=true to CascadePolicy if policy is ai_extract', async () => {

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

@@ -265,7 +265,7 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+        expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
     });
 
     test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is false', async () => {
@@ -280,7 +280,7 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
     });
 
     test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is undefined', async () => {
@@ -291,6 +291,6 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
     });
 });

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

@@ -547,7 +547,7 @@ describe('MetadataInstanceEditor - canUseAIFolderExtractionAgentSelector prop',
         const editButton = await screen.findByRole('button', { name: 'Edit Metadata' }, { timeout: 3000 });
         await userEvent.click(editButton);
 
-        expect(screen.getByRole('button', { name: 'Agent Basic' })).toBeInTheDocument();
+        expect(screen.getByRole('combobox', { name: 'Basic' })).toBeInTheDocument();
     });
 
     test('should not show agent selector if canUseAIFolderExtractionAgentSelector is false', async () => {
@@ -562,7 +562,7 @@ describe('MetadataInstanceEditor - canUseAIFolderExtractionAgentSelector prop',
         const editButton = await screen.findByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
     });
 
     test('should not show agent selector if canUseAIFolderExtractionAgentSelector is undefined', async () => {
@@ -573,6 +573,6 @@ describe('MetadataInstanceEditor - canUseAIFolderExtractionAgentSelector prop',
         const editButton = await screen.findByRole('button', { name: 'Edit Metadata' });
         await userEvent.click(editButton);
 
-        expect(screen.queryByRole('button', { name: 'Agent Basic' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('combobox', { name: 'Basic' })).not.toBeInTheDocument();
     });
 });