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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.11",
+    "version": "23.4.0-beta.13",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -124,7 +124,7 @@
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "^12.7.1",
-        "@box/blueprint-web-assets": "^4.48.4",
+        "@box/blueprint-web-assets": "^4.53.0",
         "@box/box-ai-agent-selector": "^0.41.10",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": "^34.2.0",
@@ -132,7 +132,7 @@
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^0.9.83",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^0.110.1",
+        "@box/metadata-editor": "^0.112.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^1.6.1",
@@ -296,13 +296,13 @@
     },
     "peerDependencies": {
         "@box/blueprint-web": "^12.7.1",
-        "@box/blueprint-web-assets": "^4.48.4",
+        "@box/blueprint-web-assets": "^4.53.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.110.1",
+        "@box/metadata-editor": "^0.112.0",
         "@box/react-virtualized": "9.22.3-rc-box.9",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",

package/src/api/schemas/AiAgentReference.js

@@ -0,0 +1,15 @@
+/**
+ * @flow
+ * @author Box
+ */
+
+export type AiAgentTypeField = 'ai_agent_id';
+
+export interface AiAgentReference {
+    /**
+     * AI Agent Reference to pass custom AI Agent ID to requests.
+     * See https://developer.box.com/reference/resources/ai-agent-reference/
+     */
+    +type: AiAgentTypeField;
+    +id: string;
+}

package/src/api/schemas/AiExtractStructured.js

@@ -4,6 +4,7 @@
  */
 
 import { AiAgentExtractStructured } from './AiAgentExtractStructured';
+import { AiAgentReference } from './AiAgentReference';
 import { AiItemBase } from './AiItemBase';
 
 export type AiExtractStructuredMetadataTemplateTypeField = 'metadata_template';
@@ -80,5 +81,10 @@ export interface AiExtractStructured {
      * The JSON blob that contains overrides for the agent config.
      */
     +agent_config?: string;
-    +ai_agent?: AiAgentExtractStructured;
+    /**
+     * * AI agent definition to use for extraction.
+     * – `AiAgentExtractStructured`: customise Basic-Text / Long-Text agents
+     * – `AiAgentReference`        : reference a custom AI-Agent by ID
+     */
+    +ai_agent?: AiAgentExtractStructured | AiAgentReference;
 }

package/src/api/uploads/FolderUploadNode.js

@@ -11,6 +11,8 @@ import {
     STATUS_ERROR,
     ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED,
     ERROR_CODE_ITEM_NAME_IN_USE,
+    DEFAULT_RETRY_DELAY_MS,
+    MS_IN_S,
 } from '../../constants';
 import type {
     UploadFileWithAPIOptions,
@@ -18,6 +20,10 @@ import type {
     FolderUploadItem,
     DirectoryReader,
 } from '../../common/types/upload';
+import sleep from '../../utils/sleep';
+
+const CHILD_FOLDER_UPLOAD_CONCURRENCY = 3;
+const MAX_RETRIES = 3;
 
 class FolderUploadNode {
     addFolderToUploadQueue: Function;
@@ -93,11 +99,30 @@ class FolderUploadNode {
      * @returns {Promise}
      */
     uploadChildFolders = async (errorCallback: Function) => {
+        // Gets FolderUploadNode values from this.folders key value pairs object
         // $FlowFixMe
         const folders: Array<FolderUploadNode> = Object.values(this.folders);
-        const promises = folders.map(folder => folder.upload(this.folderId, errorCallback));
 
-        await Promise.all(promises);
+        // Worker function: picks the next folder from the array and uploads until no more folders are available
+        const worker = async () => {
+            while (folders.length > 0) {
+                const folder = folders.pop();
+                if (folder) {
+                    // Await is needed to help ensure rate limit is respected
+                    // eslint-disable-next-line no-await-in-loop
+                    await folder.upload(this.folderId, errorCallback);
+                }
+            }
+        };
+
+        // Spawns up to CHILD_FOLDER_UPLOAD_CONCURRENCY workers that upload folders in parallel until folders array is empty
+        const workers = [];
+        for (let i = 0; i < CHILD_FOLDER_UPLOAD_CONCURRENCY && i < folders.length; i += 1) {
+            workers.push(worker());
+        }
+
+        // Waits for all workers to finish
+        await Promise.all(workers);
     };
 
     /**
@@ -108,7 +133,7 @@ class FolderUploadNode {
      * @param {boolean} isRoot
      * @returns {Promise}
      */
-    createAndUploadFolder = async (errorCallback: Function, isRoot: boolean) => {
+    createAndUploadFolder = async (errorCallback: Function, isRoot: boolean, retryCount: number = 0) => {
         await this.buildCurrentFolderFromEntry();
 
         let errorEncountered = false;
@@ -117,9 +142,23 @@ class FolderUploadNode {
             const data = await this.createFolder();
             this.folderId = data.id;
         } catch (error) {
-            // @TODO: Handle 429
             if (error.code === ERROR_CODE_ITEM_NAME_IN_USE) {
                 this.folderId = error.context_info.conflicts[0].id;
+            } else if (error.status === 429 && retryCount < MAX_RETRIES) {
+                // Set a default exponential backoff delay with a random jitter(0–999 ms) to avoid all requests being sent at once
+                // This will be overridden if the Retry-After header is present in the response
+                let retryAfterMs = DEFAULT_RETRY_DELAY_MS * 2 ** retryCount + Math.floor(Math.random() * 1000);
+                if (error.headers) {
+                    const retryAfterHeaderSec = parseInt(
+                        error.headers['retry-after'] || error.headers.get('Retry-After'),
+                        10,
+                    );
+                    if (!Number.isNaN(retryAfterHeaderSec)) {
+                        retryAfterMs = retryAfterHeaderSec * MS_IN_S;
+                    }
+                }
+                await sleep(retryAfterMs);
+                return this.createAndUploadFolder(errorCallback, isRoot, retryCount + 1);
             } else if (isRoot) {
                 errorCallback(error);
             } else {
@@ -135,7 +174,7 @@ class FolderUploadNode {
 
         // The root folder has already been added to the upload queue in ContentUploader
         if (isRoot) {
-            return;
+            return undefined;
         }
 
         const folderObject: FolderUploadItem = {
@@ -153,6 +192,7 @@ class FolderUploadNode {
         }
 
         this.addFolderToUploadQueue(folderObject);
+        return undefined;
     };
 
     /**

package/src/api/uploads/__tests__/FolderUploadNode.test.js

@@ -1,6 +1,7 @@
 import noop from 'lodash/noop';
 import FolderUploadNode from '../FolderUploadNode';
 import FolderAPI from '../../Folder';
+import sleep from '../../../utils/sleep';
 import {
     ERROR_CODE_ITEM_NAME_IN_USE,
     STATUS_COMPLETE,
@@ -12,6 +13,7 @@ jest.mock('../../../utils/uploads', () => ({
     ...jest.requireActual('../../../utils/uploads'),
     getFileFromEntry: jest.fn(entry => entry),
 }));
+jest.mock('../../../utils/sleep', () => jest.fn(() => Promise.resolve()));
 
 let folderUploadNodeInstance;
 let folderCreateMock;
@@ -30,6 +32,10 @@ describe('api/uploads/FolderUploadNode', () => {
         }));
     });
 
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
     describe('upload()', () => {
         test('should call createAndUploadFolder(), addFilesToUploadQueue() and uploadChildFolders()', async () => {
             const errorCallback = () => 'errorCallback';
@@ -182,6 +188,49 @@ describe('api/uploads/FolderUploadNode', () => {
 
             expect(folderUploadNodeInstance.addFolderToUploadQueue).not.toHaveBeenCalled();
         });
+
+        test('should retry on 429 with default delay', async () => {
+            const error = { status: 429 };
+            const success = { id: '123' };
+            const createFolder = jest.fn().mockRejectedValueOnce(error).mockResolvedValueOnce(success);
+            folderUploadNodeInstance.createFolder = createFolder;
+            folderUploadNodeInstance.addFolderToUploadQueue = jest.fn();
+
+            await folderUploadNodeInstance.createAndUploadFolder(jest.fn(), false, 0);
+
+            expect(createFolder).toHaveBeenCalledTimes(2);
+            expect(folderUploadNodeInstance.folderId).toBe('123');
+        });
+
+        test.each`
+            headersMock                                                  | description
+            ${{ 'retry-after': '2' }}                                    | ${'lower case plain object'}
+            ${{ get: key => (key === 'Retry-After' ? '2' : undefined) }} | ${'capitalized map object'}
+        `('should handle $description headers', async ({ headersMock }) => {
+            const error = { status: 429, headers: headersMock };
+            const success = { id: '123' };
+            const createFolder = jest.fn().mockRejectedValueOnce(error).mockResolvedValueOnce(success);
+            folderUploadNodeInstance.createFolder = createFolder;
+            folderUploadNodeInstance.addFolderToUploadQueue = jest.fn();
+
+            await folderUploadNodeInstance.createAndUploadFolder(jest.fn(), false, 0);
+
+            expect(sleep).toHaveBeenCalledWith(2000);
+            expect(createFolder).toHaveBeenCalledTimes(2);
+            expect(folderUploadNodeInstance.folderId).toBe('123');
+        });
+
+        test('should stop retrying after max retries', async () => {
+            const error = { status: 429 };
+            const createFolder = jest.fn().mockRejectedValue(error);
+            folderUploadNodeInstance.createFolder = createFolder;
+            folderUploadNodeInstance.addFolderToUploadQueue = jest.fn();
+
+            await folderUploadNodeInstance.createAndUploadFolder(jest.fn(), false, 3);
+
+            expect(createFolder).toHaveBeenCalledTimes(1);
+            expect(folderUploadNodeInstance.folderId).toBeUndefined();
+        });
     });
 
     describe('getFormattedFiles()', () => {

package/src/elements/content-sidebar/__tests__/useSidebarMetadataFetcher.test.tsx

@@ -36,6 +36,7 @@ const mockPreconditionFailedError = {
 const mockFile = {
     id: '123',
     permissions: { [FIELD_PERMISSIONS_CAN_UPLOAD]: true },
+    type: 'file',
 };
 
 const mockTemplates = [
@@ -423,5 +424,62 @@ describe('useSidebarMetadataFetcher', () => {
                 }),
             );
         });
+
+        test('should call extractStructured with custom AI agent ID', async () => {
+            const { result } = setupHook();
+            const agentId = 'custom-agent-123';
+
+            await result.current.extractSuggestions('templateKey', 'global', agentId);
+
+            expect(mockAPI.extractStructured).toHaveBeenCalledWith({
+                items: [{ id: mockFile.id, type: mockFile.type }],
+                metadata_template: { template_key: 'templateKey', scope: 'global', type: 'metadata_template' },
+                ai_agent: { type: 'ai_agent_id', id: agentId },
+            });
+        });
+
+        test('should not call extractStructured with custom AI agent ID', async () => {
+            const { result } = setupHook();
+
+            await result.current.extractSuggestions('templateKey', 'global');
+
+            // Assert that ai_agent is NOT present
+            expect(mockAPI.extractStructured).toHaveBeenCalledWith(
+                expect.not.objectContaining({
+                    ai_agent: expect.anything(),
+                }),
+            );
+            // Also verify what IS present
+            expect(mockAPI.extractStructured).toHaveBeenCalledWith({
+                items: [{ id: mockFile.id, type: mockFile.type }],
+                metadata_template: { template_key: 'templateKey', scope: 'global', type: 'metadata_template' },
+            });
+        });
+
+        test('should handle undefined agentIDs', async () => {
+            const { result } = setupHook();
+
+            await result.current.extractSuggestions('templateKey', 'global', undefined);
+
+            // Assert that ai_agent is NOT present
+            expect(mockAPI.extractStructured).toHaveBeenCalledWith(
+                expect.not.objectContaining({
+                    ai_agent: expect.anything(),
+                }),
+            );
+            // Also verify what IS present
+            expect(mockAPI.extractStructured).toHaveBeenCalledWith({
+                items: [{ id: mockFile.id, type: mockFile.type }],
+                metadata_template: { template_key: 'templateKey', scope: 'global', type: 'metadata_template' },
+            });
+            mockAPI.extractStructured.mockClear();
+
+            await result.current.extractSuggestions('templateKey', 'global', '');
+            expect(mockAPI.extractStructured).toHaveBeenCalledWith(
+                expect.not.objectContaining({
+                    ai_agent: expect.anything(),
+                }),
+            );
+        });
     });
 });

package/src/elements/content-sidebar/hooks/useSidebarMetadataFetcher.ts

@@ -29,6 +29,7 @@ import messages from '../../common/messages';
 
 import { type BoxItem } from '../../../common/types/core';
 import { type ErrorContextProps, type ExternalProps, type SuccessContextProps } from '../MetadataSidebarRedesign';
+import { type AiExtractStructured } from '../../../api/schemas/AiExtractStructured';
 
 export enum STATUS {
     IDLE = 'idle',
@@ -45,7 +46,7 @@ interface DataFetcher {
         | ERROR_CODE_METADATA_PRECONDITION_FAILED
         | ERROR_CODE_UNKNOWN
         | null;
-    extractSuggestions: (templateKey: string, scope: string) => Promise<MetadataTemplateField[]>;
+    extractSuggestions: (templateKey: string, scope: string, agentId?: string) => Promise<MetadataTemplateField[]>;
     file: BoxItem | null;
     handleCreateMetadataInstance: (
         templateInstance: MetadataTemplateInstance,
@@ -214,16 +215,19 @@ function useSidebarMetadataFetcher(
 
     const [, setError] = React.useState();
     const extractSuggestions = React.useCallback(
-        async (templateKey: string, scope: string): Promise<MetadataTemplateField[]> => {
+        async (templateKey: string, scope: string, agentId?: string): Promise<MetadataTemplateField[]> => {
             const aiAPI = api.getIntelligenceAPI();
             setExtractErrorCode(null);
-
             let answer = null;
+            const customAiAgent = agentId ? { ai_agent: { type: 'ai_agent_id', id: agentId } } : {};
+            const requestBody: AiExtractStructured = {
+                items: [{ id: file.id, type: file.type }],
+                metadata_template: { template_key: templateKey, scope, type: 'metadata_template' },
+                ...customAiAgent,
+            };
+
             try {
-                answer = (await aiAPI.extractStructured({
-                    items: [{ id: file.id, type: file.type }],
-                    metadata_template: { template_key: templateKey, scope, type: 'metadata_template' },
-                })) as Record<string, MetadataFieldValue>;
+                answer = (await aiAPI.extractStructured(requestBody)) as Record<string, MetadataFieldValue>;
             } catch (error) {
                 // Axios makes the status code nested under the response object
                 if (error.response?.status === 408) {

package/src/features/metadata-instance-fields/MetadataField.js

@@ -21,6 +21,7 @@ import {
     FIELD_TYPE_STRING,
     FIELD_TYPE_DATE,
     FIELD_TYPE_MULTISELECT,
+    FIELD_TYPE_TAXONOMY,
 } from './constants';
 
 type Props = {
@@ -160,6 +161,19 @@ const MetadataField = ({
                 />
             );
 
+        // The taxonomy field is a valid field type which,
+        // although not yet supported here, should not trigger an error message.
+        // For this reason, we are currently setting it to read-only.
+        case FIELD_TYPE_TAXONOMY:
+            return (
+                <ReadOnlyMetadataField
+                    dataValue={dataValue}
+                    description={description}
+                    displayName={displayName}
+                    type={type}
+                />
+            );
+
         default:
             return (
                 <InlineError title={type}>

package/src/features/metadata-instance-fields/__tests__/MetadataField.test.js

@@ -33,6 +33,12 @@ describe('features/metadata-instance-editor/fields/MetadataField', () => {
         );
         expect(wrapper).toMatchSnapshot();
     });
+    test('should correctly render a taxonomy field - for the time being, in read-only mode', () => {
+        const wrapper = shallow(
+            <MetadataField canEdit dataValue="value" onChange={onChange} onRemove={onRemove} type="taxonomy" />,
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
     test('should correctly render a float field', () => {
         const wrapper = shallow(
             <MetadataField canEdit dataValue="value" onChange={onChange} onRemove={onRemove} type="float" />,

package/src/features/metadata-instance-fields/__tests__/__snapshots__/MetadataField.test.js.snap

@@ -37,6 +37,13 @@ exports[`features/metadata-instance-editor/fields/MetadataField should correctly
 />
 `;
 
+exports[`features/metadata-instance-editor/fields/MetadataField should correctly render a taxonomy field - for the time being, in read-only mode 1`] = `
+<ReadOnlyMetadataField
+  dataValue="value"
+  type="taxonomy"
+/>
+`;
+
 exports[`features/metadata-instance-editor/fields/MetadataField should correctly render a text field 1`] = `
 <TextMetadataField
   dataValue="value"

package/src/utils/sleep.js

@@ -0,0 +1,2 @@
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+export default sleep;