From f87ce0cadf3dd55cfc6b0724025a06f19308787e Mon Sep 17 00:00:00 2001
From: Ivan Fraixedes <ivan@fraixed.es>
Date: Thu, 2 Dec 2021 18:52:33 +0100
Subject: [PATCH] satellite/admin/ui: Fix component rendering

I introduced a change in the UI that was a better way to dynamically
render Svelte components
(https://review.dev.storj.io/c/storj/storj/+/5931/4..5) during the
review of the first version of it, however, while it works perfectly
on development mode it doesn't work when the assets are built for
production, failing silently, because the constructor name get renamed
due to the name mangling caused by the minifyer as stated in the
following issue: https://github.com/sveltejs/svelte/issues/6980

This commit use a different alternative not based on the constructor
name and it works fine with the production build.

Change-Id: I643c405f877a9206cf0e51b44d5138e5a9756a79
---
 satellite/admin/ui/src/lib/UIGenerator.svelte | 29 ++++++++++++++-----
 satellite/admin/ui/src/lib/ui-generator.ts    |  2 +-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/satellite/admin/ui/src/lib/UIGenerator.svelte b/satellite/admin/ui/src/lib/UIGenerator.svelte
index f63462a05..040543eef 100644
--- a/satellite/admin/ui/src/lib/UIGenerator.svelte
+++ b/satellite/admin/ui/src/lib/UIGenerator.svelte
@@ -9,8 +9,11 @@ See `ui-generator.ts` file for knowing about the `Operation` interface which is
 the type of the "operation" value to be passed in.
 -->
 <script lang="ts">
+	import type { SvelteComponent } from 'svelte';
+
 	import { prettyPrintJson as prettyJSON } from 'pretty-print-json';
-	import type { Operation } from '$lib/ui-generator';
+	import type { ParamUI, Operation } from '$lib/ui-generator';
+	import { InputText, Select, Textarea } from '$lib/ui-generator';
 
 	import UIInputText from '$lib/UIGeneratorInputText.svelte';
 	import UISelect from '$lib/UIGeneratorSelect.svelte';
@@ -25,6 +28,22 @@ the type of the "operation" value to be passed in.
 		});
 	}
 
+	function componentFromConfig(param: ParamUI): typeof SvelteComponent {
+		if (param instanceof InputText) {
+			return UIInputText;
+		}
+
+		if (param instanceof Select) {
+			return UISelect;
+		}
+
+		if (param instanceof Textarea) {
+			return UITextarea;
+		}
+
+		throw new Error('PANIC unmapped component');
+	}
+
 	$: {
 		if (operation !== prevOperation) {
 			opArgs = new Array(operation.params.length);
@@ -38,12 +57,6 @@ the type of the "operation" value to be passed in.
 	let opArgs: opArg[] = new Array(operation.params.length);
 	let result: Promise<Record<string, unknown> | null>;
 	let form: HTMLFormElement;
-
-	let componentsMap = {
-		InputText: UIInputText,
-		Select: UISelect,
-		Textarea: UITextarea
-	};
 </script>
 
 <div>
@@ -51,7 +64,7 @@ the type of the "operation" value to be passed in.
 	<form bind:this={form} on:submit|preventDefault={() => execOperation(operation, opArgs)}>
 		{#each operation.params as param, i}
 			<svelte:component
-				this={componentsMap[param[1].constructor.name]}
+				this={componentFromConfig(param[1])}
 				label={param[0]}
 				config={param[1]}
 				bind:value={opArgs[i]}
diff --git a/satellite/admin/ui/src/lib/ui-generator.ts b/satellite/admin/ui/src/lib/ui-generator.ts
index 81b3f0e90..8dc3fe33c 100644
--- a/satellite/admin/ui/src/lib/ui-generator.ts
+++ b/satellite/admin/ui/src/lib/ui-generator.ts
@@ -29,7 +29,7 @@ export interface Operation {
 	func: (...p: unknown[]) => Promise<Record<string, unknown> | null>;
 }
 
-type ParamUI = InputText | Select | Textarea;
+export type ParamUI = InputText | Select | Textarea;
 
 export class InputText {
 	constructor(