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

package/src/elements/content-sidebar/withSidebarAnnotations.js

@@ -7,14 +7,23 @@ import { FEED_ITEM_TYPE_VERSION } from '../../constants';
 import { getBadUserError } from '../../utils/error';
 import type { WithAnnotatorContextProps } from '../common/annotator-context';
 import type { BoxItem, User } from '../../common/types/core';
+import {
+    ViewType,
+    FeedEntryType,
+    type InternalSidebarNavigation,
+    type InternalSidebarNavigationHandler,
+} from '../common/types/SidebarNavigation';
 
 type Props = {
     ...ContextRouter,
     currentUser?: User,
     file: BoxItem,
     fileId: string,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isOpen: boolean,
     onVersionChange: Function,
+    routerDisabled?: boolean,
 } & WithAnnotatorContextProps;
 
 type SidebarPanelsRefType = {
@@ -44,31 +53,130 @@ export default function withSidebarAnnotations(
             this.redirectDeeplinkedAnnotation();
         }
 
+        getInternalNavigationMatch = (
+            navigation: InternalSidebarNavigation,
+        ): { params: { annotationId?: string, fileVersionId: string } } | null => {
+            if (
+                !('activeFeedEntryType' in navigation) ||
+                navigation.activeFeedEntryType !== FeedEntryType.ANNOTATIONS ||
+                !navigation.fileVersionId
+            ) {
+                return null;
+            }
+
+            // Only include annotationId if it's defined (mirrors router behavior where missing optional params are omitted)
+            const params =
+                navigation.activeFeedEntryId !== undefined
+                    ? {
+                          fileVersionId: navigation.fileVersionId,
+                          annotationId: navigation.activeFeedEntryId,
+                      }
+                    : {
+                          fileVersionId: navigation.fileVersionId,
+                      };
+
+            return { params };
+        };
+
+        getInternalAnnotationsNavigation = (
+            fileVersionId?: string,
+            annotationId?: string | null,
+        ): InternalSidebarNavigation => {
+            if (!fileVersionId) {
+                return { sidebar: ViewType.ACTIVITY };
+            }
+
+            return {
+                sidebar: ViewType.ACTIVITY,
+                activeFeedEntryType: FeedEntryType.ANNOTATIONS,
+                activeFeedEntryId: annotationId || undefined,
+                fileVersionId,
+            };
+        };
+
         redirectDeeplinkedAnnotation = () => {
-            const { file, getAnnotationsPath, getAnnotationsMatchPath, history, location } = this.props;
-            const match = getAnnotationsMatchPath(location);
-            const annotationId = getProp(match, 'params.annotationId');
+            const {
+                file,
+                getAnnotationsPath,
+                getAnnotationsMatchPath,
+                history,
+                internalSidebarNavigation,
+                internalSidebarNavigationHandler,
+                location,
+                routerDisabled,
+            } = this.props;
+
             const currentFileVersionId = getProp(file, 'file_version.id');
-            const fileVersionId = getProp(match, 'params.fileVersionId');
 
-            if (fileVersionId && fileVersionId !== currentFileVersionId) {
-                history.replace(getAnnotationsPath(currentFileVersionId, annotationId));
+            if (routerDisabled && internalSidebarNavigation && internalSidebarNavigationHandler) {
+                // Use internal navigation when router is disabled
+                const match = this.getInternalNavigationMatch(internalSidebarNavigation);
+                const annotationId = getProp(match, 'params.annotationId');
+                const fileVersionId = getProp(match, 'params.fileVersionId');
+
+                if (fileVersionId && fileVersionId !== currentFileVersionId) {
+                    const correctedNavigation = this.getInternalAnnotationsNavigation(
+                        currentFileVersionId,
+                        annotationId,
+                    );
+                    internalSidebarNavigationHandler(correctedNavigation, true);
+                }
+            } else {
+                // Use router-based navigation
+                const match = getAnnotationsMatchPath(location);
+                const annotationId = getProp(match, 'params.annotationId');
+                const fileVersionId = getProp(match, 'params.fileVersionId');
+
+                if (fileVersionId && fileVersionId !== currentFileVersionId) {
+                    history.replace(getAnnotationsPath(currentFileVersionId, annotationId));
+                }
             }
         };
 
         componentDidUpdate(prevProps: Props) {
-            const { annotatorState, fileId, getAnnotationsMatchPath, location, onVersionChange }: Props = this.props;
-            const { annotatorState: prevAnnotatorState, fileId: prevFileId, location: prevLocation }: Props = prevProps;
+            const {
+                annotatorState,
+                fileId,
+                getAnnotationsMatchPath,
+                internalSidebarNavigation,
+                location,
+                onVersionChange,
+                routerDisabled,
+            }: Props = this.props;
+            const {
+                annotatorState: prevAnnotatorState,
+                fileId: prevFileId,
+                internalSidebarNavigation: prevInternalSidebarNavigation,
+                location: prevLocation,
+            }: Props = prevProps;
             const { action, activeAnnotationId, annotation } = annotatorState;
             const { activeAnnotationId: prevActiveAnnotationId, annotation: prevAnnotation } = prevAnnotatorState;
 
-            const match = getAnnotationsMatchPath(location);
-            const prevMatch = getAnnotationsMatchPath(prevLocation);
-            const fileVersionId = getProp(match, 'params.fileVersionId');
-            const hasActiveAnnotationChanged = prevActiveAnnotationId !== activeAnnotationId;
+            let fileVersionId;
+            let prevFileVersionId;
+            let match;
+
+            if (routerDisabled && internalSidebarNavigation) {
+                // Use internal navigation when router is disabled
+                match = this.getInternalNavigationMatch(internalSidebarNavigation);
+                const prevMatch = prevInternalSidebarNavigation
+                    ? this.getInternalNavigationMatch(prevInternalSidebarNavigation)
+                    : null;
+
+                fileVersionId = getProp(match, 'params.fileVersionId');
+                prevFileVersionId = getProp(prevMatch, 'params.fileVersionId');
+            } else {
+                // Use router-based navigation
+                match = getAnnotationsMatchPath(location);
+                const prevMatch = getAnnotationsMatchPath(prevLocation);
+
+                fileVersionId = getProp(match, 'params.fileVersionId');
+                prevFileVersionId = getProp(prevMatch, 'params.fileVersionId');
+            }
+
             const isAnnotationsPath = !!match;
             const isTransitioningToAnnotationPath = activeAnnotationId && !isAnnotationsPath;
-            const prevFileVersionId = getProp(prevMatch, 'params.fileVersionId');
+            const hasActiveAnnotationChanged = prevActiveAnnotationId !== activeAnnotationId;
 
             if (action === 'reply_create_start' || action === 'reply_create_end') {
                 this.addAnnotationReply();
@@ -275,19 +383,39 @@ export default function withSidebarAnnotations(
                 getAnnotationsMatchPath,
                 getAnnotationsPath,
                 history,
+                internalSidebarNavigation,
+                internalSidebarNavigationHandler,
                 location,
+                routerDisabled,
             } = this.props;
-            const match = getAnnotationsMatchPath(location);
+
             const currentFileVersionId = getProp(file, 'file_version.id');
             const defaultFileVersionId = activeAnnotationFileVersionId || currentFileVersionId;
-            const fileVersionId = getProp(match, 'params.fileVersionId', defaultFileVersionId);
-            const newLocationState = activeAnnotationId ? { open: true } : location.state;
-
-            // Update the location pathname and open state if transitioning to an active annotation id, force the sidebar open
-            history.push({
-                pathname: getAnnotationsPath(fileVersionId, activeAnnotationId),
-                state: newLocationState,
-            });
+
+            if (routerDisabled && internalSidebarNavigation && internalSidebarNavigationHandler) {
+                // Use internal navigation when router is disabled
+                const match = this.getInternalNavigationMatch(internalSidebarNavigation);
+                const fileVersionId = getProp(match, 'params.fileVersionId', defaultFileVersionId);
+                const newNavigationState = activeAnnotationId ? { open: true } : {};
+
+                // Update the navigation and open state if transitioning to an active annotation id, force the sidebar open
+                const updatedNavigation = {
+                    ...this.getInternalAnnotationsNavigation(fileVersionId, activeAnnotationId),
+                    ...newNavigationState,
+                };
+                internalSidebarNavigationHandler(updatedNavigation);
+            } else {
+                // Use router-based navigation
+                const match = getAnnotationsMatchPath(location);
+                const fileVersionId = getProp(match, 'params.fileVersionId', defaultFileVersionId);
+                const newLocationState = activeAnnotationId ? { open: true } : location.state;
+
+                // Update the location pathname and open state if transitioning to an active annotation id, force the sidebar open
+                history.push({
+                    pathname: getAnnotationsPath(fileVersionId, activeAnnotationId),
+                    state: newLocationState,
+                });
+            }
         };
 
         updateActiveVersion = () => {
@@ -298,33 +426,67 @@ export default function withSidebarAnnotations(
                 getAnnotationsMatchPath,
                 getAnnotationsPath,
                 history,
+                internalSidebarNavigation,
+                internalSidebarNavigationHandler,
                 location,
                 onVersionChange,
+                routerDisabled,
             } = this.props;
+
             const feedAPI = api.getFeedAPI(false);
-            const match = getAnnotationsMatchPath(location);
             const currentFileVersionId = getProp(file, 'file_version.id');
-            const fileVersionId = getProp(match, 'params.fileVersionId');
             const { items: feedItems = [] } = feedAPI.getCachedItems(fileId) || {};
-            const version = feedItems
-                .filter(item => item.type === FEED_ITEM_TYPE_VERSION)
-                .find(item => item.id === fileVersionId);
-
-            if (version) {
-                onVersionChange(version, {
-                    currentVersionId: currentFileVersionId,
-                    updateVersionToCurrent: () => history.push(getAnnotationsPath(currentFileVersionId)),
-                });
+
+            if (routerDisabled && internalSidebarNavigation && internalSidebarNavigationHandler) {
+                // Use internal navigation when router is disabled
+                const match = this.getInternalNavigationMatch(internalSidebarNavigation);
+                const fileVersionId = getProp(match, 'params.fileVersionId');
+                const version = feedItems
+                    .filter(item => item.type === FEED_ITEM_TYPE_VERSION)
+                    .find(item => item.id === fileVersionId);
+
+                if (version) {
+                    onVersionChange(version, {
+                        currentVersionId: currentFileVersionId,
+                        updateVersionToCurrent: () => {
+                            const currentVersionNavigation =
+                                this.getInternalAnnotationsNavigation(currentFileVersionId);
+                            internalSidebarNavigationHandler(currentVersionNavigation);
+                        },
+                    });
+                }
+            } else {
+                // Use router-based navigation
+                const match = getAnnotationsMatchPath(location);
+                const fileVersionId = getProp(match, 'params.fileVersionId');
+                const version = feedItems
+                    .filter(item => item.type === FEED_ITEM_TYPE_VERSION)
+                    .find(item => item.id === fileVersionId);
+
+                if (version) {
+                    onVersionChange(version, {
+                        currentVersionId: currentFileVersionId,
+                        updateVersionToCurrent: () => history.push(getAnnotationsPath(currentFileVersionId)),
+                    });
+                }
             }
         };
 
         refreshActivitySidebar = () => {
-            const { isOpen, location } = this.props;
-
-            const pathname = getProp(location, 'pathname', '');
-            const isActivity = matchPath(pathname, '/activity');
+            const { internalSidebarNavigation, isOpen, location, routerDisabled } = this.props;
             const { current } = this.sidebarPanels;
 
+            let isActivity = false;
+
+            if (routerDisabled && internalSidebarNavigation) {
+                // Check if current navigation is pointing to activity sidebar
+                isActivity = internalSidebarNavigation.sidebar === ViewType.ACTIVITY;
+            } else {
+                // Use router-based check
+                const pathname = getProp(location, 'pathname', '');
+                isActivity = !!matchPath(pathname, '/activity');
+            }
+
             // If the activity sidebar is currently open, then force it to refresh with the updated data
             if (current && isActivity && isOpen) {
                 current.refresh(false);

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', () => {