Manually fix management portal lint errors

src/ui/ManagementPortal/app.vue

@@ -45,7 +45,7 @@ export default {
 		style: {
 			immediate: true,
 			handler() {
-				for (let cssVar in this.style) {
+				for (const cssVar in this.style) {
 					document.documentElement.style.setProperty(cssVar, this.style[cssVar]);
 				}
 			},

src/ui/ManagementPortal/components/AccessControl.vue

@@ -66,6 +66,7 @@ export default {
 		scope: {
 			type: String,
 			required: false,
+			default: null,
 		},
 	},
 

src/ui/ManagementPortal/components/ApiStatusCard.vue

@@ -43,6 +43,7 @@ export default {
 		description: {
 			type: String,
 			required: false,
+			default: '',
 		},
 	},
 	data() {

src/ui/ManagementPortal/components/RoleAssignmentsTable.vue

@@ -10,12 +10,12 @@
 
 		<!-- Table -->
 		<DataTable
-			rowGroupMode="subheader"
-			groupRowsBy="role.display_name"
-			sortField="role.display_name"
-			expandableRowGroups
 			v-model:expandedRowGroups="expandedRowGroups"
 			:value="roleAssignments"
+			expandable-row-groups
+			row-group-mode="subheader"
+			group-rows-by="role.display_name"
+			sort-field="role.display_name"
 			striped-rows
 			scrollable
 			table-style="max-width: 100%"
@@ -174,7 +174,7 @@ export default {
 		scope: {
 			required: false,
 			type: String,
-			default: '',
+			default: null,
 		},
 	},
 
@@ -199,7 +199,7 @@ export default {
 				const roleAssignments = await api.getRoleAssignments(this.scope);
 
 				const principalIds = [];
-				for (let assignmentForPrincipalId of roleAssignments) {
+				for (const assignmentForPrincipalId of roleAssignments) {
 					principalIds.push(assignmentForPrincipalId.resource.principal_id);
 				}
 
@@ -210,7 +210,7 @@ export default {
 				const roleDefinitions = await api.getRoleDefinitions();
 
 				// Expand all role groups in table
-				for (let roleDefinition of roleDefinitions) {
+				for (const roleDefinition of roleDefinitions) {
 					this.expandedRowGroups.push(roleDefinition.display_name);
 				}
 

src/ui/ManagementPortal/components/SecretKeyInput.vue

@@ -50,11 +50,13 @@ export default {
 		placeholder: {
 			type: String,
 			required: false,
+			default: '',
 		},
 
 		ariaLabelledby: {
 			type: String,
 			required: false,
+			default: '',
 		},
 	},
 

src/ui/ManagementPortal/components/Sidebar.vue

@@ -58,9 +58,9 @@
 			<span>Security</span>
 		</div>
 
-		<NuxtLink to="/security/role-assignments" class="sidebar__item"
-			>Instance Access Control</NuxtLink
-		>
+		<NuxtLink to="/security/role-assignments" class="sidebar__item">
+			Instance Access Control
+		</NuxtLink>
 
 		<!-- FLLM Deployment -->
 		<div class="sidebar__section-header">

src/ui/ManagementPortal/js/api.test.ts

@@ -1,8 +1,10 @@
+import { config as loadEnv } from 'dotenv';
 import { describe, test, expect } from 'vitest';
 import api from './api';
-require('dotenv').config();
 
-describe('API Account Tests', async () => {
+loadEnv();
+
+describe('API Account Tests', () => {
 	api.setApiUrl(process.env.VITEST_API_URL);
 	api.setInstanceId(process.env.VITEST_API_INSTANCE_ID);
 	api.bearerToken = process.env.VITEST_API_AUTH_TOKEN;

src/ui/ManagementPortal/js/api.ts

@@ -1,10 +1,11 @@
+import { $fetch } from 'ofetch';
 import type {
 	ResourceProviderGetResult,
 	Agent,
 	DataSource,
 	AppConfigUnion,
 	AgentIndex,
-	AgentGatekeeper,
+	// AgentGatekeeper,
 	AIModel,
 	FilterRequest,
 	CreateAgentRequest,
@@ -15,15 +16,14 @@ import type {
 	CreatePromptRequest,
 	CreateTextPartitioningProfileRequest,
 	ExternalOrchestrationService,
-	Role,
+	// Role,
 	RoleAssignment,
 } from './types';
 import { convertToDataSource, convertToAppConfigKeyVault, convertToAppConfig } from '@/js/types';
-import { $fetch } from 'ofetch';
 
-async function wait(milliseconds: number = 1000): Promise<void> {
-	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));
-}
+// async function wait(milliseconds: number = 1000): Promise<void> {
+// 	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));
+// }
 
 export default {
 	apiVersion: '2024-02-16',
@@ -630,7 +630,7 @@ export default {
 			},
 		)) as RoleAssignment[];
 
-		assignments.map((assignment) => {
+		assignments.forEach((assignment) => {
 			if (assignment.resource.scope === `/instances/${this.instanceId}`) {
 				assignment.resource.scope_name = scope ? 'Instance (Inherited)' : 'Instance';
 			} else if (assignment.resource.scope === `/instances/${this.instanceId}/${scope}`) {

src/ui/ManagementPortal/layouts/default.vue

@@ -21,6 +21,7 @@
 			</Dialog>
 
 			<footer v-if="$appConfigStore.footerText">
+				<!-- eslint-disable-next-line vue/no-v-html -->
 				<div class="footer-item" v-html="$appConfigStore.footerText"></div>
 			</footer>
 		</div>

src/ui/ManagementPortal/pages/agents/private.vue

@@ -105,9 +105,9 @@
 					<template #body="{ data }">
 						<Button
 							link
-							@click="agentToDelete = data.resource"
 							:disabled="!data.actions.includes('FoundationaLLM.Agent/agents/delete')"
 							:aria-label="`Delete ${data.resource.name}`"
+							@click="agentToDelete = data.resource"
 						>
 							<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
 						</Button>

src/ui/ManagementPortal/pages/agents/public.vue

@@ -105,9 +105,9 @@
 					<template #body="{ data }">
 						<Button
 							link
-							@click="agentToDelete = data.resource"
 							:disabled="!data.actions.includes('FoundationaLLM.Agent/agents/delete')"
 							:aria-label="`Delete ${data.resource.name}`"
+							@click="agentToDelete = data.resource"
 						>
 							<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
 						</Button>

src/ui/ManagementPortal/pages/data-sources/create.vue

@@ -40,12 +40,12 @@
 				<div class="input-wrapper">
 					<InputText
 						v-model="dataSource.name"
+						:disabled="editId"
 						type="text"
 						class="w-100"
-						:disabled="editId"
-						@input="handleNameInput"
 						placeholder="Enter data source name"
 						aria-labelledby="aria-source-name aria-source-name-desc"
+						@input="handleNameInput"
 					/>
 					<span
 						v-if="nameValidationStatus === 'valid'"
@@ -56,8 +56,8 @@
 					</span>
 					<span
 						v-else-if="nameValidationStatus === 'invalid'"
-						class="icon invalid"
 						:title="validationMessage"
+						class="icon invalid"
 					>
 						❌
 					</span>
@@ -170,9 +170,9 @@
 					</div>
 					<Chips
 						v-model="folders"
+						v-create-chip-on-blur:folders
 						class="w-100"
 						separator=","
-						v-create-chip-on-blur:folders
 						aria-labelledby="aria-folders aria-folders-desc"
 						:pt="{ input: { 'aria-labelledby': 'aria-folders aria-folders-desc' } }"
 					/>
@@ -252,9 +252,9 @@
 					</div>
 					<Chips
 						v-model="workspaces"
+						v-create-chip-on-blur:workspaces
 						class="w-100"
 						separator=","
-						v-create-chip-on-blur:workspaces
 						aria-labelledby="aria-workspaces aria-workspaces-desc"
 						:pt="{ input: { 'aria-labelledby': 'aria-workspaces aria-workspaces-desc' } }"
 					/>
@@ -279,9 +279,9 @@
 							</div>
 							<Chips
 								v-model="tables"
+								v-create-chip-on-blur:tables
 								class="w-100"
 								separator=","
-								v-create-chip-on-blur:tables
 								aria-labelledby="aria-table-names aria-table-names-desc"
 								:pt="{ input: { 'aria-labelledby': 'aria-table-names aria-table-names-desc' } }"
 							/>
@@ -345,9 +345,9 @@
 							</div>
 							<Chips
 								v-model="documentLibraries"
+								v-create-chip-on-blur:documentLibraries
 								class="w-100"
 								separator=","
-								v-create-chip-on-blur:documentLibraries
 								aria-labelledby="aria-document-libs aria-document-libs-desc"
 								:pt="{ input: { 'aria-labelledby': 'aria-document-libs aria-document-libs-desc' } }"
 							/>

src/ui/ManagementPortal/pages/data-sources/index.vue

@@ -101,8 +101,8 @@
 					<template #body="{ data }">
 						<Button
 							link
-							@click="dataSourceToDelete = data.resource"
 							:aria-label="`Delete ${data.resource.name}`"
+							@click="dataSourceToDelete = data.resource"
 						>
 							<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
 						</Button>

src/ui/ManagementPortal/pages/index/index.vue

@@ -15,12 +15,13 @@
 </template>
 
 <script lang="ts">
-import NavigationBox from '@/components/NavigationBox.vue';
+// import NavigationBox from '@/components/NavigationBox.vue';
 
 export default {
 	name: 'ManagementPortal',
+
 	components: {
-		NavigationBox,
+		// NavigationBox,
 	},
 };
 </script>

src/ui/ManagementPortal/pages/info.vue

@@ -8,8 +8,8 @@
 			<ApiStatusCard
 				v-for="api in apiUrls"
 				:key="api.name"
-				:apiName="api.displayName"
-				:apiUrl="api.url"
+				:api-name="api.displayName"
+				:api-url="api.url"
 				:description="api.description"
 			/>
 		</div>
@@ -19,8 +19,8 @@
 			<ApiStatusCard
 				v-for="api in externalOrchestrationServices"
 				:key="api.name"
-				:apiName="api.name"
-				:apiUrl="api.url"
+				:api-name="api.name"
+				:api-url="api.url"
 				:description="api.description"
 			/>
 		</div>
@@ -53,7 +53,7 @@ export default {
 	methods: {
 		async fetchApiUrls() {
 			this.loading = true;
-			let instancePart = `/instances/${this.$appConfigStore.instanceId}`;
+			const instancePart = `/instances/${this.$appConfigStore.instanceId}`;
 
 			this.apiUrls = [
 				{

src/ui/ManagementPortal/pages/security/role-assignments/create.vue

@@ -189,10 +189,9 @@
 </template>
 
 <script lang="ts">
+import { v4 as uuidv4 } from 'uuid';
 import type { PropType } from 'vue';
-import { debounce } from 'lodash';
 import api from '@/js/api';
-import { v4 as uuidv4 } from 'uuid';
 
 import type { Role, RoleAssignment } from '@/js/types';
 
@@ -215,6 +214,7 @@ export default {
 		scope: {
 			type: String,
 			required: false,
+			default: null,
 		},
 	},
 
@@ -308,7 +308,7 @@ export default {
 		},
 
 		handlePrincipalSearch(event) {
-			let optionsToSearch = this.principalSearchType === 'Group' ? this.groups : this.users;
+			const optionsToSearch = this.principalSearchType === 'Group' ? this.groups : this.users;
 
 			this.principalOptionsFiltered = optionsToSearch.filter((principal) => {
 				const queryLowercase = event.query.toLowerCase();

src/ui/ManagementPortal/pages/security/role-assignments/index.vue

@@ -21,9 +21,6 @@
 </template>
 
 <script lang="ts">
-import api from '@/js/api';
-import type { RoleAssignment } from '@/js/types';
-
 export default {
 	name: 'RoleAssignments',
 };