From 6ad8e1b07dcd4202c095a8008ee3cc5cdf6ac672 Mon Sep 17 00:00:00 2001
From: Nicolas Ayral Seydoux <nseydoux@inrupt.com>
Date: Thu, 12 Dec 2024 13:52:13 +0100
Subject: [PATCH 1/6] Prepare demo

---
 .../components/accessGrants/index.tsx         | 147 ++++++++++++++++--
 e2e/browser/test/e2e.playwright.ts            |  14 +-
 2 files changed, 145 insertions(+), 16 deletions(-)

diff --git a/e2e/browser/test-app/components/accessGrants/index.tsx b/e2e/browser/test-app/components/accessGrants/index.tsx
index eee31fb3e..4651cb4a9 100644
--- a/e2e/browser/test-app/components/accessGrants/index.tsx
+++ b/e2e/browser/test-app/components/accessGrants/index.tsx
@@ -20,12 +20,19 @@
 //
 
 import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
-import type { AccessGrant } from "@inrupt/solid-client-access-grants";
+import type {
+  AccessGrant,
+  DatasetWithId,
+} from "@inrupt/solid-client-access-grants";
 import {
   issueAccessRequest,
   redirectToAccessManagementUi,
   getAccessGrant,
   cancelAccessRequest,
+  getCustomFields,
+  getResourceOwner,
+  getResources,
+  getAccessModes,
 } from "@inrupt/solid-client-access-grants";
 import {
   getPodUrlAll,
@@ -33,20 +40,68 @@ import {
   getSourceUrl,
   deleteFile,
 } from "@inrupt/solid-client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 const session = getDefaultSession();
 const SHARED_FILE_CONTENT = "Some content.\n";
 
+function AccessCredential({
+  vc,
+  testId,
+}: {
+  vc: DatasetWithId | undefined;
+  testId: "access-request" | "access-grant";
+}) {
+  if (vc === undefined) {
+    return undefined;
+  }
+  return (
+    <div data-testid={testId}>
+      <p>
+        Resource owner:{" "}
+        <span data-testid="crendential-owner">{getResourceOwner(vc)}</span>
+      </p>
+      <p>
+        Requested resources:{" "}
+        <span data-testid="crendential-resources">{getResources(vc)}</span>
+      </p>
+      <p>
+        Requested modes:{" "}
+        <span data-testid="crendential-modes">
+          {JSON.stringify(getAccessModes(vc))}
+        </span>
+      </p>
+      <p>
+        Custom fields:{" "}
+        <span data-testid="crendential-custom">
+          {JSON.stringify(getCustomFields(vc))}
+        </span>
+      </p>
+    </div>
+  );
+}
+
 export default function AccessController({
   setErrorMessage,
 }: {
   setErrorMessage: (msg: string) => void;
 }) {
   const [accessGrant, setAccessGrant] = useState<AccessGrant>();
-  const [accessRequest, setAccessRequest] = useState<string>();
+  const [accessRequest, setAccessRequest] = useState<DatasetWithId>();
   const [sharedResourceIri, setSharedResourceIri] = useState<string>();
+  const [customInt, setCustomInt] = useState<number>();
+  const [customIntUrl, setCustomIntUrl] = useState<string>(
+    "https://example.org/my-int",
+  );
+  const [customStr, setCustomStr] = useState<string>();
+  const [customStrUrl, setCustomStrUrl] = useState<string>(
+    "https://example.org/my-string",
+  );
+  const [customBoolean, setCustomBoolean] = useState<boolean>();
+  const [customBooleanUrl, setCustomBooleanUrl] = useState<string>(
+    "https://example.org/my-boolean",
+  );
   const router = useRouter();
 
   const handleCreate = async () => {
@@ -103,6 +158,21 @@ export default function AccessController({
       },
       {
         fetch: session.fetch,
+        returnLegacyJsonld: false,
+        customFields: new Set([
+          {
+            key: new URL(customIntUrl),
+            value: customInt!,
+          },
+          {
+            key: new URL(customStrUrl),
+            value: customStr!,
+          },
+          {
+            key: new URL(customBooleanUrl),
+            value: customBoolean!,
+          },
+        ]),
       },
     );
     setAccessRequest(accessRequestReturned);
@@ -137,7 +207,7 @@ export default function AccessController({
         redirectCallback: (url: string) => {
           window.location.replace(url);
         },
-        fallbackAccessManagementUi: `https://amc.inrupt.com/accessRequest/`,
+        fallbackAccessManagementUi: "http://localhost:3001/accessRequest/", // `https://amc.inrupt.com/accessRequest/`,
         fetch: session.fetch,
       },
     );
@@ -181,15 +251,68 @@ export default function AccessController({
         Created resource:{" "}
         <span data-testid="resource-iri">{sharedResourceIri}</span>
       </p>
+      <p>
+        Custom fields:{" "}
+        <form>
+          <input
+            id="customIntUrl"
+            name="customIntUrl"
+            value={customIntUrl}
+            onChange={(e) => setCustomIntUrl(e.currentTarget.value)}
+          />
+          {": "}
+          <input
+            type="number"
+            id="customInt"
+            name="customInt"
+            value={customInt}
+            onChange={(e) =>
+              setCustomInt(Number.parseInt(e.currentTarget.value, 10))
+            }
+          />
+          <br />
+          <input
+            data-testid="input-custom-string-url"
+            id="customStrUrl"
+            name="customStrUrl"
+            value={customStrUrl}
+            onChange={(e) => setCustomStrUrl(e.currentTarget.value)}
+          />
+          {": "}
+          <input
+            data-testid="input-custom-string"
+            id="customText"
+            name="customText"
+            value={customStr}
+            onChange={(e) => setCustomStr(e.currentTarget.value)}
+          />
+          <br />
+          <input
+            id="customBooleanUrl"
+            name="customBooleanUrl"
+            value={customBooleanUrl}
+            onChange={(e) => setCustomBooleanUrl(e.currentTarget.value)}
+          />
+          {": "}
+          <input
+            id="customBoolean"
+            name="customBoolean"
+            type="checkbox"
+            checked={customBoolean}
+            onClick={() => setCustomBoolean((prev) => !prev)}
+          />
+          <br />
+        </form>
+      </p>
       <p>
         Access Request to Approve:{" "}
         <input
           id="request-id"
           data-testid="access-request-id"
           placeholder="Access Request URL"
-          onChange={(e) => {
-            setAccessRequest(e.currentTarget.value);
-          }}
+          // onChange={(e) => {
+          //   setAccessRequest(e.currentTarget.value);
+          // }}
         />
       </p>
       <div>
@@ -216,16 +339,10 @@ export default function AccessController({
         </button>
       </div>
       <p>
-        Issued access request:{" "}
-        <pre data-testid="access-request">
-          {accessRequest && JSON.stringify(accessRequest, null, 2)}
-        </pre>
+        Issued access request: <AccessCredential vc={accessRequest} />
       </p>
       <p>
-        Granted access:{" "}
-        <pre data-testid="access-grant">
-          {accessGrant && JSON.stringify(accessGrant, null, 2)}
-        </pre>
+        Granted access: <AccessCredential vc={accessGrant} />
       </p>
 
       <button
diff --git a/e2e/browser/test/e2e.playwright.ts b/e2e/browser/test/e2e.playwright.ts
index e4cb6f864..1f2985a40 100644
--- a/e2e/browser/test/e2e.playwright.ts
+++ b/e2e/browser/test/e2e.playwright.ts
@@ -109,9 +109,21 @@ test("Issue an access request, then revoking the access request", async ({
     { timeout: 30_000 },
   );
 
+  await page
+    .getByTestId("input-custom-string-url")
+    .fill("https://example.org/test-string");
+
+  await page.getByTestId("input-custom-string").fill("test value");
+
   // Issue an access request to the resource.
   await page.getByTestId("issue-access").click();
-  await expect(page.getByTestId("access-request")).not.toBeEmpty();
+  await expect(page.getByTestId("access-request")).resolves.not.toBeEmpty();
+  const customFields = await page
+    .getByTestId("credential-custom")
+    .textContent();
+  expect(customFields).not.toBeNull();
+  const record = JSON.parse(customFields!);
+  expect(record["https://example.org/test-string"]).toBe("test value");
 
   // Revoke the access request.
   await page.getByTestId("revoke-access").click();

From d1d2638e0ac4231ce0cb68415787f21cbcff0b25 Mon Sep 17 00:00:00 2001
From: Nicolas Ayral Seydoux <nseydoux@inrupt.com>
Date: Fri, 13 Dec 2024 10:31:01 +0100
Subject: [PATCH 2/6] fixup! Prepare demo

---
 e2e/browser/test-app/components/accessGrants/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/e2e/browser/test-app/components/accessGrants/index.tsx b/e2e/browser/test-app/components/accessGrants/index.tsx
index 4651cb4a9..1f69b916e 100644
--- a/e2e/browser/test-app/components/accessGrants/index.tsx
+++ b/e2e/browser/test-app/components/accessGrants/index.tsx
@@ -40,7 +40,7 @@ import {
   getSourceUrl,
   deleteFile,
 } from "@inrupt/solid-client";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 const session = getDefaultSession();
@@ -339,10 +339,12 @@ export default function AccessController({
         </button>
       </div>
       <p>
-        Issued access request: <AccessCredential vc={accessRequest} />
+        Issued access request:{" "}
+        <AccessCredential vc={accessRequest} testId="access-request" />
       </p>
       <p>
-        Granted access: <AccessCredential vc={accessGrant} />
+        Granted access:{" "}
+        <AccessCredential vc={accessGrant} testId="access-grant" />
       </p>
 
       <button

From ad066ce24a97bfa1b9da6f08ebcaaf528fafe3a2 Mon Sep 17 00:00:00 2001
From: Nicolas Ayral Seydoux <nseydoux@inrupt.com>
Date: Fri, 13 Dec 2024 10:41:14 +0100
Subject: [PATCH 3/6] Fix browser test app

---
 .../components/accessGrants/index.tsx         | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/e2e/browser/test-app/components/accessGrants/index.tsx b/e2e/browser/test-app/components/accessGrants/index.tsx
index 1f69b916e..71fe34612 100644
--- a/e2e/browser/test-app/components/accessGrants/index.tsx
+++ b/e2e/browser/test-app/components/accessGrants/index.tsx
@@ -88,6 +88,7 @@ export default function AccessController({
   setErrorMessage: (msg: string) => void;
 }) {
   const [accessGrant, setAccessGrant] = useState<AccessGrant>();
+  const [accessRequestUrl, setAccessRequestUrl] = useState<string>();
   const [accessRequest, setAccessRequest] = useState<DatasetWithId>();
   const [sharedResourceIri, setSharedResourceIri] = useState<string>();
   const [customInt, setCustomInt] = useState<number>();
@@ -176,6 +177,7 @@ export default function AccessController({
       },
     );
     setAccessRequest(accessRequestReturned);
+    setAccessRequestUrl(accessRequestReturned.id);
   };
 
   const handleRevoke = async () => {
@@ -199,15 +201,20 @@ export default function AccessController({
   };
 
   const handleAccessRequest = async () => {
+    if (accessRequestUrl === undefined || URL.canParse(accessRequestUrl)) {
+      console.error(
+        "Please issue an Access Request and provide its URL before being redirected.",
+      );
+      return;
+    }
     await redirectToAccessManagementUi(
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      accessRequest!,
+      accessRequestUrl,
       `http://localhost:3000/`,
       {
         redirectCallback: (url: string) => {
           window.location.replace(url);
         },
-        fallbackAccessManagementUi: "http://localhost:3001/accessRequest/", // `https://amc.inrupt.com/accessRequest/`,
+        fallbackAccessManagementUi: "https://amc.inrupt.com/accessRequest/",
         fetch: session.fetch,
       },
     );
@@ -310,9 +317,9 @@ export default function AccessController({
           id="request-id"
           data-testid="access-request-id"
           placeholder="Access Request URL"
-          // onChange={(e) => {
-          //   setAccessRequest(e.currentTarget.value);
-          // }}
+          onChange={(e) => {
+            setAccessRequestUrl(e.currentTarget.value);
+          }}
         />
       </p>
       <div>

From 0ad70a609acfba7f3cf25f384626028ec57d8ace Mon Sep 17 00:00:00 2001
From: Nicolas Ayral Seydoux <nseydoux@inrupt.com>
Date: Fri, 13 Dec 2024 11:13:25 +0100
Subject: [PATCH 4/6] Fix browser-based test

---
 e2e/browser/test-app/components/accessGrants/index.tsx | 6 ++++--
 e2e/browser/test/e2e.playwright.ts                     | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/e2e/browser/test-app/components/accessGrants/index.tsx b/e2e/browser/test-app/components/accessGrants/index.tsx
index 71fe34612..6883523e0 100644
--- a/e2e/browser/test-app/components/accessGrants/index.tsx
+++ b/e2e/browser/test-app/components/accessGrants/index.tsx
@@ -74,7 +74,7 @@ function AccessCredential({
       </p>
       <p>
         Custom fields:{" "}
-        <span data-testid="crendential-custom">
+        <span data-testid="credential-custom">
           {JSON.stringify(getCustomFields(vc))}
         </span>
       </p>
@@ -189,6 +189,7 @@ export default function AccessController({
       fetch: session.fetch,
     });
     setAccessRequest(undefined);
+    setAccessRequestUrl(undefined);
   };
 
   const handleCallAuthedGrant = async () => {
@@ -201,7 +202,7 @@ export default function AccessController({
   };
 
   const handleAccessRequest = async () => {
-    if (accessRequestUrl === undefined || URL.canParse(accessRequestUrl)) {
+    if (accessRequestUrl === undefined || !URL.canParse(accessRequestUrl)) {
       console.error(
         "Please issue an Access Request and provide its URL before being redirected.",
       );
@@ -320,6 +321,7 @@ export default function AccessController({
           onChange={(e) => {
             setAccessRequestUrl(e.currentTarget.value);
           }}
+          value={accessRequestUrl}
         />
       </p>
       <div>
diff --git a/e2e/browser/test/e2e.playwright.ts b/e2e/browser/test/e2e.playwright.ts
index 1f2985a40..d662d3f18 100644
--- a/e2e/browser/test/e2e.playwright.ts
+++ b/e2e/browser/test/e2e.playwright.ts
@@ -98,7 +98,7 @@ test("Redirect to AMC to accept Access Request", async ({
   ]);
 });
 
-test("Issue an access request, then revoking the access request", async ({
+test.only("Issue an access request, then revoking the access request", async ({
   page,
   auth,
 }) => {
@@ -117,7 +117,7 @@ test("Issue an access request, then revoking the access request", async ({
 
   // Issue an access request to the resource.
   await page.getByTestId("issue-access").click();
-  await expect(page.getByTestId("access-request")).resolves.not.toBeEmpty();
+  await expect(page.getByTestId("access-request")).not.toBeEmpty();
   const customFields = await page
     .getByTestId("credential-custom")
     .textContent();
@@ -127,7 +127,7 @@ test("Issue an access request, then revoking the access request", async ({
 
   // Revoke the access request.
   await page.getByTestId("revoke-access").click();
-  await expect(page.getByTestId("access-request")).toBeEmpty();
+  await expect(page.getByTestId("access-request")).toBeHidden();
 
   // Cleanup the resource
   await page.getByTestId("delete-resource").click();

From 9f56af95bd2e0df354977865e4d17633b35d023f Mon Sep 17 00:00:00 2001
From: Nicolas Ayral Seydoux <nseydoux@inrupt.com>
Date: Fri, 13 Dec 2024 11:14:06 +0100
Subject: [PATCH 5/6] fixup! Fix browser-based test

---
 e2e/browser/test/e2e.playwright.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/browser/test/e2e.playwright.ts b/e2e/browser/test/e2e.playwright.ts
index d662d3f18..dc5b90ec8 100644
--- a/e2e/browser/test/e2e.playwright.ts
+++ b/e2e/browser/test/e2e.playwright.ts
@@ -98,7 +98,7 @@ test("Redirect to AMC to accept Access Request", async ({
   ]);
 });
 
-test.only("Issue an access request, then revoking the access request", async ({
+test("Issue an access request, then revoking the access request", async ({
   page,
   auth,
 }) => {

From a6148fe50cbbfa8efdd633f9b8f4c4d54bd81a58 Mon Sep 17 00:00:00 2001
From: Pete Edwards <edwardsph@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:01:06 +0000
Subject: [PATCH 6/6] Apply suggestions from code review

---
 e2e/browser/test-app/components/accessGrants/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/e2e/browser/test-app/components/accessGrants/index.tsx b/e2e/browser/test-app/components/accessGrants/index.tsx
index 6883523e0..a90d832a0 100644
--- a/e2e/browser/test-app/components/accessGrants/index.tsx
+++ b/e2e/browser/test-app/components/accessGrants/index.tsx
@@ -60,15 +60,15 @@ function AccessCredential({
     <div data-testid={testId}>
       <p>
         Resource owner:{" "}
-        <span data-testid="crendential-owner">{getResourceOwner(vc)}</span>
+        <span data-testid="credential-owner">{getResourceOwner(vc)}</span>
       </p>
       <p>
         Requested resources:{" "}
-        <span data-testid="crendential-resources">{getResources(vc)}</span>
+        <span data-testid="credential-resources">{getResources(vc)}</span>
       </p>
       <p>
         Requested modes:{" "}
-        <span data-testid="crendential-modes">
+        <span data-testid="credential-modes">
           {JSON.stringify(getAccessModes(vc))}
         </span>
       </p>