feat: enabled selection and display of policy content

Author: Dexagod

demo/data/demo/public/authorizationsite/src/components/Home.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { createPolicy, doPolicyFlowFromString, readPolicyDirectory } from "../util/PolicyManagement";
+import { createPolicy, doPolicyFlowFromString, readPolicy, readPolicyDirectory } from "../util/PolicyManagement";
 import PolicyModal from "./Modal";
 import { SimplePolicy } from "../util/policyCreation";
 
 export default function Home() { 
 
-    const [policyList, setPolicyList] = useState([] as SimplePolicy[])
+    const [policyList, setPolicyList] = useState<SimplePolicy[]>([])
+    const [selectedPolicy, setSelectedPolicy] = useState<null|string>(null)
 
     useEffect(() => {
       async function getPolicies() {
@@ -14,22 +15,27 @@ export default function Home() {
       }
       getPolicies()
     }, [])
-    
 
     async function addPolicy(policyText: string) {
         console.log('Adding the following policy:')
         console.log(policyText)
         await doPolicyFlowFromString(policyText)
+        const policyObject = await readPolicy(policyText)
+        setPolicyList(policyList.concat(policyObject))
     }
 
     function renderPolicy(policy: SimplePolicy) {
         return (
-            <div className="policyentry">
+            <div key={policy.policyLocation} className={`policyentry ${policy.policyIRI === selectedPolicy ? 'selectedentry' : ''}`} onClick={() => setSelectedPolicy(policy.policyIRI)}>
                 <p>{policy.policyIRI}</p>
             </div>
         )
     }
 
+    const selectedPolicyText = selectedPolicy 
+        ? policyList.filter(p => p.policyIRI === selectedPolicy)[0]?.policyText || ''
+        : ''
+
     return (
         <div id="policypage">
             <div id="policymanagementcontainer" className="rowcontainer">
@@ -42,9 +48,9 @@ export default function Home() {
                     <PolicyModal addPolicy={addPolicy}/>
                 </div>
                 <div id="PolicyDisplayScreen">
-                    <textarea id="policyview" readOnly/>
+                    <textarea id="policyview" value={selectedPolicyText} readOnly/>
                 </div>
             </div>
         </div>
     )
-}
+}

demo/data/demo/public/authorizationsite/src/index.css

@@ -78,6 +78,10 @@ nav {
   background-color:beige;
 }
 
+.selectedentry {
+  background-color:lightblue;
+}
+
 #PolicyDisplayScreen {
   display: flex;
   align-items: center;
@@ -93,4 +97,4 @@ nav {
 
 #PolicyListContainer {
   flex: 40%;
-}
+}

demo/data/demo/public/authorizationsite/src/util/PolicyManagement.ts

@@ -60,7 +60,7 @@ export async function readPolicyDirectory () {
 
 }
 
-async function readPolicy(policyText: string) {
+export async function readPolicy(policyText: string) {
   const parsed = await new Parser().parse(policyText)
   const store = new Store()
   store.addQuads(parsed)
@@ -69,7 +69,8 @@ async function readPolicy(policyText: string) {
   let simplePolicy: SimplePolicy = {
     representation: store,
     policyIRI,
-    ruleIRIs: [ruleIRI]
+    ruleIRIs: [ruleIRI],
+    policyText: policyText,
   }
 
   return simplePolicy

demo/data/demo/public/authorizationsite/src/util/policyCreation.ts

@@ -14,6 +14,9 @@ export interface SimplePolicy {
   policyIRI: string;
   // identifier of the rule
   ruleIRIs: string[];
+
+  policyLocation?: string;
+  policyText?: string;
 }
 
 /**