fix(api-explorer): resolve extension routes to absolute Looker host URLs

packages/api-explorer/src/components/DocReferences/utils.tsx

@@ -25,7 +25,7 @@
  */
 import React from 'react';
 import type { ApiModel, IMethod, IType } from '@looker/sdk-codegen';
-import { Link } from 'react-router-dom';
+import { Link } from '../Link';
 import { RunItHeading } from '@looker/run-it';
 import { buildPath, highlightHTML } from '../../utils';
 

packages/api-explorer/src/components/Link/Link.tsx

@@ -24,10 +24,76 @@
 
  */
 
-import { NavLink } from 'react-router-dom';
+import type { FC, MouseEvent } from 'react';
+import React from 'react';
+import { NavLink, useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+import { tryGetEnvAdaptor } from '@looker/extension-utils';
 
-export const Link = styled(NavLink)`
+export interface LinkProps {
+  to: string;
+  exact?: boolean;
+  activeClassName?: string;
+  className?: string;
+}
+
+const LinkComponent: FC<LinkProps> = ({
+  to,
+  exact,
+  activeClassName,
+  className,
+  children,
+  ...props
+}) => {
+  const adaptor = tryGetEnvAdaptor();
+  const history = useHistory();
+  const location = useLocation();
+
+  if (adaptor && adaptor.isExtension()) {
+    const absoluteUrl = adaptor.resolveRouteToAbsoluteUrl(to);
+
+    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+      const isRegularClick =
+        e.button === 0 && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;
+
+      if (isRegularClick) {
+        e.preventDefault();
+        history.push(to);
+      }
+    };
+
+    const isActive = exact
+      ? location.pathname === to
+      : location.pathname.startsWith(to);
+    const activeClass = isActive ? activeClassName || 'active' : '';
+    const combinedClassName = `${className || ''} ${activeClass}`.trim();
+
+    return (
+      <a
+        href={absoluteUrl}
+        onClick={handleClick}
+        className={combinedClassName}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <NavLink
+      to={to}
+      exact={exact}
+      activeClassName={activeClassName}
+      className={className}
+      {...props}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+export const Link = styled(LinkComponent)`
   text-decoration: none;
   color: inherit;
 

packages/extension-utils/src/adaptorUtils.ts

@@ -61,6 +61,8 @@ export interface IEnvironmentAdaptor extends IAuthAdaptor {
   openBrowserWindow: (url: string, target?: string) => void;
   /** error logger */
   logError: (error: Error, componentStack: string) => void;
+  /** Resolves a path to a fully qualified URL for the environment host */
+  resolveRouteToAbsoluteUrl(pathname: string, search?: string): string;
 }
 
 /**
@@ -137,6 +139,10 @@ export const getEnvAdaptor = () => {
   return extensionAdaptor;
 };
 
+export const tryGetEnvAdaptor = () => {
+  return extensionAdaptor;
+};
+
 /**
  * Used by some unit tests
  * @param adaptor to use for testing

packages/extension-utils/src/browserAdaptor.ts

@@ -92,4 +92,8 @@ export class BrowserAdaptor
   logError(_error: Error, _componentStack: string): void {
     // noop - error logging for standalone applications TBD
   }
+
+  resolveRouteToAbsoluteUrl(pathname: string, search = '') {
+    return `${window.location.origin}${pathname}${search}`;
+  }
 }

packages/extension-utils/src/extensionAdaptor.ts

@@ -99,4 +99,13 @@ export class ExtensionAdaptor
       message: componentStack,
     } as ErrorEvent);
   }
+
+  resolveRouteToAbsoluteUrl(pathname: string, search = '') {
+    const { lookerHostData } = this.extensionSdk;
+    if (lookerHostData) {
+      const { hostOrigin, extensionId } = lookerHostData;
+      return `${hostOrigin}/extensions/${extensionId}${pathname}${search}`;
+    }
+    return `${pathname}${search}`;
+  }
 }