Rework people list and trust center access list + edit dialog

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/pages/organizations/compliance-page/access/_components/CompliancePageAccessEditDialog.tsx

@@ -9,7 +9,6 @@ import {
   Dialog,
   DialogContent,
   DialogFooter,
-  Field,
   Spinner,
 } from "@probo/ui";
 import { Suspense, useCallback, useEffect, useState } from "react";
@@ -19,12 +18,10 @@ import {
   useQueryLoader,
 } from "react-relay";
 import { graphql } from "relay-runtime";
-import { z } from "zod";
 
 import type { CompliancePageAccessEditDialogQuery as CompliancePageAccessEditDialogQueryType } from "#/__generated__/core/CompliancePageAccessEditDialogQuery.graphql";
 import type { CompliancePageAccessEditDialogUpdateMutation } from "#/__generated__/core/CompliancePageAccessEditDialogUpdateMutation.graphql";
 import type { CompliancePageAccessListItemFragment$data } from "#/__generated__/core/CompliancePageAccessListItemFragment.graphql";
-import { useFormWithSchema } from "#/hooks/useFormWithSchema";
 import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
 import { CompliancePageDocumentAccessList } from "#/pages/organizations/compliance-page/access/_components/CompliancePageDocumentAccessList";
 import { ElectronicSignatureSection } from "#/pages/organizations/compliance-page/access/_components/ElectronicSignatureSection";
@@ -80,10 +77,6 @@ const updateAccessMutation = graphql`
     updateTrustCenterAccess(input: $input) {
       trustCenterAccess {
         id
-        email
-        name
-        state
-        hasAcceptedNonDisclosureAgreement
         createdAt
         updatedAt
         pendingRequestCount
@@ -118,7 +111,7 @@ export function CompliancePageAccessEditDialog(props: {
   }, [access.id, loadQuery]);
 
   return (
-    <Dialog defaultOpen={true} title={__("Edit Access")} onClose={onClose}>
+    <Dialog defaultOpen={true} title={__(`Edit Access for ${access.profile.emailAddress}`)} onClose={onClose}>
       {queryRef && (
         <Suspense>
           <CompliancePageAccessEditForm
@@ -196,17 +189,6 @@ function CompliancePageAccessEditForm(props: {
     );
   }, [initialStatusByID]);
 
-  const editSchema = z.object({
-    name: z
-      .string()
-      .min(1, __("Name is required"))
-      .min(2, __("Name must be at least 2 characters long")),
-    active: z.boolean(),
-  });
-  const editForm = useFormWithSchema(editSchema, {
-    defaultValues: { name: access.name, active: access.state === "ACTIVE" },
-  });
-
   const [updateTrustCenterAccess, isUpdating] = useMutationWithToasts<CompliancePageAccessEditDialogUpdateMutation>(
     updateAccessMutation,
     {
@@ -215,7 +197,7 @@ function CompliancePageAccessEditForm(props: {
     },
   );
 
-  const handleSubmit = editForm.handleSubmit(async (data) => {
+  const handleSubmit = async () => {
     const documents: { id: string; status: TrustCenterDocumentAccessStatus }[]
       = [];
     const reports: { id: string; status: TrustCenterDocumentAccessStatus }[]
@@ -248,8 +230,6 @@ function CompliancePageAccessEditForm(props: {
       variables: {
         input: {
           id: access.id,
-          name: data.name.trim(),
-          state: data.active ? "ACTIVE" : "INACTIVE",
           documents,
           reports,
           trustCenterFiles,
@@ -257,26 +237,11 @@ function CompliancePageAccessEditForm(props: {
       },
       onSuccess: onSubmit,
     });
-  });
+  };
 
   return (
-    <form onSubmit={e => void handleSubmit(e)}>
+    <>
       <DialogContent padded className="space-y-6">
-        <div>
-          <p className="text-txt-secondary text-sm mb-4">
-            {__("Update access settings and document permissions")}
-          </p>
-
-          <Field
-            label={__("Full Name")}
-            required
-            error={editForm.formState.errors.name?.message}
-            {...editForm.register("name")}
-            placeholder={__("John Doe")}
-          />
-
-        </div>
-
         {data.node.ndaSignature && (
           <ElectronicSignatureSection fragmentRef={data.node.ndaSignature} />
         )}
@@ -291,11 +256,11 @@ function CompliancePageAccessEditForm(props: {
       </DialogContent>
 
       <DialogFooter>
-        <Button type="submit" disabled={isUpdating}>
+        <Button type="button" disabled={isUpdating} onClick={() => void handleSubmit()}>
           {isUpdating && <Spinner />}
           {__("Update Access")}
         </Button>
       </DialogFooter>
-    </form>
+    </>
   );
 }

apps/console/src/pages/organizations/compliance-page/access/_components/CompliancePageAccessListItem.tsx

@@ -15,10 +15,12 @@ import { NdaSignatureBadge } from "./NdaSignatureBadge";
 const fragment = graphql`
   fragment CompliancePageAccessListItemFragment on TrustCenterAccess {
     id
-    name
-    email
     createdAt
-    state
+    profile {
+      fullName
+      emailAddress
+      state
+    }
     activeCount
     pendingRequestCount
     ndaSignature {
@@ -35,14 +37,15 @@ const toggleAccessStateMutation = graphql`
     updateTrustCenterAccess(input: $input) {
       trustCenterAccess {
         id
-        email
-        name
-        state
-        hasAcceptedNonDisclosureAgreement
         createdAt
         updatedAt
         pendingRequestCount
         activeCount
+        profile {
+          fullName
+          emailAddress
+          state
+        }
       }
     }
   }
@@ -59,7 +62,7 @@ export function CompliancePageAccessListItem(props: {
 
   const access = useFragment<CompliancePageAccessListItemFragment$key>(fragment, fragmentRef);
 
-  const isActive = access.state === "ACTIVE";
+  const isActive = access.profile.state === "ACTIVE";
 
   const [toggleAccessState, isToggling] = useMutationWithToasts<CompliancePageAccessListItemUpdateMutation>(
     toggleAccessStateMutation,
@@ -78,12 +81,11 @@ export function CompliancePageAccessListItem(props: {
       variables: {
         input: {
           id: access.id,
-          name: access.name,
           state: isActive ? "INACTIVE" : "ACTIVE",
         },
       },
     });
-  }, [toggleAccessState, access.id, access.name, isActive]);
+  }, [toggleAccessState, access.id, isActive]);
 
   return (
     <>
@@ -92,8 +94,8 @@ export function CompliancePageAccessListItem(props: {
         onClick={() => access.canUpdate && isActive && setDialogOpen(true)}
         className={`cursor-pointer hover:bg-bg-secondary transition-colors${!isActive ? " opacity-50" : ""}`}
       >
-        <Td className="font-medium">{access.name}</Td>
-        <Td>{access.email}</Td>
+        <Td className="font-medium">{access.profile.fullName}</Td>
+        <Td>{access.profile.emailAddress}</Td>
         <Td>{formatDate(access.createdAt)}</Td>
         <Td className="text-center">{access.activeCount}</Td>
         <Td className="text-center">