feat(bounding-box): integrate bounding boxes with metadata form

src/elements/content-preview/ContentPreview.js

@@ -102,6 +102,7 @@ type Props = {
     contentOpenWithProps: ContentOpenWithProps,
     contentSidebarProps: ContentSidebarProps,
     enableThumbnailsSidebar: boolean,
+    enableBoundingBoxHighlights: boolean,
     features?: FeatureConfig,
     fileId?: string,
     fileOptions?: Object,
@@ -290,6 +291,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         contentOpenWithProps: {},
         contentSidebarProps: {},
         enableThumbnailsSidebar: false,
+        enableBoundingBoxHighlights: false,
         hasHeader: false,
         hideSidebar: false,
         language: DEFAULT_LOCALE,
@@ -895,6 +897,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
             annotatorState: { activeAnnotationId } = {},
             renderCustomPreview,
             enableThumbnailsSidebar,
+            enableBoundingBoxHighlights,
             features,
             fileOptions,
             onAnnotatorEvent,
@@ -944,6 +947,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         const previewOptions = {
             advancedContentInsights, // will be removed once preview package will be updated to utilize feature flip for ACI
             container: `#${this.id} .bcpr-content`,
+            enableBoundingBoxHighlights,
             enableThumbnailsSidebar,
             features,
             fileOptions: fileOpts,

src/elements/content-preview/__tests__/ContentPreview.test.js

@@ -343,6 +343,34 @@ describe('elements/content-preview/ContentPreview', () => {
             );
         });
 
+        test('should pass enableBoundingBoxHighlights to preview options when enabled', async () => {
+            const wrapper = getWrapper({ ...props, enableBoundingBoxHighlights: true });
+            wrapper.setState({ file });
+            const instance = wrapper.instance();
+            await instance.loadPreview();
+            expect(instance.preview.show).toHaveBeenCalledWith(
+                file.id,
+                expect.any(Function),
+                expect.objectContaining({
+                    enableBoundingBoxHighlights: true,
+                }),
+            );
+        });
+
+        test('should default enableBoundingBoxHighlights to false in preview options', async () => {
+            const wrapper = getWrapper(props);
+            wrapper.setState({ file });
+            const instance = wrapper.instance();
+            await instance.loadPreview();
+            expect(instance.preview.show).toHaveBeenCalledWith(
+                file.id,
+                expect.any(Function),
+                expect.objectContaining({
+                    enableBoundingBoxHighlights: false,
+                }),
+            );
+        });
+
         test('should call preview show with file version params if provided', async () => {
             const wrapper = getWrapper(props);
             wrapper.setState({

src/elements/content-sidebar/MetadataInstanceEditor.tsx

@@ -2,6 +2,7 @@ import {
     MetadataInstanceForm,
     type FormValues,
     type JSONPatchOperations,
+    type MetadataTemplateField,
     type MetadataTemplateInstance,
 } from '@box/metadata-editor';
 import { TaxonomyOptionsFetcher } from '@box/metadata-editor/lib/components/metadata-editor-fields/components/metadata-taxonomy-field/types.js';
@@ -34,6 +35,8 @@ export interface MetadataInstanceEditorProps {
     template: MetadataTemplateInstance;
     isAdvancedExtractAgentEnabled?: boolean;
     isConfidenceScoreReviewEnabled?: boolean;
+    onSelectMetadataField?: (field: MetadataTemplateField | null) => void;
+    selectedMetadataFieldId?: string | null;
 }
 
 const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
@@ -57,6 +60,8 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
     template,
     isAdvancedExtractAgentEnabled = false,
     isConfidenceScoreReviewEnabled = false,
+    onSelectMetadataField,
+    selectedMetadataFieldId,
 }) => {
     const previewContext: PreviewContextType | null = useContext(PreviewContext);
     const customRef = previewContext?.previewBodyRef?.current;
@@ -84,6 +89,8 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
             taxonomyOptionsFetcher={taxonomyOptionsFetcher}
             isAdvancedExtractAgentEnabled={isAdvancedExtractAgentEnabled}
             isConfidenceScoreReviewEnabled={isConfidenceScoreReviewEnabled}
+            onSelectMetadataField={onSelectMetadataField}
+            selectedMetadataFieldId={selectedMetadataFieldId}
             customRef={customRef}
         />
     );

src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -20,6 +20,7 @@ import {
 } from '@box/metadata-editor';
 import { TreeQueryInput } from '@box/combobox-with-api';
 
+import type { BoxAnnotationsBoundingBox } from './types/BoxAISidebarTypes';
 import API from '../../api';
 import SidebarContent from './SidebarContent';
 import { withAPIContext } from '../common/api-context';
@@ -44,6 +45,7 @@ import { convertTemplateToTemplateInstance } from './utils/convertTemplateToTemp
 import { isExtensionSupportedForMetadataSuggestions } from './utils/isExtensionSupportedForMetadataSuggestions';
 import { metadataTaxonomyFetcher, metadataTaxonomyNodeAncestorsFetcher } from './fetchers/metadataTaxonomyFetcher';
 import { useMetadataSidebarFilteredTemplates } from './hooks/useMetadataSidebarFilteredTemplates';
+import useMetadataFieldSelection from './hooks/useMetadataFieldSelection';
 
 const MARK_NAME_JS_READY = `${ORIGIN_METADATA_SIDEBAR_REDESIGN}_${EVENT_JS_READY}`;
 
@@ -59,6 +61,10 @@ interface PropsWithoutContext extends ExternalProps {
     fileExtension?: string;
     fileId: string;
     filteredTemplateIds?: string[];
+    getPreview: () => {
+        showBoundingBoxHighlights?: (boundingBoxes: BoxAnnotationsBoundingBox[]) => void;
+        hideBoundingBoxHighlights?: () => void;
+    };
     hasSidebarInitialized?: boolean;
 }
 
@@ -89,6 +95,7 @@ function MetadataSidebarRedesign({
     fileExtension,
     fileId,
     filteredTemplateIds = [],
+    getPreview,
     history,
     onError,
     onSuccess,
@@ -127,6 +134,7 @@ function MetadataSidebarRedesign({
     const [isUnsavedChangesModalOpen, setIsUnsavedChangesModalOpen] = useState<boolean>(false);
     const [isDeleteButtonDisabled, setIsDeleteButtonDisabled] = useState<boolean>(false);
     const [shouldShowOnlyReviewFields, setShouldShowOnlyReviewFields] = useState<boolean>(false);
+    const { selectedMetadataFieldId, handleSelectMetadataField } = useMetadataFieldSelection(getPreview);
     const [appliedTemplateInstances, setAppliedTemplateInstances] =
         useState<Array<MetadataTemplateInstance | MetadataTemplate>>(templateInstances);
     const [pendingTemplateToEdit, setPendingTemplateToEdit] = useState<MetadataTemplateInstance | null>(null);
@@ -332,6 +340,8 @@ function MetadataSidebarRedesign({
                             template={editingTemplate}
                             isAdvancedExtractAgentEnabled={isAdvancedExtractAgentEnabled}
                             isConfidenceScoreReviewEnabled={isConfidenceScoreReviewEnabled}
+                            onSelectMetadataField={handleSelectMetadataField}
+                            selectedMetadataFieldId={selectedMetadataFieldId}
                         />
                     )}
                     {showList && (
@@ -345,6 +355,8 @@ function MetadataSidebarRedesign({
                                 setIsDeleteButtonDisabled(false);
                                 setShouldShowOnlyReviewFields(shouldEnableReviewFilter);
                             }}
+                            onSelectMetadataField={handleSelectMetadataField}
+                            selectedMetadataFieldId={selectedMetadataFieldId}
                             templateInstances={templateInstancesList}
                             taxonomyNodeFetcher={taxonomyNodeFetcher}
                             isConfidenceScoreReviewEnabled={isConfidenceScoreReviewEnabled}

src/elements/content-sidebar/SidebarPanels.js

@@ -490,6 +490,7 @@ class SidebarPanels extends React.Component<Props, State> {
                                             ? match.params.filteredTemplateIds.split(',')
                                             : []
                                     }
+                                    getPreview={getPreview}
                                     hasSidebarInitialized={isInitialized}
                                     isBoxAiSuggestionsEnabled={isMetadataAiSuggestionsEnabled}
                                     ref={this.metadataSidebar}

src/elements/content-sidebar/__tests__/MetadataSidebarRedesign.test.tsx

@@ -9,12 +9,18 @@ import {
     type MetadataSidebarRedesignProps,
 } from '../MetadataSidebarRedesign';
 import useSidebarMetadataFetcher, { STATUS } from '../hooks/useSidebarMetadataFetcher';
+import useMetadataFieldSelection from '../hooks/useMetadataFieldSelection';
 
 jest.mock('../hooks/useSidebarMetadataFetcher');
 const mockUseSidebarMetadataFetcher = useSidebarMetadataFetcher as jest.MockedFunction<
     typeof useSidebarMetadataFetcher
 >;
 
+jest.mock('../hooks/useMetadataFieldSelection');
+const mockUseMetadataFieldSelection = useMetadataFieldSelection as jest.MockedFunction<
+    typeof useMetadataFieldSelection
+>;
+
 const getStructuredTextRep = jest.fn().mockResolvedValue('structured-text-rep');
 const api = {
     options: {
@@ -104,6 +110,7 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
             api,
             fileExtension: 'pdf',
             getStructuredTextRep,
+            getPreview: jest.fn().mockReturnValue({}),
             fileId: 'test-file-id-1',
             elementId: 'element-1',
             filteredTemplateIds: emptyFilteredTemplateIds,
@@ -117,6 +124,11 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
     };
 
     beforeEach(() => {
+        mockUseMetadataFieldSelection.mockReturnValue({
+            selectedMetadataFieldId: null,
+            handleSelectMetadataField: jest.fn(),
+        });
+
         mockUseSidebarMetadataFetcher.mockReturnValue({
             clearExtractError: jest.fn(),
             extractSuggestions: jest.fn(),
@@ -500,4 +512,11 @@ describe('elements/content-sidebar/Metadata/MetadataSidebarRedesign', () => {
         expect(createSessionRequest).not.toHaveBeenCalledTimes(1);
         expect(createSessionRequest).not.toHaveBeenCalledWith({ items: [{ id: undefined }] }, undefined);
     });
+
+    test('should pass getPreview to useMetadataFieldSelection', () => {
+        const getPreview = jest.fn();
+        renderComponent({ getPreview });
+
+        expect(mockUseMetadataFieldSelection).toHaveBeenCalledWith(getPreview);
+    });
 });

src/elements/content-sidebar/__tests__/clampPercentage.test.ts

@@ -0,0 +1,14 @@
+import clampPercentage from '../utils/clampPercentage';
+
+describe('clampPercentage', () => {
+    test.each([
+        [50, 50],
+        [0, 0],
+        [100, 100],
+        [-0.5, 0],
+        [100.5, 100],
+        [99.999, 99.999],
+    ])('clampPercentage(%s) should return %s', (input, expected) => {
+        expect(clampPercentage(input)).toBe(expected);
+    });
+});