feat(left-sidebar): LeftSidebar supports custom navLinkRenderer (#1510)

* feat(leftsidebar): LeftSidebar supports custom navLinkRenderer

* feat(leftsidebar): LeftSidebar supports custom navLinkRenderer

* feat(left-sidebar): LeftSidebar supports custom navLinkRenderer

Author: viodragon2

src/features/left-sidebar/LeftSidebar.js

@@ -13,9 +13,10 @@ import CopyrightFooter from './CopyrightFooter';
 import InstantLogin from './InstantLogin';
 import LeftSidebarDropWrapper from './LeftSidebarDropWrapper';
 import LeftSidebarIconWrapper from './LeftSidebarIconWrapper';
-import LeftSidebarLink from './LeftSidebarLink';
 import NewItemsIndicator from './NewItemsIndicator';
+import defaultNavLinkRenderer from './defaultNavLinkRenderer';
 
+import type { Props as LeftSidebarLinkProps } from './LeftSidebarLink';
 import type { Callout } from './Callout';
 
 import './styles/LeftSidebar.scss';
@@ -39,6 +40,8 @@ type SubMenuItem = {
     id: string,
     /** Localized text string to use for individual menu items */
     message: string,
+    /** Optional left side bar link renderer. Defaults to defaultNavLinkRenderer */
+    navLinkRenderer?: (props: LeftSidebarLinkProps) => React.Node,
     /** Whether we should show a badge marking new item content */
     newItemBadge?: boolean,
     /** Optional remove link click handler */
@@ -78,6 +81,8 @@ type MenuItem = {
     menuItems?: Array<SubMenuItem>,
     /** Localized text string to use for individual menu items */
     message: string,
+    /** Optional left side bar link renderer. Defaults to defaultNavLinkRenderer */
+    navLinkRenderer?: (props: LeftSidebarLinkProps) => React.Node,
     /** Whether we should show a badge marking new item content */
     newItemBadge?: boolean,
     /** Optional remove link click handler */
@@ -282,6 +287,7 @@ class LeftSidebar extends React.Component<Props, State> {
             iconElement,
             id,
             message,
+            navLinkRenderer,
             newItemBadge,
             onClickRemove,
             removeButtonHtmlAttributes,
@@ -296,26 +302,24 @@ class LeftSidebar extends React.Component<Props, State> {
             'is-selected': selected,
         });
 
-        const builtLink = (
-            <LeftSidebarLink
-                callout={callout}
-                canReceiveDrop={canReceiveDrop}
-                className={linkClassNames}
-                customTheme={leftSidebarProps.customTheme}
-                onClickRemove={onClickRemove}
-                htmlAttributes={htmlAttributes}
-                icon={this.getIcon(iconElement, iconComponent, leftSidebarProps.customTheme, selected, scaleIcon)}
-                isScrolling={this.state.isScrolling}
-                key={`link-${id}`}
-                message={message}
-                newItemBadge={this.getNewItemBadge(newItemBadge, leftSidebarProps.customTheme)}
-                removeButtonHtmlAttributes={removeButtonHtmlAttributes}
-                routerLink={routerLink}
-                routerProps={routerProps}
-                selected={selected}
-                showTooltip={showTooltip}
-            />
-        );
+        const linkProps = {
+            callout,
+            className: linkClassNames,
+            customTheme: leftSidebarProps.customTheme,
+            onClickRemove,
+            htmlAttributes,
+            icon: this.getIcon(iconElement, iconComponent, leftSidebarProps.customTheme, selected, scaleIcon),
+            isScrolling: this.state.isScrolling,
+            message,
+            newItemBadge: this.getNewItemBadge(newItemBadge, leftSidebarProps.customTheme),
+            removeButtonHtmlAttributes,
+            routerLink,
+            routerProps,
+            selected,
+            showTooltip,
+        };
+
+        const builtLink = navLinkRenderer ? navLinkRenderer(linkProps) : defaultNavLinkRenderer(linkProps);
 
         // Check for menu items on links so we don't double-highlight groups
         return canReceiveDrop && !props.menuItems ? (
@@ -327,7 +331,7 @@ class LeftSidebar extends React.Component<Props, State> {
                 {builtLink}
             </LeftSidebarDropWrapper>
         ) : (
-            builtLink
+            <React.Fragment key={`link-${id}`}>{builtLink}</React.Fragment>
         );
     }
 

src/features/left-sidebar/LeftSidebarLink.js

@@ -11,7 +11,7 @@ import type { Callout } from './Callout';
 
 import './styles/LeftSidebarLink.scss';
 
-type Props = {
+export type Props = {
     callout?: Callout,
     className?: string,
     customTheme?: Object,

src/features/left-sidebar/__tests__/LeftSidebar-test.js

@@ -285,6 +285,26 @@ describe('feature/left-sidebar/LeftSidebar', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
+    test('should use custom render for menu item if provided', () => {
+        const oneMenuItem = [
+            {
+                navLinkRenderer: () => <h1>Custom Link</h1>,
+                id: 'all-files',
+                message: 'All Files',
+                htmlAttributes: {
+                    href: '/folder/0',
+                },
+                routerLink: undefined,
+                routerProps: undefined,
+                showTooltip: true,
+            },
+        ];
+
+        const wrapper = shallow(<LeftSidebar menuItems={oneMenuItem} />);
+
+        expect(wrapper.exists('h1')).toBeTruthy();
+    });
+
     describe('checkAndChangeScrollShadows()', () => {
         [
             // isn't scrollable