AppLink: remove appUrl and href in favor of to

Author: labkey-alan

packages/components/src/internal/components/navigation/NavItem.tsx

@@ -27,9 +27,6 @@ interface NavItemProps extends PropsWithChildren {
 
 export const NavItem: FC<NavItemProps> = memo(({ children, onActive, to, isActive }) => {
     const location = useLocation();
-    // AppLink is explicit about AppURL vs href
-    const href = to instanceof AppURL ? undefined : to;
-    const appUrl = to instanceof AppURL ? to : undefined;
     const itemRef = useRef<HTMLLIElement>(undefined);
     const [active, setActive] = useState<boolean>(false);
 
@@ -54,31 +51,23 @@ export const NavItem: FC<NavItemProps> = memo(({ children, onActive, to, isActiv
 
     return (
         <li className={active ? 'active' : null} ref={itemRef}>
-            <AppLink href={href} appUrl={appUrl}>
-                {children}
-            </AppLink>
+            <AppLink to={to}>{children}</AppLink>
         </li>
     );
 });
 NavItem.displayName = 'NavItem';
 
-export const ParentNavItem: FC<NavItemProps> = memo(({ children, to }) => {
-    // AppLink is explicit about AppURL vs href
-    const href = to instanceof AppURL ? undefined : to;
-    const appUrl = to instanceof AppURL ? to : undefined;
-
-    return (
-        <div className="parent-nav">
-            <ul className="nav navbar-nav">
-                <li>
-                    <AppLink href={href} appUrl={appUrl}>
-                        <i className="fa fa-chevron-left" />
-                        &nbsp;
-                        {children}
-                    </AppLink>
-                </li>
-            </ul>
-        </div>
-    );
-});
+export const ParentNavItem: FC<NavItemProps> = memo(({ children, to }) => (
+    <div className="parent-nav">
+        <ul className="nav navbar-nav">
+            <li>
+                <AppLink to={to}>
+                    <i className="fa fa-chevron-left" />
+                    &nbsp;
+                    {children}
+                </AppLink>
+            </li>
+        </ul>
+    </div>
+));
 ParentNavItem.displayName = 'ParentNavItem';

packages/components/src/internal/components/navigation/ProductMenuSection.tsx

@@ -47,10 +47,8 @@ MenuSectionItemLabel.displayName = 'MenuSectionItemLabel';
 
 const MenuSectionLink: FC<MenuSectionLinkProps> = ({ config, item }) => {
     // const isAppUrl = (item.url instanceof AppURL || item.url.indexOf('#') === 0) && !config.useOriginalURL;
-    const href = item.url instanceof AppURL ? undefined : item.url;
-    const appUrl = item.url instanceof AppURL ? item.url : undefined;
     return (
-        <AppLink appUrl={appUrl} href={href} className="menu-section-link">
+        <AppLink to={item.url} className="menu-section-link">
             <MenuSectionItemLabel config={config} item={item} />
         </AppLink>
     );
@@ -92,9 +90,8 @@ export const ProductMenuSection: FC<MenuSectionProps> = memo(props => {
         headerText
     );
 
-    // In order to make sure we don't break useRouteLeave we need to use <Link> for AppURLs and <a> for non-app URLs
-    let headerEl = label;
-    if (headerEl) {
+    let headerEl: ReactNode;
+    if (label) {
         const headerURL = config.useOriginalURL
             ? section.url
             : createProductUrlFromPartsWithContainer(
@@ -105,33 +102,22 @@ export const ProductMenuSection: FC<MenuSectionProps> = memo(props => {
                   config.headerURLPart ?? section.key
               );
 
-        if (headerURL instanceof AppURL) {
-            headerEl = (
-                <Link to={headerURL.toString()} className="menu-section-link">
-                    {label}
-                </Link>
-            );
-        } else {
-            headerEl = <a href={getHref(headerURL)}>{label}</a>;
-        }
+        const className = headerURL instanceof AppURL ? 'menu-section-link' : undefined;
+        headerEl = (
+            <AppLink to={headerURL} className={className}>
+                {label}
+            </AppLink>
+        );
     }
 
     let emptyLink: ReactNode;
     if (config.emptyAppURL) {
         const emptyURL = createProductUrl(section.productId, currentProductId, config.emptyAppURL, containerPath);
-        if (emptyURL instanceof AppURL) {
-            emptyLink = (
-                <Link className="menu-section-link" to={emptyURL.toString()}>
-                    {config.emptyURLText}
-                </Link>
-            );
-        } else {
-            emptyLink = (
-                <a className="menu-section-link" href={emptyURL}>
-                    {config.emptyURLText}
-                </a>
-            );
-        }
+        emptyLink = (
+            <AppLink to={emptyURL} className="menu-section-link">
+                {config.emptyURLText}
+            </AppLink>
+        );
     }
 
     const visibleItems = section.items.filter(item => !item.hidden).sortBy(item => item.label, naturalSort);

packages/components/src/internal/renderers/DefaultRenderer.tsx

@@ -37,7 +37,7 @@ interface Props {
 }
 
 const TARGET_BLANK = '_blank';
-const URL_REL = 'noopener noreferrer';
+
 /**
  * This is the default cell renderer for Details/Grids using a QueryGridModel.
  */
@@ -76,7 +76,7 @@ export const DefaultRenderer: FC<Props> = memo(({ col, data, noLink }) => {
             if (url && !noLink) {
                 const targetBlank = data.get('urlTarget') === TARGET_BLANK;
                 return (
-                    <AppLink className={className} href={url} targetBlank={targetBlank} style={style}>
+                    <AppLink className={className} to={url} targetBlank={targetBlank} style={style}>
                         {display}
                     </AppLink>
                 );

packages/components/src/internal/url/AppLink.tsx

@@ -2,9 +2,10 @@ import React, { FC, memo, PropsWithChildren, StyleHTMLAttributes } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { AppURL } from './AppURL';
 import { ActionURL } from '@labkey/api';
 
+import { AppURL } from './AppURL';
+
 const TARGET_BLANK = '_blank';
 const URL_REL = 'noopener noreferrer';
 
@@ -34,27 +35,24 @@ export function parseAppPath(href: string): string | undefined {
 }
 
 interface Props extends PropsWithChildren {
-    appUrl?: AppURL;
     className?: string;
-    href?: string;
     style?: StyleHTMLAttributes<HTMLAnchorElement>;
     targetBlank?: boolean;
+    to: string | AppURL;
 }
 
 /**
  * Use this when you need to generate an anchor tag. This should be preferred to all usages of <a> or <Link>, as it
  * handles all the corner cases around moving within our apps, between our apps, to other parts of LKS, and externally.
  */
 export const AppLink: FC<Props> = memo(props => {
-    const { appUrl, children, className, href, style, targetBlank } = props;
-
-    if (!appUrl && !href) throw new Error('AppLink: incorrect usage. Must pass "href" or "appUrl".');
+    const { children, className, style, targetBlank, to } = props;
 
-    const to = appUrl ? appUrl.toString() : parseAppPath(href);
+    const appPath = to instanceof AppURL ? to.toString() : parseAppPath(to);
 
-    if (to) {
+    if (appPath) {
         return (
-            <Link className={className} style={style} to={to}>
+            <Link className={className} style={style} to={appPath}>
                 {children}
             </Link>
         );
@@ -63,7 +61,7 @@ export const AppLink: FC<Props> = memo(props => {
     return (
         <a
             className={className}
-            href={href}
+            href={to as string}
             rel={targetBlank ? URL_REL : undefined}
             style={style}
             target={targetBlank ? TARGET_BLANK : undefined}