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

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

@@ -10,25 +10,70 @@ import noop from 'lodash/noop';
 import { matchPath } from 'react-router-dom';
 import { FEED_ITEM_TYPE_VERSION } from '../../constants';
 import { getBadUserError } from '../../utils/error';
+import { ViewType, FeedEntryType } from '../common/types/SidebarNavigation';
 export default function withSidebarAnnotations(WrappedComponent) {
   class WithSidebarAnnotations extends React.Component {
     constructor(props) {
       super(props);
       _defineProperty(this, "sidebarPanels", /*#__PURE__*/React.createRef());
+      _defineProperty(this, "getInternalNavigationMatch", navigation => {
+        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
+        };
+      });
+      _defineProperty(this, "getInternalAnnotationsNavigation", (fileVersionId, annotationId) => {
+        if (!fileVersionId) {
+          return {
+            sidebar: ViewType.ACTIVITY
+          };
+        }
+        return {
+          sidebar: ViewType.ACTIVITY,
+          activeFeedEntryType: FeedEntryType.ANNOTATIONS,
+          activeFeedEntryId: annotationId || undefined,
+          fileVersionId
+        };
+      });
       _defineProperty(this, "redirectDeeplinkedAnnotation", () => {
         const {
           file,
           getAnnotationsPath,
           getAnnotationsMatchPath,
           history,
-          location
+          internalSidebarNavigation,
+          internalSidebarNavigationHandler,
+          location,
+          routerDisabled
         } = this.props;
-        const match = getAnnotationsMatchPath(location);
-        const annotationId = getProp(match, 'params.annotationId');
         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));
+          }
         }
       });
       _defineProperty(this, "updateActiveAnnotation", () => {
@@ -41,21 +86,38 @@ export default function withSidebarAnnotations(WrappedComponent) {
           getAnnotationsMatchPath,
           getAnnotationsPath,
           history,
-          location
+          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;
+        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 location pathname and open state if transitioning to an active annotation id, force the sidebar open
-        history.push({
-          pathname: getAnnotationsPath(fileVersionId, activeAnnotationId),
-          state: newLocationState
-        });
+          // Update the navigation and open state if transitioning to an active annotation id, force the sidebar open
+          const updatedNavigation = _objectSpread(_objectSpread({}, 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
+          });
+        }
       });
       _defineProperty(this, "updateActiveVersion", () => {
         const {
@@ -65,34 +127,63 @@ export default function withSidebarAnnotations(WrappedComponent) {
           getAnnotationsMatchPath,
           getAnnotationsPath,
           history,
+          internalSidebarNavigation,
+          internalSidebarNavigationHandler,
           location,
-          onVersionChange
+          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))
+            });
+          }
         }
       });
       _defineProperty(this, "refreshActivitySidebar", () => {
         const {
+          internalSidebarNavigation,
           isOpen,
-          location
+          location,
+          routerDisabled
         } = this.props;
-        const pathname = getProp(location, 'pathname', '');
-        const isActivity = matchPath(pathname, '/activity');
         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) {
@@ -106,12 +197,15 @@ export default function withSidebarAnnotations(WrappedComponent) {
         annotatorState,
         fileId,
         getAnnotationsMatchPath,
+        internalSidebarNavigation,
         location,
-        onVersionChange
+        onVersionChange,
+        routerDisabled
       } = this.props;
       const {
         annotatorState: prevAnnotatorState,
         fileId: prevFileId,
+        internalSidebarNavigation: prevInternalSidebarNavigation,
         location: prevLocation
       } = prevProps;
       const {
@@ -123,13 +217,25 @@ export default function withSidebarAnnotations(WrappedComponent) {
         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();
       }

package/es/elements/content-sidebar/withSidebarAnnotations.js.flow

@@ -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);