From d55fc04540b86228043af4c2675604c780d50384 Mon Sep 17 00:00:00 2001
From: Nassim Tabchiche <n.tabchiche2@gmail.com>
Date: Fri, 20 Dec 2024 19:39:10 +0100
Subject: [PATCH] Generalize Anchor ccomponent to all non-generic detail views

---
 .../src/lib/components/DataViz/Article.svelte     |  6 ++++--
 .../(internal)/experimental/mapping/+page.svelte  |  5 +++--
 .../(internal)/frameworks/[id=uuid]/+page.svelte  |  7 ++++---
 .../(app)/(internal)/my-profile/+page.svelte      | 13 +++++++------
 .../risk-matrices/[id=uuid]/+page.svelte          |  7 ++++---
 .../risk-scenarios/[id=uuid]/+page.svelte         | 13 +++++++------
 .../risk-scenarios/[id=uuid]/edit/+page.svelte    |  9 +++++----
 .../compliance-assessments/[id=uuid]/+page.svelte |  4 ++--
 .../evidences/[id=uuid]/+page.svelte              | 15 ++++++++-------
 9 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/frontend/src/lib/components/DataViz/Article.svelte b/frontend/src/lib/components/DataViz/Article.svelte
index 75c742f43..531a64f1d 100644
--- a/frontend/src/lib/components/DataViz/Article.svelte
+++ b/frontend/src/lib/components/DataViz/Article.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
+
 	export let title;
 	export let desc;
 	export let link;
@@ -11,11 +13,11 @@
 	<div class="rounded-[10px] bg-white p-4 !pt-20 sm:p-6 h-full">
 		<div class="block text-xs text-gray-500 min-h-[2.5rem] flex items-end">{desc}</div>
 
-		<a href={link}>
+		<Anchor href={link}>
 			<h3 class="mt-0.5 text-lg font-medium text-gray-900">
 				{title}
 			</h3>
-		</a>
+		</Anchor>
 
 		<div class="mt-4 flex flex-wrap gap-1">
 			{#each tags as tag}
diff --git a/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte b/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte
index 283092926..f583c8f2b 100644
--- a/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/experimental/mapping/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import type { PageData } from './$types';
 	export let data: PageData;
 	const mapping_sets = data.data.results;
@@ -8,8 +9,8 @@
 	<ul class="list-disc p-4 m-2">
 		{#each mapping_sets as mset}
 			<li class="">
-				<a href={`/experimental/mapping/${mset.id}`} class="text-md hover:text-purple-700"
-					>{mset.name}</a
+				<Anchor href={`/experimental/mapping/${mset.id}`} class="text-md hover:text-purple-700"
+					>{mset.name}</Anchor
 				>
 			</li>
 		{/each}
diff --git a/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte
index a77ae7608..8685313c5 100644
--- a/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/frameworks/[id=uuid]/+page.svelte
@@ -6,6 +6,7 @@
 	import type { TreeViewNode } from '@skeletonlabs/skeleton';
 	import type { PageData } from './$types';
 	import TreeViewItemContent from './TreeViewItemContent.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
@@ -55,7 +56,7 @@
 							{#if value}
 								{#if key === 'library'}
 									{@const itemHref = `/libraries/${value.id}?loaded`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{:else if key === 'scores_definition'}
 									{#each Object.entries(value) as [key, definition]}
 										<div>
@@ -83,7 +84,7 @@
 															(item) => item.field === key
 														)?.urlModel
 													}/${val.id}`}
-													<a href={itemHref} class="anchor">{val.str}</a>
+													<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 												{:else}
 													{value}
 												{/if}
@@ -96,7 +97,7 @@
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{:else}
 									{value.str ?? value}
 								{/if}
diff --git a/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte b/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte
index 9365fa8f0..1a960996d 100644
--- a/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/my-profile/+page.svelte
@@ -4,6 +4,7 @@
 	import { toCamelCase } from '$lib/utils/locales';
 	import { safeTranslate } from '$lib/utils/i18n';
 	import { languageTag } from '$paraglide/runtime';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	function filterUserData() {
 		const filtered = {};
@@ -30,18 +31,18 @@
 	<div class="flex flex-row items-center justify-between">
 		<h1 class="text-xl font-semibold">{$page.data.user.first_name} {$page.data.user.last_name}</h1>
 		<div>
-			<a href="my-profile/change-password" class="btn variant-filled-primary h-fit"
-				><i class="fa-solid fa-key mr-2" />{m.changePassword()}</a
+			<Anchor href="my-profile/change-password" class="btn variant-filled-primary h-fit"
+				><i class="fa-solid fa-key mr-2" />{m.changePassword()}</Anchor
 			>
 			{#if canEditObject}
-				<a
+				<Anchor
 					href="/users/{$page.data.user.id}/edit?next=/my-profile"
 					class="btn variant-filled-primary h-fit"
-					><i class="fa-solid fa-pen-to-square mr-2" />{m.edit()}</a
+					><i class="fa-solid fa-pen-to-square mr-2" />{m.edit()}</Anchor
 				>
 			{/if}
-			<a href="my-profile/settings" class="btn variant-filled-primary h-fit"
-				><i class="fa-solid fa-sliders mr-2" />{m.settings()}</a
+			<Anchor href="my-profile/settings" class="btn variant-filled-primary h-fit"
+				><i class="fa-solid fa-sliders mr-2" />{m.settings()}</Anchor
 			>
 		</div>
 	</div>
diff --git a/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte
index 900af7c61..143805768 100644
--- a/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-matrices/[id=uuid]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 	import RiskMatrix from '$lib/components/RiskMatrix/RiskMatrix.svelte';
 	import { URL_MODEL_MAP } from '$lib/utils/crud.js';
 	const showRisks = true;
@@ -26,7 +27,7 @@
 														(item) => item.field === key
 													)?.urlModel
 												}/${val.id}`}
-												<a href={itemHref} class="anchor">{val.str}</a>
+												<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 											{:else}
 												{value}
 											{/if}
@@ -36,14 +37,14 @@
 							{:else if value.id}
 								{#if key === 'library'}
 									{@const itemHref = `/libraries/${value.id}?loaded`}
-									<a href={itemHref} class="anchor">{value.name}</a>
+									<Anchor href={itemHref} class="anchor">{value.name}</Anchor>
 								{:else}
 									{@const itemHref = `/${
 										URL_MODEL_MAP['risk-matrices']['foreignKeyFields']?.find(
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{/if}
 							{:else}
 								{value.str ?? value}
diff --git a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte
index 3a60190fa..dbda212bf 100644
--- a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/+page.svelte
@@ -9,6 +9,7 @@
 
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import { isDark } from '$lib/utils/helpers';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
@@ -50,10 +51,10 @@
 			</div>
 		</div>
 		{#if canEditObject}
-			<a
+			<Anchor
 				href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
 				class="btn variant-filled-primary h-fit mt-1"
-				data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</a
+				data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</Anchor
 			>
 		{/if}
 	</div>
@@ -64,16 +65,16 @@
 			<div class="flex flex-row justify-between">
 				<span>
 					<p class="text-sm font-semibold text-gray-400">{m.project()}</p>
-					<a class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
-						>{data.scenario.project.str}</a
+					<Anchor class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
+						>{data.scenario.project.str}</Anchor
 					>
 				</span>
 				<span>
 					<p class="text-sm font-semibold text-gray-400">{m.riskAssessment()}</p>
-					<a
+					<Anchor
 						class="anchor text-sm font-semibold"
 						href="/risk-assessments/{data.scenario.risk_assessment.id}"
-						>{data.scenario.risk_assessment.str}</a
+						>{data.scenario.risk_assessment.str}</Anchor
 					>
 				</span>
 				<span>
diff --git a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte
index 2694f794e..489d47494 100644
--- a/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/risk-scenarios/[id=uuid]/edit/+page.svelte
@@ -27,6 +27,7 @@
 	import { safeTranslate } from '$lib/utils/i18n';
 	import * as m from '$paraglide/messages';
 	import { zod } from 'sveltekit-superforms/adapters';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
@@ -132,16 +133,16 @@
 				<div class="flex justify-between p-2">
 					<div>
 						<p class="text-sm font-semibold text-gray-400">{m.project()}</p>
-						<a class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
-							>{data.scenario.project.str}</a
+						<Anchor class="anchor text-sm font-semibold" href="/projects/{data.scenario.project.id}"
+							>{data.scenario.project.str}</Anchor
 						>
 					</div>
 					<div>
 						<p class="text-sm font-semibold text-gray-400">{m.riskAssessment()}</p>
-						<a
+						<Anchor
 							class="anchor text-sm font-semibold"
 							href="/risk-assessments/{data.scenario.risk_assessment.id}"
-							>{data.scenario.risk_assessment.name} {data.scenario.version}</a
+							>{data.scenario.risk_assessment.name} {data.scenario.version}</Anchor
 						>
 					</div>
 				</div>
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
index 9be58eb9c..3af233611 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
@@ -252,7 +252,7 @@
 														)?.urlModel
 													}/${val.id}`}
 													{#if !$page.data.user.is_third_party}
-														<a href={itemHref} class="anchor">{val.str}</a>
+														<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 													{:else}
 														{val.str}
 													{/if}
@@ -269,7 +269,7 @@
 										)?.urlModel
 									}/${value.id}`}
 									{#if !$page.data.user.is_third_party}
-										<a href={itemHref} class="anchor">{value.str}</a>
+										<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 									{:else}
 										{value.str}
 									{/if}
diff --git a/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte
index d10866524..742658e29 100644
--- a/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/evidences/[id=uuid]/+page.svelte
@@ -12,6 +12,7 @@
 
 	import { safeTranslate } from '$lib/utils/i18n';
 	import * as m from '$paraglide/messages';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let data: PageData;
 
@@ -90,7 +91,7 @@
 																(item) => item.field === key
 															)?.urlModel
 														}/${val.id}`}
-														<a href={itemHref} class="anchor">{val.str}</a>
+														<Anchor href={itemHref} class="anchor">{val.str}</Anchor>
 													{:else}
 														{value}
 													{/if}
@@ -106,9 +107,9 @@
 											(item) => item.field === key
 										)?.urlModel
 									}/${value.id}`}
-									<a href={itemHref} class="anchor">{value.str}</a>
+									<Anchor href={itemHref} class="anchor">{value.str}</Anchor>
 								{:else if isURL(value)}
-									<a href={value} target="_blank" class="anchor">{value}</a>
+									<Anchor href={value} target="_blank" class="anchor">{value}</Anchor>
 								{:else}
 									{value.str ?? value}
 								{/if}
@@ -122,10 +123,10 @@
 		</div>
 		<span>
 			{#if canEditObject}
-				<a
+				<Anchor
 					href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
 					class="btn variant-filled-primary h-fit"
-					data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</a
+					data-testid="edit-button"><i class="fa-solid fa-pen-to-square mr-2" /> {m.edit()}</Anchor
 				>
 			{/if}
 		</span>
@@ -158,11 +159,11 @@
 					{data.evidence.attachment}
 				</h4>
 				<div class="space-x-2">
-					<a
+					<Anchor
 						href={`./${data.evidence.id}/attachment`}
 						class="btn variant-filled-primary h-fit"
 						data-testid="attachment-download-button"
-						><i class="fa-solid fa-download mr-2" /> {m.download()}</a
+						><i class="fa-solid fa-download mr-2" /> {m.download()}</Anchor
 					>
 					<button
 						on:click={(_) => {