rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use framework logo on console & trust

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-12-16 19:05:34 +01:00
parent 427565c521
commit 8c772661bf
34 changed files with 375 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/trust/src/components/AuditRow.tsx
View File

@@ -6,6 +6,7 @@ import {
Button,
Dialog,
DialogContent,
FrameworkLogo,
IconArrowInbox,
IconLock,
IconMedal,
@@ -15,7 +16,7 @@ import {
import { useTranslate } from "@probo/i18n";
import type { AuditRowDownloadMutation } from "./__generated__/AuditRowDownloadMutation.graphql";
import { useMutationWithToasts } from "/hooks/useMutationWithToast";
import { downloadFile, getLogoUrl } from "@probo/helpers";
import { downloadFile } from "@probo/helpers";
import { type PropsWithChildren, useState } from "react";
import { useLocation } from "react-router";
import { RequestAccessDialog } from "/components/RequestAccessDialog.tsx";
@@ -39,6 +40,8 @@ const auditRowFragment = graphql`
framework {
id
name
lightLogoURL
darkLogoURL
}
}
`;
@@ -106,41 +109,19 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
export function AuditRowAvatar(props: { audit: AuditRowFragment$key }) {
const audit = useFragment(auditRowFragment, props.audit);
const logos = {
"ISO 27001 (2022)": getLogoUrl("iso27001.svg"),
"SOC 2": getLogoUrl("soc2.svg"),
HIPAA: getLogoUrl("hipaa.svg"),
GDPR: getLogoUrl("gdpr.svg"),
};
return (
<>
<AuditDialog
audit={props.audit}
logo={logos[audit.framework.name as keyof typeof logos]}
>
<AuditDialog audit={props.audit}>
<button
className="block cursor-pointer aspect-square"
title={`Logo ${audit.framework.name}`}
>
{audit.framework.name in logos ? (
<img
src={logos[audit.framework.name as keyof typeof logos]}
alt={`${audit.framework.name} Logo`}
/>
) : (
<div
className="bg-[#F0F7E2] aspect-square w-full rounded-full text-xs text-[#000] font-bold flex items-center justify-center pb-6 px-2"
style={{
background: `url(${getLogoUrl("blank.svg")}) no-repeat`,
}}
>
<span className="line-clamp-2 overflow-hidden">
{" "}
{audit.framework.name}
</span>
</div>
)}
<FrameworkLogo
className="size-19"
lightLogoURL={audit.framework.lightLogoURL}
darkLogoURL={audit.framework.darkLogoURL}
name={audit.framework.name}
/>
</button>
</AuditDialog>
</>
@@ -170,13 +151,12 @@ function AuditDialog(
title={<Breadcrumb items={items} />}
>
<DialogContent className="p-4 lg:p-8 space-y-6">
{props.logo && (
<img
alt={audit.framework.name}
src={props.logo}
className="size-24 block mx-auto"
/>
)}
<FrameworkLogo
className="size-24 mx-auto"
lightLogoURL={audit.framework.lightLogoURL}
darkLogoURL={audit.framework.darkLogoURL}
name={audit.framework.name}
/>
<h2 className="text-xl font-semibold mb-1">{audit.framework.name}</h2>
<Table>
<AuditRow audit={props.audit} />

2
apps/trust/src/components/OrganizationSidebar.tsx
View File

@@ -90,7 +90,7 @@ export function OrganizationSidebar({
</div>
</div>
<hr className="my-6 -mx-6 h-[1px] bg-border-low border-none" />
<hr className="my-6 -mx-6 h-px bg-border-low border-none" />
</>
)}

20
apps/trust/src/components/__generated__/AuditRowFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<2f595b4efd5e7b13207d433830a64c98>>
* @generated SignedSource<<3265a0991323eee4011c668b68d1b365>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,7 +12,9 @@ import { ReaderFragment } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type AuditRowFragment$data = {
readonly framework: {
readonly darkLogoURL: string | null | undefined;
readonly id: string;
readonly lightLogoURL: string | null | undefined;
readonly name: string;
};
readonly report: {
@@ -90,6 +92,20 @@ return {
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lightLogoURL",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "darkLogoURL",
"storageKey": null
}
],
"storageKey": null
@@ -100,6 +116,6 @@ return {
};
})();
(node as any).hash = "3aabed006b65dc913c81a63f0f6f4523";
(node as any).hash = "417e65b500df4b4cff874dab2bea90ee";
export default node;

22
apps/trust/src/queries/__generated__/TrustGraphCurrentQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<fe9ca4e5a2ddb60ea7a7f353d431d18c>>
* @generated SignedSource<<ec32dbbc5f596dc323b1b4ff8df21fef>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -533,7 +533,21 @@ return {
"plural": false,
"selections": [
(v0/*: any*/),
(v6/*: any*/)
(v6/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lightLogoURL",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "darkLogoURL",
"storageKey": null
}
],
"storageKey": null
}
@@ -552,12 +566,12 @@ return {
]
},
"params": {
"cacheID": "da8080ccbc08adb03fbf360f1e472f84",
"cacheID": "f098177c07810cbe7609821d63c22b0b",
"id": null,
"metadata": {},
"name": "TrustGraphCurrentQuery",
"operationKind": "query",
"text": "query TrustGraphCurrentQuery {\n currentTrustCenter {\n id\n slug\n isUserAuthenticated\n hasAcceptedNonDisclosureAgreement\n ndaFileName\n ndaFileUrl\n organization {\n name\n description\n websiteUrl\n logoUrl\n email\n headquarterAddress\n id\n }\n ...OverviewPageFragment\n audits(first: 50) {\n edges {\n node {\n id\n ...AuditRowFragment\n }\n }\n }\n }\n}\n\nfragment AuditRowFragment on Audit {\n report {\n id\n filename\n isUserAuthorized\n hasUserRequestedAccess\n }\n framework {\n id\n name\n }\n}\n\nfragment DocumentRowFragment on Document {\n id\n title\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment OverviewPageFragment on TrustCenter {\n references(first: 14) {\n edges {\n node {\n id\n name\n logoUrl\n websiteUrl\n }\n }\n }\n vendors(first: 3) {\n edges {\n node {\n id\n countries\n ...VendorRowFragment\n }\n }\n }\n documents(first: 5) {\n edges {\n node {\n id\n ...DocumentRowFragment\n documentType\n }\n }\n }\n trustCenterFiles(first: 5) {\n edges {\n node {\n id\n category\n ...TrustCenterFileRowFragment\n }\n }\n }\n}\n\nfragment TrustCenterFileRowFragment on TrustCenterFile {\n id\n name\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment VendorRowFragment on Vendor {\n id\n name\n category\n websiteUrl\n privacyPolicyUrl\n countries\n}\n"
"text": "query TrustGraphCurrentQuery {\n currentTrustCenter {\n id\n slug\n isUserAuthenticated\n hasAcceptedNonDisclosureAgreement\n ndaFileName\n ndaFileUrl\n organization {\n name\n description\n websiteUrl\n logoUrl\n email\n headquarterAddress\n id\n }\n ...OverviewPageFragment\n audits(first: 50) {\n edges {\n node {\n id\n ...AuditRowFragment\n }\n }\n }\n }\n}\n\nfragment AuditRowFragment on Audit {\n report {\n id\n filename\n isUserAuthorized\n hasUserRequestedAccess\n }\n framework {\n id\n name\n lightLogoURL\n darkLogoURL\n }\n}\n\nfragment DocumentRowFragment on Document {\n id\n title\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment OverviewPageFragment on TrustCenter {\n references(first: 14) {\n edges {\n node {\n id\n name\n logoUrl\n websiteUrl\n }\n }\n }\n vendors(first: 3) {\n edges {\n node {\n id\n countries\n ...VendorRowFragment\n }\n }\n }\n documents(first: 5) {\n edges {\n node {\n id\n ...DocumentRowFragment\n documentType\n }\n }\n }\n trustCenterFiles(first: 5) {\n edges {\n node {\n id\n category\n ...TrustCenterFileRowFragment\n }\n }\n }\n}\n\nfragment TrustCenterFileRowFragment on TrustCenterFile {\n id\n name\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment VendorRowFragment on Vendor {\n id\n name\n category\n websiteUrl\n privacyPolicyUrl\n countries\n}\n"
}
};
})();

22
apps/trust/src/queries/__generated__/TrustGraphQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<8b9ec6ee6f688ae6f6d1463104c72df4>>
* @generated SignedSource<<6458ae0015d6100916a1d446c608f61c>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -549,7 +549,21 @@ return {
"plural": false,
"selections": [
(v2/*: any*/),
(v8/*: any*/)
(v8/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lightLogoURL",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "darkLogoURL",
"storageKey": null
}
],
"storageKey": null
}
@@ -568,12 +582,12 @@ return {
]
},
"params": {
"cacheID": "f3ac933cf00a798d12b1a8e1fedcaee9",
"cacheID": "7f7d3a2db2deb10550db16704993a2d0",
"id": null,
"metadata": {},
"name": "TrustGraphQuery",
"operationKind": "query",
"text": "query TrustGraphQuery(\n $slug: String!\n) {\n trustCenterBySlug(slug: $slug) {\n id\n slug\n isUserAuthenticated\n hasAcceptedNonDisclosureAgreement\n ndaFileName\n ndaFileUrl\n organization {\n name\n description\n websiteUrl\n logoUrl\n email\n headquarterAddress\n id\n }\n ...OverviewPageFragment\n audits(first: 50) {\n edges {\n node {\n id\n ...AuditRowFragment\n }\n }\n }\n }\n}\n\nfragment AuditRowFragment on Audit {\n report {\n id\n filename\n isUserAuthorized\n hasUserRequestedAccess\n }\n framework {\n id\n name\n }\n}\n\nfragment DocumentRowFragment on Document {\n id\n title\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment OverviewPageFragment on TrustCenter {\n references(first: 14) {\n edges {\n node {\n id\n name\n logoUrl\n websiteUrl\n }\n }\n }\n vendors(first: 3) {\n edges {\n node {\n id\n countries\n ...VendorRowFragment\n }\n }\n }\n documents(first: 5) {\n edges {\n node {\n id\n ...DocumentRowFragment\n documentType\n }\n }\n }\n trustCenterFiles(first: 5) {\n edges {\n node {\n id\n category\n ...TrustCenterFileRowFragment\n }\n }\n }\n}\n\nfragment TrustCenterFileRowFragment on TrustCenterFile {\n id\n name\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment VendorRowFragment on Vendor {\n id\n name\n category\n websiteUrl\n privacyPolicyUrl\n countries\n}\n"
"text": "query TrustGraphQuery(\n $slug: String!\n) {\n trustCenterBySlug(slug: $slug) {\n id\n slug\n isUserAuthenticated\n hasAcceptedNonDisclosureAgreement\n ndaFileName\n ndaFileUrl\n organization {\n name\n description\n websiteUrl\n logoUrl\n email\n headquarterAddress\n id\n }\n ...OverviewPageFragment\n audits(first: 50) {\n edges {\n node {\n id\n ...AuditRowFragment\n }\n }\n }\n }\n}\n\nfragment AuditRowFragment on Audit {\n report {\n id\n filename\n isUserAuthorized\n hasUserRequestedAccess\n }\n framework {\n id\n name\n lightLogoURL\n darkLogoURL\n }\n}\n\nfragment DocumentRowFragment on Document {\n id\n title\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment OverviewPageFragment on TrustCenter {\n references(first: 14) {\n edges {\n node {\n id\n name\n logoUrl\n websiteUrl\n }\n }\n }\n vendors(first: 3) {\n edges {\n node {\n id\n countries\n ...VendorRowFragment\n }\n }\n }\n documents(first: 5) {\n edges {\n node {\n id\n ...DocumentRowFragment\n documentType\n }\n }\n }\n trustCenterFiles(first: 5) {\n edges {\n node {\n id\n category\n ...TrustCenterFileRowFragment\n }\n }\n }\n}\n\nfragment TrustCenterFileRowFragment on TrustCenterFile {\n id\n name\n isUserAuthorized\n hasUserRequestedAccess\n}\n\nfragment VendorRowFragment on Vendor {\n id\n name\n category\n websiteUrl\n privacyPolicyUrl\n countries\n}\n"
}
};
})();