From aeaebdef6317f22c5d163b52ee3866d8946b2cc6 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 8 Nov 2023 10:21:36 +0100
Subject: [PATCH] feat(frontend): add a way to customise the link's label
 (#2591)

---
 .../components/display/table/AppCell.svelte     | 17 ++++++++++++++++-
 .../components/wizards/TableColumnWizard.svelte | 16 ++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/components/display/table/AppCell.svelte b/frontend/src/lib/components/apps/components/display/table/AppCell.svelte
index 395ead1311..85f83f2fb2 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppCell.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppCell.svelte
@@ -3,6 +3,15 @@
 
 	export let type: 'text' | 'badge' | 'link' = 'text'
 	export let value: any
+
+	type LinkObject = {
+		href: string
+		label: string
+	}
+
+	function isLinkObject(value: any): value is LinkObject {
+		return value && typeof value === 'object' && 'href' in value && 'label' in value
+	}
 </script>
 
 {#if type === 'badge'}
@@ -10,7 +19,13 @@
 		{value}
 	</Badge>
 {:else if type === 'link'}
-	<a href={value} class="underline" target="_blank">{value}</a>
+	{#if isLinkObject(value)}
+		<a href={value.href} class="underline" target="_blank">
+			{value.label}
+		</a>
+	{:else}
+		<a href={value} class="underline" target="_blank">{value}</a>
+	{/if}
 {:else}
 	{value}
 {/if}
diff --git a/frontend/src/lib/components/wizards/TableColumnWizard.svelte b/frontend/src/lib/components/wizards/TableColumnWizard.svelte
index 34fce66ff1..a2f8a87cf1 100644
--- a/frontend/src/lib/components/wizards/TableColumnWizard.svelte
+++ b/frontend/src/lib/components/wizards/TableColumnWizard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Popup } from '../common'
+	import Alert from '../common/alert/Alert.svelte'
 	import Label from '../Label.svelte'
 	import Toggle from '../Toggle.svelte'
 	import Tooltip from '../Tooltip.svelte'
@@ -52,5 +53,20 @@
 				<option value="link">Link</option>
 			</select>
 		</Label>
+
+		{#if column.type === 'link'}
+			<Alert type="info" title="Label" size="xs">
+				They are two ways to define a link:
+				<ul class="list-disc list-inside">
+					<li>
+						<strong>String</strong>: The string will be used as the link and the label.
+					</li>
+					<li>
+						<strong>Object</strong>: The object must have a <code>href</code> and a
+						<code>label</code> property.
+					</li>
+				</ul>
+			</Alert>
+		{/if}
 	</div>
 </Popup>