Relative linking

- Merge in the latest main

Author: mofojed

package-lock.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>
     )

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

@@ -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": {

packages/babel-preset/package.json

@@ -1,24 +1,31 @@
-# Location of the iris script and API server
-# Set this value to __mocks__ to use mock server instead
-BASE_URL=/ide/
-VITE_CORE_API_URL=/jsapi
+# Path at which the app is served
+# https://vitejs.dev/guide/build.html#public-base-path
+BASE_URL=./
+
+# Location of the core JS API and API server
+# We assume that the jsapi is served up as a sibling of the code studio
+# I.e. Web UI served at http://www.example.com/ide/, then JS API served at http://www.example.com/jsapi/
+# This path is relative to the base URL, so we need to go up one level
+VITE_CORE_API_URL=../jsapi
 VITE_CORE_API_NAME=dh-core.js
-VITE_PLUGIN_URL=/ide/plugins/
-VITE_PROXY_URL=http://localhost:10000
+
+# Path to plugins that load a module
+# See https://github.com/deephaven/deephaven-js-plugin-template/
+# Like the CORE_API_URL, we assume this is served up as a sibling of the code studio
+VITE_MODULE_PLUGINS_URL=../js-plugins
+
+# Path for notebooks and layouts storage on the gRPCStorageService
+# Note these are not URLs, these are file system paths on the server in the gRPCStorageService
 VITE_NOTEBOOKS_URL=/notebooks
 VITE_LAYOUTS_URL=/layouts
-VITE_ENABLE_LOG_PROXY=true
+
+# Proxy used by Vite
+VITE_PROXY_URL=http://localhost:10000
 VITE_SUPPORT_LINK=https://github.com/deephaven/web-client-ui/
 VITE_DOCS_LINK=https://deephaven.io/core/docs/
 VITE_FAVICON=/favicon-cc-app.svg
 VITE_BUILD_PATH=./build
-VITE_LOG_LEVEL=2
 
-# Plugin URLs
-## Path to plugins that load/render as a component (e.g. Table plugins)
-## See https://github.com/deephaven/js-plugin-template/ for templates
-VITE_COMPONENT_PLUGINS_URL=/ide/plugins/
-
-## Path to plugins that load a module
-## See https://github.com/deephaven/deephaven-js-plugin-template/
-VITE_MODULE_PLUGINS_URL=/js-plugins
+# Proxy the log service to store logs to export easily for support
+VITE_ENABLE_LOG_PROXY=true
+VITE_LOG_LEVEL=2

packages/code-studio/.env

@@ -1,6 +1,6 @@
+BASE_URL=/ide/
+VITE_LOG_LEVEL=4
 VITE_ENABLE_LOG_PROXY=false
 VITE_FAVICON=/favicon-cc-app-dev.svg
 
-BASE_URL=/
 PORT=4000
-VITE_LOG_LEVEL=4

packages/code-studio/.env.development

@@ -22,14 +22,6 @@ One common setup is to override the API server URL to point to another server. F
 VITE_CORE_API_URL=https://www.myserver.com/jsapi
 ```
 
-### VITE_NOTEBOOKS_URL
-
-One common setup is to override the API server URL to point to another server. For example, add the following block to `.env.development.local` to have `npm start` point to a remote server for the API:
-
-```shell
-VITE_CORE_API_URL=https://www.myserver.com/notebooks
-```
-
 ### VITE_LOG_LEVEL
 
 Printing detailed logs when debugging can be handy. The highest level of logging is already set in your `.env.development` file. You can change it in `.env.development.local` if desired.

packages/code-studio/.env.test

@@ -17,18 +17,20 @@ const AppBootstrap = React.lazy(async () => {
   return { default: module.AppBootstrap };
 });
 
+const apiURL = new URL(
+  `${import.meta.env.VITE_CORE_API_URL}/${import.meta.env.VITE_CORE_API_NAME}`,
+  document.baseURI
+);
+
+const pluginsURL = new URL(
+  import.meta.env.VITE_MODULE_PLUGINS_URL,
+  document.baseURI
+);
+
 ReactDOM.render(
-  <ApiBootstrap
-    apiUrl={`${import.meta.env.VITE_CORE_API_URL}/${
-      import.meta.env.VITE_CORE_API_NAME
-    }`}
-    setGlobally
-  >
+  <ApiBootstrap apiUrl={apiURL.href} setGlobally>
     <Suspense fallback={<LoadingOverlay />}>
-      <AppBootstrap
-        apiUrl={import.meta.env.VITE_CORE_API_URL}
-        pluginsUrl={import.meta.env.VITE_MODULE_PLUGINS_URL}
-      >
+      <AppBootstrap serverUrl={apiURL.origin} pluginsUrl={pluginsURL.href}>
         <AppRoot />
       </AppBootstrap>
     </Suspense>