Merge pull request #1112 from solliancenet/sc-rbac-management-portal-ui

Management Portal RBAC UI
solliancenet · Jul 26, 2024 · 2dbb16a · 2dbb16a
2 parents 411d080 + b37964c
commit 2dbb16a
Show file tree

Hide file tree

Showing 19 changed files with 3,307 additions and 760 deletions.
diff --git 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/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" />
@@ -40,6 +40,17 @@ export default {
 			};
 		},
 	},
+
+	watch: {
+		style: {
+			immediate: true,
+			handler() {
+				for (let cssVar in this.style) {
+					document.documentElement.style.setProperty(cssVar, this.style[cssVar]);
+				}
+			},
+		},
+	},
 };
 </script>
 

diff --git a/src/ui/ManagementPortal/components/AccessControl.vue b/src/ui/ManagementPortal/components/AccessControl.vue
@@ -0,0 +1,101 @@
+<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>
+			Access Control
+		</Button>
+	</div>
+
+	<!-- RBAC dialog -->
+	<Dialog
+		v-model:visible="dialogOpen"
+		modal
+		:header="currentStep === STEPS.CREATE_STEP ? 'Create Role Assignment' : 'Access Control'"
+		:style="{ minWidth: '70%' }"
+		@hide="handleClose"
+	>
+		<!-- 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>
+			<!-- 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>
+			</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,
+			required: false,
+		},
+	},
+
+	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>