box-ui-elements 23.4.0-beta.37 → 23.4.0-beta.38

package/es/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.d.ts

@@ -2,6 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ContentExplorer from '../../ContentExplorer';
 type Story = StoryObj<typeof ContentExplorer>;
 export declare const metadataView: Story;
-export declare const withNewMetadataView: Story;
+export declare const metadataViewV2: Story;
 declare const meta: Meta<typeof ContentExplorer>;
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "23.4.0-beta.37",
+    "version": "23.4.0-beta.38",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -130,7 +130,7 @@
         "@babel/types": "^7.24.7",
         "@box/blueprint-web": "12.43.0",
         "@box/blueprint-web-assets": "4.61.5",
-        "@box/box-ai-agent-selector": "^0.48.5",
+        "@box/box-ai-agent-selector": "^0.52.0",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/box-item-type-selector": "^0.61.12",
         "@box/cldr-data": "^34.2.0",
@@ -299,7 +299,7 @@
     "peerDependencies": {
         "@box/blueprint-web": "12.43.0",
         "@box/blueprint-web-assets": "4.61.5",
-        "@box/box-ai-agent-selector": "^0.48.5",
+        "@box/box-ai-agent-selector": "^0.52.0",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/box-item-type-selector": "^0.61.12",
         "@box/cldr-data": ">=34.2.0",

package/src/common/types/metadata.js

@@ -87,14 +87,15 @@ type MetadataType = {
     global?: MetadataSkillsTemplate,
 };
 
+type MetadataCascadePolicyConfiguration = {
+    agent: string,
+};
+
 type MetadataCascadePolicy = {
     canEdit?: boolean,
     id?: string,
     cascadePolicyType?: string,
-};
-
-type MetadataCascadePolicyConfiguration = {
-    agent: string,
+    cascadePolicyConfiguration?: MetadataCascadePolicyConfiguration,
 };
 
 type MetadataCascadingPolicyData = {

package/src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

@@ -5,45 +5,61 @@ import ContentExplorer from '../../ContentExplorer';
 import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 import { mockMetadata, mockSchema } from '../../../common/__mocks__/mockMetadata';
 
-const EID = '0';
-const templateName = 'templateName';
-const metadataSource = `enterprise_${EID}.${templateName}`;
-const metadataSourceFieldName = `metadata.${metadataSource}`;
+// The intent behind relying on mockMetadata is to allow a developer to paste in their own metadata template schema for use with live API calls.
+const { scope: templateScope, templateKey } = mockSchema;
 
-const metadataQuery = {
-    from: metadataSource,
-
-    // // Filter items in the folder by existing metadata key
-    // query: 'key = :arg1',
-    //
-    // // Display items with value
-    // query_params: { arg1: 'value' },
+const metadataScopeAndKey = `${templateScope}.${templateKey}`;
+const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
 
-    ancestor_folder_id: '313259567207',
+// This is the body of the metadata query API call.
+// https://developer.box.com/guides/metadata/queries/syntax/
+const metadataQuery = {
+    from: metadataScopeAndKey,
+    ancestor_folder_id: '0',
+    sort_by: [
+        {
+            field_key: `${metadataFieldNamePrefix}.${mockSchema.fields[0].key}`, // Default to sorting by the first field in the schema
+            direction: 'asc',
+        },
+    ],
     fields: [
-        `${metadataSourceFieldName}.name`,
-        `${metadataSourceFieldName}.industry`,
-        `${metadataSourceFieldName}.last_contacted_at`,
-        `${metadataSourceFieldName}.role`,
+        // Default to returning all fields in the metadata template schema, and name as a standalone (non-metadata) field
+        ...mockSchema.fields.map(field => `${metadataFieldNamePrefix}.${field.key}`),
+        'name',
     ],
 };
 
+// Used for metadata view v1
 const fieldsToShow = [
-    { key: `${metadataSourceFieldName}.name`, canEdit: false, displayName: 'Alias' },
-    { key: `${metadataSourceFieldName}.industry`, canEdit: true },
-    { key: `${metadataSourceFieldName}.last_contacted_at`, canEdit: true },
-    { key: `${metadataSourceFieldName}.role`, canEdit: true },
+    { key: `${metadataFieldNamePrefix}.name`, canEdit: false, displayName: 'Alias' },
+    { key: `${metadataFieldNamePrefix}.industry`, canEdit: true },
+    { key: `${metadataFieldNamePrefix}.last_contacted_at`, canEdit: true },
+    { key: `${metadataFieldNamePrefix}.role`, canEdit: true },
+];
+
+// Used for metadata view v2
+const columns = [
+    {
+        // Always include the name column
+        textValue: 'Name',
+        id: 'name',
+        type: 'string',
+        allowSorting: true,
+        minWidth: 150,
+        maxWidth: 150,
+    },
+    ...mockSchema.fields.map(field => ({
+        textValue: field.displayName,
+        id: `${metadataFieldNamePrefix}.${field.key}`,
+        type: field.type,
+        allowSorting: true,
+        minWidth: 150,
+        maxWidth: 150,
+    })),
 ];
 
-const columns = mockSchema.fields.map(field => ({
-    textValue: field.displayName,
-    id: `${metadataSourceFieldName}.${field.key}`,
-    type: field.type,
-    allowSorting: true,
-    minWidth: 150,
-    maxWidth: 150,
-}));
-const defaultView = 'metadata'; // Required prop to paint the metadata view. If not provided, you'll get regular folder view.
+// Switches ContentExplorer to use Metadata View over standard, folder-based view.
+const defaultView = 'metadata';
 
 type Story = StoryObj<typeof ContentExplorer>;
 
@@ -55,7 +71,7 @@ export const metadataView: Story = {
     },
 };
 
-export const withNewMetadataView: Story = {
+export const metadataViewV2: Story = {
     args: {
         metadataViewProps: {
             columns,

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

@@ -18,7 +18,8 @@ import Link from '../../components/link/Link';
 import IconAlertDefault from '../../icons/general/IconAlertDefault';
 import messages from './messages';
 import './CascadePolicy.scss';
-import { STANDARD_AGENT_ID, ENHANCED_AGENT_ID } from './constants';
+import { STANDARD_AGENT_ID, ENHANCED_AGENT_ID, ENHANCED_AGENT_CONFIGURATION } from './constants';
+import type { MetadataCascadePolicyConfiguration } from '../../common/types/metadata';
 
 const COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';
 const AI_LINK = 'https://www.box.com/ai';
@@ -27,6 +28,7 @@ type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
     canUseAIFolderExtractionAgentSelector: boolean,
+    cascadePolicyConfiguration?: MetadataCascadePolicyConfiguration,
     isAIFolderExtractionEnabled: boolean,
     isCascadingEnabled: boolean,
     isCascadingOverwritten: boolean,
@@ -43,6 +45,7 @@ const CascadePolicy = ({
     canEdit,
     canUseAIFolderExtraction,
     canUseAIFolderExtractionAgentSelector,
+    cascadePolicyConfiguration,
     isCascadingEnabled,
     isCascadingOverwritten,
     isCustomMetadata,
@@ -62,6 +65,8 @@ const CascadePolicy = ({
         </div>
     ) : null;
 
+    const isEnhancedAgentSelected = cascadePolicyConfiguration?.agent === ENHANCED_AGENT_CONFIGURATION;
+
     const agents = React.useMemo(
         () => [
             {
@@ -74,9 +79,10 @@ const CascadePolicy = ({
                 name: formatMessage(messages.enhancedAgentName),
                 isEnterpriseDefault: false,
                 customIcon: BoxAiAdvancedColor,
+                isSelected: isEnhancedAgentSelected,
             },
         ],
-        [formatMessage],
+        [formatMessage, isEnhancedAgentSelected],
     );
 
     // BoxAiAgentSelectorWithApiContainer expects a function that returns a Promise<AgentListResponse>

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

@@ -700,6 +700,7 @@ class Instance extends React.PureComponent<Props, State> {
                                 <div className="metadata-instance-editor-instance">
                                     {isCascadingPolicyApplicable && (
                                         <CascadePolicy
+                                            cascadePolicyConfiguration={cascadePolicy?.cascadePolicyConfiguration}
                                             canEdit={isEditing && !!cascadePolicy.canEdit}
                                             canUseAIFolderExtraction={canUseAIFolderExtraction}
                                             canUseAIFolderExtractionAgentSelector={

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

@@ -176,6 +176,51 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
 
             expect(onAIAgentSelect).toHaveBeenCalledWith(expectedAgent);
         });
+
+        test('should render with cascadePolicyConfiguration prop and select enhanced agent if configured', async () => {
+            const cascadePolicyConfiguration = {
+                agent: 'enhanced_extract_agent',
+            };
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    canUseAIFolderExtractionAgentSelector
+                    shouldShowCascadeOptions
+                    isAIFolderExtractionEnabled
+                    cascadePolicyConfiguration={cascadePolicyConfiguration}
+                    onAIFolderExtractionToggle={jest.fn()}
+                />,
+            );
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            await userEvent.click(aiToggle); // Enable AI
+
+            expect(aiToggle).toBeChecked();
+
+            // The Enhanced agent should be selected in the combobox
+            const combobox = screen.getByRole('combobox', { name: 'Enhanced' });
+            expect(combobox).toBeInTheDocument();
+        });
+
+        test('should render standard agent if cascadePolicyConfiguration is undefined', async () => {
+            render(
+                <CascadePolicy
+                    canEdit
+                    canUseAIFolderExtraction
+                    canUseAIFolderExtractionAgentSelector
+                    shouldShowCascadeOptions
+                    isAIFolderExtractionEnabled
+                    onAIFolderExtractionToggle={jest.fn()}
+                />,
+            );
+            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
+            await userEvent.click(aiToggle); // Enable AI
+
+            expect(aiToggle).toBeChecked();
+
+            // Should default to Standard agent
+            expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
+        });
     });
 
     describe('AI Autofill Toggle', () => {