From 79ee2f5d82ae79071f3b0a38c3d946c4c863cd1b Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Sun, 2 Jun 2024 04:28:20 -0700
Subject: [PATCH 01/51] Remove unused code

---
 src/ui/ManagementPortal/js/api.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index e8341a0577..477022dde8 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -23,8 +23,6 @@ async function wait(milliseconds: number = 1000): Promise<void> {
 }
 
 export default {
-	mockLoadTime: 1000,
-
 	apiVersion: '2024-02-16',
 	apiUrl: null as string | null,
 	setApiUrl(apiUrl: string) {
@@ -237,8 +235,6 @@ export default {
 
 	// App Configuration
 	async getAppConfig(key: string): Promise<ResourceProviderGetResult<AppConfigUnion>> {
-		// await wait(this.mockLoadTime);
-		// return mockAzureDataLakeDataSource1;
 		const data = await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${key}?api-version=${this.apiVersion}`,
 		);
@@ -461,11 +457,6 @@ export default {
 		);
 	},
 
-	async getAgentGatekeepers(): Promise<AgentGatekeeper[]> {
-		await wait(this.mockLoadTime);
-		return [];
-	},
-
 	// Prompts
 	async getPrompt(promptId: string): Promise<ResourceProviderGetResult<Prompt> | null> {
 		// Attempt to retrieve the prompt. If it doesn't exist, return an empty object.

From 9de5abf8769aa4a6534277feefcf5acb09bfd898 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 3 Jun 2024 08:56:55 -0700
Subject: [PATCH 02/51] Rough role assignment list and create/edit

---
 .../ManagementPortal/components/Sidebar.vue   |   1 +
 src/ui/ManagementPortal/js/api.ts             |  29 +-
 src/ui/ManagementPortal/js/mock.ts            | 288 +++++++++++
 src/ui/ManagementPortal/js/types.ts           |   8 +
 .../security/role-assignments/create.vue      | 464 ++++++++++++++++++
 .../edit/[roleAssignmentName].vue             |  13 +
 .../pages/security/role-assignments/index.vue | 210 ++++++++
 7 files changed, 1012 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/ManagementPortal/pages/security/role-assignments/create.vue
 create mode 100644 src/ui/ManagementPortal/pages/security/role-assignments/edit/[roleAssignmentName].vue
 create mode 100644 src/ui/ManagementPortal/pages/security/role-assignments/index.vue

diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index 31c5b1e883..e5dcc14150 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -55,6 +55,7 @@
 			<span>Security</span>
 		</div>
 
+		<NuxtLink to="/security/role-assignments" class="sidebar__item">Role Assignments</NuxtLink>
 		<div class="sidebar__item">Identity & Access Management (IAM)</div>
 
 		<!-- FLLM Deployment -->
diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 477022dde8..85e5a0edad 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -14,9 +14,11 @@ import type {
 	CreatePromptRequest,
 	CreateTextPartitioningProfileRequest,
 	ExternalOrchestrationService,
+	Role,
+	RoleAssignment,
 } from './types';
 import { convertToDataSource, convertToAppConfigKeyVault, convertToAppConfig } from '@/js/types';
-// import { mockAzureDataLakeDataSource1 } from './mock';
+import { mockRoles, mockRoleAssignmentsResponse } from './mock';
 
 async function wait(milliseconds: number = 1000): Promise<void> {
 	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));
@@ -526,4 +528,29 @@ export default {
 		// Return the updated external orchestration services.
 		return data;
 	},
+
+	async getRoles(): Roles[] {
+		await wait(1000);
+		return mockRoles;
+	},
+
+	async getRoleAssignments(): RoleAssignment[] {
+		await wait(1000);
+		return mockRoleAssignmentsResponse;
+	},
+
+	async getRoleAssignment(roleAssignmentId): RoleAssignment {
+		await wait(1000);
+		return mockRoleAssignmentsResponse.role_assignments.find((roleAssignment) => roleAssignment.name === roleAssignmentId);
+	},
+
+	async updateRoleAssignment(roleAssignment: RoleAssignment) {
+		await wait(1000);
+		return roleAssignment;
+	},
+
+	async deleteRoleAssignment(roleAssignmentId): void {
+		await wait(1000);
+		return roleAssignmentId;
+	},
 };
diff --git a/src/ui/ManagementPortal/js/mock.ts b/src/ui/ManagementPortal/js/mock.ts
index 5f4e6a9f7a..5137e3a0bf 100644
--- a/src/ui/ManagementPortal/js/mock.ts
+++ b/src/ui/ManagementPortal/js/mock.ts
@@ -118,3 +118,291 @@ export const mockAzureDataLakeDataSource2: AzureDataLakeDataSource = {
 		Endpoint: 'https://solliance.com',
 	},
 };
+
+export const mockRoles = [
+	{
+		"type": "FoundationaLLM.Authorization/roleDefinitions",
+		"name": "17ca4b59-3aee-497d-b43b-95dd7d916f99",
+		"object_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/17ca4b59-3aee-497d-b43b-95dd7d916f99",
+		"display_name": "Role Based Access Control Administrator",
+		"description": "Manage access to FoundationaLLM resources by assigning roles using FoundationaLLM RBAC.",
+		"assignable_scopes": [
+			"/"
+		],
+		"permissions": [
+			{
+				"actions": [
+					"FoundationaLLM.Authorization/roleAssignments/read",
+					"FoundationaLLM.Authorization/roleAssignments/write",
+					"FoundationaLLM.Authorization/roleAssignments/delete"
+				],
+				"not_actions": [],
+				"data_actions": [],
+				"not_data_actions": []
+			}
+		],
+		"created_on": "2024-03-07T00:00:00.0000000Z",
+		"updated_on": "2024-03-07T00:00:00.0000000Z",
+		"created_by": null,
+		"updated_by": null
+	},
+	{
+		"type": "FoundationaLLM.Authorization/roleDefinitions",
+		"name": "00a53e72-f66e-4c03-8f81-7e885fd2eb35",
+		"object_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
+		"display_name": "Reader",
+		"description": "View all resources without the possiblity of making any changes.",
+		"assignable_scopes": [
+			"/"
+		],
+		"permissions": [
+			{
+				"actions": [
+					"*/read"
+				],
+				"not_actions": [],
+				"data_actions": [],
+				"not_data_actions": []
+			}
+		],
+		"created_on": "2024-03-07T00:00:00.0000000Z",
+		"updated_on": "2024-03-07T00:00:00.0000000Z",
+		"created_by": null,
+		"updated_by": null
+	},
+	{
+		"type": "FoundationaLLM.Authorization/roleDefinitions",
+		"name": "a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
+		"object_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
+		"display_name": "Contributor",
+		"description": "Full access to manage all resources without the possiblity of assigning roles in FoundationaLLM RBAC.",
+		"assignable_scopes": [
+			"/"
+		],
+		"permissions": [
+			{
+				"actions": [
+					"*"
+				],
+				"not_actions": [
+					"FoundationaLLM.Authorization/*/write",
+					"FoundationaLLM.Authorization/*/delete"
+				],
+				"data_actions": [],
+				"not_data_actions": []
+			}
+		],
+		"created_on": "2024-03-07T00:00:00.0000000Z",
+		"updated_on": "2024-03-07T00:00:00.0000000Z",
+		"created_by": null,
+		"updated_by": null
+	},
+	{
+		"type": "FoundationaLLM.Authorization/roleDefinitions",
+		"name": "fb8e0fd0-f7e2-4957-89d6-19f44f7d6618",
+		"object_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/fb8e0fd0-f7e2-4957-89d6-19f44f7d6618",
+		"display_name": "User Access Administrator",
+		"description": "Manage access to FoundationaLLM resources.",
+		"assignable_scopes": [
+			"/"
+		],
+		"permissions": [
+			{
+				"actions": [
+					"*/read",
+					"FoundationaLLM.Authorization/*"
+				],
+				"not_actions": [],
+				"data_actions": [],
+				"not_data_actions": []
+			}
+		],
+		"created_on": "2024-03-07T00:00:00.0000000Z",
+		"updated_on": "2024-03-07T00:00:00.0000000Z",
+		"created_by": null,
+		"updated_by": null
+	},
+	{
+		"type": "FoundationaLLM.Authorization/roleDefinitions",
+		"name": "1301f8d4-3bea-4880-945f-315dbd2ddb46",
+		"object_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/1301f8d4-3bea-4880-945f-315dbd2ddb46",
+		"display_name": "Owner",
+		"description": "Full access to manage all resources, including the ability to assign roles in FoundationaLLM RBAC.",
+		"assignable_scopes": [
+			"/"
+		],
+		"permissions": [
+			{
+				"actions": [
+					"*"
+				],
+				"not_actions": [],
+				"data_actions": [],
+				"not_data_actions": []
+			}
+		],
+		"created_on": "2024-03-07T00:00:00.0000000Z",
+		"updated_on": "2024-03-07T00:00:00.0000000Z",
+		"created_by": null,
+		"updated_by": null
+	}
+];
+
+export const mockRoleAssignmentsResponse = {
+	"instance_id": "6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+	"role_assignments": [
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "9c04b0-c2a9-4c55-ac8f-09ba13351ab9",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/9c0453b0-c2a9-4c55-ac8f-09ba13351ab9",
+			"display_name": null,
+			"description": "Contributor role on the FoundationaLLM instance.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
+			"principal_id": "example-fe23ef05-5c5b-4a75-b59d-bba70129ece8",
+			"principal_type": "Group",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "f11b77-6b2a-4b81-9e75-8b737a6ad81e",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/f11bab77-6b2a-4b81-9e75-8b737a6ad81e",
+			"display_name": null,
+			"description": "User Access Administrator role on the FoundationaLLM instance.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/fb8e0fd0-f7e2-4957-89d6-19f44f7d6618",
+			"principal_id": "example-23413e7f-825a-4abf-a7db-3a0b6bdd166e",
+			"principal_type": "Group",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "4521b9-1b0e-4ad9-a8cd-75727282cbe7",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/4521bdb9-1b0e-4ad9-a8cd-75727282cbe7",
+			"display_name": null,
+			"description": "Role assignment reader for the Management API managed identity.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
+			"principal_id": "example-f8e51522-4291-4471-b029-2649b7311d01",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "597646-7e39-46a0-aced-9c9be832b437",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/59766546-7e39-46a0-aced-9c9be832b437",
+			"display_name": null,
+			"description": "Role assignment reader for the Core API managed identity.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
+			"principal_id": "example-d59f73e7-ff08-41bb-881c-fc3c63bdcf30",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "afc3b8-7f91-4968-b6ac-e260a3a7157b",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/afc304b8-7f91-4968-b6ac-e260a3a7157b",
+			"display_name": null,
+			"description": "Role assignment reader for the Vectorization API managed identity.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
+			"principal_id": "example-bc7db642-9f96-49c1-b4ee-103d0178f432",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "765716-3624-4feb-bc77-58676e096faf",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/76578e16-3624-4feb-bc77-58676e096faf",
+			"display_name": null,
+			"description": "Role assignment reader for the Orchestration API managed identity.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
+			"principal_id": "example-f7955eef-283e-438e-840f-5d5b2aa845b8",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "4ff47b-1cd3-49d3-94cd-311ee68e3ac9",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/4ff9547b-1cd3-49d3-94cd-311ee68e3ac9",
+			"display_name": null,
+			"description": "Contributor role for Andrei local debug.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
+			"principal_id": "example-e66c544b-a150-4135-8198-a80eaa312386",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-03-22T15:33:08.2807765+00:00",
+			"updated_on": "2024-03-22T15:33:08.2807765+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "ca46b0-f3e9-4d25-bca8-e36d226b80fd",
+			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/ca467bb0-f3e9-4d25-bca8-e36d226b80fd",
+			"display_name": null,
+			"description": "Brian Local Dev - Contributor role on the FoundationaLLM instance.",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
+			"principal_id": "example-2930c230-b255-435a-8ef1-7788d99c2a36",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176",
+			"cost_center": null,
+			"created_on": "2024-05-23T14:27:29.5114963+00:00",
+			"updated_on": "2024-05-23T14:27:29.5114963+00:00",
+			"created_by": "SYSTEM",
+			"updated_by": "SYSTEM",
+			"deleted": false
+		},
+		{
+			"type": "FoundationaLLM.Authorization/roleAssignments",
+			"name": "13bd64-d201-4846-9a49-4f8866dd6141",
+			"object_id": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176/providers/FoundationaLLM.Authorization/roleAssignments/1336bd64-d201-4846-9a49-4f8866dd6141",
+			"display_name": null,
+			"description": "Owner role for Joel Hulen",
+			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/1301f8d4-3bea-4880-945f-315dbd2ddb46",
+			"principal_id": "example-dc1f7302-f63e-4f75-a7e8-8984f75a522d",
+			"principal_type": "User",
+			"scope": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176/providers/FoundationaLLM.Agent/agents/JoelTest",
+			"cost_center": null,
+			"created_on": "0001-01-01T00:00:00+00:00",
+			"updated_on": "0001-01-01T00:00:00+00:00",
+			"created_by": null,
+			"updated_by": null,
+			"deleted": false
+		}
+	]
+};
diff --git a/src/ui/ManagementPortal/js/types.ts b/src/ui/ManagementPortal/js/types.ts
index a9e6269779..7d48cd1d89 100644
--- a/src/ui/ManagementPortal/js/types.ts
+++ b/src/ui/ManagementPortal/js/types.ts
@@ -343,6 +343,14 @@ export type CreateTextPartitioningProfileRequest = ResourceBase & {
 	};
 };
 
+export type Role = {
+	
+};
+
+export type RoleAssignment = {
+
+};
+
 // Type guards
 export function isAzureDataLakeDataSource(
 	dataSource: DataSource,
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
new file mode 100644
index 0000000000..e352baefa0
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -0,0 +1,464 @@
+<template>
+	<div>
+		<!-- Header -->
+		<h2 class="page-header">{{ editId ? 'Edit Role Assignment' : 'Create Role Assignment' }}</h2>
+		<div class="page-subheader">
+			{{
+				editId
+					? 'Edit your role assignment settings below.'
+					: 'Complete the settings below to configure the role assignment.'
+			}}
+		</div>
+
+		<!-- Steps -->
+		<div class="steps" :class="{ 'steps--loading': loading }">
+			<!-- Loading overlay -->
+			<template v-if="loading">
+				<div class="steps__loading-overlay">
+					<LoadingGrid />
+					<div>{{ loadingStatusText }}</div>
+				</div>
+			</template>
+
+			<!-- Description -->
+			<div class="step-header span-2">What is the description of the role assignment?</div>
+			<div class="span-2">
+				<div class="mb-2">Data description:</div>
+				<div class="input-wrapper">
+					<InputText
+						v-model="roleAssignment.description"
+						placeholder="Enter a description for this role assignment"
+						type="text"
+						class="w-100"
+					/>
+				</div>
+			</div>
+
+			<!-- Principal -->
+			<div class="step-header span-2">What principal to assign?</div>
+			<div class="span-2" style="display: flex; gap: 16px;">
+				<InputText
+					v-model="roleAssignment.principal_id"
+					placeholder="Enter principal id (GUID)"
+					type="text"
+					class="w-50"
+				/>
+				<Button
+					label="Browse"
+					severity="primary"
+					@click="openBrowsePrincipalsModal = true"
+				/>
+
+				<!-- Browse principals dialog -->
+				<Dialog
+					:visible="openBrowsePrincipalsModal"
+					modal
+					header="Browse Principals"
+					:closable="false"
+				>
+					<div class="mb-2">Search by group or type</div>
+					<InputText
+						v-model="principalSearch"
+						placeholder="Search"
+						type="text"
+					/>
+					<template #footer>
+						<Button label="Cancel" text @click="openBrowsePrincipalsModal = false" />
+						<Button label="Select" severity="primary" @click="handlePrincipalSelected" />
+					</template>
+				</Dialog>
+			</div>
+
+			<!-- Role -->
+			<div class="step-header span-2">What role to assign?</div>
+			<div class="span-2">
+				<Dropdown
+					v-model="roleAssignment.role_definition_id"
+					:options="roleOptions"
+					option-label="display_name"
+					option-value="object_id"
+					placeholder="--Select--"
+				/>
+			</div>
+
+			<!-- Cost center -->
+			<div class="step-header span-2">Would you like to assign this role assignment to a cost center?</div>
+			<div class="span-2">
+				<InputText
+					v-model="roleAssignment.cost_center"
+					placeholder="Enter cost center name"
+					type="text"
+					class="w-50"
+				/>
+			</div>
+
+			<!-- Buttons -->
+			<div class="button-container column-2 justify-self-end">
+				<!-- Create role assignment -->
+				<Button
+					:label="editId ? 'Save Changes' : 'Create Role Assignment'"
+					severity="primary"
+					@click="handleCreateRoleAssignment"
+				/>
+
+				<!-- Cancel -->
+				<Button
+					v-if="editId"
+					style="margin-left: 16px"
+					label="Cancel"
+					severity="secondary"
+					@click="handleCancel"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { debounce } from 'lodash';
+import api from '@/js/api';
+import type {
+	Role,
+	RoleAssignment,
+} from '@/js/types';
+
+export default {
+	name: 'CreateRoleAssignment',
+
+	props: {
+		editId: {
+			type: [Boolean, String] as PropType<false | string>,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving data...' as string,
+
+			openBrowsePrincipalsModal: false,
+			roleOptions: [] as Role[],
+
+			roleAssignment: {
+				description: '',
+				principal_id: null,
+				role_definition_id: null,
+				cost_center: null,
+			} as null | RoleAssignment,
+		};
+	},
+
+	async created() {
+		this.loading = true;
+
+		this.loadingStatusText = `Retrieving roles...`;
+		this.roleOptions = await api.getRoles();
+
+		if (this.editId) {
+			this.loadingStatusText = `Retrieving role assignment "${this.editId}"...`;
+			this.roleAssignment = await api.getRoleAssignment(this.editId);
+		}
+
+		this.loading = false;
+	},
+
+	methods: {
+		handleCancel() {
+			if (!confirm('Are you sure you want to cancel?')) {
+				return;
+			}
+
+			this.$router.push('/security/role-assignments');
+		},
+
+		handlePrincipalSelected() {
+
+		},
+
+		async handleCreateRoleAssignment() {
+			const errors: string[] = [];
+			if (!this.roleAssignment.principal_id) {
+				errors.push('Please specify a role.');
+			}
+
+			if (!this.roleAssignment.role_definition_id) {
+				errors.push('Please specify a role.');
+			}
+		
+			if (errors.length > 0) {
+				this.$toast.add({
+					severity: 'error',
+					detail: errors.join('\n'),
+				});
+
+				return;
+			}
+
+			this.loading = true;
+			let successMessage = null as null | string;
+			try {
+				this.loadingStatusText = 'Saving role assignment...';
+				await api.updateRoleAssignment(this.roleAssignment);
+				successMessage = `Role assignment was successfully saved.`;
+			} catch (error) {
+				this.loading = false;
+				return this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+				});
+			}
+
+			this.$toast.add({
+				severity: 'success',
+				detail: successMessage,
+			});
+
+			this.loading = false;
+
+			if (!this.editId) {
+				this.$router.push('/security/role-assignments');
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.steps {
+	display: grid;
+	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
+	gap: 24px;
+	position: relative;
+}
+
+.steps--loading {
+	pointer-events: none;
+}
+
+.steps__loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	z-index: 10;
+	background-color: rgba(255, 255, 255, 0.9);
+	pointer-events: none;
+}
+
+.step-section-header {
+	background-color: rgba(150, 150, 150, 1);
+	color: white;
+	font-size: 1rem;
+	font-weight: 600;
+	padding: 16px;
+}
+
+.step-header {
+	font-weight: bold;
+	margin-bottom: -10px;
+}
+
+.step {
+	// display: flex;
+	// flex-direction: column;
+}
+
+.step--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.step-container {
+	// padding: 16px;
+	border: 2px solid #e1e1e1;
+	flex-grow: 1;
+	position: relative;
+
+	&:hover {
+		background-color: rgba(217, 217, 217, 0.4);
+	}
+
+	&__header {
+		font-weight: bold;
+		margin-bottom: 8px;
+	}
+}
+
+.step-container__view {
+	// padding: 16px;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+.step-container__view__inner {
+	padding: 16px;
+	flex-grow: 1;
+	word-break: break-word;
+}
+
+.step-container__view__arrow {
+	background-color: #e1e1e1;
+	color: rgb(150, 150, 150);
+	width: 40px;
+	min-width: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&:hover {
+		background-color: #cacaca;
+	}
+}
+
+$editStepPadding: 16px;
+.step-container__edit {
+	border: 2px solid #e1e1e1;
+	position: absolute;
+	width: calc(100% + 4px);
+	background-color: white;
+	top: -2px;
+	left: -2px;
+	z-index: 5;
+	box-shadow: 0 5px 20px 0 rgba(27, 29, 33, 0.2);
+	min-height: calc(100% + 4px);
+	// padding: $editStepPadding;
+	display: flex;
+	flex-direction: row;
+}
+
+.step-container__edit__inner {
+	padding: $editStepPadding;
+	flex-grow: 1;
+}
+
+.step-container__edit__arrow {
+	background-color: #e1e1e1;
+	color: rgb(150, 150, 150);
+	min-width: 40px;
+	width: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transform: rotate(180deg);
+
+	&:hover {
+		background-color: #cacaca;
+	}
+}
+
+.step-container__edit-dropdown {
+	border: 2px solid #e1e1e1;
+	position: absolute;
+	width: calc(100% + 4px);
+	background-color: white;
+	top: -2px;
+	left: -2px;
+	z-index: 5;
+	box-shadow: 0 5px 20px 0 rgba(27, 29, 33, 0.2);
+	display: flex;
+	flex-direction: column;
+	min-height: calc(100% + 4px);
+}
+
+.step-container__edit__header {
+	padding: $editStepPadding;
+}
+
+.step-container__edit__group-header {
+	font-weight: bold;
+	padding: $editStepPadding;
+	padding-bottom: 0px;
+}
+
+.step-container__edit__option {
+	padding: $editStepPadding;
+	word-break: break-word;
+	&:hover {
+		background-color: rgba(217, 217, 217, 0.4);
+	}
+}
+
+// .step-container__edit__option + .step-container__edit__option{
+// 	border-top: 2px solid #e1e1e1;
+// }
+
+.step-container__edit__option--selected {
+	// outline: 2px solid #e1e1e1;
+	// background-color: rgba(217, 217, 217, 0.4);
+}
+
+.step__radio {
+	display: flex;
+	gap: 10px;
+}
+
+.step-option__header {
+	text-decoration: underline;
+	margin-right: 8px;
+}
+
+.primary-button {
+	background-color: var(--primary-button-bg) !important;
+	border-color: var(--primary-button-bg) !important;
+	color: var(--primary-button-text) !important;
+}
+
+.input-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+input {
+	width: 100%;
+	padding-right: 30px;
+}
+
+.icon {
+	position: absolute;
+	right: 10px;
+	cursor: default;
+}
+
+.valid {
+	color: green;
+}
+
+.invalid {
+	color: red;
+}
+
+.flex-container {
+	display: flex;
+	align-items: center; /* Align items vertically in the center */
+}
+
+.flex-item {
+	flex-grow: 1; /* Allow the textarea to grow and fill the space */
+}
+
+.flex-item-button {
+	margin-left: 8px; /* Add some space between the textarea and the button */
+}
+
+.p-chips {
+	ul {
+		width: 100%;
+		li {
+			input {
+				width: 100%!important;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/edit/[roleAssignmentName].vue b/src/ui/ManagementPortal/pages/security/role-assignments/edit/[roleAssignmentName].vue
new file mode 100644
index 0000000000..6817a69c21
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/edit/[roleAssignmentName].vue
@@ -0,0 +1,13 @@
+<template>
+	<CreateRoleAssignment :edit-id="$route.params.roleAssignmentName" />
+</template>
+
+<script lang="ts">
+import CreateRoleAssignment from '../create.vue';
+
+export default {
+	components: {
+		CreateRoleAssignment,
+	},
+};
+</script>
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
new file mode 100644
index 0000000000..f54fa707fc
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -0,0 +1,210 @@
+<template>
+	<div>
+		<div style="display: flex">
+			<div style="flex: 1">
+				<h2 class="page-header">Role Assignments</h2>
+				<div class="page-subheader">The following role assignments are available.</div>
+			</div>
+
+			<div style="display: flex; align-items: center">
+				<NuxtLink to="/security/role-assignments/create">
+					<Button>
+						<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
+						Create Role Assignment
+					</Button>
+				</NuxtLink>
+			</div>
+		</div>
+
+		<div :class="{ 'grid--loading': loading }">
+			<!-- Loading overlay -->
+			<template v-if="loading">
+				<div class="grid__loading-overlay">
+					<LoadingGrid />
+					<div>{{ loadingStatusText }}</div>
+				</div>
+			</template>
+
+			<!-- Table -->
+			<DataTable
+				:value="roleAssignments"
+				striped-rows
+				scrollable
+				table-style="max-width: 100%"
+				size="small"
+			>
+				<template #empty>
+					No role assignments found. Please use the menu on the left to create a new role assignment.</template>
+				<template #loading>Loading data sources. Please wait.</template>
+
+				<!-- Name -->
+				<Column
+					field="principal_type"
+					header="Principal Type"
+					sortable
+					style="min-width: 200px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				></Column>
+
+				<!-- Type -->
+				<Column
+					field="type"
+					header="Type"
+					sortable
+					style="min-width: 200px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				></Column>
+
+				<!-- Edit -->
+				<Column
+					header="Edit"
+					header-style="width:6rem"
+					style="text-align: center"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						headerContent: { style: { justifyContent: 'center' } },
+					}"
+				>
+					<template #body="{ data }">
+						<NuxtLink :to="'/security/role-assignments/edit/' + data.name" class="table__button">
+							<Button link>
+								<i class="pi pi-cog" style="font-size: 1.2rem"></i>
+							</Button>
+						</NuxtLink>
+					</template>
+				</Column>
+
+				<!-- Delete -->
+				<Column
+					header="Delete"
+					header-style="width:6rem"
+					style="text-align: center"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						headerContent: { style: { justifyContent: 'center' } },
+					}"
+				>
+					<template #body="{ data }">
+						<Button link @click="roleAssignmentToDelete = data">
+							<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
+						</Button>
+					</template>
+				</Column>
+			</DataTable>
+		</div>
+
+		<!-- Delete role assignment dialog -->
+		<Dialog
+			:visible="roleAssignmentToDelete !== null"
+			modal
+			header="Delete Data Source"
+			:closable="false"
+		>
+			<p>Do you want to delete the role assignment "{{ roleAssignmentToDelete.name }}" ?</p>
+			<template #footer>
+				<Button label="Cancel" text @click="roleAssignmentToDelete = null" />
+				<Button label="Delete" severity="danger" @click="handleDeleteRoleAssignment" />
+			</template>
+		</Dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import api from '@/js/api';
+import type { RoleAssignment } from '@/js/types';
+
+export default {
+	name: 'RoleAssignments',
+
+	data() {
+		return {
+			roleAssignments: [] as RoleAssignment[],
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving data...' as string,
+			roleAssignmentToDelete: null as RoleAssignment | null,
+		};
+	},
+
+	async created() {
+		await this.getRoleAssignments();
+	},
+
+	methods: {
+		async getRoleAssignments() {
+			this.loading = true;
+			try {
+				this.roleAssignments = (await api.getRoleAssignments()).role_assignments;
+			} catch (error) {
+				this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+					life: 5000,
+				});
+			}
+			this.loading = false;
+		},
+
+		async handleDeleteRoleAssignment() {
+			try {
+				await api.deleteRoleAssignment(this.roleAssignmentToDelete!.name);
+				this.roleAssignmentToDelete = null;
+			} catch (error) {
+				return this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+					life: 5000,
+				});
+			}
+
+			await this.getRoleAssignments();
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.table__button {
+	color: var(--primary-button-bg);
+}
+
+.steps {
+	display: grid;
+	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
+	gap: 24px;
+	position: relative;
+}
+
+.grid--loading {
+	pointer-events: none;
+}
+
+.grid__loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	z-index: 10;
+	background-color: rgba(255, 255, 255, 0.9);
+	pointer-events: none;
+}
+</style>

From 7aa9c9dc639209f09cb3889675022532784159e0 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 4 Jun 2024 06:59:31 -0700
Subject: [PATCH 03/51] Add principal type to role assignment form

---
 .../security/role-assignments/create.vue      | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index e352baefa0..84faf8d484 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -36,19 +36,31 @@
 
 			<!-- Principal -->
 			<div class="step-header span-2">What principal to assign?</div>
-			<div class="span-2" style="display: flex; gap: 16px;">
-				<InputText
-					v-model="roleAssignment.principal_id"
-					placeholder="Enter principal id (GUID)"
-					type="text"
-					class="w-50"
-				/>
-				<Button
-					label="Browse"
-					severity="primary"
-					@click="openBrowsePrincipalsModal = true"
+			<div class="span-2">
+				<div class="mb-2">Principal type:</div>
+				<Dropdown
+					v-model="roleAssignment.principial_type"
+					:options="principalTypeOptions"
+					option-label="label"
+					option-value="value"
+					placeholder="--Select--"
 				/>
 
+				<div class="mb-2 mt-2">Principal ID:</div>
+				<div style="display: flex; gap: 16px;">
+					<InputText
+						v-model="roleAssignment.principal_id"
+						placeholder="Enter principal id (GUID)"
+						type="text"
+						class="w-50"
+					/>
+					<Button
+						label="Browse"
+						severity="primary"
+						@click="openBrowsePrincipalsModal = true"
+					/>
+				</div>
+
 				<!-- Browse principals dialog -->
 				<Dialog
 					:visible="openBrowsePrincipalsModal"
@@ -139,6 +151,16 @@ export default {
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,
 
+			principalTypeOptions: [
+				{
+					label: 'User',
+					value: 'User',
+				},
+				{
+					label: 'Group',
+					value: 'Group',
+				},
+			],
 			openBrowsePrincipalsModal: false,
 			roleOptions: [] as Role[],
 
@@ -180,8 +202,12 @@ export default {
 
 		async handleCreateRoleAssignment() {
 			const errors: string[] = [];
+			if (!this.roleAssignment.principal_type) {
+				errors.push('Please specify a principal type.');
+			}
+
 			if (!this.roleAssignment.principal_id) {
-				errors.push('Please specify a role.');
+				errors.push('Please specify a principal.');
 			}
 
 			if (!this.roleAssignment.role_definition_id) {

From dfc41548a5ad1ce6a0a8991e3bf135df094e891b Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 4 Jun 2024 07:03:13 -0700
Subject: [PATCH 04/51] Fill in mock role assignment name fields

---
 src/ui/ManagementPortal/js/mock.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ui/ManagementPortal/js/mock.ts b/src/ui/ManagementPortal/js/mock.ts
index 5137e3a0bf..a92ecbb606 100644
--- a/src/ui/ManagementPortal/js/mock.ts
+++ b/src/ui/ManagementPortal/js/mock.ts
@@ -255,7 +255,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "9c04b0-c2a9-4c55-ac8f-09ba13351ab9",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/9c0453b0-c2a9-4c55-ac8f-09ba13351ab9",
-			"display_name": null,
+			"display_name": 'Example 1',
 			"description": "Contributor role on the FoundationaLLM instance.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
 			"principal_id": "example-fe23ef05-5c5b-4a75-b59d-bba70129ece8",
@@ -272,7 +272,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "f11b77-6b2a-4b81-9e75-8b737a6ad81e",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/f11bab77-6b2a-4b81-9e75-8b737a6ad81e",
-			"display_name": null,
+			"display_name": 'Example 2',
 			"description": "User Access Administrator role on the FoundationaLLM instance.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/fb8e0fd0-f7e2-4957-89d6-19f44f7d6618",
 			"principal_id": "example-23413e7f-825a-4abf-a7db-3a0b6bdd166e",
@@ -306,7 +306,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "597646-7e39-46a0-aced-9c9be832b437",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/59766546-7e39-46a0-aced-9c9be832b437",
-			"display_name": null,
+			"display_name":'Example 4',
 			"description": "Role assignment reader for the Core API managed identity.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
 			"principal_id": "example-d59f73e7-ff08-41bb-881c-fc3c63bdcf30",
@@ -323,7 +323,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "afc3b8-7f91-4968-b6ac-e260a3a7157b",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/afc304b8-7f91-4968-b6ac-e260a3a7157b",
-			"display_name": null,
+			"display_name": 'Example 5',
 			"description": "Role assignment reader for the Vectorization API managed identity.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
 			"principal_id": "example-bc7db642-9f96-49c1-b4ee-103d0178f432",
@@ -340,7 +340,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "765716-3624-4feb-bc77-58676e096faf",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/76578e16-3624-4feb-bc77-58676e096faf",
-			"display_name": null,
+			"display_name": 'Example 6',
 			"description": "Role assignment reader for the Orchestration API managed identity.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/00a53e72-f66e-4c03-8f81-7e885fd2eb35",
 			"principal_id": "example-f7955eef-283e-438e-840f-5d5b2aa845b8",
@@ -357,7 +357,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "4ff47b-1cd3-49d3-94cd-311ee68e3ac9",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/4ff9547b-1cd3-49d3-94cd-311ee68e3ac9",
-			"display_name": null,
+			"display_name": 'Example 7',
 			"description": "Contributor role for Andrei local debug.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
 			"principal_id": "example-e66c544b-a150-4135-8198-a80eaa312386",
@@ -374,7 +374,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "ca46b0-f3e9-4d25-bca8-e36d226b80fd",
 			"object_id": "/providers/FoundationaLLM.Authorization/roleAssignments/ca467bb0-f3e9-4d25-bca8-e36d226b80fd",
-			"display_name": null,
+			"display_name": 'Example 8',
 			"description": "Brian Local Dev - Contributor role on the FoundationaLLM instance.",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/a9f0020f-6e3a-49bf-8d1d-35fd53058edf",
 			"principal_id": "example-2930c230-b255-435a-8ef1-7788d99c2a36",
@@ -391,7 +391,7 @@ export const mockRoleAssignmentsResponse = {
 			"type": "FoundationaLLM.Authorization/roleAssignments",
 			"name": "13bd64-d201-4846-9a49-4f8866dd6141",
 			"object_id": "/instances/6fa496ce-d5c0-4e02-9223-06a98c9c0176/providers/FoundationaLLM.Authorization/roleAssignments/1336bd64-d201-4846-9a49-4f8866dd6141",
-			"display_name": null,
+			"display_name": 'Example 9',
 			"description": "Owner role for Joel Hulen",
 			"role_definition_id": "/providers/FoundationaLLM.Authorization/roleDefinitions/1301f8d4-3bea-4880-945f-315dbd2ddb46",
 			"principal_id": "example-dc1f7302-f63e-4f75-a7e8-8984f75a522d",

From d540064f2e5d09fb5a477aede91990b957a1794d Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 4 Jun 2024 07:03:33 -0700
Subject: [PATCH 05/51] Use name and description on role assignments table

---
 .../pages/security/role-assignments/index.vue             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index f54fa707fc..731f199435 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -39,8 +39,8 @@
 
 				<!-- Name -->
 				<Column
-					field="principal_type"
-					header="Principal Type"
+					field="display_name"
+					header="Name"
 					sortable
 					style="min-width: 200px"
 					:pt="{
@@ -53,8 +53,8 @@
 
 				<!-- Type -->
 				<Column
-					field="type"
-					header="Type"
+					field="description"
+					header="Description"
 					sortable
 					style="min-width: 200px"
 					:pt="{

From 592000261e33b98989f71da50a40b81011855273 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Tue, 4 Jun 2024 20:11:46 -0400
Subject: [PATCH 06/51] Fix typo

---
 .../ManagementPortal/pages/security/role-assignments/create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 84faf8d484..f7fe275fad 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -39,7 +39,7 @@
 			<div class="span-2">
 				<div class="mb-2">Principal type:</div>
 				<Dropdown
-					v-model="roleAssignment.principial_type"
+					v-model="roleAssignment.principal_type"
 					:options="principalTypeOptions"
 					option-label="label"
 					option-value="value"

From 28661454197815f6e45251c2883a2bc1acea1f91 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 4 Jun 2024 23:18:43 -0700
Subject: [PATCH 07/51] Add tooltip for role assignment description

---
 .../pages/security/role-assignments/index.vue | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 731f199435..5bf6b84558 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -42,7 +42,7 @@
 					field="display_name"
 					header="Name"
 					sortable
-					style="min-width: 200px"
+					style="min-width: 120px"
 					:pt="{
 						headerCell: {
 							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -63,7 +63,19 @@
 						},
 						sortIcon: { style: { color: 'var(--primary-text)' } },
 					}"
-				></Column>
+				>
+					<template #body="slotProps">
+						<span
+							v-tooltip.bottom="{
+								value: slotProps.data.description,
+								autoHide: false,
+							}"
+							class="description__column"
+						>
+							{{ slotProps.data.description }}
+						</span>
+					</template>
+				</Column>
 
 				<!-- Edit -->
 				<Column
@@ -207,4 +219,11 @@ export default {
 	background-color: rgba(255, 255, 255, 0.9);
 	pointer-events: none;
 }
+
+.description__column {
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
 </style>

From 299ba198b744c4ac126c159d0a2b8e336207b626 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 4 Jun 2024 23:20:42 -0700
Subject: [PATCH 08/51] Update text

---
 .../ManagementPortal/pages/security/role-assignments/index.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 5bf6b84558..478894b678 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -123,7 +123,7 @@
 		<Dialog
 			:visible="roleAssignmentToDelete !== null"
 			modal
-			header="Delete Data Source"
+			header="Delete Role Assignment"
 			:closable="false"
 		>
 			<p>Do you want to delete the role assignment "{{ roleAssignmentToDelete.name }}" ?</p>

From 8bf89884871a9e22d23af81c3c091092d11b7833 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 4 Jun 2024 23:25:54 -0700
Subject: [PATCH 09/51] Adjust column sizing

---
 .../ManagementPortal/pages/security/role-assignments/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 478894b678..8fcda7da08 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -56,7 +56,7 @@
 					field="description"
 					header="Description"
 					sortable
-					style="min-width: 200px"
+					style="min-width: 200px; max-width: 500px;"
 					:pt="{
 						headerCell: {
 							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -222,6 +222,7 @@ export default {
 
 .description__column {
 	max-width: 100%;
+	display: inline-block;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;

From 1971c762217f98b2c3ba4693065c10d14100e213 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Wed, 19 Jun 2024 14:22:33 -0400
Subject: [PATCH 10/51] Remove unused form items

---
 .../security/role-assignments/create.vue      | 36 ++-----------------
 1 file changed, 2 insertions(+), 34 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index f7fe275fad..acb8257339 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -37,15 +37,7 @@
 			<!-- Principal -->
 			<div class="step-header span-2">What principal to assign?</div>
 			<div class="span-2">
-				<div class="mb-2">Principal type:</div>
-				<Dropdown
-					v-model="roleAssignment.principal_type"
-					:options="principalTypeOptions"
-					option-label="label"
-					option-value="value"
-					placeholder="--Select--"
-				/>
-
+				
 				<div class="mb-2 mt-2">Principal ID:</div>
 				<div style="display: flex; gap: 16px;">
 					<InputText
@@ -68,7 +60,7 @@
 					header="Browse Principals"
 					:closable="false"
 				>
-					<div class="mb-2">Search by group or type</div>
+					<div class="mb-2">Search by person or group</div>
 					<InputText
 						v-model="principalSearch"
 						placeholder="Search"
@@ -93,17 +85,6 @@
 				/>
 			</div>
 
-			<!-- Cost center -->
-			<div class="step-header span-2">Would you like to assign this role assignment to a cost center?</div>
-			<div class="span-2">
-				<InputText
-					v-model="roleAssignment.cost_center"
-					placeholder="Enter cost center name"
-					type="text"
-					class="w-50"
-				/>
-			</div>
-
 			<!-- Buttons -->
 			<div class="button-container column-2 justify-self-end">
 				<!-- Create role assignment -->
@@ -151,16 +132,6 @@ export default {
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,
 
-			principalTypeOptions: [
-				{
-					label: 'User',
-					value: 'User',
-				},
-				{
-					label: 'Group',
-					value: 'Group',
-				},
-			],
 			openBrowsePrincipalsModal: false,
 			roleOptions: [] as Role[],
 
@@ -202,9 +173,6 @@ export default {
 
 		async handleCreateRoleAssignment() {
 			const errors: string[] = [];
-			if (!this.roleAssignment.principal_type) {
-				errors.push('Please specify a principal type.');
-			}
 
 			if (!this.roleAssignment.principal_id) {
 				errors.push('Please specify a principal.');

From 3df032c688827a89bc62d8eb98ea19abf0dd186b Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Fri, 21 Jun 2024 12:39:40 -0400
Subject: [PATCH 11/51] Rename sidebar link

---
 src/ui/ManagementPortal/components/Sidebar.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index e5dcc14150..4219f51a12 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -55,8 +55,7 @@
 			<span>Security</span>
 		</div>
 
-		<NuxtLink to="/security/role-assignments" class="sidebar__item">Role Assignments</NuxtLink>
-		<div class="sidebar__item">Identity & Access Management (IAM)</div>
+		<NuxtLink to="/security/role-assignments" class="sidebar__item">Instance Access Control</NuxtLink>
 
 		<!-- FLLM Deployment -->
 		<div class="sidebar__section-header">

From 2f889369dcbd0cc819311065e1c2b77e340b72c6 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 25 Jun 2024 01:51:30 -0700
Subject: [PATCH 12/51] Load real role assignments

---
 src/ui/ManagementPortal/js/api.ts                            | 5 +++--
 .../pages/security/role-assignments/index.vue                | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 85e5a0edad..11689ac8dd 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -535,8 +535,9 @@ export default {
 	},
 
 	async getRoleAssignments(): RoleAssignment[] {
-		await wait(1000);
-		return mockRoleAssignmentsResponse;
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
+		) as RoleAssignment[];
 	},
 
 	async getRoleAssignment(roleAssignmentId): RoleAssignment {
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 8fcda7da08..b21616a4ee 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -159,7 +159,7 @@ export default {
 		async getRoleAssignments() {
 			this.loading = true;
 			try {
-				this.roleAssignments = (await api.getRoleAssignments()).role_assignments;
+				this.roleAssignments = await api.getRoleAssignments();
 			} catch (error) {
 				this.$toast.add({
 					severity: 'error',

From aa158162b62185cf4e0a94dd9f45a2161553ec52 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 26 Jun 2024 04:51:31 -0700
Subject: [PATCH 13/51] NPM audit fix

---
 src/ui/ManagementPortal/package-lock.json | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/ui/ManagementPortal/package-lock.json b/src/ui/ManagementPortal/package-lock.json
index 661f26b971..90c8635d3c 100644
--- a/src/ui/ManagementPortal/package-lock.json
+++ b/src/ui/ManagementPortal/package-lock.json
@@ -5621,11 +5621,11 @@
 			}
 		},
 		"node_modules/braces": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
 			"dependencies": {
-				"fill-range": "^7.0.1"
+				"fill-range": "^7.1.1"
 			},
 			"engines": {
 				"node": ">=8"
@@ -8026,9 +8026,9 @@
 			"dev": true
 		},
 		"node_modules/fill-range": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -15336,9 +15336,9 @@
 			"dev": true
 		},
 		"node_modules/ws": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-			"integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.0.0"

From 0c11d2937acd41afece09e148ec203bb22a66d43 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 26 Jun 2024 04:56:02 -0700
Subject: [PATCH 14/51] Add account api methods

---
 src/ui/ManagementPortal/js/api.ts | 67 ++++++++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 11689ac8dd..76e81ec725 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -541,8 +541,9 @@ export default {
 	},
 
 	async getRoleAssignment(roleAssignmentId): RoleAssignment {
-		await wait(1000);
-		return mockRoleAssignmentsResponse.role_assignments.find((roleAssignment) => roleAssignment.name === roleAssignmentId);
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}`,
+		) as RoleAssignment[];
 	},
 
 	async updateRoleAssignment(roleAssignment: RoleAssignment) {
@@ -554,4 +555,66 @@ export default {
 		await wait(1000);
 		return roleAssignmentId;
 	},
+
+	async getUsers(params) {
+		const defaults = {
+			name: '',
+			ids: [],
+			page_number: 1,
+			page_size: null,
+		};
+
+		return await this.fetch(
+			`/instances/${this.instanceId}/identity/users/retrieve`,
+			{
+				method: 'POST',
+				body: JSON.stringify({
+					...defaults,
+					...params,
+				}),
+			},
+		);
+	},
+
+	async getUser(userId) {
+		return await this.fetch(
+			`/instances/${this.instanceId}/identity/users/${userId}`,
+		);
+	},
+
+	async getGroups(params) {
+		const defaults = {
+			name: '',
+			ids: [],
+			page_number: 1,
+			page_size: null,
+		};
+
+		return await this.fetch(
+			`/instances/${this.instanceId}/identity/groups/retrieve`,
+			{
+				method: 'POST',
+				body: JSON.stringify({
+					...defaults,
+					...params,
+				}),
+			},
+		);
+	},
+
+	async getGroup(groupId) {
+		return await this.fetch(
+			`/instances/${this.instanceId}/identity/groups/${groupId}`,
+		);
+	},
+
+	async getObjects(params = { ids: [] }) {
+		return await this.fetch(
+			`/instances/${this.instanceId}/identity/objects/retrievebyids`,
+			{
+				method: 'POST',
+				body: JSON.stringify(params),
+			},
+		);
+	},
 };

From 2e2c818c34cc3c234ecfeee422b842f3880a3837 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 26 Jun 2024 23:05:27 -0700
Subject: [PATCH 15/51] Install vitest packages

---
 src/ui/ManagementPortal/package-lock.json | 1128 ++++++++++++++++++---
 src/ui/ManagementPortal/package.json      |    6 +
 2 files changed, 1011 insertions(+), 123 deletions(-)

diff --git a/src/ui/ManagementPortal/package-lock.json b/src/ui/ManagementPortal/package-lock.json
index 90c8635d3c..5c64769317 100644
--- a/src/ui/ManagementPortal/package-lock.json
+++ b/src/ui/ManagementPortal/package-lock.json
@@ -20,14 +20,19 @@
 			"devDependencies": {
 				"@nuxt/devtools": "latest",
 				"@nuxt/eslint-config": "^0.2.0",
+				"@nuxt/test-utils": "^3.13.1",
 				"@nuxtjs/eslint-config-typescript": "^12.1.0",
 				"@nuxtjs/eslint-module": "^4.1.0",
+				"@vue/test-utils": "^2.4.6",
 				"eslint": "^8.57.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-prettier": "^5.1.3",
+				"happy-dom": "^14.12.3",
 				"nuxt": "^3.11.1",
+				"playwright-core": "^1.45.0",
 				"prettier": "^3.2.5",
 				"sass": "^1.74.1",
+				"vitest": "^1.6.0",
 				"vue": "^3.4.21",
 				"vue-router": "^4.3.0"
 			}
@@ -2375,6 +2380,199 @@
 				"node": "^14 || ^16 || >=18"
 			}
 		},
+		"node_modules/@nuxt/test-utils": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/@nuxt/test-utils/-/test-utils-3.13.1.tgz",
+			"integrity": "sha512-rqNnjArhFUU8qMHtpEZzjfF6fGTzeXxZsreNLUy9X5AoUuS37HgnobNJIirTrA0xzlzitKVm/mB9r4gXZGzWdQ==",
+			"dev": true,
+			"dependencies": {
+				"@nuxt/kit": "^3.11.2",
+				"@nuxt/schema": "^3.11.2",
+				"c12": "^1.10.0",
+				"consola": "^3.2.3",
+				"defu": "^6.1.4",
+				"destr": "^2.0.3",
+				"estree-walker": "^3.0.3",
+				"execa": "^8.0.1",
+				"fake-indexeddb": "^5.0.2",
+				"get-port-please": "^3.1.2",
+				"local-pkg": "^0.5.0",
+				"magic-string": "^0.30.10",
+				"node-fetch-native": "^1.6.4",
+				"ofetch": "^1.3.4",
+				"pathe": "^1.1.2",
+				"perfect-debounce": "^1.0.0",
+				"radix3": "^1.1.2",
+				"scule": "^1.3.0",
+				"std-env": "^3.7.0",
+				"ufo": "^1.5.3",
+				"unenv": "^1.9.0",
+				"unplugin": "^1.10.1",
+				"vitest-environment-nuxt": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=18.20.2"
+			},
+			"peerDependencies": {
+				"@cucumber/cucumber": "^10.3.1",
+				"@jest/globals": "^29.5.0",
+				"@playwright/test": "^1.43.1",
+				"@testing-library/vue": "^7.0.0 || ^8.0.1",
+				"@vitest/ui": "^0.34.6 || ^1.0.0",
+				"@vue/test-utils": "^2.4.2",
+				"h3": "*",
+				"happy-dom": "^9.10.9 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+				"jsdom": "^22.0.0 || ^23.0.0 || ^24.0.0",
+				"nitropack": "*",
+				"playwright-core": "^1.43.1",
+				"vite": "*",
+				"vitest": "^0.34.6 || ^1.0.0",
+				"vue": "^3.3.4",
+				"vue-router": "^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@cucumber/cucumber": {
+					"optional": true
+				},
+				"@jest/globals": {
+					"optional": true
+				},
+				"@playwright/test": {
+					"optional": true
+				},
+				"@testing-library/vue": {
+					"optional": true
+				},
+				"@vitest/ui": {
+					"optional": true
+				},
+				"@vue/test-utils": {
+					"optional": true
+				},
+				"happy-dom": {
+					"optional": true
+				},
+				"jsdom": {
+					"optional": true
+				},
+				"playwright-core": {
+					"optional": true
+				},
+				"vitest": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@nuxt/test-utils/node_modules/@nuxt/kit": {
+			"version": "3.12.2",
+			"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.12.2.tgz",
+			"integrity": "sha512-5kOqEzfc3FsAncjK2je7vuq4/QsR5ypViTnop52mlFLf0Ku1NMCrWCSWYowAh4P0yqTACMAZYa+HdRZHscU84g==",
+			"dev": true,
+			"dependencies": {
+				"@nuxt/schema": "3.12.2",
+				"c12": "^1.11.1",
+				"consola": "^3.2.3",
+				"defu": "^6.1.4",
+				"destr": "^2.0.3",
+				"globby": "^14.0.1",
+				"hash-sum": "^2.0.0",
+				"ignore": "^5.3.1",
+				"jiti": "^1.21.6",
+				"klona": "^2.0.6",
+				"knitwork": "^1.1.0",
+				"mlly": "^1.7.1",
+				"pathe": "^1.1.2",
+				"pkg-types": "^1.1.1",
+				"scule": "^1.3.0",
+				"semver": "^7.6.2",
+				"ufo": "^1.5.3",
+				"unctx": "^2.3.1",
+				"unimport": "^3.7.2",
+				"untyped": "^1.4.2"
+			},
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
+		"node_modules/@nuxt/test-utils/node_modules/@nuxt/schema": {
+			"version": "3.12.2",
+			"resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.12.2.tgz",
+			"integrity": "sha512-IRBuOEPOIe1CANKnO2OUiqZ1Hp/0htPkLaigK7WT6ef/SdIFZUd68Tqqejqy2AFrbgU9G80k3U7eg2XUdaiQlQ==",
+			"dev": true,
+			"dependencies": {
+				"compatx": "^0.1.8",
+				"consola": "^3.2.3",
+				"defu": "^6.1.4",
+				"hookable": "^5.5.3",
+				"pathe": "^1.1.2",
+				"pkg-types": "^1.1.1",
+				"scule": "^1.3.0",
+				"std-env": "^3.7.0",
+				"ufo": "^1.5.3",
+				"uncrypto": "^0.1.3",
+				"unimport": "^3.7.2",
+				"untyped": "^1.4.2"
+			},
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
+		"node_modules/@nuxt/test-utils/node_modules/execa": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+			"integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^8.0.1",
+				"human-signals": "^5.0.0",
+				"is-stream": "^3.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^5.1.0",
+				"onetime": "^6.0.0",
+				"signal-exit": "^4.1.0",
+				"strip-final-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=16.17"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/@nuxt/test-utils/node_modules/get-stream": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+			"integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@nuxt/test-utils/node_modules/human-signals": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+			"integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.17.0"
+			}
+		},
+		"node_modules/@nuxt/test-utils/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/@nuxt/ui-templates": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/@nuxt/ui-templates/-/ui-templates-1.3.2.tgz",
@@ -2504,6 +2702,12 @@
 				"eslint": ">=7"
 			}
 		},
+		"node_modules/@one-ini/wasm": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+			"integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+			"dev": true
+		},
 		"node_modules/@parcel/watcher": {
 			"version": "2.4.1",
 			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
@@ -3068,6 +3272,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -3080,6 +3285,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -3092,6 +3298,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -3104,6 +3311,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -3116,6 +3324,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3128,6 +3337,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3140,6 +3350,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3152,6 +3363,7 @@
 			"cpu": [
 				"ppc64le"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3164,6 +3376,7 @@
 			"cpu": [
 				"riscv64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3176,6 +3389,7 @@
 			"cpu": [
 				"s390x"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3188,6 +3402,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3200,6 +3415,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -3212,6 +3428,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -3224,6 +3441,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -3236,6 +3454,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -4296,6 +4515,125 @@
 				"vue": "^3.0.0"
 			}
 		},
+		"node_modules/@vitest/expect": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
+			"integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/spy": "1.6.0",
+				"@vitest/utils": "1.6.0",
+				"chai": "^4.3.10"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/runner": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
+			"integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/utils": "1.6.0",
+				"p-limit": "^5.0.0",
+				"pathe": "^1.1.1"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/runner/node_modules/p-limit": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz",
+			"integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==",
+			"dev": true,
+			"dependencies": {
+				"yocto-queue": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@vitest/runner/node_modules/yocto-queue": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
+			"integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@vitest/snapshot": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
+			"integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
+			"dev": true,
+			"dependencies": {
+				"magic-string": "^0.30.5",
+				"pathe": "^1.1.1",
+				"pretty-format": "^29.7.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/spy": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
+			"integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
+			"dev": true,
+			"dependencies": {
+				"tinyspy": "^2.2.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/ui": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-1.6.0.tgz",
+			"integrity": "sha512-k3Lyo+ONLOgylctiGovRKy7V4+dIN2yxstX3eY5cWFXH6WP+ooVX79YSyi0GagdTQzLmT43BF27T0s6dOIPBXA==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@vitest/utils": "1.6.0",
+				"fast-glob": "^3.3.2",
+				"fflate": "^0.8.1",
+				"flatted": "^3.2.9",
+				"pathe": "^1.1.1",
+				"picocolors": "^1.0.0",
+				"sirv": "^2.0.4"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"vitest": "1.6.0"
+			}
+		},
+		"node_modules/@vitest/utils": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
+			"integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
+			"dev": true,
+			"dependencies": {
+				"diff-sequences": "^29.6.3",
+				"estree-walker": "^3.0.3",
+				"loupe": "^2.3.7",
+				"pretty-format": "^29.7.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
 		"node_modules/@vue-js-cron/core": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/@vue-js-cron/core/-/core-5.0.1.tgz",
@@ -4591,6 +4929,16 @@
 			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
 			"integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
 		},
+		"node_modules/@vue/test-utils": {
+			"version": "2.4.6",
+			"resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz",
+			"integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+			"dev": true,
+			"dependencies": {
+				"js-beautify": "^1.14.9",
+				"vue-component-type-helpers": "^2.0.0"
+			}
+		},
 		"node_modules/@vueuse/components": {
 			"version": "10.9.0",
 			"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
@@ -5040,6 +5388,18 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/acorn-walk": {
+			"version": "8.3.3",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
+			"integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^8.11.0"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/agent-base": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -5433,6 +5793,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/assertion-error": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+			"integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/ast-kit": {
 			"version": "0.12.1",
 			"resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.12.1.tgz",
@@ -5738,22 +6107,30 @@
 			}
 		},
 		"node_modules/c12": {
-			"version": "1.10.0",
-			"resolved": "https://registry.npmjs.org/c12/-/c12-1.10.0.tgz",
-			"integrity": "sha512-0SsG7UDhoRWcuSvKWHaXmu5uNjDCDN3nkQLRL4Q42IlFy+ze58FcCoI3uPwINXinkz7ZinbhEgyzYFw9u9ZV8g==",
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/c12/-/c12-1.11.1.tgz",
+			"integrity": "sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==",
 			"dependencies": {
 				"chokidar": "^3.6.0",
-				"confbox": "^0.1.3",
+				"confbox": "^0.1.7",
 				"defu": "^6.1.4",
 				"dotenv": "^16.4.5",
-				"giget": "^1.2.1",
-				"jiti": "^1.21.0",
-				"mlly": "^1.6.1",
+				"giget": "^1.2.3",
+				"jiti": "^1.21.6",
+				"mlly": "^1.7.1",
 				"ohash": "^1.1.3",
 				"pathe": "^1.1.2",
 				"perfect-debounce": "^1.0.0",
-				"pkg-types": "^1.0.3",
-				"rc9": "^2.1.1"
+				"pkg-types": "^1.1.1",
+				"rc9": "^2.1.2"
+			},
+			"peerDependencies": {
+				"magicast": "^0.3.4"
+			},
+			"peerDependenciesMeta": {
+				"magicast": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/cac": {
@@ -5890,6 +6267,24 @@
 				}
 			]
 		},
+		"node_modules/chai": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+			"integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
+			"dev": true,
+			"dependencies": {
+				"assertion-error": "^1.1.0",
+				"check-error": "^1.0.3",
+				"deep-eql": "^4.1.3",
+				"get-func-name": "^2.0.2",
+				"loupe": "^2.3.6",
+				"pathval": "^1.1.1",
+				"type-detect": "^4.0.8"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5906,6 +6301,18 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/check-error": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+			"integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+			"dev": true,
+			"dependencies": {
+				"get-func-name": "^2.0.2"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -6160,6 +6567,12 @@
 			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
 			"dev": true
 		},
+		"node_modules/compatx": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/compatx/-/compatx-0.1.8.tgz",
+			"integrity": "sha512-jcbsEAR81Bt5s1qOFymBufmCbXCXbk0Ql+K5ouj6gCyx2yHlu6AgmGIi9HxfKixpUDO5bCFJUHQ5uM6ecbTebw==",
+			"dev": true
+		},
 		"node_modules/compress-commons": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz",
@@ -6195,9 +6608,25 @@
 			"dev": true
 		},
 		"node_modules/confbox": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.3.tgz",
-			"integrity": "sha512-eH3ZxAihl1PhKfpr4VfEN6/vUd87fmgb6JkldHgg/YR6aEBhW63qUDgzP2Y6WM0UumdsYp5H3kibalXAdHfbgg=="
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
+			"integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA=="
+		},
+		"node_modules/config-chain": {
+			"version": "1.1.13",
+			"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+			"integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+			"dev": true,
+			"dependencies": {
+				"ini": "^1.3.4",
+				"proto-list": "~1.2.1"
+			}
+		},
+		"node_modules/config-chain/node_modules/ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+			"dev": true
 		},
 		"node_modules/consola": {
 			"version": "3.2.3",
@@ -6588,6 +7017,18 @@
 				}
 			}
 		},
+		"node_modules/deep-eql": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
+			"integrity": "sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==",
+			"dev": true,
+			"dependencies": {
+				"type-detect": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6742,6 +7183,15 @@
 				"node": ">=0.3.1"
 			}
 		},
+		"node_modules/diff-sequences": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+			"integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+			"dev": true,
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
 		"node_modules/dir-glob": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6880,6 +7330,48 @@
 			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
 			"dev": true
 		},
+		"node_modules/editorconfig": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+			"integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
+			"dev": true,
+			"dependencies": {
+				"@one-ini/wasm": "0.1.1",
+				"commander": "^10.0.0",
+				"minimatch": "9.0.1",
+				"semver": "^7.5.3"
+			},
+			"bin": {
+				"editorconfig": "bin/editorconfig"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/editorconfig/node_modules/commander": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+			"integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/editorconfig/node_modules/minimatch": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+			"integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/ee-first": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7954,6 +8446,15 @@
 				"ufo": "^1.1.2"
 			}
 		},
+		"node_modules/fake-indexeddb": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/fake-indexeddb/-/fake-indexeddb-5.0.2.tgz",
+			"integrity": "sha512-cB507r5T3D55DfclY01GLkninZLfU7HXV/mhVRTnTRm5k2u+fY7Fof2dBkr80p5t7G7dlA/G5dI87QiMdPpMCQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -8007,6 +8508,14 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+			"dev": true,
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8052,14 +8561,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/flat": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-			"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-			"bin": {
-				"flat": "cli.js"
-			}
-		},
 		"node_modules/flat-cache": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -8286,6 +8787,15 @@
 				"node": "6.* || 8.* || >= 10.*"
 			}
 		},
+		"node_modules/get-func-name": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+			"integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/get-intrinsic": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -8568,6 +9078,29 @@
 				"unenv": "^1.9.0"
 			}
 		},
+		"node_modules/happy-dom": {
+			"version": "14.12.3",
+			"resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-14.12.3.tgz",
+			"integrity": "sha512-vsYlEs3E9gLwA1Hp+w3qzu+RUDFf4VTT8cyKqVICoZ2k7WM++Qyd2LwzyTi5bqMJFiIC/vNpTDYuxdreENRK/g==",
+			"dev": true,
+			"dependencies": {
+				"entities": "^4.5.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-mimetype": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/happy-dom/node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/has-bigints": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -9459,21 +9992,131 @@
 			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
 			"dev": true,
 			"dependencies": {
-				"has-flag": "^4.0.0"
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
+		"node_modules/jiti": {
+			"version": "1.21.6",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+			"integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+			"bin": {
+				"jiti": "bin/jiti.js"
+			}
+		},
+		"node_modules/js-beautify": {
+			"version": "1.15.1",
+			"resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz",
+			"integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==",
+			"dev": true,
+			"dependencies": {
+				"config-chain": "^1.1.13",
+				"editorconfig": "^1.0.4",
+				"glob": "^10.3.3",
+				"js-cookie": "^3.0.5",
+				"nopt": "^7.2.0"
+			},
+			"bin": {
+				"css-beautify": "js/bin/css-beautify.js",
+				"html-beautify": "js/bin/html-beautify.js",
+				"js-beautify": "js/bin/js-beautify.js"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/js-beautify/node_modules/abbrev": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+			"integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/js-beautify/node_modules/glob": {
+			"version": "10.4.2",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+			"integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
+			"dev": true,
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/js-beautify/node_modules/jackspeak": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+			"integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+			"dev": true,
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
+			}
+		},
+		"node_modules/js-beautify/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/js-beautify/node_modules/nopt": {
+			"version": "7.2.1",
+			"resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+			"integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+			"dev": true,
+			"dependencies": {
+				"abbrev": "^2.0.0"
 			},
-			"engines": {
-				"node": ">=10"
+			"bin": {
+				"nopt": "bin/nopt.js"
 			},
-			"funding": {
-				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"node_modules/jiti": {
-			"version": "1.21.0",
-			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
-			"integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-			"bin": {
-				"jiti": "bin/jiti.js"
+		"node_modules/js-cookie": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+			"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
 			}
 		},
 		"node_modules/js-tokens": {
@@ -9548,11 +10191,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/jsonc-parser": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
-			"integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA=="
-		},
 		"node_modules/jsonfile": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -9806,6 +10444,15 @@
 			"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
 			"dev": true
 		},
+		"node_modules/loupe": {
+			"version": "2.3.7",
+			"resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+			"integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+			"dev": true,
+			"dependencies": {
+				"get-func-name": "^2.0.1"
+			}
+		},
 		"node_modules/lru-cache": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -9815,14 +10462,11 @@
 			}
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.9",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
-			"integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
+			"version": "0.30.10",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+			"integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
-			},
-			"engines": {
-				"node": ">=12"
 			}
 		},
 		"node_modules/magic-string-ast": {
@@ -9838,14 +10482,14 @@
 			}
 		},
 		"node_modules/magicast": {
-			"version": "0.3.3",
-			"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.3.tgz",
-			"integrity": "sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==",
-			"dev": true,
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.4.tgz",
+			"integrity": "sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==",
+			"devOptional": true,
 			"dependencies": {
-				"@babel/parser": "^7.23.6",
-				"@babel/types": "^7.23.6",
-				"source-map-js": "^1.0.2"
+				"@babel/parser": "^7.24.4",
+				"@babel/types": "^7.24.0",
+				"source-map-js": "^1.2.0"
 			}
 		},
 		"node_modules/make-dir": {
@@ -10008,9 +10652,9 @@
 			}
 		},
 		"node_modules/minipass": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-			"integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
 			"dev": true,
 			"engines": {
 				"node": ">=16 || 14 >=14.17"
@@ -10209,14 +10853,14 @@
 			}
 		},
 		"node_modules/mlly": {
-			"version": "1.6.1",
-			"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.6.1.tgz",
-			"integrity": "sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==",
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
+			"integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==",
 			"dependencies": {
 				"acorn": "^8.11.3",
 				"pathe": "^1.1.2",
-				"pkg-types": "^1.0.3",
-				"ufo": "^1.3.2"
+				"pkg-types": "^1.1.1",
+				"ufo": "^1.5.3"
 			}
 		},
 		"node_modules/mri": {
@@ -11431,6 +12075,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/package-json-from-dist": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+			"integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+			"dev": true
+		},
 		"node_modules/pacote": {
 			"version": "17.0.6",
 			"resolved": "https://registry.npmjs.org/pacote/-/pacote-17.0.6.tgz",
@@ -11578,16 +12228,16 @@
 			"dev": true
 		},
 		"node_modules/path-scurry": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
-			"integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+			"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
 			"dev": true,
 			"dependencies": {
 				"lru-cache": "^10.2.0",
 				"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
+				"node": ">=16 || 14 >=14.18"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/isaacs"
@@ -11618,6 +12268,15 @@
 			"resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
 			"integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="
 		},
+		"node_modules/pathval": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+			"integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/perfect-debounce": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -11690,13 +12349,25 @@
 			}
 		},
 		"node_modules/pkg-types": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-			"integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
+			"integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==",
 			"dependencies": {
-				"jsonc-parser": "^3.2.0",
-				"mlly": "^1.2.0",
-				"pathe": "^1.1.0"
+				"confbox": "^0.1.7",
+				"mlly": "^1.7.0",
+				"pathe": "^1.1.2"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.45.0",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz",
+			"integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==",
+			"dev": true,
+			"bin": {
+				"playwright-core": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/pluralize": {
@@ -12218,6 +12889,32 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/pretty-format": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+			"integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+			"dev": true,
+			"dependencies": {
+				"@jest/schemas": "^29.6.3",
+				"ansi-styles": "^5.0.0",
+				"react-is": "^18.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/pretty-format/node_modules/ansi-styles": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
 		"node_modules/primeicons": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
@@ -12287,6 +12984,12 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/proto-list": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+			"integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+			"dev": true
+		},
 		"node_modules/protocols": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@@ -12352,15 +13055,20 @@
 			}
 		},
 		"node_modules/rc9": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.1.tgz",
-			"integrity": "sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==",
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
+			"integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
 			"dependencies": {
-				"defu": "^6.1.2",
-				"destr": "^2.0.0",
-				"flat": "^5.0.2"
+				"defu": "^6.1.4",
+				"destr": "^2.0.3"
 			}
 		},
+		"node_modules/react-is": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+			"dev": true
+		},
 		"node_modules/read-package-json": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-7.0.0.tgz",
@@ -13028,12 +13736,9 @@
 			"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
 		},
 		"node_modules/semver": {
-			"version": "7.6.0",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-			"integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-			"dependencies": {
-				"lru-cache": "^6.0.0"
-			},
+			"version": "7.6.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+			"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
 			"bin": {
 				"semver": "bin/semver.js"
 			},
@@ -13041,22 +13746,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/semver/node_modules/lru-cache": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-			"dependencies": {
-				"yallist": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/semver/node_modules/yallist": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-		},
 		"node_modules/send": {
 			"version": "0.18.0",
 			"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
@@ -13237,6 +13926,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/siginfo": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+			"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+			"dev": true
+		},
 		"node_modules/signal-exit": {
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -13454,6 +14149,12 @@
 				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
+		"node_modules/stackback": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+			"integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+			"dev": true
+		},
 		"node_modules/standard-as-callback": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -13647,7 +14348,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
 			"integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
-			"dev": true,
 			"dependencies": {
 				"js-tokens": "^9.0.0"
 			},
@@ -13658,8 +14358,7 @@
 		"node_modules/strip-literal/node_modules/js-tokens": {
 			"version": "9.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
-			"integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
-			"dev": true
+			"integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ=="
 		},
 		"node_modules/stylehacks": {
 			"version": "6.1.1",
@@ -13958,6 +14657,30 @@
 			"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
 			"dev": true
 		},
+		"node_modules/tinybench": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.8.0.tgz",
+			"integrity": "sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==",
+			"dev": true
+		},
+		"node_modules/tinypool": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
+			"integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/tinyspy": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+			"integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/to-fast-properties": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -14068,6 +14791,15 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/type-detect": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+			"integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/type-fest": {
 			"version": "0.20.2",
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -14295,23 +15027,23 @@
 			}
 		},
 		"node_modules/unimport": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/unimport/-/unimport-3.7.1.tgz",
-			"integrity": "sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==",
+			"version": "3.7.2",
+			"resolved": "https://registry.npmjs.org/unimport/-/unimport-3.7.2.tgz",
+			"integrity": "sha512-91mxcZTadgXyj3lFWmrGT8GyoRHWuE5fqPOjg5RVtF6vj+OfM5G6WCzXjuYtSgELE5ggB34RY4oiCSEP8I3AHw==",
 			"dependencies": {
 				"@rollup/pluginutils": "^5.1.0",
-				"acorn": "^8.11.2",
+				"acorn": "^8.11.3",
 				"escape-string-regexp": "^5.0.0",
 				"estree-walker": "^3.0.3",
 				"fast-glob": "^3.3.2",
 				"local-pkg": "^0.5.0",
-				"magic-string": "^0.30.5",
-				"mlly": "^1.4.2",
-				"pathe": "^1.1.1",
-				"pkg-types": "^1.0.3",
-				"scule": "^1.1.1",
-				"strip-literal": "^1.3.0",
-				"unplugin": "^1.5.1"
+				"magic-string": "^0.30.10",
+				"mlly": "^1.7.0",
+				"pathe": "^1.1.2",
+				"pkg-types": "^1.1.1",
+				"scule": "^1.3.0",
+				"strip-literal": "^2.1.0",
+				"unplugin": "^1.10.1"
 			}
 		},
 		"node_modules/unimport/node_modules/escape-string-regexp": {
@@ -14325,17 +15057,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/unimport/node_modules/strip-literal": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
-			"integrity": "sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==",
-			"dependencies": {
-				"acorn": "^8.10.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/antfu"
-			}
-		},
 		"node_modules/unique-filename": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
@@ -14662,9 +15383,9 @@
 			}
 		},
 		"node_modules/vite-node": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.4.0.tgz",
-			"integrity": "sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==",
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
+			"integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
 			"dev": true,
 			"dependencies": {
 				"cac": "^6.7.14",
@@ -14897,6 +15618,136 @@
 				"vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0"
 			}
 		},
+		"node_modules/vitest": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
+			"integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
+			"dev": true,
+			"dependencies": {
+				"@vitest/expect": "1.6.0",
+				"@vitest/runner": "1.6.0",
+				"@vitest/snapshot": "1.6.0",
+				"@vitest/spy": "1.6.0",
+				"@vitest/utils": "1.6.0",
+				"acorn-walk": "^8.3.2",
+				"chai": "^4.3.10",
+				"debug": "^4.3.4",
+				"execa": "^8.0.1",
+				"local-pkg": "^0.5.0",
+				"magic-string": "^0.30.5",
+				"pathe": "^1.1.1",
+				"picocolors": "^1.0.0",
+				"std-env": "^3.5.0",
+				"strip-literal": "^2.0.0",
+				"tinybench": "^2.5.1",
+				"tinypool": "^0.8.3",
+				"vite": "^5.0.0",
+				"vite-node": "1.6.0",
+				"why-is-node-running": "^2.2.2"
+			},
+			"bin": {
+				"vitest": "vitest.mjs"
+			},
+			"engines": {
+				"node": "^18.0.0 || >=20.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"@edge-runtime/vm": "*",
+				"@types/node": "^18.0.0 || >=20.0.0",
+				"@vitest/browser": "1.6.0",
+				"@vitest/ui": "1.6.0",
+				"happy-dom": "*",
+				"jsdom": "*"
+			},
+			"peerDependenciesMeta": {
+				"@edge-runtime/vm": {
+					"optional": true
+				},
+				"@types/node": {
+					"optional": true
+				},
+				"@vitest/browser": {
+					"optional": true
+				},
+				"@vitest/ui": {
+					"optional": true
+				},
+				"happy-dom": {
+					"optional": true
+				},
+				"jsdom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vitest-environment-nuxt": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/vitest-environment-nuxt/-/vitest-environment-nuxt-1.0.0.tgz",
+			"integrity": "sha512-AWMO9h4HdbaFdPWZw34gALFI8gbBiOpvfbyeZwHIPfh4kWg/TwElYHvYMQ61WPUlCGaS5LebfHkaI0WPyb//Iw==",
+			"dev": true,
+			"dependencies": {
+				"@nuxt/test-utils": ">=3.9.0"
+			}
+		},
+		"node_modules/vitest/node_modules/execa": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+			"integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^8.0.1",
+				"human-signals": "^5.0.0",
+				"is-stream": "^3.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^5.1.0",
+				"onetime": "^6.0.0",
+				"signal-exit": "^4.1.0",
+				"strip-final-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=16.17"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/vitest/node_modules/get-stream": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+			"integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/vitest/node_modules/human-signals": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+			"integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.17.0"
+			}
+		},
+		"node_modules/vitest/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/vscode-jsonrpc": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",
@@ -15011,6 +15862,12 @@
 				"ufo": "^1.2.0"
 			}
 		},
+		"node_modules/vue-component-type-helpers": {
+			"version": "2.0.22",
+			"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.22.tgz",
+			"integrity": "sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==",
+			"dev": true
+		},
 		"node_modules/vue-devtools-stub": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
@@ -15225,6 +16082,15 @@
 				"url": "https://opencollective.com/webpack"
 			}
 		},
+		"node_modules/whatwg-mimetype": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+			"integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -15285,6 +16151,22 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/why-is-node-running": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
+			"integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+			"dev": true,
+			"dependencies": {
+				"siginfo": "^2.0.0",
+				"stackback": "0.0.2"
+			},
+			"bin": {
+				"why-is-node-running": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/wide-align": {
 			"version": "1.1.5",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/src/ui/ManagementPortal/package.json b/src/ui/ManagementPortal/package.json
index 9d3a23eb90..c6ad42ec13 100644
--- a/src/ui/ManagementPortal/package.json
+++ b/src/ui/ManagementPortal/package.json
@@ -3,6 +3,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
+		"test": "vitest",
 		"build": "nuxt build",
 		"dev": "nuxt dev",
 		"generate": "nuxt generate",
@@ -16,14 +17,19 @@
 	"devDependencies": {
 		"@nuxt/devtools": "latest",
 		"@nuxt/eslint-config": "^0.2.0",
+		"@nuxt/test-utils": "^3.13.1",
 		"@nuxtjs/eslint-config-typescript": "^12.1.0",
 		"@nuxtjs/eslint-module": "^4.1.0",
+		"@vue/test-utils": "^2.4.6",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3",
+		"happy-dom": "^14.12.3",
 		"nuxt": "^3.11.1",
+		"playwright-core": "^1.45.0",
 		"prettier": "^3.2.5",
 		"sass": "^1.74.1",
+		"vitest": "^1.6.0",
 		"vue": "^3.4.21",
 		"vue-router": "^4.3.0"
 	},

From befbd3867de7c9816e2e5fb3b4111bab5fc8eb8b Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 26 Jun 2024 23:06:25 -0700
Subject: [PATCH 16/51] Add api account tests

---
 src/ui/ManagementPortal/.env.example   |  4 ++
 src/ui/ManagementPortal/js/api.test.ts | 75 ++++++++++++++++++++++++++
 src/ui/ManagementPortal/js/api.ts      |  1 +
 3 files changed, 80 insertions(+)
 create mode 100644 src/ui/ManagementPortal/js/api.test.ts

diff --git a/src/ui/ManagementPortal/.env.example b/src/ui/ManagementPortal/.env.example
index 105e29936f..3ce4e68ec0 100644
--- a/src/ui/ManagementPortal/.env.example
+++ b/src/ui/ManagementPortal/.env.example
@@ -1,2 +1,6 @@
 APP_CONFIG_ENDPOINT="" # A connection string for the App Config service.
 LOCAL_API_URL="" # The URL of the local Management API service (https://localhost:63267). IMPORTANT! Only set this value if you wish to debug the entire solution locally and bypass the App Config service value for the MANAGEMENT API URL.
+
+VITEST_API_URL="" # An API url for the API tests to use
+VITEST_API_INSTANCE_ID="" # An instance ID for the API tests to use
+VITEST_API_AUTH_TOKEN="" # A valid auth token to access restricted resources from the API
diff --git a/src/ui/ManagementPortal/js/api.test.ts b/src/ui/ManagementPortal/js/api.test.ts
new file mode 100644
index 0000000000..fb1ab335b6
--- /dev/null
+++ b/src/ui/ManagementPortal/js/api.test.ts
@@ -0,0 +1,75 @@
+import { describe, test, expect } from 'vitest';
+import api from './api';
+require('dotenv').config();
+
+describe('API Account Tests', async () => {
+	api.setApiUrl(process.env.VITEST_API_URL);
+	api.setInstanceId(process.env.VITEST_API_INSTANCE_ID);
+	api.bearerToken = process.env.VITEST_API_AUTH_TOKEN;
+
+	test.concurrent('should fetch role assignments', async () => {
+		const roleAssignments = await api.getRoleAssignments();
+		expect(roleAssignments).toBeInstanceOf(Array);
+
+		const roleAssignment = roleAssignments[0];
+		expect(roleAssignment).toBeDefined();
+	});
+
+	test.concurrent('should fetch role assignment details', async () => {
+		const roleAssignments = await api.getRoleAssignments();
+		expect(roleAssignments).toBeInstanceOf(Array);
+		const roleAssignment = roleAssignments[0];
+		expect(roleAssignment).toBeDefined();
+
+		const roleAssignmentDetails = await api.getRoleAssignment(roleAssignment.id);
+		expect(roleAssignmentDetails).toBeDefined();
+		expect(roleAssignmentDetails).toBeInstanceOf(Object);
+		expect(roleAssignmentDetails).not.toBeInstanceOf(Array);
+	});
+
+	test.concurrent('should fetch users', async () => {
+		const users = await api.getUsers();
+		const user = users.items[0];
+		expect(user).toBeDefined();
+	});
+
+	test.concurrent('should fetch user details', async () => {
+		const users = await api.getUsers();
+		const user = users.items[0];
+		expect(user).toBeDefined();
+		
+		const userDetails = await api.getUser(user.id);
+		expect(userDetails).toBeDefined();
+	});
+
+	test.concurrent('should fetch groups', async () => {
+		const groups = await api.getGroups();
+		const group = groups.items[0];
+		expect(group).toBeDefined();
+	});
+
+	test.concurrent('should fetch group details', async () => {
+		const groups = await api.getGroups();
+		const group = groups.items[0];
+		expect(group).toBeDefined();
+		
+		const groupDetails = await api.getGroup(group.id);
+		expect(groupDetails).toBeDefined();
+	});
+
+	test.concurrent('should fetch objects for user and group', async () => {
+		const users = await api.getUsers();
+		const user = users.items[0];
+		expect(user).toBeDefined();
+
+		const groups = await api.getGroups();
+		const group = groups.items[0];
+		expect(group).toBeDefined();
+		
+		const objects = await api.getObjects({
+			ids: [user.id, group.id],
+		});
+		expect(objects).toBeDefined();
+		expect(objects).toBeInstanceOf(Array);
+	});
+});
diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 76e81ec725..f322c06c06 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -19,6 +19,7 @@ import type {
 } from './types';
 import { convertToDataSource, convertToAppConfigKeyVault, convertToAppConfig } from '@/js/types';
 import { mockRoles, mockRoleAssignmentsResponse } from './mock';
+import { $fetch } from 'ofetch';
 
 async function wait(milliseconds: number = 1000): Promise<void> {
 	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));

From 34c41a15f5e3b9e46fa89353b284acbf644366c1 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:01:22 -0700
Subject: [PATCH 17/51] Update api methods

---
 src/ui/ManagementPortal/js/api.ts | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index f322c06c06..9b62cb1f06 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -530,18 +530,37 @@ export default {
 		return data;
 	},
 
-	async getRoles(): Roles[] {
-		await wait(1000);
-		return mockRoles;
+	async getRoleAssignments(): RoleAssignment[] {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/filter`,
+			{
+				method: 'POST',
+				body: JSON.stringify({
+					scope: `/instances/${this.instanceId}`,
+				}),
+			},
+		) as RoleAssignment[];
 	},
 
-	async getRoleAssignments(): RoleAssignment[] {
+	async getRoleAssignment(roleAssignmentId): RoleAssignment[] {
 		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}`,
+			{
+				method: 'POST',
+				body: JSON.stringify({
+					scope: `/instances/${this.instanceId}`,
+				}),
+			},
 		) as RoleAssignment[];
 	},
 
-	async getRoleAssignment(roleAssignmentId): RoleAssignment {
+	async getRoleDefinitions(): RoleAssignment[] {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
+		) as Object[];
+	},
+
+	async getRoleDefinition(roleAssignmentId): RoleAssignment {
 		return await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}`,
 		) as RoleAssignment[];

From fdd35ef0ef6eb52f0c55224f589cc40e45b09907 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:02:21 -0700
Subject: [PATCH 18/51] Update role assignments index page

---
 .../pages/security/role-assignments/index.vue | 92 ++++++++++++++++---
 1 file changed, 81 insertions(+), 11 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index b21616a4ee..7edffb9b6a 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -39,7 +39,7 @@
 
 				<!-- Name -->
 				<Column
-					field="display_name"
+					field="principal.display_name"
 					header="Name"
 					sortable
 					style="min-width: 120px"
@@ -49,14 +49,42 @@
 						},
 						sortIcon: { style: { color: 'var(--primary-text)' } },
 					}"
-				></Column>
+				>
+					<template #body="{ data }">
+						<div class="d-flex align-center" style="gap: 12px">
+							<i v-if="data.principal.object_type === 'Group'" class="pi pi-users"></i>
+							<i v-else-if="data.principal.object_type === 'User'" class="pi pi-user"></i>
+							<i v-else class="pi pi-verified"></i>
+
+							<span>
+								<div>{{ data.principal.display_name }}</div>
+								<div v-if="data.principal?.email">({{ data.principal?.email }})</div>
+							</span>
+						</div>
+					</template>
+				</Column>
+
+				<!-- Principal Type -->
+				<Column
+					field="principal_type"
+					header="Type"
+					sortable
+					style="min-width: 120px;"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				>
+				</Column>
 
-				<!-- Type -->
+				<!-- Role -->
 				<Column
-					field="description"
-					header="Description"
+					field="role.display_name"
+					header="Role"
 					sortable
-					style="min-width: 200px; max-width: 500px;"
+					style="min-width: 240px;"
 					:pt="{
 						headerCell: {
 							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -64,19 +92,38 @@
 						sortIcon: { style: { color: 'var(--primary-text)' } },
 					}"
 				>
-					<template #body="slotProps">
+					<template #body="{ data }">
+						<span>{{ data.role.display_name }}</span>
 						<span
 							v-tooltip.bottom="{
-								value: slotProps.data.description,
+								value: data.role.description,
 								autoHide: false,
 							}"
-							class="description__column"
 						>
-							{{ slotProps.data.description }}
+							<i class="pi pi-info-circle" style="margin-left: 8px;"></i>
 						</span>
 					</template>
 				</Column>
 
+				<!-- Scope -->
+				<Column
+					field="scope"
+					header="Scope"
+					sortable
+					style="min-width: 140px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				>
+					<template #body="{ data }">
+						<span v-if="data.scope.startsWith('/instances/')">Instance</span>
+						<span v-else>{{ data.scope }}</span>
+					</template>
+				</Column>
+
 				<!-- Edit -->
 				<Column
 					header="Edit"
@@ -159,7 +206,30 @@ export default {
 		async getRoleAssignments() {
 			this.loading = true;
 			try {
-				this.roleAssignments = await api.getRoleAssignments();
+				const roleAssignments = await api.getRoleAssignments();
+				// index 10 causes a 500 due to incorrect principal_id
+				roleAssignments.splice(10, 1);
+
+				const principalIds = [];
+				for (let assignmentForPrincipalId of roleAssignments) {
+					principalIds.push(assignmentForPrincipalId.resource.principal_id);
+				}
+
+				const principals = await api.getObjects({
+					ids: principalIds,
+				});
+
+				const roleDefinitions = await api.getRoleDefinitions();
+
+				this.roleAssignments = roleAssignments.map((assignment) => {
+					return {
+						name: assignment.resource.name,
+						principal_type: assignment.resource.principal_type,
+						principal: principals.find((principal) => principal.id === assignment.resource.principal_id),
+						scope: assignment.resource.scope,
+						role: roleDefinitions.find((role) => role.object_id === assignment.resource.role_definition_id),
+					};
+				});
 			} catch (error) {
 				this.$toast.add({
 					severity: 'error',

From 09b1e4bff02c4beb19a4d2ee685f19417af78198 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:02:33 -0700
Subject: [PATCH 19/51] Update role assignments create page

---
 .../security/role-assignments/create.vue      | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index acb8257339..1a0d8d194f 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -59,8 +59,17 @@
 					modal
 					header="Browse Principals"
 					:closable="false"
+					:style="{ minWidth: '30rem' }"
 				>
-					<div class="mb-2">Search by person or group</div>
+					<div class="mb-2">Search type</div>
+					<Dropdown
+						v-model="principalSearchType"
+						:options="['User', 'Group']"
+						placeholder="--Select--"
+						class="mb-2 w-100"
+					/>
+
+					<div class="mb-2">Search query</div>
 					<InputText
 						v-model="principalSearch"
 						placeholder="Search"
@@ -111,6 +120,7 @@
 import type { PropType } from 'vue';
 import { debounce } from 'lodash';
 import api from '@/js/api';
+
 import type {
 	Role,
 	RoleAssignment,
@@ -134,6 +144,7 @@ export default {
 
 			openBrowsePrincipalsModal: false,
 			roleOptions: [] as Role[],
+			principalSearchType: null as null | string,
 
 			roleAssignment: {
 				description: '',
@@ -148,13 +159,23 @@ export default {
 		this.loading = true;
 
 		this.loadingStatusText = `Retrieving roles...`;
-		this.roleOptions = await api.getRoles();
+		this.roleOptions = await api.getRoleDefinitions();
 
 		if (this.editId) {
 			this.loadingStatusText = `Retrieving role assignment "${this.editId}"...`;
 			this.roleAssignment = await api.getRoleAssignment(this.editId);
 		}
 
+		const users = await api.getUsers();
+		const user = users.items[0];
+
+		const groups = await api.getGroups();
+		const group = groups.items[0];
+
+		const objects = await api.getObjects({
+			ids: [user.id, group.id],
+		});
+
 		this.loading = false;
 	},
 

From 91e1a4020aabe4119dc2dc1f6fe9c1593e667b87 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:06:47 -0700
Subject: [PATCH 20/51] Update delete modal text and remove edit option

---
 .../pages/security/role-assignments/index.vue | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 7edffb9b6a..00455ccd81 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -124,27 +124,6 @@
 					</template>
 				</Column>
 
-				<!-- Edit -->
-				<Column
-					header="Edit"
-					header-style="width:6rem"
-					style="text-align: center"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						headerContent: { style: { justifyContent: 'center' } },
-					}"
-				>
-					<template #body="{ data }">
-						<NuxtLink :to="'/security/role-assignments/edit/' + data.name" class="table__button">
-							<Button link>
-								<i class="pi pi-cog" style="font-size: 1.2rem"></i>
-							</Button>
-						</NuxtLink>
-					</template>
-				</Column>
-
 				<!-- Delete -->
 				<Column
 					header="Delete"
@@ -173,7 +152,7 @@
 			header="Delete Role Assignment"
 			:closable="false"
 		>
-			<p>Do you want to delete the role assignment "{{ roleAssignmentToDelete.name }}" ?</p>
+			<p>Do you want to delete the role assignment for "{{ roleAssignmentToDelete.principal.display_name }}"?</p>
 			<template #footer>
 				<Button label="Cancel" text @click="roleAssignmentToDelete = null" />
 				<Button label="Delete" severity="danger" @click="handleDeleteRoleAssignment" />

From 131553d67842d8c33372a861f4565158bdf9411c Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:30:28 -0700
Subject: [PATCH 21/51] Group role assignments in table

---
 .../pages/security/role-assignments/index.vue | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 00455ccd81..6b7bf3983c 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -27,6 +27,11 @@
 
 			<!-- Table -->
 			<DataTable
+				rowGroupMode="subheader"
+				groupRowsBy="role.display_name"
+				sortField="role.display_name"
+				expandableRowGroups
+				v-model:expandedRowGroups="expandedRowGroups"
 				:value="roleAssignments"
 				striped-rows
 				scrollable
@@ -34,9 +39,23 @@
 				size="small"
 			>
 				<template #empty>
-					No role assignments found. Please use the menu on the left to create a new role assignment.</template>
+					No role assignments found. Please use the menu on the left to create a new role assignment.
+				</template>
+
 				<template #loading>Loading data sources. Please wait.</template>
 
+				<template #groupheader="{ data }">
+					<span>{{ data.role.display_name }}</span>
+					<span
+						v-tooltip.bottom="{
+							value: data.role.description,
+							autoHide: false,
+						}"
+					>
+						<i class="pi pi-info-circle" style="margin-left: 8px;"></i>
+					</span>
+				</template>
+
 				<!-- Name -->
 				<Column
 					field="principal.display_name"
@@ -51,7 +70,7 @@
 					}"
 				>
 					<template #body="{ data }">
-						<div class="d-flex align-center" style="gap: 12px">
+						<div class="d-flex align-center" style="gap: 12px; margin-left: 32px;">
 							<i v-if="data.principal.object_type === 'Group'" class="pi pi-users"></i>
 							<i v-else-if="data.principal.object_type === 'User'" class="pi pi-user"></i>
 							<i v-else class="pi pi-verified"></i>
@@ -170,6 +189,7 @@ export default {
 
 	data() {
 		return {
+			expandedRowGroups: [],
 			roleAssignments: [] as RoleAssignment[],
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,

From 4c65ba11405a03c8369c93b637894b5fd151c4ff Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:31:04 -0700
Subject: [PATCH 22/51] Add vitest config file

---
 src/ui/ManagementPortal/vitest.config.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/ui/ManagementPortal/vitest.config.ts

diff --git a/src/ui/ManagementPortal/vitest.config.ts b/src/ui/ManagementPortal/vitest.config.ts
new file mode 100644
index 0000000000..3daafcfce1
--- /dev/null
+++ b/src/ui/ManagementPortal/vitest.config.ts
@@ -0,0 +1,5 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config';
+
+export default defineVitestConfig({
+	// any custom Vitest config you require
+});

From 93be7e850dee7ff369add76b0fe28dc289955e45 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:34:58 -0700
Subject: [PATCH 23/51] Expand all role groups initially

---
 .../pages/security/role-assignments/index.vue            | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 6b7bf3983c..81e8ffdb74 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -99,7 +99,7 @@
 				</Column>
 
 				<!-- Role -->
-				<Column
+			<!-- 	<Column
 					field="role.display_name"
 					header="Role"
 					sortable
@@ -123,7 +123,7 @@
 						</span>
 					</template>
 				</Column>
-
+ -->
 				<!-- Scope -->
 				<Column
 					field="scope"
@@ -220,6 +220,11 @@ export default {
 
 				const roleDefinitions = await api.getRoleDefinitions();
 
+				// Expand all role groups in table
+				for (let roleDefinition of roleDefinitions) {
+					this.expandedRowGroups.push(roleDefinition.display_name);
+				}
+
 				this.roleAssignments = roleAssignments.map((assignment) => {
 					return {
 						name: assignment.resource.name,

From 15ca9b3f6cf9e91626118921b677845ac9fce546 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:35:14 -0700
Subject: [PATCH 24/51] Remove unused code

---
 .../ManagementPortal/pages/security/role-assignments/index.vue  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 81e8ffdb74..e3fdee7480 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -206,8 +206,6 @@ export default {
 			this.loading = true;
 			try {
 				const roleAssignments = await api.getRoleAssignments();
-				// index 10 causes a 500 due to incorrect principal_id
-				roleAssignments.splice(10, 1);
 
 				const principalIds = [];
 				for (let assignmentForPrincipalId of roleAssignments) {

From 4bb6f0bb0b94e64309a08d434bbbbeb574e7f245 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 1 Jul 2024 11:54:54 -0700
Subject: [PATCH 25/51] Use principal_type over object_type for icon

---
 .../pages/security/role-assignments/index.vue                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index e3fdee7480..cdc02fcb09 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -71,8 +71,8 @@
 				>
 					<template #body="{ data }">
 						<div class="d-flex align-center" style="gap: 12px; margin-left: 32px;">
-							<i v-if="data.principal.object_type === 'Group'" class="pi pi-users"></i>
-							<i v-else-if="data.principal.object_type === 'User'" class="pi pi-user"></i>
+							<i v-if="data.principal_type === 'Group'" class="pi pi-users"></i>
+							<i v-else-if="data.principal_type === 'User'" class="pi pi-user"></i>
 							<i v-else class="pi pi-verified"></i>
 
 							<span>

From 841f32f84b105c0ab0ca3cf7bbf502be4d1a5e9d Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 04:59:19 -0700
Subject: [PATCH 26/51] Update api methods

---
 src/ui/ManagementPortal/js/api.ts | 1312 +++++++++++++++--------------
 1 file changed, 672 insertions(+), 640 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 9b62cb1f06..ef4f6829a8 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -1,640 +1,672 @@
-import type {
-	ResourceProviderGetResult,
-	Agent,
-	DataSource,
-	AppConfigUnion,
-	AgentIndex,
-	AgentGatekeeper,
-	FilterRequest,
-	CreateAgentRequest,
-	CheckNameResponse,
-	Prompt,
-	TextPartitioningProfile,
-	TextEmbeddingProfile,
-	CreatePromptRequest,
-	CreateTextPartitioningProfileRequest,
-	ExternalOrchestrationService,
-	Role,
-	RoleAssignment,
-} from './types';
-import { convertToDataSource, convertToAppConfigKeyVault, convertToAppConfig } from '@/js/types';
-import { mockRoles, mockRoleAssignmentsResponse } from './mock';
-import { $fetch } from 'ofetch';
-
-async function wait(milliseconds: number = 1000): Promise<void> {
-	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));
-}
-
-export default {
-	apiVersion: '2024-02-16',
-	apiUrl: null as string | null,
-	setApiUrl(apiUrl: string) {
-		this.apiUrl = apiUrl;
-	},
-
-	instanceId: null as string | null,
-	setInstanceId(instanceId: string) {
-		this.instanceId = instanceId;
-	},
-
-	bearerToken: null,
-	async getBearerToken() {
-		if (this.bearerToken) return this.bearerToken;
-
-		const token = await useNuxtApp().$authStore.getToken();
-		this.bearerToken = token.accessToken;
-		return this.bearerToken;
-	},
-
-	async fetch(url: string, opts: any = {}) {
-		const options = opts;
-		options.headers = opts.headers || {};
-
-		// if (options?.query) {
-		// 	url += '?' + (new URLSearchParams(options.query)).toString();
-		// }
-
-		const bearerToken = await this.getBearerToken();
-		options.headers.Authorization = `Bearer ${bearerToken}`;
-
-		return await $fetch(`${this.apiUrl}${url}`, options);
-	},
-
-	async getConfigValue(key: string) {
-		return await $fetch(`/api/config/`, {
-			params: {
-				key,
-			},
-		});
-	},
-
-	// Data sources
-	async checkDataSourceName(name: string, type: string): Promise<CheckNameResponse> {
-		const payload = {
-			name,
-			type,
-		};
-
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/checkname?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: payload,
-			},
-		);
-	},
-
-	async getDefaultDataSource(): Promise<DataSource | null> {
-		const payload: FilterRequest = {
-			default: true,
-		};
-
-		const data = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/filter?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: payload,
-			},
-		);
-
-		if (data && data.length > 0) {
-			return data[0] as DataSource;
-		} else {
-			return null;
-		}
-	},
-
-	async getAgentDataSources(addDefaultOption: boolean = false): Promise<ResourceProviderGetResult<DataSource>[]> {
-		const data = (await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources?api-version=${this.apiVersion}`,
-		)) as ResourceProviderGetResult<DataSource>[];
-		if (addDefaultOption) {
-			const defaultDataSource: DataSource = {
-				name: 'Select default data source',
-				type: 'DEFAULT',
-				object_id: '',
-				resolved_configuration_references: {},
-				configuration_references: {},
-			};
-			const defaultDataSourceResult: ResourceProviderGetResult<DataSource> = {
-				resource: defaultDataSource,
-				actions: [],
-				roles: [],
-			};
-			data.unshift(defaultDataSourceResult);
-		}
-		return data;
-	},
-
-	async getDataSource(dataSourceId: string): Promise<ResourceProviderGetResult<DataSource>> {
-		const [data] = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/${dataSourceId}?api-version=${this.apiVersion}`,
-		) as ResourceProviderGetResult<DataSource>[];
-		let dataSource = data.resource as DataSource;
-		dataSource.resolved_configuration_references = {};
-		// Retrieve all the app config values for the data source.
-		const appConfigFilter = `FoundationaLLM:DataSources:${dataSource.name}:*`;
-		const appConfigResults = await this.getAppConfigs(appConfigFilter);
-
-		// If set the resolved_configuration_references property on the data source with the app config values.
-		if (appConfigResults) {
-			for (const appConfigResult of appConfigResults) {
-				const appConfig = appConfigResult.resource;
-				const propertyName = appConfig.name.split(':').pop();
-				dataSource.resolved_configuration_references[propertyName as string] = String(
-					appConfig.value,
-				);
-			}
-		} else {
-			for (const [configName /* configValue */] of Object.entries(
-				dataSource.configuration_references,
-			)) {
-				const resolvedValue = await this.getAppConfig(
-					dataSource.configuration_references[
-						configName as keyof typeof dataSource.configuration_references
-					],
-				);
-				if (resolvedValue) {
-					dataSource.resolved_configuration_references[configName] = String(resolvedValue.value);
-				} else {
-					dataSource.resolved_configuration_references[configName] = '';
-				}
-			}
-		}
-		dataSource = convertToDataSource(dataSource);
-		data.resource = dataSource;
-		return data;
-	},
-
-	async upsertDataSource(request): Promise<any> {
-		const dataSource = convertToDataSource(request);
-		for (const [propertyName, propertyValue] of Object.entries(
-			dataSource.resolved_configuration_references || {},
-		)) {
-			if (!propertyValue) {
-				continue;
-			}
-
-			const appConfigKey = `FoundationaLLM:DataSources:${dataSource.name}:${propertyName}`;
-			const keyVaultSecretName =
-				`foundationallm-datasources-${dataSource.name}-${propertyName}`.toLowerCase();
-			const metadata = dataSource.configuration_reference_metadata?.[propertyName];
-
-			const appConfigResult = await this.getAppConfig('FoundationaLLM:Configuration:KeyVaultURI');
-			const keyVaultUri = appConfigResult.resource;
-
-			let appConfig: AppConfigUnion = {
-				name: appConfigKey,
-				display_name: appConfigKey,
-				description: '',
-				key: appConfigKey,
-				value: propertyValue,
-			};
-
-			if (metadata && metadata.isKeyVaultBacked) {
-				appConfig = convertToAppConfigKeyVault({
-					...appConfig,
-					key_vault_uri: keyVaultUri.value,
-					key_vault_secret_name: keyVaultSecretName,
-				});
-			} else {
-				appConfig = convertToAppConfig(appConfig);
-			}
-
-			await this.upsertAppConfig(appConfig);
-
-			dataSource.configuration_references[propertyName] = appConfigKey;
-		}
-
-		// Remove any any configuration_references whose values are null or empty strings.
-		for (const [propertyName, propertyValue] of Object.entries(
-			dataSource.configuration_references,
-		)) {
-			if (!propertyValue) {
-				delete dataSource.configuration_references[propertyName];
-			}
-		}
-
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/${dataSource.name}?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: JSON.stringify(dataSource),
-				headers: {
-					'Content-Type': 'application/json',
-				},
-			},
-		);
-	},
-
-	async deleteDataSource(dataSourceId: string): Promise<any> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/${dataSourceId}?api-version=${this.apiVersion}`,
-			{
-				method: 'DELETE',
-			},
-		);
-	},
-
-	// App Configuration
-	async getAppConfig(key: string): Promise<ResourceProviderGetResult<AppConfigUnion>> {
-		const data = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${key}?api-version=${this.apiVersion}`,
-		);
-		return data[0] as ResourceProviderGetResult<AppConfigUnion>;
-	},
-
-	async getAppConfigs(filter?: string): Promise<ResourceProviderGetResult<AppConfigUnion>[]> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${filter}?api-version=${this.apiVersion}`,
-		) as ResourceProviderGetResult<AppConfigUnion>[];
-	},
-
-	async upsertAppConfig(request): Promise<any> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${request.key}?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: request,
-			},
-		);
-	},
-
-	// Indexes
-	async getAgentIndexes(addDefaultOption: boolean = false): Promise<ResourceProviderGetResult<AgentIndex>[]> {
-		const data = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/indexingProfiles?api-version=${this.apiVersion}`,
-		) as ResourceProviderGetResult<AgentIndex>[];
-		if (addDefaultOption) {
-			const defaultAgentIndex: AgentIndex = {
-				name: 'Select default index source',
-				object_id: '',
-				settings: {},
-				configuration_references: {},
-			};
-			const defaultAgentIndexResult: ResourceProviderGetResult<AgentIndex> = {
-				resource: defaultAgentIndex,
-				actions: [],
-				roles: [],
-			};
-			data.unshift(defaultAgentIndexResult);
-		}
-		return data;
-	},
-
-	async getDefaultAgentIndex(): Promise<AgentIndex | null> {
-		const payload: FilterRequest = {
-			default: true,
-		};
-
-		const data = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/indexingProfiles/filter?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: payload,
-			},
-		);
-
-		if (data && data.length > 0) {
-			return data[0] as AgentIndex;
-		} else {
-			return null;
-		}
-	},
-
-	// Text embedding profiles
-	async getTextEmbeddingProfiles(): Promise<ResourceProviderGetResult<TextEmbeddingProfile>[]> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/textEmbeddingProfiles?api-version=${this.apiVersion}`,
-		) as ResourceProviderGetResult<TextEmbeddingProfile>[];
-	},
-
-	// Agents
-	async checkAgentName(name: string, agentType: string): Promise<CheckNameResponse> {
-		const payload = {
-			name,
-			type: agentType,
-		};
-
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/checkname?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: payload,
-			},
-		) as CheckNameResponse;
-	},
-
-	async getAgents(): Promise<ResourceProviderGetResult<Agent>[]> {
-		const agents = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents?api-version=${this.apiVersion}`,
-		) as ResourceProviderGetResult<Agent>[];
-		// Sort the agents by name.
-		agents.sort((a, b) => a.resource.name.localeCompare(b.resource.name));
-		return agents;
-	},
-
-	async getAgent(agentId: string): Promise<ResourceProviderGetResult<Agent>> {
-		const [agentGetResult]: ResourceProviderGetResult<Agent>[] = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
-		);
-
-		const agent = agentGetResult.resource as Agent;
-
-		const orchestratorTypeToKeyMap: { [key: string]: string } = {
-			LangChain: 'AzureOpenAI',
-			AzureOpenAIDirect: 'AzureOpenAI',
-			AzureAIDirect: 'AzureAI',
-		};
-
-		const orchestratorTypeKey = orchestratorTypeToKeyMap[agent.orchestration_settings?.orchestrator];
-
-		// Retrieve all the app config values for the agent
-		const appConfigFilter = `FoundationaLLM:${orchestratorTypeKey}:${agent.name}:API:*`;
-		const appConfigResults = await this.getAppConfigs(appConfigFilter);
-
-		// Replace the orchestrator endpoint config keys with the real values
-		if (appConfigResults) {
-			for (const appConfigResult of appConfigResults) {
-				const appConfig = appConfigResult.resource;
-				const propertyName = appConfig.name.split(':').pop();
-				agent.orchestration_settings.endpoint_configuration[propertyName as string] = String(
-					appConfig.value,
-				);
-			}
-		} else {
-			for (const [configName /* configValue */] of Object.entries(agent.orchestration_settings)) {
-				const resolvedValue = await this.getAppConfig(
-					agent.orchestration_settings.endpoint_configuration[
-						configName as keyof typeof agent.orchestration_settings.endpoint_configuration
-					],
-				);
-				if (resolvedValue && resolvedValue.resource) {
-					agent.orchestration_settings.endpoint_configuration[configName] = String(
-						resolvedValue.resource.value,
-					);
-				} else {
-					agent.orchestration_settings.endpoint_configuration[configName] = '';
-				}
-			}
-		}
-
-		agentGetResult.resource = agent;
-
-		return agentGetResult;
-	},
-
-	// async updateAgent(agentId: string, request: CreateAgentRequest): Promise<any> {
-	// 	return await this.fetch(
-	// 		`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
-	// 		{
-	// 			method: 'POST',
-	// 			body: request,
-	// 		},
-	// 	);
-	// },
-
-	async upsertAgent(agentId: string, agentData: CreateAgentRequest): Promise<any> {
-		// Deep copy the agent object to prevent modifiying its references
-		const agent = JSON.parse(JSON.stringify(agentData)) as CreateAgentRequest;
-
-		if (agent.orchestration_settings.orchestrator.toLowerCase() === 'langchain' ||
-			agent.orchestration_settings.orchestrator.toLowerCase() === 'semantickernel') {
-			for (const [propertyName, propertyValue] of Object.entries(
-				agent.orchestration_settings.endpoint_configuration,
-			)) {
-				if (!propertyValue) {
-					continue;
-				}
-
-				if (propertyValue.startsWith('FoundationaLLM:') &&
-					propertyName !== 'api_key') {
-					// Get the static value from the app config.
-					const appConfigResult = await this.getAppConfig(propertyValue);
-					// Set the static value to the endpoint configuration.
-					agent.orchestration_settings.endpoint_configuration[propertyName] = appConfigResult.resource.value;
-				}
-			}
-		}
-
-		for (const [propertyName, propertyValue] of Object.entries(
-			agent.orchestration_settings.model_parameters,
-		)) {
-			if (!propertyValue) {
-				continue;
-			}
-
-			if (propertyValue.startsWith('FoundationaLLM:')) {
-				// Get the static value from the app config.
-				const appConfigResult = await this.getAppConfig(propertyValue);
-				// Set the static value to the endpoint configuration.
-				agent.orchestration_settings.model_parameters[propertyName] = appConfigResult.resource.value;
-			}
-		}
-
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: agent,
-			},
-		);
-	},
-
-	async createAgent(request: CreateAgentRequest): Promise<any> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${request.name}?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: request,
-			},
-		);
-	},
-
-	async deleteAgent(agentId: string): Promise<any> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
-			{
-				method: 'DELETE',
-			},
-		);
-	},
-
-	// Prompts
-	async getPrompt(promptId: string): Promise<ResourceProviderGetResult<Prompt> | null> {
-		// Attempt to retrieve the prompt. If it doesn't exist, return an empty object.
-		try {
-			const data = await this.fetch(`${promptId}?api-version=${this.apiVersion}`);
-			return data[0];
-		} catch (error) {
-			return null;
-		}
-	},
-
-	async createOrUpdatePrompt(agentId: string, request: CreatePromptRequest): Promise<any> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Prompt/prompts/${agentId}?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: request,
-			},
-		);
-	},
-
-	async getTextPartitioningProfile(profileId: string): Promise<ResourceProviderGetResult<TextPartitioningProfile>> {
-		const data = await this.fetch(`${profileId}?api-version=${this.apiVersion}`);
-		return data[0];
-	},
-
-	async createOrUpdateTextPartitioningProfile(
-		agentId: string,
-		request: CreateTextPartitioningProfileRequest,
-	): Promise<any> {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/textPartitioningProfiles/${agentId}?api-version=${this.apiVersion}`,
-			{
-				method: 'POST',
-				body: request,
-			},
-		);
-	},
-
-	async getExternalOrchestrationServices(resolveApiKey: boolean = false): Promise<ResourceProviderGetResult<ExternalOrchestrationService>[]> {
-		const data = await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/externalOrchestrationServices?api-version=${this.apiVersion}`,
-		) as ResourceProviderGetResult<ExternalOrchestrationService>[];
-		
-		// Retrieve all the app config values for the external orchestration services..
-		const appConfigFilter = `FoundationaLLM:ExternalAPIs:*`;
-		const appConfigResults = await this.getAppConfigs(appConfigFilter);
-
-		// Loop through the external orchestration services and replace the app config keys with the real values.
-		for (const externalOrchestrationService of data) {
-			externalOrchestrationService.resource.resolved_api_url = '';
-			externalOrchestrationService.resource.resolved_api_key = '';
-			// Find a matching app config for the API URL. The app config name should be in the format FoundationaLLM:ExternalAPIs:<ServiceName>:APIUrl
-			const apiUrlAppConfig = appConfigResults.find(appConfig => appConfig.resource.name === `FoundationaLLM:ExternalAPIs:${externalOrchestrationService.resource.name}:APIUrl`);
-			if (apiUrlAppConfig) {
-				externalOrchestrationService.resource.resolved_api_url = apiUrlAppConfig.resource.value;
-			}
-			if (resolveApiKey) {
-				// Find a matching app config for the API Key. The app config name should be in the format FoundationaLLM:ExternalAPIs:<ServiceName>:APIKey
-				const apiKeyAppConfig = appConfigResults.find(appConfig => appConfig.resource.name === `FoundationaLLM:ExternalAPIs:${externalOrchestrationService.resource.name}:APIKey`);
-				if (apiKeyAppConfig) {
-					externalOrchestrationService.resource.resolved_api_key = apiKeyAppConfig.resource.value;
-				}
-			}
-		}
-
-		// Return the updated external orchestration services.
-		return data;
-	},
-
-	async getRoleAssignments(): RoleAssignment[] {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/filter`,
-			{
-				method: 'POST',
-				body: JSON.stringify({
-					scope: `/instances/${this.instanceId}`,
-				}),
-			},
-		) as RoleAssignment[];
-	},
-
-	async getRoleAssignment(roleAssignmentId): RoleAssignment[] {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}`,
-			{
-				method: 'POST',
-				body: JSON.stringify({
-					scope: `/instances/${this.instanceId}`,
-				}),
-			},
-		) as RoleAssignment[];
-	},
-
-	async getRoleDefinitions(): RoleAssignment[] {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
-		) as Object[];
-	},
-
-	async getRoleDefinition(roleAssignmentId): RoleAssignment {
-		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}`,
-		) as RoleAssignment[];
-	},
-
-	async updateRoleAssignment(roleAssignment: RoleAssignment) {
-		await wait(1000);
-		return roleAssignment;
-	},
-
-	async deleteRoleAssignment(roleAssignmentId): void {
-		await wait(1000);
-		return roleAssignmentId;
-	},
-
-	async getUsers(params) {
-		const defaults = {
-			name: '',
-			ids: [],
-			page_number: 1,
-			page_size: null,
-		};
-
-		return await this.fetch(
-			`/instances/${this.instanceId}/identity/users/retrieve`,
-			{
-				method: 'POST',
-				body: JSON.stringify({
-					...defaults,
-					...params,
-				}),
-			},
-		);
-	},
-
-	async getUser(userId) {
-		return await this.fetch(
-			`/instances/${this.instanceId}/identity/users/${userId}`,
-		);
-	},
-
-	async getGroups(params) {
-		const defaults = {
-			name: '',
-			ids: [],
-			page_number: 1,
-			page_size: null,
-		};
-
-		return await this.fetch(
-			`/instances/${this.instanceId}/identity/groups/retrieve`,
-			{
-				method: 'POST',
-				body: JSON.stringify({
-					...defaults,
-					...params,
-				}),
-			},
-		);
-	},
-
-	async getGroup(groupId) {
-		return await this.fetch(
-			`/instances/${this.instanceId}/identity/groups/${groupId}`,
-		);
-	},
-
-	async getObjects(params = { ids: [] }) {
-		return await this.fetch(
-			`/instances/${this.instanceId}/identity/objects/retrievebyids`,
-			{
-				method: 'POST',
-				body: JSON.stringify(params),
-			},
-		);
-	},
-};
+import type {
+	ResourceProviderGetResult,
+	Agent,
+	DataSource,
+	AppConfigUnion,
+	AgentIndex,
+	AgentGatekeeper,
+	FilterRequest,
+	CreateAgentRequest,
+	CheckNameResponse,
+	Prompt,
+	TextPartitioningProfile,
+	TextEmbeddingProfile,
+	CreatePromptRequest,
+	CreateTextPartitioningProfileRequest,
+	ExternalOrchestrationService,
+	Role,
+	RoleAssignment,
+} from './types';
+import { convertToDataSource, convertToAppConfigKeyVault, convertToAppConfig } from '@/js/types';
+import { mockRoles, mockRoleAssignmentsResponse } from './mock';
+import { $fetch } from 'ofetch';
+
+async function wait(milliseconds: number = 1000): Promise<void> {
+	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));
+}
+
+export default {
+	apiVersion: '2024-02-16',
+	apiUrl: null as string | null,
+	setApiUrl(apiUrl: string) {
+		this.apiUrl = apiUrl;
+	},
+
+	instanceId: null as string | null,
+	setInstanceId(instanceId: string) {
+		this.instanceId = instanceId;
+	},
+
+	bearerToken: null,
+	async getBearerToken() {
+		if (this.bearerToken) return this.bearerToken;
+
+		const token = await useNuxtApp().$authStore.getToken();
+		this.bearerToken = token.accessToken;
+		return this.bearerToken;
+	},
+
+	async fetch(url: string, opts: any = {}) {
+		const options = opts;
+		options.headers = opts.headers || {};
+
+		// if (options?.query) {
+		// 	url += '?' + (new URLSearchParams(options.query)).toString();
+		// }
+
+		const bearerToken = await this.getBearerToken();
+		options.headers.Authorization = `Bearer ${bearerToken}`;
+
+		return await $fetch(`${this.apiUrl}${url}`, options);
+	},
+
+	async getConfigValue(key: string) {
+		return await $fetch(`/api/config/`, {
+			params: {
+				key,
+			},
+		});
+	},
+
+	// Data sources
+	async checkDataSourceName(name: string, type: string): Promise<CheckNameResponse> {
+		const payload = {
+			name,
+			type,
+		};
+
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/checkname?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: payload,
+			},
+		);
+	},
+
+	async getDefaultDataSource(): Promise<DataSource | null> {
+		const payload: FilterRequest = {
+			default: true,
+		};
+
+		const data = await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/filter?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: payload,
+			},
+		);
+
+		if (data && data.length > 0) {
+			return data[0] as DataSource;
+		} else {
+			return null;
+		}
+	},
+
+	async getAgentDataSources(
+		addDefaultOption: boolean = false,
+	): Promise<ResourceProviderGetResult<DataSource>[]> {
+		const data = (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<DataSource>[];
+		if (addDefaultOption) {
+			const defaultDataSource: DataSource = {
+				name: 'Select default data source',
+				type: 'DEFAULT',
+				object_id: '',
+				resolved_configuration_references: {},
+				configuration_references: {},
+			};
+			const defaultDataSourceResult: ResourceProviderGetResult<DataSource> = {
+				resource: defaultDataSource,
+				actions: [],
+				roles: [],
+			};
+			data.unshift(defaultDataSourceResult);
+		}
+		return data;
+	},
+
+	async getDataSource(dataSourceId: string): Promise<ResourceProviderGetResult<DataSource>> {
+		const [data] = (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/${dataSourceId}?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<DataSource>[];
+		let dataSource = data.resource as DataSource;
+		dataSource.resolved_configuration_references = {};
+		// Retrieve all the app config values for the data source.
+		const appConfigFilter = `FoundationaLLM:DataSources:${dataSource.name}:*`;
+		const appConfigResults = await this.getAppConfigs(appConfigFilter);
+
+		// If set the resolved_configuration_references property on the data source with the app config values.
+		if (appConfigResults) {
+			for (const appConfigResult of appConfigResults) {
+				const appConfig = appConfigResult.resource;
+				const propertyName = appConfig.name.split(':').pop();
+				dataSource.resolved_configuration_references[propertyName as string] = String(
+					appConfig.value,
+				);
+			}
+		} else {
+			for (const [configName /* configValue */] of Object.entries(
+				dataSource.configuration_references,
+			)) {
+				const resolvedValue = await this.getAppConfig(
+					dataSource.configuration_references[
+						configName as keyof typeof dataSource.configuration_references
+					],
+				);
+				if (resolvedValue) {
+					dataSource.resolved_configuration_references[configName] = String(resolvedValue.value);
+				} else {
+					dataSource.resolved_configuration_references[configName] = '';
+				}
+			}
+		}
+		dataSource = convertToDataSource(dataSource);
+		data.resource = dataSource;
+		return data;
+	},
+
+	async upsertDataSource(request): Promise<any> {
+		const dataSource = convertToDataSource(request);
+		for (const [propertyName, propertyValue] of Object.entries(
+			dataSource.resolved_configuration_references || {},
+		)) {
+			if (!propertyValue) {
+				continue;
+			}
+
+			const appConfigKey = `FoundationaLLM:DataSources:${dataSource.name}:${propertyName}`;
+			const keyVaultSecretName =
+				`foundationallm-datasources-${dataSource.name}-${propertyName}`.toLowerCase();
+			const metadata = dataSource.configuration_reference_metadata?.[propertyName];
+
+			const appConfigResult = await this.getAppConfig('FoundationaLLM:Configuration:KeyVaultURI');
+			const keyVaultUri = appConfigResult.resource;
+
+			let appConfig: AppConfigUnion = {
+				name: appConfigKey,
+				display_name: appConfigKey,
+				description: '',
+				key: appConfigKey,
+				value: propertyValue,
+			};
+
+			if (metadata && metadata.isKeyVaultBacked) {
+				appConfig = convertToAppConfigKeyVault({
+					...appConfig,
+					key_vault_uri: keyVaultUri.value,
+					key_vault_secret_name: keyVaultSecretName,
+				});
+			} else {
+				appConfig = convertToAppConfig(appConfig);
+			}
+
+			await this.upsertAppConfig(appConfig);
+
+			dataSource.configuration_references[propertyName] = appConfigKey;
+		}
+
+		// Remove any any configuration_references whose values are null or empty strings.
+		for (const [propertyName, propertyValue] of Object.entries(
+			dataSource.configuration_references,
+		)) {
+			if (!propertyValue) {
+				delete dataSource.configuration_references[propertyName];
+			}
+		}
+
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/${dataSource.name}?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: JSON.stringify(dataSource),
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			},
+		);
+	},
+
+	async deleteDataSource(dataSourceId: string): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.DataSource/dataSources/${dataSourceId}?api-version=${this.apiVersion}`,
+			{
+				method: 'DELETE',
+			},
+		);
+	},
+
+	// App Configuration
+	async getAppConfig(key: string): Promise<ResourceProviderGetResult<AppConfigUnion>> {
+		const data = await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${key}?api-version=${this.apiVersion}`,
+		);
+		return data[0] as ResourceProviderGetResult<AppConfigUnion>;
+	},
+
+	async getAppConfigs(filter?: string): Promise<ResourceProviderGetResult<AppConfigUnion>[]> {
+		return (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${filter}?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<AppConfigUnion>[];
+	},
+
+	async upsertAppConfig(request): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${request.key}?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: request,
+			},
+		);
+	},
+
+	// Indexes
+	async getAgentIndexes(
+		addDefaultOption: boolean = false,
+	): Promise<ResourceProviderGetResult<AgentIndex>[]> {
+		const data = (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/indexingProfiles?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<AgentIndex>[];
+		if (addDefaultOption) {
+			const defaultAgentIndex: AgentIndex = {
+				name: 'Select default index source',
+				object_id: '',
+				settings: {},
+				configuration_references: {},
+			};
+			const defaultAgentIndexResult: ResourceProviderGetResult<AgentIndex> = {
+				resource: defaultAgentIndex,
+				actions: [],
+				roles: [],
+			};
+			data.unshift(defaultAgentIndexResult);
+		}
+		return data;
+	},
+
+	async getDefaultAgentIndex(): Promise<AgentIndex | null> {
+		const payload: FilterRequest = {
+			default: true,
+		};
+
+		const data = await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/indexingProfiles/filter?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: payload,
+			},
+		);
+
+		if (data && data.length > 0) {
+			return data[0] as AgentIndex;
+		} else {
+			return null;
+		}
+	},
+
+	// Text embedding profiles
+	async getTextEmbeddingProfiles(): Promise<ResourceProviderGetResult<TextEmbeddingProfile>[]> {
+		return (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/textEmbeddingProfiles?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<TextEmbeddingProfile>[];
+	},
+
+	// Agents
+	async checkAgentName(name: string, agentType: string): Promise<CheckNameResponse> {
+		const payload = {
+			name,
+			type: agentType,
+		};
+
+		return (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/checkname?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: payload,
+			},
+		)) as CheckNameResponse;
+	},
+
+	async getAgents(): Promise<ResourceProviderGetResult<Agent>[]> {
+		const agents = (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<Agent>[];
+		// Sort the agents by name.
+		agents.sort((a, b) => a.resource.name.localeCompare(b.resource.name));
+		return agents;
+	},
+
+	async getAgent(agentId: string): Promise<ResourceProviderGetResult<Agent>> {
+		const [agentGetResult]: ResourceProviderGetResult<Agent>[] = await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
+		);
+
+		const agent = agentGetResult.resource as Agent;
+
+		const orchestratorTypeToKeyMap: { [key: string]: string } = {
+			LangChain: 'AzureOpenAI',
+			AzureOpenAIDirect: 'AzureOpenAI',
+			AzureAIDirect: 'AzureAI',
+		};
+
+		const orchestratorTypeKey =
+			orchestratorTypeToKeyMap[agent.orchestration_settings?.orchestrator];
+
+		// Retrieve all the app config values for the agent
+		const appConfigFilter = `FoundationaLLM:${orchestratorTypeKey}:${agent.name}:API:*`;
+		const appConfigResults = await this.getAppConfigs(appConfigFilter);
+
+		// Replace the orchestrator endpoint config keys with the real values
+		if (appConfigResults) {
+			for (const appConfigResult of appConfigResults) {
+				const appConfig = appConfigResult.resource;
+				const propertyName = appConfig.name.split(':').pop();
+				agent.orchestration_settings.endpoint_configuration[propertyName as string] = String(
+					appConfig.value,
+				);
+			}
+		} else {
+			for (const [configName /* configValue */] of Object.entries(agent.orchestration_settings)) {
+				const resolvedValue = await this.getAppConfig(
+					agent.orchestration_settings.endpoint_configuration[
+						configName as keyof typeof agent.orchestration_settings.endpoint_configuration
+					],
+				);
+				if (resolvedValue && resolvedValue.resource) {
+					agent.orchestration_settings.endpoint_configuration[configName] = String(
+						resolvedValue.resource.value,
+					);
+				} else {
+					agent.orchestration_settings.endpoint_configuration[configName] = '';
+				}
+			}
+		}
+
+		agentGetResult.resource = agent;
+
+		return agentGetResult;
+	},
+
+	// async updateAgent(agentId: string, request: CreateAgentRequest): Promise<any> {
+	// 	return await this.fetch(
+	// 		`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
+	// 		{
+	// 			method: 'POST',
+	// 			body: request,
+	// 		},
+	// 	);
+	// },
+
+	async upsertAgent(agentId: string, agentData: CreateAgentRequest): Promise<any> {
+		// Deep copy the agent object to prevent modifiying its references
+		const agent = JSON.parse(JSON.stringify(agentData)) as CreateAgentRequest;
+
+		if (
+			agent.orchestration_settings.orchestrator.toLowerCase() === 'langchain' ||
+			agent.orchestration_settings.orchestrator.toLowerCase() === 'semantickernel'
+		) {
+			for (const [propertyName, propertyValue] of Object.entries(
+				agent.orchestration_settings.endpoint_configuration,
+			)) {
+				if (!propertyValue) {
+					continue;
+				}
+
+				if (propertyValue.startsWith('FoundationaLLM:') && propertyName !== 'api_key') {
+					// Get the static value from the app config.
+					const appConfigResult = await this.getAppConfig(propertyValue);
+					// Set the static value to the endpoint configuration.
+					agent.orchestration_settings.endpoint_configuration[propertyName] =
+						appConfigResult.resource.value;
+				}
+			}
+		}
+
+		for (const [propertyName, propertyValue] of Object.entries(
+			agent.orchestration_settings.model_parameters,
+		)) {
+			if (!propertyValue) {
+				continue;
+			}
+
+			if (propertyValue.startsWith('FoundationaLLM:')) {
+				// Get the static value from the app config.
+				const appConfigResult = await this.getAppConfig(propertyValue);
+				// Set the static value to the endpoint configuration.
+				agent.orchestration_settings.model_parameters[propertyName] =
+					appConfigResult.resource.value;
+			}
+		}
+
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: agent,
+			},
+		);
+	},
+
+	async createAgent(request: CreateAgentRequest): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${request.name}?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: request,
+			},
+		);
+	},
+
+	async deleteAgent(agentId: string): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentId}?api-version=${this.apiVersion}`,
+			{
+				method: 'DELETE',
+			},
+		);
+	},
+
+	// Prompts
+	async getPrompt(promptId: string): Promise<ResourceProviderGetResult<Prompt> | null> {
+		// Attempt to retrieve the prompt. If it doesn't exist, return an empty object.
+		try {
+			const data = await this.fetch(`${promptId}?api-version=${this.apiVersion}`);
+			return data[0];
+		} catch (error) {
+			return null;
+		}
+	},
+
+	async createOrUpdatePrompt(agentId: string, request: CreatePromptRequest): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Prompt/prompts/${agentId}?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: request,
+			},
+		);
+	},
+
+	async getTextPartitioningProfile(
+		profileId: string,
+	): Promise<ResourceProviderGetResult<TextPartitioningProfile>> {
+		const data = await this.fetch(`${profileId}?api-version=${this.apiVersion}`);
+		return data[0];
+	},
+
+	async createOrUpdateTextPartitioningProfile(
+		agentId: string,
+		request: CreateTextPartitioningProfileRequest,
+	): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/textPartitioningProfiles/${agentId}?api-version=${this.apiVersion}`,
+			{
+				method: 'POST',
+				body: request,
+			},
+		);
+	},
+
+	async getExternalOrchestrationServices(
+		resolveApiKey: boolean = false,
+	): Promise<ResourceProviderGetResult<ExternalOrchestrationService>[]> {
+		const data = (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/externalOrchestrationServices?api-version=${this.apiVersion}`,
+		)) as ResourceProviderGetResult<ExternalOrchestrationService>[];
+
+		// Retrieve all the app config values for the external orchestration services..
+		const appConfigFilter = `FoundationaLLM:ExternalAPIs:*`;
+		const appConfigResults = await this.getAppConfigs(appConfigFilter);
+
+		// Loop through the external orchestration services and replace the app config keys with the real values.
+		for (const externalOrchestrationService of data) {
+			externalOrchestrationService.resource.resolved_api_url = '';
+			externalOrchestrationService.resource.resolved_api_key = '';
+			// Find a matching app config for the API URL. The app config name should be in the format FoundationaLLM:ExternalAPIs:<ServiceName>:APIUrl
+			const apiUrlAppConfig = appConfigResults.find(
+				(appConfig) =>
+					appConfig.resource.name ===
+					`FoundationaLLM:ExternalAPIs:${externalOrchestrationService.resource.name}:APIUrl`,
+			);
+			if (apiUrlAppConfig) {
+				externalOrchestrationService.resource.resolved_api_url = apiUrlAppConfig.resource.value;
+			}
+			if (resolveApiKey) {
+				// Find a matching app config for the API Key. The app config name should be in the format FoundationaLLM:ExternalAPIs:<ServiceName>:APIKey
+				const apiKeyAppConfig = appConfigResults.find(
+					(appConfig) =>
+						appConfig.resource.name ===
+						`FoundationaLLM:ExternalAPIs:${externalOrchestrationService.resource.name}:APIKey`,
+				);
+				if (apiKeyAppConfig) {
+					externalOrchestrationService.resource.resolved_api_key = apiKeyAppConfig.resource.value;
+				}
+			}
+		}
+
+		// Return the updated external orchestration services.
+		return data;
+	},
+
+	async getRoleAssignments(scope): RoleAssignment[] {
+		// const agentScope = 'providers/FoundationaLLM.Agent/agents/KMAgentWithSemanticKernelInlineContext';
+		const assignments = (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/filter`,
+			{
+				method: 'POST',
+				body: JSON.stringify({
+					scope: `/instances/${this.instanceId}${scope ? `/${scope}` : ''}`,
+				}),
+			},
+		)) as RoleAssignment[];
+
+		assignments.map(assignment => {
+			if (assignment.resource.scope === `/instances/${this.instanceId}`) {
+				assignment.resource.scope_name = scope ? 'Instance (Inherited)' : 'Instance';
+			} else if (assignment.resource.scope.endsWith('KMAgentWithSemanticKernelInlineContext')) {
+				assignment.resource.scope_name = 'Agent';
+			}
+		});
+
+		return assignments;
+	},
+
+	async getRoleAssignment(roleAssignmentId): RoleAssignment[] {
+		return (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}`,
+			{
+				method: 'POST',
+				body: JSON.stringify({
+					scope: `/instances/${this.instanceId}`,
+				}),
+			},
+		)) as RoleAssignment[];
+	},
+
+	async createRoleAssignment(roleAssignmentId: string, request: Object): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}`,
+			{
+				method: 'POST',
+				body: request,
+			},
+		);
+	},
+
+	async getRoleDefinitions(): RoleAssignment[] {
+		return (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
+		)) as Object[];
+	},
+
+	async getRoleDefinition(roleAssignmentId): RoleAssignment {
+		return (await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}`,
+		)) as RoleAssignment[];
+	},
+
+	async updateRoleAssignment(roleAssignment: RoleAssignment) {
+		await wait(1000);
+		return roleAssignment;
+	},
+
+	async deleteRoleAssignment(roleAssignmentId): void {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}?api-version=${this.apiVersion}`,
+			{
+				method: 'DELETE',
+			},
+		);
+	},
+
+	async getUsers(params) {
+		const defaults = {
+			name: '',
+			ids: [],
+			page_number: 1,
+			page_size: null,
+		};
+
+		return await this.fetch(`/instances/${this.instanceId}/identity/users/retrieve`, {
+			method: 'POST',
+			body: JSON.stringify({
+				...defaults,
+				...params,
+			}),
+		});
+	},
+
+	async getUser(userId) {
+		return await this.fetch(`/instances/${this.instanceId}/identity/users/${userId}`);
+	},
+
+	async getGroups(params) {
+		const defaults = {
+			name: '',
+			ids: [],
+			page_number: 1,
+			page_size: null,
+		};
+
+		return await this.fetch(`/instances/${this.instanceId}/identity/groups/retrieve`, {
+			method: 'POST',
+			body: JSON.stringify({
+				...defaults,
+				...params,
+			}),
+		});
+	},
+
+	async getGroup(groupId) {
+		return await this.fetch(`/instances/${this.instanceId}/identity/groups/${groupId}`);
+	},
+
+	async getObjects(params = { ids: [] }) {
+		return await this.fetch(`/instances/${this.instanceId}/identity/objects/retrievebyids`, {
+			method: 'POST',
+			body: JSON.stringify(params),
+		});
+	},
+};

From aa6f983c0831b20b6159053bc9fc557af27cf133 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 04:59:57 -0700
Subject: [PATCH 27/51] Split role assignments into table component

---
 .../components/RoleAssignmentsTable.vue       | 293 ++++++++++++++++++
 .../pages/security/role-assignments/index.vue | 264 +---------------
 2 files changed, 296 insertions(+), 261 deletions(-)
 create mode 100644 src/ui/ManagementPortal/components/RoleAssignmentsTable.vue

diff --git a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
new file mode 100644
index 0000000000..d133df48f8
--- /dev/null
+++ b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
@@ -0,0 +1,293 @@
+<template>
+	<div :class="{ 'grid--loading': loading }">
+		<!-- Loading overlay -->
+		<template v-if="loading">
+			<div class="grid__loading-overlay">
+				<LoadingGrid />
+				<div>{{ loadingStatusText }}</div>
+			</div>
+		</template>
+
+		<!-- Table -->
+		<DataTable
+			rowGroupMode="subheader"
+			groupRowsBy="role.display_name"
+			sortField="role.display_name"
+			expandableRowGroups
+			v-model:expandedRowGroups="expandedRowGroups"
+			:value="roleAssignments"
+			striped-rows
+			scrollable
+			table-style="max-width: 100%"
+			size="small"
+		>
+			<template #empty>
+				No role assignments found. Please use the menu on the left to create a new role assignment.
+			</template>
+
+			<template #loading>Loading data sources. Please wait.</template>
+
+			<template #groupheader="{ data }">
+				<span>{{ data.role.display_name }}</span>
+				<span
+					v-tooltip.bottom="{
+						value: data.role.description,
+						autoHide: false,
+					}"
+				>
+					<i class="pi pi-info-circle" style="margin-left: 8px;"></i>
+				</span>
+			</template>
+
+			<!-- Name -->
+			<Column
+				field="principal.display_name"
+				header="Name"
+				sortable
+				style="min-width: 120px"
+				:pt="{
+					headerCell: {
+						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+					},
+					sortIcon: { style: { color: 'var(--primary-text)' } },
+				}"
+			>
+				<template #body="{ data }">
+					<div class="d-flex align-center" style="gap: 12px; margin-left: 32px;">
+						<i v-if="data.principal_type === 'Group'" class="pi pi-users"></i>
+						<i v-else-if="data.principal_type === 'User'" class="pi pi-user"></i>
+						<i v-else class="pi pi-verified"></i>
+
+						<span>
+							<div>{{ data.principal.display_name }}</div>
+							<div v-if="data.principal?.email">({{ data.principal?.email }})</div>
+						</span>
+					</div>
+				</template>
+			</Column>
+
+			<!-- Principal Type -->
+			<Column
+				field="principal_type"
+				header="Type"
+				sortable
+				style="min-width: 120px;"
+				:pt="{
+					headerCell: {
+						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+					},
+					sortIcon: { style: { color: 'var(--primary-text)' } },
+				}"
+			>
+			</Column>
+
+			<!-- Role -->
+		<!-- 	<Column
+				field="role.display_name"
+				header="Role"
+				sortable
+				style="min-width: 240px;"
+				:pt="{
+					headerCell: {
+						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+					},
+					sortIcon: { style: { color: 'var(--primary-text)' } },
+				}"
+			>
+				<template #body="{ data }">
+					<span>{{ data.role.display_name }}</span>
+					<span
+						v-tooltip.bottom="{
+							value: data.role.description,
+							autoHide: false,
+						}"
+					>
+						<i class="pi pi-info-circle" style="margin-left: 8px;"></i>
+					</span>
+				</template>
+			</Column>
+-->
+			<!-- Scope -->
+			<Column
+				field="scope_name"
+				header="Scope"
+				sortable
+				style="min-width: 140px"
+				:pt="{
+					headerCell: {
+						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+					},
+					sortIcon: { style: { color: 'var(--primary-text)' } },
+				}"
+			>
+				<template #body="{ data }">
+					<span>{{ data.scope_name }}</span>
+				</template>
+			</Column>
+
+			<!-- Delete -->
+			<Column
+				header="Delete"
+				header-style="width:6rem"
+				style="text-align: center"
+				:pt="{
+					headerCell: {
+						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+					},
+					headerContent: { style: { justifyContent: 'center' } },
+				}"
+			>
+				<template #body="{ data }">
+					<Button link @click="roleAssignmentToDelete = data">
+						<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
+					</Button>
+				</template>
+			</Column>
+		</DataTable>
+
+		<!-- Delete role assignment dialog -->
+		<Dialog
+			:visible="roleAssignmentToDelete !== null"
+			modal
+			header="Delete Role Assignment"
+			:closable="false"
+		>
+			<p>Do you want to delete the role assignment for "{{ roleAssignmentToDelete.principal.display_name }}"?</p>
+			<template #footer>
+				<Button label="Cancel" text @click="roleAssignmentToDelete = null" />
+				<Button label="Delete" severity="danger" @click="handleDeleteRoleAssignment" />
+			</template>
+		</Dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import api from '@/js/api';
+import type { RoleAssignment } from '@/js/types';
+
+export default {
+	name: 'RoleAssignmentsTable',
+
+	props: {
+		scope: {
+			required: false,
+			type: String,
+			default: '',
+		},
+	},
+
+	data() {
+		return {
+			expandedRowGroups: [],
+			roleAssignments: [] as RoleAssignment[],
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving role assignments...' as string,
+			roleAssignmentToDelete: null as RoleAssignment | null,
+		};
+	},
+
+	async created() {
+		await this.getRoleAssignments();
+	},
+
+	methods: {
+		async getRoleAssignments() {
+			this.loading = true;
+			try {
+				const roleAssignments = await api.getRoleAssignments(this.scope);
+				console.log(roleAssignments);
+
+				const principalIds = [];
+				for (let assignmentForPrincipalId of roleAssignments) {
+					principalIds.push(assignmentForPrincipalId.resource.principal_id);
+				}
+
+				const principals = await api.getObjects({
+					ids: principalIds,
+				});
+
+				const roleDefinitions = await api.getRoleDefinitions();
+
+				// Expand all role groups in table
+				for (let roleDefinition of roleDefinitions) {
+					this.expandedRowGroups.push(roleDefinition.display_name);
+				}
+
+				this.roleAssignments = roleAssignments.map((assignment) => {
+					return {
+						name: assignment.resource.name,
+						principal_type: assignment.resource.principal_type,
+						principal: principals.find((principal) => principal.id === assignment.resource.principal_id),
+						scope: assignment.resource.scope,
+						scope_name: assignment.resource.scope_name,
+						role: roleDefinitions.find((role) => role.object_id === assignment.resource.role_definition_id),
+					};
+				});
+			} catch (error) {
+				this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+					life: 5000,
+				});
+			}
+			this.loading = false;
+		},
+
+		async handleDeleteRoleAssignment() {
+			try {
+				await api.deleteRoleAssignment(this.roleAssignmentToDelete!.name);
+				this.roleAssignmentToDelete = null;
+			} catch (error) {
+				return this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+					life: 5000,
+				});
+			}
+
+			await this.getRoleAssignments();
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.table__button {
+	color: var(--primary-button-bg);
+}
+
+.steps {
+	display: grid;
+	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
+	gap: 24px;
+	position: relative;
+}
+
+.grid--loading {
+	pointer-events: none;
+}
+
+.grid__loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	z-index: 10;
+	background-color: rgba(255, 255, 255, 0.9);
+	pointer-events: none;
+}
+
+.description__column {
+	max-width: 100%;
+	display: inline-block;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+</style>
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index cdc02fcb09..3b8ced6f8f 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -16,167 +16,7 @@
 			</div>
 		</div>
 
-		<div :class="{ 'grid--loading': loading }">
-			<!-- Loading overlay -->
-			<template v-if="loading">
-				<div class="grid__loading-overlay">
-					<LoadingGrid />
-					<div>{{ loadingStatusText }}</div>
-				</div>
-			</template>
-
-			<!-- Table -->
-			<DataTable
-				rowGroupMode="subheader"
-				groupRowsBy="role.display_name"
-				sortField="role.display_name"
-				expandableRowGroups
-				v-model:expandedRowGroups="expandedRowGroups"
-				:value="roleAssignments"
-				striped-rows
-				scrollable
-				table-style="max-width: 100%"
-				size="small"
-			>
-				<template #empty>
-					No role assignments found. Please use the menu on the left to create a new role assignment.
-				</template>
-
-				<template #loading>Loading data sources. Please wait.</template>
-
-				<template #groupheader="{ data }">
-					<span>{{ data.role.display_name }}</span>
-					<span
-						v-tooltip.bottom="{
-							value: data.role.description,
-							autoHide: false,
-						}"
-					>
-						<i class="pi pi-info-circle" style="margin-left: 8px;"></i>
-					</span>
-				</template>
-
-				<!-- Name -->
-				<Column
-					field="principal.display_name"
-					header="Name"
-					sortable
-					style="min-width: 120px"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						sortIcon: { style: { color: 'var(--primary-text)' } },
-					}"
-				>
-					<template #body="{ data }">
-						<div class="d-flex align-center" style="gap: 12px; margin-left: 32px;">
-							<i v-if="data.principal_type === 'Group'" class="pi pi-users"></i>
-							<i v-else-if="data.principal_type === 'User'" class="pi pi-user"></i>
-							<i v-else class="pi pi-verified"></i>
-
-							<span>
-								<div>{{ data.principal.display_name }}</div>
-								<div v-if="data.principal?.email">({{ data.principal?.email }})</div>
-							</span>
-						</div>
-					</template>
-				</Column>
-
-				<!-- Principal Type -->
-				<Column
-					field="principal_type"
-					header="Type"
-					sortable
-					style="min-width: 120px;"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						sortIcon: { style: { color: 'var(--primary-text)' } },
-					}"
-				>
-				</Column>
-
-				<!-- Role -->
-			<!-- 	<Column
-					field="role.display_name"
-					header="Role"
-					sortable
-					style="min-width: 240px;"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						sortIcon: { style: { color: 'var(--primary-text)' } },
-					}"
-				>
-					<template #body="{ data }">
-						<span>{{ data.role.display_name }}</span>
-						<span
-							v-tooltip.bottom="{
-								value: data.role.description,
-								autoHide: false,
-							}"
-						>
-							<i class="pi pi-info-circle" style="margin-left: 8px;"></i>
-						</span>
-					</template>
-				</Column>
- -->
-				<!-- Scope -->
-				<Column
-					field="scope"
-					header="Scope"
-					sortable
-					style="min-width: 140px"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						sortIcon: { style: { color: 'var(--primary-text)' } },
-					}"
-				>
-					<template #body="{ data }">
-						<span v-if="data.scope.startsWith('/instances/')">Instance</span>
-						<span v-else>{{ data.scope }}</span>
-					</template>
-				</Column>
-
-				<!-- Delete -->
-				<Column
-					header="Delete"
-					header-style="width:6rem"
-					style="text-align: center"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						headerContent: { style: { justifyContent: 'center' } },
-					}"
-				>
-					<template #body="{ data }">
-						<Button link @click="roleAssignmentToDelete = data">
-							<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
-						</Button>
-					</template>
-				</Column>
-			</DataTable>
-		</div>
-
-		<!-- Delete role assignment dialog -->
-		<Dialog
-			:visible="roleAssignmentToDelete !== null"
-			modal
-			header="Delete Role Assignment"
-			:closable="false"
-		>
-			<p>Do you want to delete the role assignment for "{{ roleAssignmentToDelete.principal.display_name }}"?</p>
-			<template #footer>
-				<Button label="Cancel" text @click="roleAssignmentToDelete = null" />
-				<Button label="Delete" severity="danger" @click="handleDeleteRoleAssignment" />
-			</template>
-		</Dialog>
+		<RoleAssignmentsTable />
 	</div>
 </template>
 
@@ -189,114 +29,16 @@ export default {
 
 	data() {
 		return {
-			expandedRowGroups: [],
-			roleAssignments: [] as RoleAssignment[],
-			loading: false as boolean,
-			loadingStatusText: 'Retrieving data...' as string,
-			roleAssignmentToDelete: null as RoleAssignment | null,
+			
 		};
 	},
 
-	async created() {
-		await this.getRoleAssignments();
-	},
-
 	methods: {
-		async getRoleAssignments() {
-			this.loading = true;
-			try {
-				const roleAssignments = await api.getRoleAssignments();
-
-				const principalIds = [];
-				for (let assignmentForPrincipalId of roleAssignments) {
-					principalIds.push(assignmentForPrincipalId.resource.principal_id);
-				}
-
-				const principals = await api.getObjects({
-					ids: principalIds,
-				});
-
-				const roleDefinitions = await api.getRoleDefinitions();
-
-				// Expand all role groups in table
-				for (let roleDefinition of roleDefinitions) {
-					this.expandedRowGroups.push(roleDefinition.display_name);
-				}
-
-				this.roleAssignments = roleAssignments.map((assignment) => {
-					return {
-						name: assignment.resource.name,
-						principal_type: assignment.resource.principal_type,
-						principal: principals.find((principal) => principal.id === assignment.resource.principal_id),
-						scope: assignment.resource.scope,
-						role: roleDefinitions.find((role) => role.object_id === assignment.resource.role_definition_id),
-					};
-				});
-			} catch (error) {
-				this.$toast.add({
-					severity: 'error',
-					detail: error?.response?._data || error,
-					life: 5000,
-				});
-			}
-			this.loading = false;
-		},
-
-		async handleDeleteRoleAssignment() {
-			try {
-				await api.deleteRoleAssignment(this.roleAssignmentToDelete!.name);
-				this.roleAssignmentToDelete = null;
-			} catch (error) {
-				return this.$toast.add({
-					severity: 'error',
-					detail: error?.response?._data || error,
-					life: 5000,
-				});
-			}
-
-			await this.getRoleAssignments();
-		},
+		
 	},
 };
 </script>
 
 <style lang="scss">
-.table__button {
-	color: var(--primary-button-bg);
-}
-
-.steps {
-	display: grid;
-	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
-	gap: 24px;
-	position: relative;
-}
-
-.grid--loading {
-	pointer-events: none;
-}
-
-.grid__loading-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	gap: 16px;
-	z-index: 10;
-	background-color: rgba(255, 255, 255, 0.9);
-	pointer-events: none;
-}
 
-.description__column {
-	max-width: 100%;
-	display: inline-block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
 </style>

From a0d8fc8f43b244a74e2332f1d7612a3df22ed34e Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 05:00:14 -0700
Subject: [PATCH 28/51] Update create role assignment page

---
 .../security/role-assignments/create.vue      | 106 +++++++++++++++---
 1 file changed, 90 insertions(+), 16 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 1a0d8d194f..12e2dd4c08 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -37,11 +37,34 @@
 			<!-- Principal -->
 			<div class="step-header span-2">What principal to assign?</div>
 			<div class="span-2">
+
+				<div class="mb-2 mt-2">Principal Type:</div>
+				<div style="display: flex; gap: 16px;">
+					<InputText
+						v-model="principal.object_type"
+						readonly
+						placeholder="Will appear after selection"
+						type="text"
+						class="w-50"
+					/>
+				</div>
+
+				<div class="mb-2 mt-2">Principal Name:</div>
+				<div style="display: flex; gap: 16px;">
+					<InputText
+						v-model="principal.display_name"
+						readonly
+						placeholder="Will appear after selection"
+						type="text"
+						class="w-50"
+					/>
+				</div>
 				
 				<div class="mb-2 mt-2">Principal ID:</div>
 				<div style="display: flex; gap: 16px;">
 					<InputText
 						v-model="roleAssignment.principal_id"
+						readonly
 						placeholder="Enter principal id (GUID)"
 						type="text"
 						class="w-50"
@@ -49,13 +72,13 @@
 					<Button
 						label="Browse"
 						severity="primary"
-						@click="openBrowsePrincipalsModal = true"
+						@click="selectPrincipalDialogOpen = true"
 					/>
 				</div>
 
 				<!-- Browse principals dialog -->
 				<Dialog
-					:visible="openBrowsePrincipalsModal"
+					:visible="selectPrincipalDialogOpen"
 					modal
 					header="Browse Principals"
 					:closable="false"
@@ -64,19 +87,35 @@
 					<div class="mb-2">Search type</div>
 					<Dropdown
 						v-model="principalSearchType"
-						:options="['User', 'Group']"
+						:options="principalTypeOptions"
 						placeholder="--Select--"
 						class="mb-2 w-100"
 					/>
 
 					<div class="mb-2">Search query</div>
-					<InputText
+					<!-- <InputText
 						v-model="principalSearch"
 						placeholder="Search"
 						type="text"
+					/> -->
+					<Dropdown
+						v-if="principalSearchType === 'User'"
+						v-model="dialogPrincipal"
+						:options="users"
+						option-label="display_name"
+						placeholder="--Select--"
+						class="w-100"
+					/>
+					<Dropdown
+						v-if="principalSearchType === 'Group'"
+						v-model="dialogPrincipal"
+						:options="groups"
+						option-label="display_name"
+						placeholder="--Select--"
+						class="w-100"
 					/>
 					<template #footer>
-						<Button label="Cancel" text @click="openBrowsePrincipalsModal = false" />
+						<Button label="Cancel" text @click="selectPrincipalDialogOpen = false" />
 						<Button label="Select" severity="primary" @click="handlePrincipalSelected" />
 					</template>
 				</Dialog>
@@ -142,9 +181,10 @@ export default {
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,
 
-			openBrowsePrincipalsModal: false,
+			selectPrincipalDialogOpen: false,
 			roleOptions: [] as Role[],
-			principalSearchType: null as null | string,
+			principalSearchType: 'User' as null | string,
+			principalTypeOptions: ['User', 'Group'],
 
 			roleAssignment: {
 				description: '',
@@ -152,6 +192,14 @@ export default {
 				role_definition_id: null,
 				cost_center: null,
 			} as null | RoleAssignment,
+
+			principal: {
+				object_type: null,
+				display_name: '',
+			},
+			dialogPrincipal: null,
+			users: [],
+			groups: [],
 		};
 	},
 
@@ -166,20 +214,43 @@ export default {
 			this.roleAssignment = await api.getRoleAssignment(this.editId);
 		}
 
-		const users = await api.getUsers();
-		const user = users.items[0];
+		const users = await this.getAllPrinciples(api.getUsers.bind(api));
+		this.users = users;
+		// const user = users[0];
 
-		const groups = await api.getGroups();
-		const group = groups.items[0];
+		const groups = await this.getAllPrinciples(api.getGroups.bind(api));
+		this.groups = groups;
+		// const group = groups[0];
 
-		const objects = await api.getObjects({
-			ids: [user.id, group.id],
-		});
+		// const objects = await api.getObjects({
+		// 	ids: [user.id, group.id],
+		// });
 
 		this.loading = false;
 	},
 
 	methods: {
+		async getAllPrinciples(apiMethod) {
+			let allPrincipals = [];
+			let currentPage = 1;
+			let hasMorePages = true;
+			while (hasMorePages) {
+				const usersCurrentPage = await apiMethod({
+					page_number: currentPage,
+				});
+
+				allPrincipals = [...allPrincipals, ...usersCurrentPage.items];
+
+				if (usersCurrentPage.has_next_page) {
+					currentPage += 1;
+				} else {
+					hasMorePages = false;
+				}
+			}
+
+			return allPrincipals;
+		},
+
 		handleCancel() {
 			if (!confirm('Are you sure you want to cancel?')) {
 				return;
@@ -189,7 +260,10 @@ export default {
 		},
 
 		handlePrincipalSelected() {
-
+			this.principal = this.dialogPrincipal;
+			this.roleAssignment.principal_id = this.dialogPrincipal.id;
+			this.dialogPrincipal = null;
+			this.selectPrincipalDialogOpen = false;
 		},
 
 		async handleCreateRoleAssignment() {
@@ -216,7 +290,7 @@ export default {
 			let successMessage = null as null | string;
 			try {
 				this.loadingStatusText = 'Saving role assignment...';
-				await api.updateRoleAssignment(this.roleAssignment);
+				await api.createRoleAssignment(this.roleAssignment);
 				successMessage = `Role assignment was successfully saved.`;
 			} catch (error) {
 				this.loading = false;

From 6f79d57196290d96b42b804ce0eb0a4a40d81b8a Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 05:00:51 -0700
Subject: [PATCH 29/51] Add access control modal to all agents page

---
 .../ManagementPortal/pages/agents/public.vue  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/agents/public.vue b/src/ui/ManagementPortal/pages/agents/public.vue
index 523d437ff3..500d9a90a9 100644
--- a/src/ui/ManagementPortal/pages/agents/public.vue
+++ b/src/ui/ManagementPortal/pages/agents/public.vue
@@ -1,7 +1,21 @@
 <template>
 	<div>
-		<h2 class="page-header">All Agents</h2>
-		<div class="page-subheader">View your publicly accessible agents.</div>
+		<div style="display: flex">
+			<div style="flex: 1">
+				<h2 class="page-header">All Agents</h2>
+				<div class="page-subheader">View your publicly accessible agents.</div>
+			</div>
+
+			<div style="display: flex; align-items: center">
+				<Button @click="accessControlModalOpen = true">
+					<i class="pi pi-lock" style="color: var(--text-primary);"></i>
+				</Button>
+			</div>
+		</div>
+
+		<Dialog v-model:visible="accessControlModalOpen" modal header="Access Control" :style="{ minWidth: '70%' }">
+			<RoleAssignmentsTable scope="providers/FoundationaLLM.Agent/agents/KMAgentWithSemanticKernelInlineContext" />
+		</Dialog>
 
 		<div :class="{ 'grid--loading': loading }">
 			<!-- Loading overlay -->
@@ -113,6 +127,7 @@ export default {
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,
 			agentToDelete: null as Agent | null,
+			accessControlModalOpen: false,
 		};
 	},
 

From 254e734fed0db9bfdce2c2526eb1ad6d1b8dde8f Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 05:02:29 -0700
Subject: [PATCH 30/51] Append css variables to root

---
 src/ui/ManagementPortal/app.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index cf3ee987a1..d23cd5dab5 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -1,5 +1,5 @@
 <template>
-	<main :style="style">
+	<main>
 		<Head>
 			<Title>{{ pageTitle }}</Title>
 			<Meta name="description" :content="pageTitle" />
@@ -38,6 +38,17 @@ export default {
 			};
 		},
 	},
+
+	watch: {
+		style: {
+			immediate: true,
+			handler() {
+				for (let cssVar in this.style) {
+					document.documentElement.style.setProperty(cssVar, this.style[cssVar]);
+				}
+			},
+		},
+	},
 };
 </script>
 

From bdb38cfc59fbbf216ad136e32d55f898de6516cd Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 06:39:53 -0700
Subject: [PATCH 31/51] Remove log

---
 src/ui/ManagementPortal/components/RoleAssignmentsTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
index d133df48f8..a3bc66c180 100644
--- a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
+++ b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
@@ -195,7 +195,6 @@ export default {
 			this.loading = true;
 			try {
 				const roleAssignments = await api.getRoleAssignments(this.scope);
-				console.log(roleAssignments);
 
 				const principalIds = [];
 				for (let assignmentForPrincipalId of roleAssignments) {

From b0f5b7677fc1c03d3bfe00157699dbbc4662d216 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 07:51:44 -0700
Subject: [PATCH 32/51] Add comments

---
 src/ui/ManagementPortal/js/api.ts | 49 ++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index ef4f6829a8..7065bdbbc3 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -68,7 +68,9 @@ export default {
 		});
 	},
 
-	// Data sources
+	/*
+		Data Sources
+	 */
 	async checkDataSourceName(name: string, type: string): Promise<CheckNameResponse> {
 		const payload = {
 			name,
@@ -238,7 +240,9 @@ export default {
 		);
 	},
 
-	// App Configuration
+	/*
+		App Configuration
+	 */
 	async getAppConfig(key: string): Promise<ResourceProviderGetResult<AppConfigUnion>> {
 		const data = await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Configuration/appConfigurations/${key}?api-version=${this.apiVersion}`,
@@ -262,7 +266,9 @@ export default {
 		);
 	},
 
-	// Indexes
+	/*
+		Indexes
+	 */
 	async getAgentIndexes(
 		addDefaultOption: boolean = false,
 	): Promise<ResourceProviderGetResult<AgentIndex>[]> {
@@ -306,14 +312,18 @@ export default {
 		}
 	},
 
-	// Text embedding profiles
+	/*
+		Text Embedding Profiles
+	 */
 	async getTextEmbeddingProfiles(): Promise<ResourceProviderGetResult<TextEmbeddingProfile>[]> {
 		return (await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/textEmbeddingProfiles?api-version=${this.apiVersion}`,
 		)) as ResourceProviderGetResult<TextEmbeddingProfile>[];
 	},
 
-	// Agents
+	/*
+		Agents
+	 */
 	async checkAgentName(name: string, agentType: string): Promise<CheckNameResponse> {
 		const payload = {
 			name,
@@ -468,7 +478,9 @@ export default {
 		);
 	},
 
-	// Prompts
+	/*
+		Prompts
+	 */
 	async getPrompt(promptId: string): Promise<ResourceProviderGetResult<Prompt> | null> {
 		// Attempt to retrieve the prompt. If it doesn't exist, return an empty object.
 		try {
@@ -550,8 +562,10 @@ export default {
 		return data;
 	},
 
+	/*
+		Role Assignments
+	 */
 	async getRoleAssignments(scope): RoleAssignment[] {
-		// const agentScope = 'providers/FoundationaLLM.Agent/agents/KMAgentWithSemanticKernelInlineContext';
 		const assignments = (await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/filter`,
 			{
@@ -585,9 +599,9 @@ export default {
 		)) as RoleAssignment[];
 	},
 
-	async createRoleAssignment(roleAssignmentId: string, request: Object): Promise<any> {
+	async createRoleAssignment(request: Object): Promise<any> {
 		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments`,
 			{
 				method: 'POST',
 				body: request,
@@ -595,6 +609,9 @@ export default {
 		);
 	},
 
+	/*
+		Role Definitions
+	 */
 	async getRoleDefinitions(): RoleAssignment[] {
 		return (await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
@@ -607,11 +624,6 @@ export default {
 		)) as RoleAssignment[];
 	},
 
-	async updateRoleAssignment(roleAssignment: RoleAssignment) {
-		await wait(1000);
-		return roleAssignment;
-	},
-
 	async deleteRoleAssignment(roleAssignmentId): void {
 		return await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}?api-version=${this.apiVersion}`,
@@ -621,6 +633,9 @@ export default {
 		);
 	},
 
+	/*
+		Users
+	 */
 	async getUsers(params) {
 		const defaults = {
 			name: '',
@@ -642,6 +657,9 @@ export default {
 		return await this.fetch(`/instances/${this.instanceId}/identity/users/${userId}`);
 	},
 
+	/*
+		Groups
+	 */
 	async getGroups(params) {
 		const defaults = {
 			name: '',
@@ -663,6 +681,9 @@ export default {
 		return await this.fetch(`/instances/${this.instanceId}/identity/groups/${groupId}`);
 	},
 
+	/*
+		Combined User+Groups
+	 */
 	async getObjects(params = { ids: [] }) {
 		return await this.fetch(`/instances/${this.instanceId}/identity/objects/retrievebyids`, {
 			method: 'POST',

From c0e07cf51758927a5f5485bd31f3be628d4fe7f2 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 08:55:05 -0700
Subject: [PATCH 33/51] Install uuid package

---
 src/ui/ManagementPortal/package-lock.json | 15 ++++++++++++++-
 src/ui/ManagementPortal/package.json      |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/package-lock.json b/src/ui/ManagementPortal/package-lock.json
index 5c64769317..6d5fc92cbb 100644
--- a/src/ui/ManagementPortal/package-lock.json
+++ b/src/ui/ManagementPortal/package-lock.json
@@ -15,7 +15,8 @@
 				"lodash": "^4.17.21",
 				"pinia": "^2.1.7",
 				"primeicons": "^6.0.1",
-				"primevue": "^3.35.0"
+				"primevue": "^3.35.0",
+				"uuid": "^10.0.0"
 			},
 			"devDependencies": {
 				"@nuxt/devtools": "latest",
@@ -15293,6 +15294,18 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/uuid": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+			"integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/src/ui/ManagementPortal/package.json b/src/ui/ManagementPortal/package.json
index c6ad42ec13..51e97ef611 100644
--- a/src/ui/ManagementPortal/package.json
+++ b/src/ui/ManagementPortal/package.json
@@ -42,6 +42,7 @@
 		"lodash": "^4.17.21",
 		"pinia": "^2.1.7",
 		"primeicons": "^6.0.1",
-		"primevue": "^3.35.0"
+		"primevue": "^3.35.0",
+		"uuid": "^10.0.0"
 	}
 }

From a097fd33642709c603c4863ddf0698780753648f Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 08:55:15 -0700
Subject: [PATCH 34/51] Update createRoleAssignment api method

---
 src/ui/ManagementPortal/js/api.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 7065bdbbc3..b4edcaa49e 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -600,11 +600,15 @@ export default {
 	},
 
 	async createRoleAssignment(request: Object): Promise<any> {
+		if (!request.scope) {
+			request.scope = `/instances/${this.instanceId}`;
+		}
+
 		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${request.name}`,
 			{
 				method: 'POST',
-				body: request,
+				body: JSON.stringify(request),
 			},
 		);
 	},

From 1cd7a10b49d7dea712d7bc13c29ba5ae34bf5141 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 08:56:01 -0700
Subject: [PATCH 35/51] Initial create role assignment functionality

---
 .../pages/security/role-assignments/create.vue      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 12e2dd4c08..035b42d61f 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -159,6 +159,7 @@
 import type { PropType } from 'vue';
 import { debounce } from 'lodash';
 import api from '@/js/api';
+import { v4 as uuidv4 } from 'uuid';
 
 import type {
 	Role,
@@ -187,10 +188,12 @@ export default {
 			principalTypeOptions: ['User', 'Group'],
 
 			roleAssignment: {
+				name: '',
 				description: '',
 				principal_id: null,
 				role_definition_id: null,
-				cost_center: null,
+				type: 'FoundationaLLM.Authorization/roleAssignments',
+				// cost_center: null,
 			} as null | RoleAssignment,
 
 			principal: {
@@ -262,6 +265,7 @@ export default {
 		handlePrincipalSelected() {
 			this.principal = this.dialogPrincipal;
 			this.roleAssignment.principal_id = this.dialogPrincipal.id;
+			this.roleAssignment.principal_type = this.dialogPrincipal.object_type;
 			this.dialogPrincipal = null;
 			this.selectPrincipalDialogOpen = false;
 		},
@@ -276,7 +280,7 @@ export default {
 			if (!this.roleAssignment.role_definition_id) {
 				errors.push('Please specify a role.');
 			}
-		
+
 			if (errors.length > 0) {
 				this.$toast.add({
 					severity: 'error',
@@ -290,7 +294,10 @@ export default {
 			let successMessage = null as null | string;
 			try {
 				this.loadingStatusText = 'Saving role assignment...';
-				await api.createRoleAssignment(this.roleAssignment);
+				await api.createRoleAssignment({
+					...this.roleAssignment,
+					name: uuidv4(),
+				});
 				successMessage = `Role assignment was successfully saved.`;
 			} catch (error) {
 				this.loading = false;

From 22b6fe36ab6499b6d7e09d68449b9ac789317d6c Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 16 Jul 2024 08:58:25 -0700
Subject: [PATCH 36/51] Add api-version query param to more api methods

---
 src/ui/ManagementPortal/js/api.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index b4edcaa49e..61c5946253 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -567,7 +567,7 @@ export default {
 	 */
 	async getRoleAssignments(scope): RoleAssignment[] {
 		const assignments = (await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/filter`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/filter?api-version=${this.apiVersion}`,
 			{
 				method: 'POST',
 				body: JSON.stringify({
@@ -589,7 +589,7 @@ export default {
 
 	async getRoleAssignment(roleAssignmentId): RoleAssignment[] {
 		return (await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${roleAssignmentId}?api-version=${this.apiVersion}`,
 			{
 				method: 'POST',
 				body: JSON.stringify({
@@ -605,7 +605,7 @@ export default {
 		}
 
 		return await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${request.name}`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleAssignments/${request.name}?api-version=${this.apiVersion}`,
 			{
 				method: 'POST',
 				body: JSON.stringify(request),
@@ -618,13 +618,13 @@ export default {
 	 */
 	async getRoleDefinitions(): RoleAssignment[] {
 		return (await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions?api-version=${this.apiVersion}`,
 		)) as Object[];
 	},
 
 	async getRoleDefinition(roleAssignmentId): RoleAssignment {
 		return (await this.fetch(
-			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}`,
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Authorization/roleDefinitions/${roleAssignmentId}?api-version=${this.apiVersion}`,
 		)) as RoleAssignment[];
 	},
 
@@ -648,7 +648,7 @@ export default {
 			page_size: null,
 		};
 
-		return await this.fetch(`/instances/${this.instanceId}/identity/users/retrieve`, {
+		return await this.fetch(`/instances/${this.instanceId}/identity/users/retrieve?api-version=${this.apiVersion}`, {
 			method: 'POST',
 			body: JSON.stringify({
 				...defaults,
@@ -658,7 +658,7 @@ export default {
 	},
 
 	async getUser(userId) {
-		return await this.fetch(`/instances/${this.instanceId}/identity/users/${userId}`);
+		return await this.fetch(`/instances/${this.instanceId}/identity/users/${userId}?api-version=${this.apiVersion}`);
 	},
 
 	/*
@@ -672,7 +672,7 @@ export default {
 			page_size: null,
 		};
 
-		return await this.fetch(`/instances/${this.instanceId}/identity/groups/retrieve`, {
+		return await this.fetch(`/instances/${this.instanceId}/identity/groups/retrieve?api-version=${this.apiVersion}`, {
 			method: 'POST',
 			body: JSON.stringify({
 				...defaults,
@@ -682,14 +682,14 @@ export default {
 	},
 
 	async getGroup(groupId) {
-		return await this.fetch(`/instances/${this.instanceId}/identity/groups/${groupId}`);
+		return await this.fetch(`/instances/${this.instanceId}/identity/groups/${groupId}?api-version=${this.apiVersion}`);
 	},
 
 	/*
 		Combined User+Groups
 	 */
 	async getObjects(params = { ids: [] }) {
-		return await this.fetch(`/instances/${this.instanceId}/identity/objects/retrievebyids`, {
+		return await this.fetch(`/instances/${this.instanceId}/identity/objects/retrievebyids?api-version=${this.apiVersion}`, {
 			method: 'POST',
 			body: JSON.stringify(params),
 		});

From 2dfe73489298129f4f79b04ad8d52535f928e2e9 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 06:52:31 -0700
Subject: [PATCH 37/51] Update role assignments api method to add "This
 instance" if matching

---
 src/ui/ManagementPortal/js/api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 61c5946253..e8e5af4962 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -579,8 +579,8 @@ export default {
 		assignments.map(assignment => {
 			if (assignment.resource.scope === `/instances/${this.instanceId}`) {
 				assignment.resource.scope_name = scope ? 'Instance (Inherited)' : 'Instance';
-			} else if (assignment.resource.scope.endsWith('KMAgentWithSemanticKernelInlineContext')) {
-				assignment.resource.scope_name = 'Agent';
+			} else if (assignment.resource.scope === `/instances/${this.instanceId}/${scope}`) {
+				assignment.resource.scope_name = 'This instance';
 			}
 		});
 

From 09821ca3cb3b5bffe95ce1bd9959193675d20f09 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 06:54:34 -0700
Subject: [PATCH 38/51] Move access control modal to each specific agent

---
 .../ManagementPortal/pages/agents/create.vue  | 34 +++++++++++++++----
 .../ManagementPortal/pages/agents/public.vue  | 18 ++--------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index ff080c1762..0d0a93f0b6 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -1,12 +1,30 @@
 <template>
 	<div>
-		<h2 class="page-header">{{ editAgent ? 'Edit Agent' : 'Create New Agent' }}</h2>
-		<div class="page-subheader">
-			{{
-				editAgent
-					? 'Edit your agent settings below.'
-					: 'Complete the settings below to create and deploy your new agent.'
-			}}
+		<div style="display: flex">
+			<!-- Title -->
+			<div style="flex: 1">
+				<h2 class="page-header">{{ editAgent ? 'Edit Agent' : 'Create New Agent' }}</h2>
+				<div class="page-subheader">
+					{{
+						editAgent
+							? 'Edit your agent settings below.'
+							: 'Complete the settings below to create and deploy your new agent.'
+					}}
+				</div>
+			</div>
+
+			<!-- Edit access control -->
+			<div style="display: flex; align-items: center">
+				<Button @click="accessControlModalOpen = true">
+					<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
+					Access Control
+				</Button>
+			</div>
+
+			<!-- RBAC modal -->
+			<Dialog v-model:visible="accessControlModalOpen" modal header="Access Control" :style="{ minWidth: '70%' }">
+				<RoleAssignmentsTable :scope="`providers/FoundationaLLM.Agent/agents/${this.agentName}`" />
+			</Dialog>
 		</div>
 
 		<div class="steps" :class="{ 'steps--loading': loading }">
@@ -595,6 +613,8 @@ const defaultSystemPrompt: string = '';
 
 const getDefaultFormValues = () => {
 	return {
+		accessControlModalOpen: false,
+
 		agentName: '',
 		agentDescription: '',
 		object_id: '',
diff --git a/src/ui/ManagementPortal/pages/agents/public.vue b/src/ui/ManagementPortal/pages/agents/public.vue
index 500d9a90a9..6fbc2bb7b9 100644
--- a/src/ui/ManagementPortal/pages/agents/public.vue
+++ b/src/ui/ManagementPortal/pages/agents/public.vue
@@ -1,21 +1,7 @@
 <template>
 	<div>
-		<div style="display: flex">
-			<div style="flex: 1">
-				<h2 class="page-header">All Agents</h2>
-				<div class="page-subheader">View your publicly accessible agents.</div>
-			</div>
-
-			<div style="display: flex; align-items: center">
-				<Button @click="accessControlModalOpen = true">
-					<i class="pi pi-lock" style="color: var(--text-primary);"></i>
-				</Button>
-			</div>
-		</div>
-
-		<Dialog v-model:visible="accessControlModalOpen" modal header="Access Control" :style="{ minWidth: '70%' }">
-			<RoleAssignmentsTable scope="providers/FoundationaLLM.Agent/agents/KMAgentWithSemanticKernelInlineContext" />
-		</Dialog>
+		<h2 class="page-header">All Agents</h2>
+		<div class="page-subheader">View your publicly accessible agents.</div>
 
 		<div :class="{ 'grid--loading': loading }">
 			<!-- Loading overlay -->

From 1f9cf5b644ba6e818fd97f1441bde2d6d495649b Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 07:09:05 -0700
Subject: [PATCH 39/51] Add access control modal to data sources

---
 .../pages/data-sources/create.vue             | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/data-sources/create.vue b/src/ui/ManagementPortal/pages/data-sources/create.vue
index 38948afb5a..fc000ab6c8 100644
--- a/src/ui/ManagementPortal/pages/data-sources/create.vue
+++ b/src/ui/ManagementPortal/pages/data-sources/create.vue
@@ -1,13 +1,30 @@
 <template>
 	<div>
-		<!-- Header -->
-		<h2 class="page-header">{{ editId ? 'Edit Data Source' : 'Create Data Source' }}</h2>
-		<div class="page-subheader">
-			{{
-				editId
-					? 'Edit your data source settings below.'
-					: 'Complete the settings below to configure the data source.'
-			}}
+		<div style="display: flex">
+			<!-- Title -->
+			<div style="flex: 1">
+				<h2 class="page-header">{{ editId ? 'Edit Data Source' : 'Create Data Source' }}</h2>
+				<div class="page-subheader">
+					{{
+						editId
+							? 'Edit your data source settings below.'
+							: 'Complete the settings below to configure the data source.'
+					}}
+				</div>
+			</div>
+
+			<!-- Edit access control -->
+			<div style="display: flex; align-items: center">
+				<Button @click="accessControlModalOpen = true">
+					<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
+					Access Control
+				</Button>
+			</div>
+
+			<!-- RBAC modal -->
+			<Dialog v-model:visible="accessControlModalOpen" modal header="Access Control" :style="{ minWidth: '70%' }">
+				<RoleAssignmentsTable :scope="`providers/FoundationaLLM.DataSource/dataSources/${this.dataSource.name}`" />
+			</Dialog>
 		</div>
 
 		<!-- Steps -->
@@ -339,6 +356,8 @@ export default {
 
 	data() {
 		return {
+			accessControlModalOpen: false,
+
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,
 

From 8e08db658153a5eb4cfabea5441ed42cbccb3716 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 07:09:27 -0700
Subject: [PATCH 40/51] Only show access control modal if viewing existing
 resource

---
 src/ui/ManagementPortal/pages/agents/create.vue       | 2 +-
 src/ui/ManagementPortal/pages/data-sources/create.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index 0d0a93f0b6..a25d09720d 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -14,7 +14,7 @@
 			</div>
 
 			<!-- Edit access control -->
-			<div style="display: flex; align-items: center">
+			<div v-if="editId" style="display: flex; align-items: center">
 				<Button @click="accessControlModalOpen = true">
 					<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
 					Access Control
diff --git a/src/ui/ManagementPortal/pages/data-sources/create.vue b/src/ui/ManagementPortal/pages/data-sources/create.vue
index fc000ab6c8..7f9a16a387 100644
--- a/src/ui/ManagementPortal/pages/data-sources/create.vue
+++ b/src/ui/ManagementPortal/pages/data-sources/create.vue
@@ -14,7 +14,7 @@
 			</div>
 
 			<!-- Edit access control -->
-			<div style="display: flex; align-items: center">
+			<div v-if="editId" style="display: flex; align-items: center">
 				<Button @click="accessControlModalOpen = true">
 					<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
 					Access Control

From 6d175b30bd5b5462dd139f7a7133fe123e1b004a Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 07:38:08 -0700
Subject: [PATCH 41/51] Minor ui updates for role assignment create page

---
 .../pages/security/role-assignments/create.vue         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 035b42d61f..bc03d8c178 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -38,12 +38,12 @@
 			<div class="step-header span-2">What principal to assign?</div>
 			<div class="span-2">
 
-				<div class="mb-2 mt-2">Principal Type:</div>
+				<div class="mb-2">Principal Type:</div>
 				<div style="display: flex; gap: 16px;">
 					<InputText
 						v-model="principal.object_type"
 						readonly
-						placeholder="Will appear after selection"
+						placeholder="Browse for selection"
 						type="text"
 						class="w-50"
 					/>
@@ -54,7 +54,7 @@
 					<InputText
 						v-model="principal.display_name"
 						readonly
-						placeholder="Will appear after selection"
+						placeholder="Browse for selection"
 						type="text"
 						class="w-50"
 					/>
@@ -65,7 +65,7 @@
 					<InputText
 						v-model="roleAssignment.principal_id"
 						readonly
-						placeholder="Enter principal id (GUID)"
+						placeholder="Browse for selection"
 						type="text"
 						class="w-50"
 					/>
@@ -217,10 +217,12 @@ export default {
 			this.roleAssignment = await api.getRoleAssignment(this.editId);
 		}
 
+		this.loadingStatusText = `Retrieving users...`;
 		const users = await this.getAllPrinciples(api.getUsers.bind(api));
 		this.users = users;
 		// const user = users[0];
 
+		this.loadingStatusText = `Retrieving groups...`;
 		const groups = await this.getAllPrinciples(api.getGroups.bind(api));
 		this.groups = groups;
 		// const group = groups[0];

From 895f431dd0bea8cc1733d055fa882dad969bbfd9 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 08:26:08 -0700
Subject: [PATCH 42/51] Add role assignment to specific scope

---
 .../components/AccessControl.vue              | 45 +++++++++++++++++++
 .../ManagementPortal/pages/agents/create.vue  | 16 +++----
 .../pages/data-sources/create.vue             | 15 ++-----
 .../security/role-assignments/create.vue      | 17 +++++++
 4 files changed, 71 insertions(+), 22 deletions(-)
 create mode 100644 src/ui/ManagementPortal/components/AccessControl.vue

diff --git a/src/ui/ManagementPortal/components/AccessControl.vue b/src/ui/ManagementPortal/components/AccessControl.vue
new file mode 100644
index 0000000000..8328f40c6b
--- /dev/null
+++ b/src/ui/ManagementPortal/components/AccessControl.vue
@@ -0,0 +1,45 @@
+<template>
+	<div style="display: flex; align-items: center">
+		<Button @click="dialogOpen = true">
+			<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
+			Access Control
+		</Button>
+	</div>
+
+	<!-- RBAC dialog -->
+	<Dialog
+		v-model:visible="dialogOpen"
+		modal
+		header="Access Control"
+		:style="{ minWidth: '70%' }"
+	>
+		<RoleAssignmentsTable :scope="scope" />
+
+		<template #footer>
+			<Button label="Close" text @click="dialogOpen = false" />
+			<NuxtLink :to="{ path: `/security/role-assignments/create`, query: { scope: scope } }">
+				<Button>
+					<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
+					Add role assignment for this resource
+				</Button>
+			</NuxtLink>
+		</template>
+	</Dialog>
+</template>
+
+<script lang="ts">
+export default {
+	props: {
+		scope: {
+			type: String,
+			required: false,
+		},
+	},
+
+	data() {
+		return {
+			dialogOpen: false,
+		};
+	},
+};
+</script>
\ No newline at end of file
diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index a25d09720d..010e47e501 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -14,19 +14,13 @@
 			</div>
 
 			<!-- Edit access control -->
-			<div v-if="editId" style="display: flex; align-items: center">
-				<Button @click="accessControlModalOpen = true">
-					<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
-					Access Control
-				</Button>
-			</div>
-
-			<!-- RBAC modal -->
-			<Dialog v-model:visible="accessControlModalOpen" modal header="Access Control" :style="{ minWidth: '70%' }">
-				<RoleAssignmentsTable :scope="`providers/FoundationaLLM.Agent/agents/${this.agentName}`" />
-			</Dialog>
+			<AccessControl
+				v-if="editAgent"
+				:scope="`providers/FoundationaLLM.Agent/agents/${this.agentName}`"
+			/>
 		</div>
 
+
 		<div class="steps" :class="{ 'steps--loading': loading }">
 			<!-- Loading overlay -->
 			<template v-if="loading">
diff --git a/src/ui/ManagementPortal/pages/data-sources/create.vue b/src/ui/ManagementPortal/pages/data-sources/create.vue
index 7f9a16a387..30df409a50 100644
--- a/src/ui/ManagementPortal/pages/data-sources/create.vue
+++ b/src/ui/ManagementPortal/pages/data-sources/create.vue
@@ -14,17 +14,10 @@
 			</div>
 
 			<!-- Edit access control -->
-			<div v-if="editId" style="display: flex; align-items: center">
-				<Button @click="accessControlModalOpen = true">
-					<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
-					Access Control
-				</Button>
-			</div>
-
-			<!-- RBAC modal -->
-			<Dialog v-model:visible="accessControlModalOpen" modal header="Access Control" :style="{ minWidth: '70%' }">
-				<RoleAssignmentsTable :scope="`providers/FoundationaLLM.DataSource/dataSources/${this.dataSource.name}`" />
-			</Dialog>
+			<AccessControl
+				v-if="editId"
+				:scope="`providers/FoundationaLLM.DataSource/dataSources/${this.dataSource.name}`"
+			/>
 		</div>
 
 		<!-- Steps -->
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index bc03d8c178..525833a5e4 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -20,6 +20,21 @@
 				</div>
 			</template>
 
+			<!-- Scope -->
+			<div class="step-header span-2">What is the assignment scope?</div>
+			<div class="span-2">
+				<div class="mb-2">Scope</div>
+				<div class="input-wrapper">
+					<InputText
+						v-model="scope"
+						readonly
+						placeholder="Instance"
+						type="text"
+						class="w-100"
+					/>
+				</div>
+			</div>
+
 			<!-- Description -->
 			<div class="step-header span-2">What is the description of the role assignment?</div>
 			<div class="span-2">
@@ -187,6 +202,7 @@ export default {
 			principalSearchType: 'User' as null | string,
 			principalTypeOptions: ['User', 'Group'],
 
+			scope: this.$route.query.scope ?? null,
 			roleAssignment: {
 				name: '',
 				description: '',
@@ -299,6 +315,7 @@ export default {
 				await api.createRoleAssignment({
 					...this.roleAssignment,
 					name: uuidv4(),
+					...(this.scope ? { scope: `/instances/${api.instanceId}/${this.scope}` } : {}),
 				});
 				successMessage = `Role assignment was successfully saved.`;
 			} catch (error) {

From 4e8e467b72a4bb313e218eec0f98920eb9cee8b3 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 17 Jul 2024 08:47:10 -0700
Subject: [PATCH 43/51] Add optional

---
 src/ui/ManagementPortal/pages/agents/create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index 54f6cb23f6..c464834f92 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -978,7 +978,7 @@ export default {
 			this.selectedIndexSource =
 				this.indexSources.find(
 					(indexSource) =>
-						indexSource.object_id && agent.vectorization?.indexing_profile_object_ids.includes(indexSource.object_id),
+						indexSource.object_id && agent.vectorization?.indexing_profile_object_ids?.includes(indexSource.object_id),
 				) || null;
 			
 			this.selectedTextEmbeddingProfile =

From aecba6f0b7af2a6b0328cf34d9547d873deb656a Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Wed, 24 Jul 2024 15:53:55 -0400
Subject: [PATCH 44/51] Add FavIconUrl to allowed config keys

---
 src/ui/ManagementPortal/server/api/config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/ManagementPortal/server/api/config.ts b/src/ui/ManagementPortal/server/api/config.ts
index 96f06220de..fbf156bc66 100644
--- a/src/ui/ManagementPortal/server/api/config.ts
+++ b/src/ui/ManagementPortal/server/api/config.ts
@@ -15,6 +15,7 @@ const allowedKeys = [
 	'FoundationaLLM:Management:Entra:Scopes',
 	'FoundationaLLM:Management:Entra:CallbackPath',
 
+	'FoundationaLLM:Branding:FavIconUrl',
 	'FoundationaLLM:Branding:LogoUrl',
 	'FoundationaLLM:Branding:LogoText',
 	'FoundationaLLM:Branding:BackgroundColor',

From 63e857fc8a772727d5ea89067c5e7c7c85462ab8 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Wed, 24 Jul 2024 15:54:12 -0400
Subject: [PATCH 45/51] Fix InstanceId retrieval

---
 src/ui/ManagementPortal/stores/appConfigStore.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/stores/appConfigStore.ts b/src/ui/ManagementPortal/stores/appConfigStore.ts
index a814d91ed9..5538015fb5 100644
--- a/src/ui/ManagementPortal/stores/appConfigStore.ts
+++ b/src/ui/ManagementPortal/stores/appConfigStore.ts
@@ -69,7 +69,6 @@ export const useAppConfigStore = defineStore('appConfig', {
 				semanticKernelApiUrl,
 				vectorizationApiUrl,
 				vectorizationWorkerApiUrl,
-				instanceId,
 				favIconUrl,
 				logoUrl,
 				logoText,
@@ -85,6 +84,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 				secondaryButtonBg,
 				secondaryButtonText,
 				footerText,
+				instanceId,
 				authClientId,
 				authInstance,
 				authTenantId,
@@ -118,7 +118,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 				getConfigValueSafe('FoundationaLLM:Branding:SecondaryButtonBackgroundColor', '#70829a'),
 				getConfigValueSafe('FoundationaLLM:Branding:SecondaryButtonTextColor', '#fff'),
 				getConfigValueSafe('FoundationaLLM:Branding:FooterText'),
-				api.getConfigValueSafe('FoundationaLLM:Instance:Id','00000000-0000-0000-0000-000000000000'),
+				getConfigValueSafe('FoundationaLLM:Instance:Id','00000000-0000-0000-0000-000000000000'),
 				
 				api.getConfigValue('FoundationaLLM:Management:Entra:ClientId'),
 				api.getConfigValue('FoundationaLLM:Management:Entra:Instance'),

From 117b3689292618db374a9392c1749b1fb7954963 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 24 Jul 2024 22:12:34 -0700
Subject: [PATCH 46/51] Change "This instance" to "This resource"

---
 src/ui/ManagementPortal/js/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index c6b4507f27..30ba1497ae 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -629,7 +629,7 @@ export default {
 			if (assignment.resource.scope === `/instances/${this.instanceId}`) {
 				assignment.resource.scope_name = scope ? 'Instance (Inherited)' : 'Instance';
 			} else if (assignment.resource.scope === `/instances/${this.instanceId}/${scope}`) {
-				assignment.resource.scope_name = 'This instance';
+				assignment.resource.scope_name = 'This resource';
 			}
 		});
 

From 1cbd7ac345cbcf45c8d86c8328d673a56badea2c Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 24 Jul 2024 23:30:30 -0700
Subject: [PATCH 47/51] Add primevue autocomplete component

---
 src/ui/ManagementPortal/plugins/primevue.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ui/ManagementPortal/plugins/primevue.ts b/src/ui/ManagementPortal/plugins/primevue.ts
index d700dde536..d0a78f358d 100644
--- a/src/ui/ManagementPortal/plugins/primevue.ts
+++ b/src/ui/ManagementPortal/plugins/primevue.ts
@@ -1,4 +1,5 @@
 import PrimeVue from 'primevue/config';
+import AutoComplete from 'primevue/autocomplete';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
@@ -22,6 +23,7 @@ import { defineNuxtPlugin } from '#app';
 
 export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.use(PrimeVue, { ripple: true });
+	nuxtApp.vueApp.component('AutoComplete', AutoComplete);
 	nuxtApp.vueApp.component('Button', Button);
 	nuxtApp.vueApp.component('InputText', InputText);
 	nuxtApp.vueApp.component('Textarea', Textarea);

From b435daed022ad10e4f47d17ad5be8164af188435 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 24 Jul 2024 23:31:24 -0700
Subject: [PATCH 48/51] Make principal dropdown searchable

---
 .../security/role-assignments/create.vue      | 61 +++++++++++++------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 525833a5e4..7dbd774bc0 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -108,27 +108,24 @@
 					/>
 
 					<div class="mb-2">Search query</div>
-					<!-- <InputText
-						v-model="principalSearch"
-						placeholder="Search"
-						type="text"
-					/> -->
-					<Dropdown
-						v-if="principalSearchType === 'User'"
-						v-model="dialogPrincipal"
-						:options="users"
-						option-label="display_name"
-						placeholder="--Select--"
-						class="w-100"
-					/>
-					<Dropdown
-						v-if="principalSearchType === 'Group'"
+					<AutoComplete
 						v-model="dialogPrincipal"
-						:options="groups"
+						:suggestions="principalOptionsFiltered"
+						force-selection
+						dropdown
+						data-key="id"
 						option-label="display_name"
-						placeholder="--Select--"
 						class="w-100"
-					/>
+						@complete="handlePrincipalSearch"
+					>
+						<template #option="{ option }">
+							<div class="flex items-center">
+									<div>{{ option.display_name }}</div>
+									<div style="font-size: 0.8rem">{{ option.email }}</div>
+							</div>
+						</template>
+					</AutoComplete>
+
 					<template #footer>
 						<Button label="Cancel" text @click="selectPrincipalDialogOpen = false" />
 						<Button label="Select" severity="primary" @click="handlePrincipalSelected" />
@@ -219,9 +216,16 @@ export default {
 			dialogPrincipal: null,
 			users: [],
 			groups: [],
+			principalOptionsFiltered: [],
 		};
 	},
 
+	watch: {
+		principalSearchType() {
+			this.dialogPrincipal = null;
+		},
+	},
+
 	async created() {
 		this.loading = true;
 
@@ -272,6 +276,17 @@ export default {
 			return allPrincipals;
 		},
 
+		handlePrincipalSearch(event) {
+			let optionsToSearch = this.principalSearchType === 'Group' ? this.groups : this.users;
+
+			this.principalOptionsFiltered = optionsToSearch.filter((principal) => {
+				const queryLowercase = event.query.toLowerCase();
+				const nameMatch = principal.display_name?.toLowerCase().includes(queryLowercase);
+				const emailMatch = principal.email?.toLowerCase().includes(queryLowercase);
+				return nameMatch || emailMatch;
+			});
+		},
+
 		handleCancel() {
 			if (!confirm('Are you sure you want to cancel?')) {
 				return;
@@ -281,6 +296,14 @@ export default {
 		},
 
 		handlePrincipalSelected() {
+			if (!this.dialogPrincipal) {
+				return this.$toast.add({
+					severity: 'error',
+					detail: 'Please select a principal to assign.',
+					life: 5000,
+				});
+			}
+
 			this.principal = this.dialogPrincipal;
 			this.roleAssignment.principal_id = this.dialogPrincipal.id;
 			this.roleAssignment.principal_type = this.dialogPrincipal.object_type;
@@ -303,6 +326,7 @@ export default {
 				this.$toast.add({
 					severity: 'error',
 					detail: errors.join('\n'),
+					life: 5000,
 				});
 
 				return;
@@ -323,6 +347,7 @@ export default {
 				return this.$toast.add({
 					severity: 'error',
 					detail: error?.response?._data || error,
+					life: 5000,
 				});
 			}
 

From f08377bed1089306e83bd86144ce7e26f0460c77 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 24 Jul 2024 23:38:16 -0700
Subject: [PATCH 49/51] Show principal email on role assignment create page

---
 .../pages/security/role-assignments/create.vue  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 7dbd774bc0..1d463eae0f 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -53,6 +53,7 @@
 			<div class="step-header span-2">What principal to assign?</div>
 			<div class="span-2">
 
+				<!-- Type -->
 				<div class="mb-2">Principal Type:</div>
 				<div style="display: flex; gap: 16px;">
 					<InputText
@@ -64,6 +65,7 @@
 					/>
 				</div>
 
+				<!-- Name -->
 				<div class="mb-2 mt-2">Principal Name:</div>
 				<div style="display: flex; gap: 16px;">
 					<InputText
@@ -74,7 +76,20 @@
 						class="w-50"
 					/>
 				</div>
-				
+
+				<!-- Email -->
+				<div class="mb-2 mt-2">Principal Email:</div>
+				<div style="display: flex; gap: 16px;">
+					<InputText
+						v-model="principal.email"
+						readonly
+						:placeholder="!principal.email ? 'None specified' : 'Browse for selection'"
+						type="text"
+						class="w-50"
+					/>
+				</div>
+
+				<!-- ID -->
 				<div class="mb-2 mt-2">Principal ID:</div>
 				<div style="display: flex; gap: 16px;">
 					<InputText

From 431acf5382f46881da5171a112c33c4ff9110120 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 25 Jul 2024 00:22:50 -0700
Subject: [PATCH 50/51] Formatting

---
 src/ui/ManagementPortal/stores/appConfigStore.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/ui/ManagementPortal/stores/appConfigStore.ts b/src/ui/ManagementPortal/stores/appConfigStore.ts
index 5538015fb5..e6c33b6be0 100644
--- a/src/ui/ManagementPortal/stores/appConfigStore.ts
+++ b/src/ui/ManagementPortal/stores/appConfigStore.ts
@@ -49,14 +49,14 @@ export const useAppConfigStore = defineStore('appConfig', {
 	actions: {
 		async getConfigVariables() {
 			const getConfigValueSafe = async (key: string, defaultValue: any = null) => {
-                try {
-                    return await api.getConfigValue(key);
-                } catch (error) {
-                    console.error(`Failed to get config value for key ${key}:`, error);
-                    return defaultValue;
-                }
-            };
-			
+				try {
+					return await api.getConfigValue(key);
+				} catch (error) {
+					console.error(`Failed to get config value for key ${key}:`, error);
+					return defaultValue;
+				}
+			};
+
 			const [
 				apiUrl,
 				authorizationApiUrl,

From ce2f4b60791f519bf8fa23d613e0c6542b0107bd Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Fri, 26 Jul 2024 01:18:27 -0700
Subject: [PATCH 51/51] Add create role assignment form within access control
 dialog

---
 .../components/AccessControl.vue              | 68 +++++++++++++++++--
 .../security/role-assignments/create.vue      | 66 +++++++++++-------
 2 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/src/ui/ManagementPortal/components/AccessControl.vue b/src/ui/ManagementPortal/components/AccessControl.vue
index 8328f40c6b..4451957778 100644
--- a/src/ui/ManagementPortal/components/AccessControl.vue
+++ b/src/ui/ManagementPortal/components/AccessControl.vue
@@ -1,4 +1,5 @@
 <template>
+	<!-- Trigger button -->
 	<div style="display: flex; align-items: center">
 		<Button @click="dialogOpen = true">
 			<i class="pi pi-lock" style="color: var(--text-primary); margin-right: 8px;"></i>
@@ -10,25 +11,58 @@
 	<Dialog
 		v-model:visible="dialogOpen"
 		modal
-		header="Access Control"
+		:header="currentStep === STEPS.CREATE_STEP ? 'Create Role Assignment' : 'Access Control'"
 		:style="{ minWidth: '70%' }"
+		@hide="handleClose"
 	>
-		<RoleAssignmentsTable :scope="scope" />
+		<!-- Table step -->
+		<template v-if="currentStep === STEPS.TABLE_STEP">
+			<RoleAssignmentsTable :scope="scope" />
+		</template>
+
+		<!-- Create step -->
+		<template v-if="currentStep === STEPS.CREATE_STEP">
+			<CreateRoleAssignment ref="createForm" headless :scope="scope" />
+		</template>
 
 		<template #footer>
-			<Button label="Close" text @click="dialogOpen = false" />
-			<NuxtLink :to="{ path: `/security/role-assignments/create`, query: { scope: scope } }">
-				<Button>
+			<!-- Table step buttons -->
+			<template v-if="currentStep === STEPS.TABLE_STEP">
+				<Button label="Close" text @click="handleClose" />
+
+				<Button v-if="currentStep === STEPS.TABLE_STEP" @click="currentStep = STEPS.CREATE_STEP">
 					<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
 					Add role assignment for this resource
 				</Button>
-			</NuxtLink>
+			</template>
+
+			<!-- Create step buttons -->
+			<template v-else-if="currentStep === STEPS.CREATE_STEP">
+				<Button label="Back" text @click="currentStep = STEPS.TABLE_STEP" />
+
+				<Button @click="handleCreateRoleAssignment">
+					<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
+					Create role assignment
+				</Button>
+			</template>
 		</template>
+
 	</Dialog>
 </template>
 
 <script lang="ts">
+import CreateRoleAssignment from '@/pages/security/role-assignments/create.vue';
+
+const STEPS = {
+	TABLE_STEP: 1,
+	CREATE_STEP: 2,
+};
+
 export default {
+	components: {
+		CreateRoleAssignment,
+	},
+
 	props: {
 		scope: {
 			type: String,
@@ -38,8 +72,30 @@ export default {
 
 	data() {
 		return {
+			STEPS,
 			dialogOpen: false,
+			currentStep: STEPS.TABLE_STEP,
 		};
 	},
+
+	methods: {
+		handleClose() {
+			this.dialogOpen = false;
+			this.currentStep = STEPS.TABLE_STEP;
+		},
+
+		async handleCreateRoleAssignment() {
+			try {
+				await this.$refs.createForm.createRoleAssignment();
+				this.currentStep = STEPS.TABLE_STEP;
+			} catch(error) {
+				this.$toast.add({
+					severity: 'error',
+					detail: error,
+					life: 5000,
+				});
+			}
+		},
+	},
 };
 </script>
\ No newline at end of file
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 1d463eae0f..7167f6c182 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -1,14 +1,16 @@
 <template>
 	<div>
 		<!-- Header -->
-		<h2 class="page-header">{{ editId ? 'Edit Role Assignment' : 'Create Role Assignment' }}</h2>
-		<div class="page-subheader">
-			{{
-				editId
-					? 'Edit your role assignment settings below.'
-					: 'Complete the settings below to configure the role assignment.'
-			}}
-		</div>
+		<template v-if="!headless">
+			<h2 class="page-header">{{ editId ? 'Edit Role Assignment' : 'Create Role Assignment' }}</h2>
+			<div class="page-subheader">
+				{{
+					editId
+						? 'Edit your role assignment settings below.'
+						: 'Complete the settings below to configure the role assignment.'
+				}}
+			</div>
+		</template>
 
 		<!-- Steps -->
 		<div class="steps" :class="{ 'steps--loading': loading }">
@@ -26,7 +28,7 @@
 				<div class="mb-2">Scope</div>
 				<div class="input-wrapper">
 					<InputText
-						v-model="scope"
+						:value="scope"
 						readonly
 						placeholder="Instance"
 						type="text"
@@ -161,7 +163,7 @@
 			</div>
 
 			<!-- Buttons -->
-			<div class="button-container column-2 justify-self-end">
+			<div v-if="!headless" class="button-container column-2 justify-self-end">
 				<!-- Create role assignment -->
 				<Button
 					:label="editId ? 'Save Changes' : 'Create Role Assignment'"
@@ -202,8 +204,21 @@ export default {
 			required: false,
 			default: false,
 		},
+
+		headless: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+
+		scope: {
+			type: String,
+			required: false,
+		},
 	},
 
+	expose: ['createRoleAssignment'],
+
 	data() {
 		return {
 			loading: false as boolean,
@@ -214,7 +229,7 @@ export default {
 			principalSearchType: 'User' as null | string,
 			principalTypeOptions: ['User', 'Group'],
 
-			scope: this.$route.query.scope ?? null,
+			// scope: this.$route.query.scope ?? null,
 			roleAssignment: {
 				name: '',
 				description: '',
@@ -327,6 +342,18 @@ export default {
 		},
 
 		async handleCreateRoleAssignment() {
+			try {
+				await this.createRoleAssignment();
+			} catch(error) {
+				this.$toast.add({
+					severity: 'error',
+					detail: error,
+					life: 5000,
+				});
+			}
+		},
+
+		async createRoleAssignment() {
 			const errors: string[] = [];
 
 			if (!this.roleAssignment.principal_id) {
@@ -338,13 +365,7 @@ export default {
 			}
 
 			if (errors.length > 0) {
-				this.$toast.add({
-					severity: 'error',
-					detail: errors.join('\n'),
-					life: 5000,
-				});
-
-				return;
+				throw errors.join('\n');
 			}
 
 			this.loading = true;
@@ -359,21 +380,18 @@ export default {
 				successMessage = `Role assignment was successfully saved.`;
 			} catch (error) {
 				this.loading = false;
-				return this.$toast.add({
-					severity: 'error',
-					detail: error?.response?._data || error,
-					life: 5000,
-				});
+				throw error?.response?._data || error;
 			}
 
 			this.$toast.add({
 				severity: 'success',
 				detail: successMessage,
+				life: 5000,
 			});
 
 			this.loading = false;
 
-			if (!this.editId) {
+			if (!this.editId && !this.headless) {
 				this.$router.push('/security/role-assignments');
 			}
 		},