Use alias slugs for navigation in trust center

Document, file, and audit rows now navigate to /documents/<alias>
when an alias is set, falling back to the resource ID otherwise.
The document page query accepts a string ID to support both forms.

Signed-off-by: Bryan Frimin <bryan@probo.com>

apps/trust/src/components/AuditRow.tsx

@@ -57,6 +57,7 @@ const auditRowFragment = graphql`
     name
     reportFile {
       id
+      alias
       isUserAuthorized
       access {
         id
@@ -84,6 +85,7 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
   const navigate = useNavigate();
 
   const audit = useFragment(auditRowFragment, props.audit);
+  const reportPath = audit.reportFile?.alias ?? audit.reportFile?.id;
   const hasRequested = audit.reportFile?.access?.status === "REQUESTED";
 
   const [requestAccess, isRequestingAccess]
@@ -146,7 +148,7 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
                 className="w-full md:w-max"
                 variant="secondary"
                 icon={IconArrowLink}
-                to={`/documents/${audit.reportFile.id}`}
+                to={reportPath ? `/documents/${reportPath}` : undefined}
               >
                 {__("View")}
               </Button>

apps/trust/src/components/DocumentRow.tsx

@@ -49,6 +49,7 @@ const requestAccessMutation = graphql`
 const documentRowFragment = graphql`
   fragment DocumentRowFragment on Document {
     id
+    alias
     title
     isUserAuthorized
     access {
@@ -66,6 +67,7 @@ export function DocumentRow(props: { document: DocumentRowFragment$key }) {
   const [searchParams] = useSearchParams();
 
   const document = useFragment(documentRowFragment, props.document);
+  const documentPath = document.alias ?? document.id;
   const hasRequested = document.access?.status === "REQUESTED";
 
   const [requestAccess, isRequestingAccess]
@@ -127,7 +129,7 @@ export function DocumentRow(props: { document: DocumentRowFragment$key }) {
               className="w-full md:w-max"
               variant="secondary"
               icon={IconArrowLink}
-              onClick={() => void navigate(`/documents/${document.id}`)}
+              onClick={() => void navigate(`/documents/${documentPath}`)}
             >
               {__("View")}
             </Button>

apps/trust/src/components/TrustCenterFileRow.tsx

@@ -49,6 +49,7 @@ const requestAccessMutation = graphql`
 const trustCenterFileRowFragment = graphql`
   fragment TrustCenterFileRowFragment on TrustCenterFile {
     id
+    alias
     name
     isUserAuthorized
     access {
@@ -68,6 +69,7 @@ export function TrustCenterFileRow(props: {
   const navigate = useNavigate();
 
   const file = useFragment(trustCenterFileRowFragment, props.file);
+  const filePath = file.alias ?? file.id;
   const hasRequested = file.access?.status === "REQUESTED";
 
   const [requestAccess, isRequestingAccess]
@@ -131,7 +133,7 @@ export function TrustCenterFileRow(props: {
               className="w-full md:w-max"
               variant="secondary"
               icon={IconArrowLink}
-              onClick={() => void navigate(`/documents/${file.id}`)}
+              onClick={() => void navigate(`/documents/${filePath}`)}
             >
               {__("View")}
             </Button>

apps/trust/src/pages/DocumentPage.tsx

@@ -45,7 +45,7 @@ import type { DocumentPageRequestReportAccessMutation } from "./__generated__/Do
 import type { DocumentPageRequestTrustCenterFileAccessMutation } from "./__generated__/DocumentPageRequestTrustCenterFileAccessMutation.graphql";
 
 export const documentPageQuery = graphql`
-  query DocumentPageQuery($id: ID!) {
+  query DocumentPageQuery($id: String!) {
     currentTrustCenter {
       logo {
         downloadUrl