From 21cd28559968c58850a6f92cfb8dff98648d4def Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 2 Dec 2024 18:49:15 +1100
Subject: [PATCH] [PUI] Url fixes (#8615)

* Refactor URL generation

- Use built-in URL function
- Refactor "admin" button
- Refactor API image
- Refactor printing actions
- Refactor attachment link

* Refactor URL generation for icon packs
---
 src/frontend/src/components/buttons/AdminButton.tsx      | 5 ++++-
 src/frontend/src/components/buttons/PrintingActions.tsx  | 8 ++++----
 src/frontend/src/components/images/ApiImage.tsx          | 2 +-
 src/frontend/src/components/items/AttachmentLink.tsx     | 3 ++-
 .../src/components/modals/AboutInvenTreeModal.tsx        | 2 +-
 src/frontend/src/components/plugins/PluginSource.tsx     | 9 +++------
 src/frontend/src/states/IconState.tsx                    | 4 +---
 7 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/buttons/AdminButton.tsx b/src/frontend/src/components/buttons/AdminButton.tsx
index 27a7977f96c4..6dbd5f565a15 100644
--- a/src/frontend/src/components/buttons/AdminButton.tsx
+++ b/src/frontend/src/components/buttons/AdminButton.tsx
@@ -63,7 +63,10 @@ export default function AdminButton(props: Readonly<AdminButtonProps>) {
       }
 
       // Generate the URL for the admin interface
-      const url = `${host}/${server.server.django_admin}${modelDef.admin_url}${props.id}/`;
+      const url = new URL(
+        `${server.server.django_admin}${modelDef.admin_url}${props.id}/`,
+        host
+      );
 
       if (event?.ctrlKey || event?.shiftKey) {
         // Open the link in a new tab
diff --git a/src/frontend/src/components/buttons/PrintingActions.tsx b/src/frontend/src/components/buttons/PrintingActions.tsx
index db9dd22f1bcf..3e633ac5a7bf 100644
--- a/src/frontend/src/components/buttons/PrintingActions.tsx
+++ b/src/frontend/src/components/buttons/PrintingActions.tsx
@@ -116,8 +116,8 @@ export function PrintingActions({
 
       if (response.output) {
         // An output file was generated
-        const url = `${host}${response.output}`;
-        window.open(url, '_blank');
+        const url = new URL(response.output, host);
+        window.open(url.toString(), '_blank');
       }
     }
   });
@@ -154,8 +154,8 @@ export function PrintingActions({
 
       if (response.output) {
         // An output file was generated
-        const url = `${host}${response.output}`;
-        window.open(url, '_blank');
+        const url = new URL(response.output, host);
+        window.open(url.toString(), '_blank');
       }
     }
   });
diff --git a/src/frontend/src/components/images/ApiImage.tsx b/src/frontend/src/components/images/ApiImage.tsx
index 18952360d2fc..92b50f157815 100644
--- a/src/frontend/src/components/images/ApiImage.tsx
+++ b/src/frontend/src/components/images/ApiImage.tsx
@@ -19,7 +19,7 @@ export function ApiImage(props: Readonly<ApiImageProps>) {
   const { host } = useLocalState.getState();
 
   const imageUrl = useMemo(() => {
-    return `${host}${props.src}`;
+    return new URL(props.src, host).toString();
   }, [host, props.src]);
 
   return (
diff --git a/src/frontend/src/components/items/AttachmentLink.tsx b/src/frontend/src/components/items/AttachmentLink.tsx
index 8e03c458eb6d..3103c4f1dcf6 100644
--- a/src/frontend/src/components/items/AttachmentLink.tsx
+++ b/src/frontend/src/components/items/AttachmentLink.tsx
@@ -68,7 +68,8 @@ export function AttachmentLink({
       return attachment;
     }
 
-    return `${host}${attachment}`;
+    const u = new URL(attachment, host);
+    return u.toString();
   }, [host, attachment, external]);
 
   return (
diff --git a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
index 677b22ad3e51..4b0f21d643b9 100644
--- a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
+++ b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
@@ -137,7 +137,7 @@ export function AboutInvenTreeModal({
               {
                 ref: 'api',
                 title: <Trans>API Version</Trans>,
-                link: `${host}api-doc/`,
+                link: new URL('/api-doc/', host).toString(),
                 copy: true
               },
               {
diff --git a/src/frontend/src/components/plugins/PluginSource.tsx b/src/frontend/src/components/plugins/PluginSource.tsx
index 71129dc8995f..33cb3e23d45f 100644
--- a/src/frontend/src/components/plugins/PluginSource.tsx
+++ b/src/frontend/src/components/plugins/PluginSource.tsx
@@ -13,14 +13,11 @@ export async function loadExternalPluginSource(source: string) {
     return null;
   }
 
-  // If the source is a relative URL, prefix it with the host URL
-  if (source.startsWith('/')) {
-    source = `${host}${source}`;
-  }
+  const url = new URL(source, host).toString();
 
-  const module = await import(/* @vite-ignore */ source)
+  const module = await import(/* @vite-ignore */ url)
     .catch((error) => {
-      console.error(`ERR: Failed to load plugin from ${source}:`, error);
+      console.error(`ERR: Failed to load plugin from ${url}:`, error);
       return null;
     })
     .then((module) => {
diff --git a/src/frontend/src/states/IconState.tsx b/src/frontend/src/states/IconState.tsx
index 683c4bbdf550..613e83be97b5 100644
--- a/src/frontend/src/states/IconState.tsx
+++ b/src/frontend/src/states/IconState.tsx
@@ -44,9 +44,7 @@ export const useIconState = create<IconState>()((set, get) => ({
         const src = Object.entries(pack.fonts as Record<string, string>)
           .map(
             ([format, url]) =>
-              `url(${
-                url.startsWith('/') ? host + url : url
-              }) format("${format}")`
+              `url(${new URL(url, host).toString()}) format("${format}")`
           )
           .join(',\n');
         const font = new FontFace(fontName, `${src};`);