feat: Relative links (#1204)

- Notebooks work
- Links between notebooks work
- Deeplinking notebooks works in dev mode with proxy
- Does not work in production - would need server to correctly proxy
URLs and write the correct document base
- Embed-grid works
- Embed-chart works
- Plugins work
- Fixes #1070 
- Unit tests and e2e tests pass
- Tested in both a dev build, and production build
- Tested following steps in #1070 
- Tested in DnD, ensured the correct paths were being loaded

Author: mofojed

package-lock.json

@@ -36,6 +36,7 @@
     "@deephaven/jsapi-utils": "file:../jsapi-utils",
     "@deephaven/log": "file:../log",
     "@deephaven/react-hooks": "file:../react-hooks",
+    "@deephaven/utils": "file:../utils",
     "@paciolan/remote-component": "2.13.0",
     "@paciolan/remote-module-loader": "^3.0.2",
     "fira": "mozilla/fira#4.202"

packages/app-utils/package.json

@@ -45,7 +45,7 @@ function renderComponent(client: CoreClient) {
   });
   return render(
     <ApiContext.Provider value={api}>
-      <AppBootstrap apiUrl={API_URL} pluginsUrl={PLUGINS_URL}>
+      <AppBootstrap serverUrl={API_URL} pluginsUrl={PLUGINS_URL}>
         {mockChild}
       </AppBootstrap>
     </ApiContext.Provider>
@@ -59,7 +59,7 @@ beforeEach(() => {
 it('should throw if api has not been bootstrapped', () => {
   expect(() =>
     render(
-      <AppBootstrap apiUrl={API_URL} pluginsUrl={PLUGINS_URL}>
+      <AppBootstrap serverUrl={API_URL} pluginsUrl={PLUGINS_URL}>
         {mockChild}
       </AppBootstrap>
     )
@@ -91,7 +91,7 @@ it('should display an error if no login plugin matches the provided auth handler
   expect(mockLogin).not.toHaveBeenCalled();
   expect(
     screen.queryByText(
-      'Error: No login plugins found, please register a login plugin for auth handlers: MockAuthHandler'
+      'No login plugins found, please register a login plugin for auth handlers: MockAuthHandler'
     )
   ).not.toBeNull();
 });

packages/app-utils/src/components/AppBootstrap.test.tsx

@@ -9,12 +9,12 @@ import FontBootstrap from './FontBootstrap';
 import PluginsBootstrap from './PluginsBootstrap';
 import AuthBootstrap from './AuthBootstrap';
 import ConnectionBootstrap from './ConnectionBootstrap';
-import { getBaseUrl, getConnectOptions } from '../utils';
+import { getConnectOptions } from '../utils';
 import FontsLoaded from './FontsLoaded';
 
 export type AppBootstrapProps = {
-  /** URL of the API to load. */
-  apiUrl: string;
+  /** URL of the server. */
+  serverUrl: string;
 
   /** URL of the plugins to load. */
   pluginsUrl: string;
@@ -33,12 +33,11 @@ export type AppBootstrapProps = {
  * Will display the children when everything is loaded and authenticated.
  */
 export function AppBootstrap({
-  apiUrl,
   fontClassNames,
   pluginsUrl,
+  serverUrl,
   children,
 }: AppBootstrapProps) {
-  const serverUrl = getBaseUrl(apiUrl).origin;
   const clientOptions = useMemo(() => getConnectOptions(), []);
 
   // On logout, we reset the client and have user login again

packages/app-utils/src/components/AppBootstrap.tsx

@@ -7,6 +7,7 @@ import {
 } from '@deephaven/auth-plugins';
 import { LoadingOverlay } from '@deephaven/components';
 import { useClient } from '@deephaven/jsapi-bootstrap';
+import { getErrorMessage } from '@deephaven/utils';
 import { PluginsContext } from './PluginsBootstrap';
 import { getAuthPluginComponent } from '../plugins';
 import LoginNotifier from './LoginNotifier';
@@ -76,8 +77,8 @@ export function AuthBootstrap({ children }: AuthBootstrapProps) {
   if (isLoading || error != null) {
     return (
       <LoadingOverlay
-        isLoading={isLoading}
-        errorMessage={error != null ? `${error}` : undefined}
+        isLoading={isLoading && error == null}
+        errorMessage={getErrorMessage(error)}
       />
     );
   }

packages/app-utils/src/components/AuthBootstrap.tsx

@@ -14,6 +14,7 @@
     { "path": "../jsapi-types" },
     { "path": "../jsapi-utils" },
     { "path": "../log" },
-    { "path": "../react-hooks" }
+    { "path": "../react-hooks" },
+    { "path": "../utils" }
   ]
 }

packages/app-utils/tsconfig.json

@@ -39,8 +39,8 @@
     "@deephaven/jsapi-types": "file:../jsapi-types",
     "@deephaven/jsapi-utils": "file:../jsapi-utils",
     "@deephaven/log": "file:../log",
-    "@deephaven/utils": "file:../utils",
     "@deephaven/redux": "file:../redux",
+    "@deephaven/utils": "file:../utils",
     "classnames": "^2.3.1",
     "react-transition-group": "^4.4.2",
     "js-cookie": "^3.0.5"

packages/auth-plugins/package.json

@@ -6,11 +6,11 @@ interface LoginProps {
   /** What to show in the login input part of the login form. */
   children: React.ReactNode;
 
-  /** Path to the logo. Defaults to `/logo.png` */
+  /** Path to the custom logo, relative to document base */
   logoPath?: string;
 }
 
-export function Login({ children, logoPath = '/logo.png' }: LoginProps) {
+export function Login({ children, logoPath = './logo.png' }: LoginProps) {
   return (
     <div className="login-container">
       <RandomAreaPlotAnimation />

packages/auth-plugins/src/Login.tsx

@@ -22,13 +22,21 @@ module.exports = api => ({
   plugins: [
     api.env('test')
       ? [
-          // This is needed to replace import.meta w/ process in Jest
+          // This is needed to replace import.meta.env w/ process in Jest
           // Jest does not play nicely w/ ESM and Vite uses import.meta
           // import.meta is only avaialable in ESM
           path.resolve(__dirname, 'importMetaEnvPlugin'),
         ]
-      : // The add-import-extension plugin causes Jest to error, but is needed for proper ESM builds
-        ['babel-plugin-add-import-extension'],
+      : false,
+    api.env('test')
+      ? [
+          // Also need to handle import.meta.url
+          'babel-plugin-transform-import-meta',
+        ]
+      : false,
+    api.env('test')
+      ? false // The add-import-extension plugin causes Jest to error, but is needed for proper ESM builds
+      : ['babel-plugin-add-import-extension'],
     [
       'transform-rename-import',
       {

packages/babel-preset/index.js

@@ -17,6 +17,7 @@
     "@babel/preset-react": "^7.18.0",
     "@babel/preset-typescript": "^7.18.0",
     "babel-plugin-add-import-extension": "^1.6.0",
+    "babel-plugin-transform-import-meta": "^2.2.0",
     "babel-plugin-transform-rename-import": "^2.3.0"
   },
   "publishConfig": {