From 77600d41304c1094b3f0498839f572b3dfced063 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Wed, 25 Sep 2024 14:48:59 -0400
Subject: [PATCH] 4822 bug the enrichment modal labels are not clickable
 (#4918)

---
 .../widgets/tera-asset-enrichment.vue         | 55 +++++++++----------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue b/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
index 225001028a..06b35b8bc0 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-asset-enrichment.vue
@@ -11,14 +11,20 @@
 		<template #header>
 			<h4>Enrich metadata</h4>
 		</template>
-		<p>
-			The AI assistant can enrich the metadata of this {{ assetType }}. Select a document or generate the information
-			without additional context.
-		</p>
+		<p>The AI assistant can enrich the metadata of this {{ assetType }}.</p>
+		<p>Select a document or generate the information without additional context.</p>
 		<ul>
+			<li>
+				<label for="no-document">
+					<RadioButton inputId="no-document" name="no-document" v-model="selectedResourceId" value="" />
+					Generate information without context
+				</label>
+			</li>
 			<li v-for="document in documents" :key="document.id" :class="document.id ? '' : 'mb-3'">
-				<RadioButton inputId="document.id" name="document.id" v-model="selectedResourceId" :value="document.id" />
-				<label :for="document.id">{{ document.name }}</label>
+				<label :for="document.id">
+					<RadioButton :inputId="document.id" name="document.id" v-model="selectedResourceId" :value="document.id" />
+					{{ document.name }}
+				</label>
 			</li>
 		</ul>
 		<template #footer>
@@ -112,15 +118,14 @@ const isDialogDisabled = computed(() => {
 // 	return `Use Document to ${result.toLowerCase()}`;
 // });
 
-const documents = computed<{ name: string; id: string }[]>(() => [
-	{ name: 'No document', id: '' }, // Empty string is falsey
-	...useProjects()
+const documents = computed<{ name: string; id: string }[]>(() =>
+	useProjects()
 		.getActiveProjectAssets(AssetType.Document)
 		.map((projectAsset: ProjectAsset) => ({
 			name: projectAsset.assetName,
 			id: projectAsset.assetId
 		}))
-]);
+);
 
 function closeDialog() {
 	isModalVisible.value = false;
@@ -207,31 +212,23 @@ ul {
 	gap: var(--gap-2);
 	padding: var(--gap-4) 0;
 
-	& > li {
+	li {
 		display: flex;
 		align-items: center;
-		gap: var(--gap);
 	}
-}
 
-.no-documents {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
+	li:first-child {
+		margin-bottom: var(--gap-2);
+	}
 
-.no-documents-img {
-	width: 30%;
-	padding: 10px;
-}
+	label {
+		cursor: pointer;
+	}
 
-.no-documents-text {
-	padding: 5px;
-	font-size: var(--font-body-medium);
-	font-family: var(--font-family), sans-serif;
-	font-weight: 500;
-	color: var(--text-color-secondary);
-	text-align: left;
+	/* Add margin between the input and the copy */
+	label > :last-child {
+		margin-right: var(--gap-2);
+	}
 }
 
 .p-dialog aside > * {