fix(ui): handle subpath. WF-141

src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue

@@ -26,10 +26,7 @@
 					<SharedImgWithFallback
 						:alt="`(Icon for ${tool.name})`"
 						draggable="false"
-						:urls="[
-							`/components/${tool.type}.svg`,
-							`/components/category_${tool.category}.svg`,
-						]"
+						:urls="getToolIcons(tool)"
 					/>
 					<div class="name">{{ tool.name }}</div>
 				</div>
@@ -49,6 +46,7 @@ import injectionKeys from "@/injectionKeys";
 import { useDragDropComponent } from "../useDragDropComponent";
 import { Component } from "@/writerTypes";
 import SharedImgWithFallback from "@/components/shared/SharedImgWithFallback.vue";
+import { convertAbsolutePathtoFullURL } from "@/utils/url";
 
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
@@ -117,6 +115,13 @@ function handleDragEnd(ev: DragEvent) {
 	removeInsertionCandidacy(ev);
 }
 
+function getToolIcons(tool: ReturnType<typeof getRelevantToolsInCategory>[0]) {
+	return [
+		`/components/${tool.type}.svg`,
+		`/components/category_${tool.category}.svg`,
+	].map((p) => convertAbsolutePathtoFullURL(p));
+}
+
 watch(activeToolkit, () => {
 	query.value = "";
 });

src/ui/src/components/workflows/abstract/WorkflowsNode.vue

@@ -74,6 +74,7 @@ import injectionKeys from "@/injectionKeys";
 import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import WorkflowsNodeNamer from "../base/WorkflowsNodeNamer.vue";
 import SharedImgWithFallback from "@/components/shared/SharedImgWithFallback.vue";
+import { convertAbsolutePathtoFullURL } from "@/utils/url";
 
 const emit = defineEmits(["outMousedown", "engaged"]);
 const wf = inject(injectionKeys.core);
@@ -152,7 +153,7 @@ const possibleImageUrls = computed(() => {
 		paths.unshift(`/static/components/${component.value.id}.svg`);
 	}
 
-	return paths;
+	return paths.map((p) => convertAbsolutePathtoFullURL(p));
 });
 
 watch(isEngaged, () => {

src/ui/src/utils/url.spec.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { convertAbsolutePathtoFullURL } from "./url";
+
+describe(convertAbsolutePathtoFullURL.name, () => {
+	it("should convert the URL", () => {
+		expect(
+			convertAbsolutePathtoFullURL(
+				"/assets/image.png",
+				"http://localhost:3000/",
+			),
+		).toBe("http://localhost:3000/assets/image.png");
+	});
+
+	it("should convert the URL with a current path", () => {
+		expect(
+			convertAbsolutePathtoFullURL(
+				"/assets/image.png",
+				"http://localhost:3000/hello/?foo=bar",
+			),
+		).toBe("http://localhost:3000/hello/assets/image.png");
+	});
+});

src/ui/src/utils/url.ts

@@ -0,0 +1,14 @@
+/**
+ * Convert absoule URL to full URLs in case the application is hosted on a subpath.
+ *
+ * ```js
+ * convertAbsolutePathtoFullURL("/assets/image.png", "http://localhost:3000/hello/?foo=bar")
+ * // => 'http://localhost:3000/hello/assets/image.png'
+ * ```
+ */
+export function convertAbsolutePathtoFullURL(
+	path: string,
+	base = window.location.toString(),
+) {
+	return new URL(`.${path}`, base).toString();
+}