chore: coderabbit suggestions

frontend/resources/vue/components/EntityDefinitionSection.vue

@@ -51,11 +51,12 @@
 </template>
 
 <script setup>
-	import { computed, ref, watch, onMounted } from 'vue'
+	import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 	import Section from 'picocrank/vue/components/Section.vue'
 	import ActionIconGlyph from './ActionIconGlyph.vue'
 	import EntityInstancesTable from './EntityInstancesTable.vue'
 	import EntityListFilter from './EntityListFilter.vue'
+	import { entityDetailsRoute } from '../utils/entityRoutes.js'
 
 	const props = defineProps({
 		definition: {
@@ -85,16 +86,6 @@
 		scheduleFetchTableInstances()
 	})
 
-	function entityDetailsRoute(inst) {
-		return {
-			name: 'EntityDetails',
-			params: {
-				entityType: inst.type,
-				entityKey: inst.uniqueKey
-			}
-		}
-	}
-
 	function filteredDashboards(dashboards) {
 		return dashboards.filter(d => d && !d.includes('{{'))
 	}
@@ -154,6 +145,13 @@
 			fetchTableInstances()
 		}
 	})
+
+	onBeforeUnmount(() => {
+		if (fetchTimer) {
+			clearTimeout(fetchTimer)
+			fetchTimer = null
+		}
+	})
 </script>
 
 <style scoped>

frontend/resources/vue/components/EntityInstancesTable.vue

@@ -25,6 +25,7 @@
 	import { computed } from 'vue'
 	import Table from 'picocrank/vue/components/Table.vue'
 	import Pagination from 'picocrank/vue/components/Pagination.vue'
+	import { entityDetailsRoute } from '../utils/entityRoutes.js'
 
 	const props = defineProps({
 		instances: {
@@ -54,20 +55,21 @@
 	const headers = computed(() => {
 		const propertyHeaders = props.properties.map(property => ({
 			key: property.name,
-			label: property.title,
+			label: property.title
-			sortable: true
 		}))
 
 		return [
-			{ key: 'title', label: 'Name', sortable: true },
+			{ key: 'title', label: 'Name' },
 			...propertyHeaders
 		]
 	})
 
 	const tableRows = computed(() =>
 		props.instances.map(instance => ({
-			...instance,
+			...instance.fields,
-			...instance.fields
+			title: instance.title,
+			type: instance.type,
+			uniqueKey: instance.uniqueKey
 		}))
 	)
 
@@ -81,15 +83,6 @@
 		set: value => emit('update:pageSize', value)
 	})
 
-	function entityDetailsRoute(row) {
-		return {
-			name: 'EntityDetails',
-			params: {
-				entityType: row.type,
-				entityKey: row.uniqueKey
-			}
-		}
-	}
 </script>
 
 <style scoped>

frontend/resources/vue/components/EntityListFilter.vue

@@ -6,6 +6,7 @@
 		</svg>
 		<input
 			:value="modelValue"
+			aria-label="Filter entities"
 			placeholder="Filter entities..."
 			@input="$emit('update:modelValue', $event.target.value)"
 		/>

frontend/resources/vue/utils/entityRoutes.js

@@ -0,0 +1,9 @@
+export function entityDetailsRoute (entity) {
+  return {
+    name: 'EntityDetails',
+    params: {
+      entityType: entity.type,
+      entityKey: entity.uniqueKey
+    }
+  }
+}

frontend/resources/vue/views/ArgumentForm.vue

@@ -55,7 +55,7 @@
 
         <template v-if="justificationRequired">
           <label for="justification">Justification:</label>
-          <input id="justification" name="justification" type="text" v-model="justificationValue" required />
+          <input id="justification" name="justification" type="text" :value="justificationValue" required @input="handleJustificationInput" />
         </template>
 
         <div v-if="actionArguments.length === 0 && !justificationRequired">
@@ -105,6 +105,7 @@ const popupOnStart = ref('')
 const formReady = ref(false)
 const justificationConfig = ref('')
 const justificationValue = ref('')
+const justificationEditedManually = ref(false)
 const justificationRequired = computed(() => actionRequiresJustification(justificationConfig.value))
 const justificationTemplate = computed(() => actionJustificationTemplate(justificationConfig.value))
 let isComponentMounted = true
@@ -136,6 +137,7 @@ async function setup() {
     actionArguments.value = action.arguments || []
     justificationConfig.value = action.justification || ''
     justificationValue.value = ''
+    justificationEditedManually.value = false
     argValues.value = {}
     formErrors.value = {}
     confirmationChecked.value = false
@@ -246,6 +248,11 @@ function getArgumentValue(arg) {
   return argValues.value[arg.name] || ''
 }
 
+function handleJustificationInput(event) {
+  justificationValue.value = event.target.value
+  justificationEditedManually.value = true
+}
+
 function handleInput(arg, event) {
   const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value
   argValues.value[arg.name] = value
@@ -408,7 +415,7 @@ function getArgumentMapForTemplate() {
 }
 
 function updateJustificationFromTemplate() {
-  if (!justificationTemplate.value) {
+  if (!justificationTemplate.value || justificationEditedManually.value) {
     return
   }
 
@@ -619,12 +626,12 @@ onUnmounted(() => {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  color: inherit;
+  color: var(--link-color, #0066cc);
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 .action-details-title-link:hover {
-  text-decoration: underline;
+  color: var(--link-hover-color, #004499);
 }
 
 form {

frontend/resources/vue/views/EntityDetailsView.vue

@@ -56,7 +56,7 @@
 			</ul>
 		</div>
 		<p v-else>No directories found for this entity.
-			<a href = "https://docs.olivetin.app/dashboards/entity-directories.html" target = "_blank">Learn more</a>
+			<a href="https://docs.olivetin.app/dashboards/entity-directories.html" target="_blank" rel="noopener noreferrer">Learn more</a>
 		</p>
 	</Section>