first approach to legacy toggle

e2e/test-app/src/components/accessGrants/index.tsx

@@ -84,7 +84,7 @@ export default function AccessGrant({
           }
         )
       );
-      setSharedResourceIri(getSourceUrl(savedFile));
+      setSharedResourceIri(getSourceUrl(savedFile) + "asdjhaksdjha");
     } catch (e) {
       setSharedResourceIri("Resource creation failed");
     }

pages/approve.tsx

@@ -72,6 +72,8 @@ function Approval({
   const [approveDenyError, setApproveDenyError] = useState<any>(false);
   const [signed, setSigned] = useState<Signed>();
 
+  const [updateAcr, setUpdateAcr] = useState(false);
+
   const fetchAccessRequest = useCallback(() => {
     setRequest(null);
     setErr(null);
@@ -95,6 +97,10 @@ function Approval({
 
   useEffect(fetchAccessRequest, [fetchAccessRequest]);
 
+  useEffect(() => {
+    console.log(updateAcr);
+  }, [updateAcr]);
+
   return (
     <>
       {/* Loading */}
@@ -218,11 +224,13 @@ function Approval({
       {request && (
         <AccessRequest
           accessRequest={request}
+          updateAcr={updateAcr}
           onExpired={() =>
             router.replace({
               pathname: postLogoutUrl,
             })
           }
+          toggleLegacy={() => setUpdateAcr(!updateAcr)}
           onSubmit={async (data) => {
             setLoadingApproveDeny(true);
 
@@ -234,6 +242,9 @@ function Approval({
                   data.overrides,
                   {
                     fetch: sessionFetch,
+                    // updateAcr is false by default. However, for legacy pods provisioned
+                    // before March 2023, we still need to update the ACR.
+                    updateAcr: updateAcr,
                   }
                 );
                 setSigned({ type: "Approved", vc: signedVc.id });

src/components/AccessRequest/AccessRequest.tsx

@@ -37,6 +37,7 @@ import ToggleAccessModes from "../ToggleAccessModes/ToggleAccessModes";
 import TogglePurposes from "../TogglePurposes/TogglePurposes";
 import styles from "./AccessRequest.module.scss";
 import getResources from "./utils/getResources";
+import ToggleLegacy from "../ToggleLegacy/ToggleLegacy";
 
 type Overrides = Partial<
   Pick<ApproveAccessRequestOverrides, "access" | "purpose" | "expirationDate">
@@ -48,6 +49,8 @@ type Submit =
 
 export interface Props {
   accessRequest: DatasetWithId;
+  updateAcr: boolean;
+  toggleLegacy: () => void;
   onSubmit: (overrides: Submit) => void;
   onExpired: () => void;
   fetch: typeof fetch;
@@ -61,6 +64,8 @@ function resourcesToName(names: string[]) {
 
 export default function AccessRequest({
   accessRequest,
+  updateAcr,
+  toggleLegacy,
   onSubmit,
   onExpired,
   fetch: authFetch,
@@ -237,6 +242,11 @@ export default function AccessRequest({
       ) : (
         <br />
       )}
+      <ToggleLegacy
+        toggleDescription="Pods provisioned before March 2023 are classified as legacy and require additional support"
+        toggleValue={updateAcr}
+        toggleLegacy={toggleLegacy}
+      />
 
       <div className={styles["access-details"]}>
         <b>

src/components/AccessRequest/__snapshots__/AccessRequest.test.tsx.snap

@@ -70,6 +70,26 @@ exports[`AccessRequest renders an AccessRequest component 1`] = `
         </li>
       </ul>
     </div>
+    <div
+      class="legacy-description"
+    >
+      Select if your Pod needs Legacy support:
+      <div
+        class="legacy-checkbox"
+      >
+        <input
+          aria-label="checkbox-toggle"
+          aria-labelledby="toggle-legacy-label"
+          class="checkbox"
+          data-testid="toggle-legacy"
+          type="checkbox"
+        />
+         Legacy support
+        <i
+          class="bi bi-info-circle-fill info-circle"
+        />
+      </div>
+    </div>
     <div
       class="access-details"
     >

src/components/ToggleLegacy/ToggleLegacy.module.scss

@@ -0,0 +1,18 @@
+@use "../../../scss/_variables" as *;
+
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+.legacy-description {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.legacy-checkbox {
+  padding-left: 2rem;
+}
+
+.checkbox {
+  cursor: pointer;
+  margin-right: 1rem;
+}

src/components/ToggleLegacy/ToggleLegacy.test.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright Inrupt Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to use,
+// copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+// Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+// PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+
+import { render } from "@testing-library/react";
+import ToggleLegacy from "./ToggleLegacy";
+
+describe("ToggleLegacy", () => {
+  it("renders a ToggleLegacy component", () => {
+    const { asFragment } = render(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      <ToggleLegacy toggleOption="" toggleLegacy={() => {}} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/ToggleLegacy/ToggleLegacy.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright Inrupt Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to use,
+// copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+// Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+// PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+import { useState } from "react";
+import styles from "./ToggleLegacy.module.scss";
+import Info from "../Info/Info";
+
+export interface Props {
+  toggleDescription: string;
+  toggleValue: boolean;
+  toggleLegacy: () => void;
+}
+
+export default function ToggleLegacy({
+  toggleDescription,
+  toggleValue,
+  toggleLegacy,
+}: Props) {
+  return (
+    <div className={styles["legacy-description"]}>
+      Select if your Pod needs Legacy support:
+      <div className={styles["legacy-checkbox"]}>
+        <input
+          type="checkbox"
+          className={styles.checkbox}
+          checked={toggleValue}
+          onChange={() => toggleLegacy()}
+          aria-label="checkbox-toggle"
+          aria-labelledby="toggle-legacy-label"
+          data-testid="toggle-legacy"
+        />{" "}
+        <>
+          {"Legacy support"}
+          <Info>
+            <b>Legacy support: </b>
+            {toggleDescription}
+          </Info>
+        </>
+      </div>
+    </div>
+  );
+}

src/components/ToggleLegacy/__snapshots__/ToggleLegacy.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleLegacy renders a ToggleLegacy component 1`] = `
+<DocumentFragment>
+  <div
+    class="legacy-description"
+  >
+    Select if your Pod needs Legacy support:
+    <div
+      class="legacy-checkbox"
+    >
+      <input
+        aria-label="checkbox-toggle"
+        aria-labelledby="toggle-legacy-label"
+        class="checkbox"
+        data-testid="toggle-legacy"
+        type="checkbox"
+      />
+       Legacy support
+      <i
+        class="bi bi-info-circle-fill info-circle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;