feat(router): optional router in SidebarNavigation (#4194)

* feat(router): optional router in SidebarNavigation

* feat(router): Flow errors fix

* feat(router): Fixes after review

* feat(router): optional router in PreviewNavigation

Author: rafalmaksymiuk

src/elements/common/types/SidebarNavigation.js.flow

@@ -5,10 +5,12 @@
 
 export const ViewType = Object.freeze({
     BOXAI: 'boxai',
-    SKILLS: 'skills',
-    ACTIVITY: 'activity',
     DETAILS: 'details',
     METADATA: 'metadata',
+    METADATA_REDESIGN: 'metadata_redesign',
+    SKILLS: 'skills',
+    ACTIVITY: 'activity',
+    VERSIONS: 'versions',
     DOCGEN: 'docgen',
 });
 
@@ -22,11 +24,12 @@ export type ViewTypeValues = $Values<typeof ViewType>;
 export type FeedEntryTypeValues = $Values<typeof FeedEntryType>;
 
 export type SidebarNavigation = {
-    sidebar: ViewTypeValues,
-    versionId?: string,
     activeFeedEntryType?: FeedEntryTypeValues,
     activeFeedEntryId?: string,
     fileVersionId?: string,
+    filteredTemplateIds?: string,
+    sidebar: ViewTypeValues,
+    versionId?: string,
 };
 
 export type InternalSidebarNavigation = SidebarNavigation & {

src/elements/common/types/SidebarNavigation.ts

@@ -1,9 +1,11 @@
 export enum ViewType {
-    BOXAI = 'boxai',
     SKILLS = 'skills',
-    ACTIVITY = 'activity',
     DETAILS = 'details',
     METADATA = 'metadata',
+    METADATA_REDESIGN = 'metadata_redesign',
+    BOXAI = 'boxai',
+    ACTIVITY = 'activity',
+    VERSIONS = 'versions',
     DOCGEN = 'docgen',
 }
 
@@ -18,6 +20,11 @@ type VersionSidebarView = {
     versionId: string;
 };
 
+export type MetadataSidebarView = {
+    sidebar: ViewType.METADATA | ViewType.METADATA_REDESIGN;
+    filteredTemplateIds?: string;
+};
+
 export type ActivityAnnotationsSidebarView = {
     sidebar: ViewType.ACTIVITY;
     activeFeedEntryType: FeedEntryType.ANNOTATIONS;
@@ -35,6 +42,7 @@ export type SidebarNavigation =
           sidebar: ViewType;
       }
     | VersionSidebarView
+    | MetadataSidebarView
     | ActivityCommentsSidebarView
     | ActivityAnnotationsSidebarView;
 

src/elements/content-preview/PreviewNavigation.js

@@ -14,16 +14,26 @@ import PlainButton from '../../components/plain-button/PlainButton';
 import messages from '../common/messages';
 import type { BoxItem } from '../../common/types/core';
 import { SIDEBAR_VIEW_METADATA } from '../../constants';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type Props = {
     collection: Array<string | BoxItem>,
     currentIndex: number,
     intl: IntlShape,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     onNavigateLeft: Function,
     onNavigateRight: Function,
+    routerDisabled?: boolean,
 };
 
-const PreviewNavigation = ({ collection = [], currentIndex, intl, onNavigateLeft, onNavigateRight }: Props) => {
+const PreviewNavigationWithRouter = ({
+    collection = [],
+    currentIndex,
+    intl,
+    onNavigateLeft,
+    onNavigateRight,
+}: Props) => {
     const hasLeftNavigation = collection.length > 1 && currentIndex > 0 && currentIndex < collection.length;
     const hasRightNavigation = collection.length > 1 && currentIndex > -1 && currentIndex < collection.length - 1;
 
@@ -48,6 +58,7 @@ const PreviewNavigation = ({ collection = [], currentIndex, intl, onNavigateLeft
                     {hasLeftNavigation && (
                         <PlainButton
                             className="bcpr-navigate-left"
+                            data-testid="preview-navigation-left"
                             onClick={() => {
                                 goToActiveSidebarTab(match.params, history);
                                 onNavigateLeft();
@@ -61,6 +72,7 @@ const PreviewNavigation = ({ collection = [], currentIndex, intl, onNavigateLeft
                     {hasRightNavigation && (
                         <PlainButton
                             className="bcpr-navigate-right"
+                            data-testid="preview-navigation-right"
                             onClick={() => {
                                 goToActiveSidebarTab(match.params, history);
                                 onNavigateRight();
@@ -77,5 +89,77 @@ const PreviewNavigation = ({ collection = [], currentIndex, intl, onNavigateLeft
     );
 };
 
-export { PreviewNavigation as PreviewNavigationComponent };
+const PreviewNavigationWithoutRouter = ({
+    collection = [],
+    currentIndex,
+    intl,
+    internalSidebarNavigation,
+    internalSidebarNavigationHandler,
+    onNavigateLeft,
+    onNavigateRight,
+}: Props) => {
+    const hasLeftNavigation = collection.length > 1 && currentIndex > 0 && currentIndex < collection.length;
+    const hasRightNavigation = collection.length > 1 && currentIndex > -1 && currentIndex < collection.length - 1;
+
+    if (!hasLeftNavigation && !hasRightNavigation) {
+        return null;
+    }
+
+    const handleInternalNavigation = () => {
+        if (internalSidebarNavigationHandler && internalSidebarNavigation && internalSidebarNavigation.sidebar) {
+            const { sidebar, ...rest } = internalSidebarNavigation;
+            const hasDeeplink = Object.keys(rest).length > 0;
+
+            if (hasDeeplink && sidebar === SIDEBAR_VIEW_METADATA) {
+                internalSidebarNavigationHandler(internalSidebarNavigation);
+            } else {
+                internalSidebarNavigationHandler({ sidebar });
+            }
+        }
+    };
+
+    return (
+        <>
+            {hasLeftNavigation && (
+                <PlainButton
+                    className="bcpr-navigate-left"
+                    data-testid="preview-navigation-left"
+                    onClick={() => {
+                        handleInternalNavigation();
+                        onNavigateLeft();
+                    }}
+                    title={intl.formatMessage(messages.previousFile)}
+                    type="button"
+                >
+                    <IconNavigateLeft />
+                </PlainButton>
+            )}
+            {hasRightNavigation && (
+                <PlainButton
+                    className="bcpr-navigate-right"
+                    data-testid="preview-navigation-right"
+                    onClick={() => {
+                        handleInternalNavigation();
+                        onNavigateRight();
+                    }}
+                    title={intl.formatMessage(messages.nextFile)}
+                    type="button"
+                >
+                    <IconNavigateRight />
+                </PlainButton>
+            )}
+        </>
+    );
+};
+
+const PreviewNavigation = (props: Props) => {
+    const { routerDisabled = false } = props;
+
+    if (routerDisabled) {
+        return <PreviewNavigationWithoutRouter {...props} />;
+    }
+
+    return <PreviewNavigationWithRouter {...props} />;
+};
+
 export default injectIntl(PreviewNavigation);