box-ui-elements 23.5.0-beta.2 → 23.5.0-beta.4

package/src/elements/content-explorer/__tests__/MetadataSidePanel.test.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../test-utils/testing-library';
+import MetadataSidePanel, { type MetadataSidePanelProps } from '../MetadataSidePanel';
+
+// Mock scrollTo method
+Object.defineProperty(Element.prototype, 'scrollTo', {
+    value: jest.fn(),
+    writable: true,
+});
+
+const mockCollection = {
+    items: [
+        {
+            id: '1',
+            name: 'Test File 1.pdf',
+            type: 'file',
+            metadata: {
+                enterprise_123: {
+                    mockTemplate: {
+                        alias: 'mock-alias-1',
+                    },
+                },
+            },
+        },
+        {
+            id: '2',
+            name: 'Test File 2.docx',
+            type: 'file',
+            metadata: {
+                enterprise_123: {
+                    mockTemplate: {
+                        alias: 'mock-alias-2',
+                    },
+                },
+            },
+        },
+    ],
+    nextMarker: null,
+    offset: 0,
+    totalCount: 2,
+};
+
+const mockMetadataTemplate = {
+    id: 'template-id',
+    displayName: 'Mock Template',
+    scope: 'enterprise_123',
+    templateKey: 'mockTemplate',
+    type: 'metadata_template',
+    hidden: false,
+    fields: [
+        {
+            id: '123',
+            key: 'alias',
+            displayName: 'Alias',
+            type: 'string',
+            hidden: false,
+            options: [],
+        },
+    ],
+};
+
+const mockOnClose = jest.fn();
+
+describe('elements/content-explorer/MetadataSidePanel', () => {
+    const defaultProps: MetadataSidePanelProps = {
+        currentCollection: mockCollection,
+        onClose: mockOnClose,
+        metadataTemplate: mockMetadataTemplate,
+        selectedItemIds: new Set(['1']),
+    };
+
+    const renderComponent = (props: Partial<MetadataSidePanelProps> = {}) =>
+        render(<MetadataSidePanel {...defaultProps} {...props} />);
+
+    test('renders the metadata title', () => {
+        renderComponent();
+        expect(screen.getByText('Metadata')).toBeInTheDocument();
+    });
+
+    test('renders the close button with proper aria-label', () => {
+        renderComponent();
+        const closeButton = screen.getByLabelText('Close');
+        expect(closeButton).toBeInTheDocument();
+    });
+
+    test('renders the selected item text', () => {
+        renderComponent();
+        expect(screen.getByText('Test File 1.pdf')).toBeInTheDocument();
+    });
+
+    test('renders metadata instance (view mode) by default', () => {
+        renderComponent();
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        expect(editTemplateButton).toBeInTheDocument();
+    });
+
+    test('renders field value of selected item', () => {
+        renderComponent();
+        const fieldValue = screen.getByText('mock-alias-1');
+        expect(fieldValue).toBeInTheDocument();
+    });
+
+    test('call onClose when close button is clicked', async () => {
+        renderComponent();
+        const closeButton = screen.getByLabelText('Close');
+        await userEvent.click(closeButton);
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+
+    test('render correct subtitle when multiple items are selected', () => {
+        renderComponent({ selectedItemIds: new Set(['1', '2']) });
+        const subtitle = screen.getByText('2 files selected');
+        expect(subtitle).toBeInTheDocument();
+    });
+
+    test('render cancel and submit button when in edit mode', async () => {
+        renderComponent();
+        const editTemplateButton = screen.getByLabelText('Edit Mock Template');
+        await userEvent.click(editTemplateButton);
+
+        const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+        expect(cancelButton).toBeInTheDocument();
+        const submitButton = screen.getByRole('button', { name: 'Save' });
+        expect(submitButton).toBeInTheDocument();
+    });
+});

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

@@ -164,6 +164,32 @@ export const metadataViewV2WithInitialFilterValues: Story = {
     },
 };
 
+export const sidePanelOpenWithSingleItemSelected: Story = {
+    args: {
+        ...metadataViewV2ElementProps,
+        metadataViewProps: {
+            columns,
+            tableProps: {
+                isSelectAllEnabled: true,
+            },
+        },
+    },
+
+    play: async ({ canvas }) => {
+        await waitFor(() => {
+            expect(canvas.getByRole('row', { name: /Child 2/i })).toBeInTheDocument();
+        });
+
+        // Select the first row by clicking its checkbox
+        const firstRow = canvas.getByRole('row', { name: /Child 2/i });
+        const checkbox = within(firstRow).getByRole('checkbox');
+        await userEvent.click(checkbox);
+
+        const metadataButton = canvas.getByRole('button', { name: 'Metadata' });
+        await userEvent.click(metadataButton);
+    },
+};
+
 const meta: Meta<typeof ContentExplorer> = {
     title: 'Elements/ContentExplorer/tests/MetadataView/visual',
     component: ContentExplorer,

package/src/elements/content-explorer/utils.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import type { MetadataTemplate } from '@box/metadata-editor';
+import type { Selection } from 'react-aria-components';
+import type { BoxItem, Collection } from '../../common/types/core';
+
+import messages from '../common/messages';
+
+// Get selected item text
+export function useSelectedItemText(currentCollection: Collection, selectedItemIds: Selection): string {
+    const { formatMessage } = useIntl();
+
+    return useMemo(() => {
+        const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;
+        if (selectedCount === 0) return '';
+
+        // Case 1: Single selected item - show item name
+        if (selectedCount === 1) {
+            const selectedKey =
+                selectedItemIds === 'all' ? currentCollection.items[0].id : selectedItemIds.values().next().value;
+            const selectedItem = currentCollection.items.find(item => item.id === selectedKey);
+            return selectedItem?.name ?? '';
+        }
+
+        // Case 2: Multiple selected items - show count
+        return formatMessage(messages.numFilesSelected, { numSelected: selectedCount });
+    }, [currentCollection.items, formatMessage, selectedItemIds]);
+}
+
+// Get template instance based on metadata template and selected items
+export function getTemplateInstance(metadataTemplate: MetadataTemplate, selectedItems: BoxItem[]) {
+    const { displayName, fields, hidden, id, scope, templateKey, type } = metadataTemplate;
+
+    const selectedItemsFields = fields.map(
+        ({ displayName: fieldDisplayName, hidden: fieldHidden, id: fieldId, key, options, type: fieldType }) => ({
+            displayName: fieldDisplayName,
+            hidden: fieldHidden,
+            id: fieldId,
+            key,
+            options,
+            type: fieldType,
+            // TODO: Add support for multiple selected items
+            value: selectedItems[0].metadata[scope][templateKey][key],
+        }),
+    );
+
+    return {
+        canEdit: true,
+        displayName,
+        hidden,
+        id,
+        fields: selectedItemsFields,
+        scope,
+        templateKey,
+        type,
+    };
+}

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

@@ -27,7 +27,6 @@ const AI_LINK = 'https://www.box.com/ai';
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
-    canUseAIFolderExtractionAgentSelector: boolean,
     cascadePolicyConfiguration?: MetadataCascadePolicyConfiguration,
     isAIFolderExtractionEnabled: boolean,
     isCascadingEnabled: boolean,
@@ -44,7 +43,6 @@ type Props = {
 const CascadePolicy = ({
     canEdit,
     canUseAIFolderExtraction,
-    canUseAIFolderExtractionAgentSelector,
     cascadePolicyConfiguration,
     isCascadingEnabled,
     isCascadingOverwritten,
@@ -194,13 +192,14 @@ const CascadePolicy = ({
                                 <FormattedMessage {...messages.aiAutofillLearnMore} />
                             </Link>
                         </div>
-                        {canUseAIFolderExtractionAgentSelector && isAIFolderExtractionEnabled && (
+                        {isAIFolderExtractionEnabled && (
                             <div className="metadata-cascade-ai-agent-selector">
                                 <BoxAiAgentSelectorWithApiContainer
                                     disabled={isExistingCascadePolicy}
                                     fetcher={agentFetcher}
                                     onSelectAgent={handleAgentSelect}
                                     recordAction={() => {}}
+                                    selectorAlignment="left"
                                 />
                             </div>
                         )}

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

@@ -55,7 +55,6 @@ import './Instance.scss';
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction?: boolean,
-    canUseAIFolderExtractionAgentSelector?: boolean,
     cascadePolicy?: MetadataCascadePolicy, // eslint-disable-line
     data: MetadataFields,
     hasError: boolean,
@@ -642,7 +641,6 @@ class Instance extends React.PureComponent<Props, State> {
     render() {
         const {
             canUseAIFolderExtraction = false,
-            canUseAIFolderExtractionAgentSelector = false,
             cascadePolicy = {},
             isDirty,
             isCascadingPolicyApplicable,
@@ -703,9 +701,6 @@ class Instance extends React.PureComponent<Props, State> {
                                             cascadePolicyConfiguration={cascadePolicy?.cascadePolicyConfiguration}
                                             canEdit={isEditing && !!cascadePolicy.canEdit}
                                             canUseAIFolderExtraction={canUseAIFolderExtraction}
-                                            canUseAIFolderExtractionAgentSelector={
-                                                canUseAIFolderExtractionAgentSelector
-                                            }
                                             isAIFolderExtractionEnabled={isAIFolderExtractionEnabled}
                                             isCascadingEnabled={isCascadingEnabled}
                                             isCascadingOverwritten={isCascadingOverwritten}

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

@@ -7,7 +7,6 @@ import type { JSONPatchOperations } from '../../common/types/api';
 
 type Props = {
     canUseAIFolderExtraction?: boolean,
-    canUseAIFolderExtractionAgentSelector?: boolean,
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     onModification?: (id: string, isDirty: boolean) => void,
@@ -23,7 +22,6 @@ type Props = {
 
 const Instances = ({
     canUseAIFolderExtraction = false,
-    canUseAIFolderExtractionAgentSelector = false,
     isCascadingPolicyApplicable = false,
     editors = [],
     onModification,
@@ -39,7 +37,6 @@ 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,7 +15,6 @@ type Props = {
     blurExceptionClassNames?: Array<string>,
     canAdd: boolean,
     canUseAIFolderExtraction?: boolean,
-    canUseAIFolderExtractionAgentSelector?: boolean,
     editors?: Array<MetadataEditor>,
     isCascadingPolicyApplicable?: boolean,
     isDropdownBusy?: boolean,
@@ -38,7 +37,6 @@ const MetadataInstanceEditor = ({
     blurExceptionClassNames,
     canAdd,
     canUseAIFolderExtraction = false,
-    canUseAIFolderExtractionAgentSelector = false,
     isCascadingPolicyApplicable = false,
     isDropdownBusy,
     editors = [],
@@ -66,7 +64,6 @@ const MetadataInstanceEditor = ({
                 <ScrollWrapper>
                     <Instances
                         canUseAIFolderExtraction={canUseAIFolderExtraction}
-                        canUseAIFolderExtractionAgentSelector={canUseAIFolderExtractionAgentSelector}
                         editors={editors}
                         isCascadingPolicyApplicable={isCascadingPolicyApplicable}
                         onModification={onModification}

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

@@ -118,7 +118,6 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
-                    canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
                     isAIFolderExtractionEnabled
                     onAIFolderExtractionToggle={jest.fn()}
@@ -133,18 +132,12 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
             expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
         });
 
-        test('should not render AI agent selector when canUseAIFolderExtractionAgentSelector is false', () => {
-            render(<CascadePolicy canEdit canUseAIFolderExtraction shouldShowCascadeOptions />);
-            expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
-        });
-
         test('should call onAIAgentSelect when an agent is selected', async () => {
             const onAIAgentSelect = jest.fn();
             render(
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
-                    canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
                     isAIFolderExtractionEnabled
                     onAIAgentSelect={onAIAgentSelect}
@@ -185,7 +178,6 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
-                    canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
                     isAIFolderExtractionEnabled
                     cascadePolicyConfiguration={cascadePolicyConfiguration}
@@ -207,7 +199,6 @@ describe('features/metadata-instance-editor/CascadePolicy', () => {
                 <CascadePolicy
                     canEdit
                     canUseAIFolderExtraction
-                    canUseAIFolderExtractionAgentSelector
                     shouldShowCascadeOptions
                     isAIFolderExtractionEnabled
                     onAIFolderExtractionToggle={jest.fn()}

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

@@ -771,7 +771,6 @@ const getBaseProps = (props = {}) => ({
         cascadePolicyType: 'regular', // default to non-AI
     },
     canUseAIFolderExtraction: true, // Assume feature flag is on
-    canUseAIFolderExtractionAgentSelector: false,
     ...props,
 });
 
@@ -862,33 +861,6 @@ describe('Instance Component - React Testing Library', () => {
     });
 
     describe('Props passed to CascadePolicy', () => {
-        test('should pass canUseAIFolderExtractionAgentSelector to CascadePolicy', async () => {
-            render(
-                <Instance
-                    {...getBaseProps({
-                        canUseAIFolderExtractionAgentSelector: true,
-                        cascadePolicy: {
-                            id: 'policy-1',
-                            canEdit: true,
-                            isEnabled: true,
-                            cascadePolicyType: CASCADE_POLICY_TYPE_AI_EXTRACT,
-                        },
-                    })}
-                />,
-            );
-
-            const editButton = screen.queryByRole('button', { name: 'Edit Metadata' });
-            if (editButton) await userEvent.click(editButton); // Enter edit mode to ensure CascadePolicy options are visible
-
-            const cascadeToggle = screen.getByRole('switch', { name: 'Enable Cascade Policy' });
-            expect(cascadeToggle).toBeChecked();
-
-            const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
-            expect(aiToggle).toBeChecked();
-
-            expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
-        });
-
         test('should disable CascadePolicy options when a cascade already exists', async () => {
             render(<Instance {...getBaseProps()} />);
 

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

@@ -253,11 +253,9 @@ describe('features/metadata-editor-editor/Instances', () => {
     });
 });
 
-describe('Instances component - canUseAIFolderExtractionAgentSelector prop', () => {
-    test('should pass canUseAIFolderExtractionAgentSelector to child Instance components, showing agent selector', async () => {
-        const props = getInstancesBaseProps({
-            canUseAIFolderExtractionAgentSelector: true,
-        });
+describe('Instances component -  AI agent selector', () => {
+    test('should show AI agent selector when canUseAIFolderExtraction is true', async () => {
+        const props = getInstancesBaseProps();
         props.editors[0].instance.cascadePolicy.cascadePolicyType = CASCADE_POLICY_TYPE_AI_EXTRACT;
         render(<Instances {...props} />);
 
@@ -273,11 +271,11 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
     });
 
-    test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is false', async () => {
+    test('should not show agent selector in child Instance if canUseAIFolderExtraction is false', async () => {
         render(
             <Instances
                 {...getInstancesBaseProps({
-                    canUseAIFolderExtractionAgentSelector: false,
+                    canUseAIFolderExtraction: false,
                 })}
             />,
         );
@@ -288,9 +286,9 @@ describe('Instances component - canUseAIFolderExtractionAgentSelector prop', ()
         expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
     });
 
-    test('should not show agent selector in child Instance if canUseAIFolderExtractionAgentSelector is undefined', async () => {
+    test('should not show agent selector in child Instance if canUseAIFolderExtraction is undefined', async () => {
         const props = getInstancesBaseProps();
-        delete props.canUseAIFolderExtractionAgentSelector;
+        delete props.canUseAIFolderExtraction;
         render(<Instances {...props} />);
 
         const editButton = screen.getByRole('button', { name: 'Edit Metadata' });

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

@@ -534,57 +534,10 @@ describe('features/metadata-editor-editor/MetadataInstanceEditor', () => {
     });
 });
 
-describe('MetadataInstanceEditor - canUseAIFolderExtractionAgentSelector prop', () => {
-    test('should propagate canUseAIFolderExtractionAgentSelector, showing agent selector', async () => {
-        const props = getMetadataEditorBaseProps({
-            canUseAIFolderExtraction: true,
-            canUseAIFolderExtractionAgentSelector: true,
-        });
-        props.editors[0].instance.cascadePolicy.cascadePolicyType = 'ai_extract';
-        render(<MetadataInstanceEditor {...props} />);
-
-        const editButton = await screen.findByRole('button', { name: 'Edit Metadata' }, { timeout: 3000 });
-        await userEvent.click(editButton);
-
-        const cascadeToggle = screen.getByRole('switch', { name: 'Enable Cascade Policy' });
-        expect(cascadeToggle).toBeChecked();
-
-        const aiToggle = screen.getByRole('switch', { name: 'Box AI Autofill' });
-        expect(aiToggle).toBeChecked();
-
-        expect(screen.getByRole('combobox', { name: 'Standard' })).toBeInTheDocument();
-    });
-
-    test('should not show agent selector if canUseAIFolderExtractionAgentSelector is false', async () => {
-        render(
-            <MetadataInstanceEditor
-                {...getMetadataEditorBaseProps({
-                    canUseAIFolderExtractionAgentSelector: false,
-                })}
-            />,
-        );
-
-        const editButton = await screen.findByRole('button', { name: 'Edit Metadata' });
-        await userEvent.click(editButton);
-
-        expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
-    });
-
-    test('should not show agent selector if canUseAIFolderExtractionAgentSelector is undefined', async () => {
-        const props = getMetadataEditorBaseProps();
-        delete props.canUseAIFolderExtractionAgentSelector;
-        render(<MetadataInstanceEditor {...props} />);
-
-        const editButton = await screen.findByRole('button', { name: 'Edit Metadata' });
-        await userEvent.click(editButton);
-
-        expect(screen.queryByRole('combobox', { name: 'Standard' })).not.toBeInTheDocument();
-    });
-
+describe('MetadataInstanceEditor agent selector', () => {
     test('should show "Enhanced" in the combobox when the second option is selected', async () => {
         const props = getMetadataEditorBaseProps({
             canUseAIFolderExtraction: true,
-            canUseAIFolderExtractionAgentSelector: true,
         });
         props.editors[0].instance.cascadePolicy.cascadePolicyType = 'ai_extract';
         props.editors[0].instance.cascadePolicy.id = null;

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

@@ -416,7 +416,6 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
         >
           <CascadePolicy
             canUseAIFolderExtraction={false}
-            canUseAIFolderExtractionAgentSelector={false}
             isAIFolderExtractionEnabled={false}
             isCascadingEnabled={true}
             isCascadingOverwritten={false}

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

@@ -5,7 +5,6 @@ exports[`features/metadata-editor-editor/Instances should correctly render edito
   <injectIntl(Instance)
     canEdit={true}
     canUseAIFolderExtraction={false}
-    canUseAIFolderExtractionAgentSelector={false}
     data={
       {
         "datefield": "2018-06-20T00:00:00.000Z",
@@ -111,7 +110,6 @@ exports[`features/metadata-editor-editor/Instances should correctly render edito
   <injectIntl(Instance)
     canEdit={false}
     canUseAIFolderExtraction={false}
-    canUseAIFolderExtractionAgentSelector={false}
     data={
       {
         "datefield": "2018-06-20T00:00:00.000Z",

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

@@ -772,7 +772,6 @@ exports[`features/metadata-editor-editor/MetadataInstanceEditor should correctly
     >
       <Instances
         canUseAIFolderExtraction={false}
-        canUseAIFolderExtractionAgentSelector={false}
         editors={
           [
             {

package/src/features/metadata-instance-editor/stories/tests/CascadePolicy-visual.stories.js

@@ -5,7 +5,6 @@ import CascadePolicy from '../../CascadePolicy';
 const baseProps = {
     canEdit: true,
     canUseAIFolderExtraction: true,
-    canUseAIFolderExtractionAgentSelector: true,
     isAIFolderExtractionEnabled: false,
     isCascadingEnabled: true,
     isCascadingOverwritten: false,