[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

@@ -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

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');
       }
     }
   });

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 (

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 (

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
               },
               {

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) => {

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};`);