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

Rework the UI of vendor row on compliance page

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-02-04 18:29:32 +04:00
parent fc5108a0ce
commit ad122f8b2e
10 changed files with 105 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/trust/src/components/VendorRow.tsx
View File

@@ -1,6 +1,6 @@
import { faviconUrl, getCountryName } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { IconPin, IconShield } from "@probo/ui";
import { IconPin } from "@probo/ui";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -8,11 +8,9 @@ import type { VendorRowFragment$key } from "./__generated__/VendorRowFragment.gr
const vendorRowFragment = graphql`
fragment VendorRowFragment on Vendor {
id
name
category
description
websiteUrl
privacyPolicyUrl
countries
}
`;
@@ -22,48 +20,37 @@ export function VendorRow(props: { vendor: VendorRowFragment$key; hasAnyCountrie
const logo = faviconUrl(vendor.websiteUrl);
const { __ } = useTranslate();
const gridCols = props.hasAnyCountries ? "grid-cols-[1fr_1fr_1fr]" : "grid-cols-[1fr_1fr]";
return (
<div className="flex text-sm leading-tight gap-3 md:items-center">
<div className="flex text-sm leading-tight gap-6 items-center">
{logo
? (
<img
src={logo}
className="size-8 md:size-6 flex-none rounded-lg"
className="size-8 flex-none rounded-lg"
alt=""
/>
)
: (
<div className="size-8 md:size-6 flex-none rounded-lg" />
<div className="size-8 flex-none rounded-lg" />
)}
<div className="flex flex-col gap-2 flex-1">
<span className="text-sm">{vendor.name}</span>
<div className="text-xs text-txt-secondary w-full">{vendor.description}</div>
{props.hasAnyCountries
&& (
<div className="text-xs flex gap-1 items-start text-txt-quaternary">
{vendor.countries.length > 0 && (
<>
<IconPin size={16} className="flex-none" />
<span>
{vendor.countries
.map(country => getCountryName(__, country))
.join(", ")}
</span>
</>
)}
</div>
)}
<div className={`flex flex-col md:grid ${gridCols} flex-1 gap-0.5`}>
<div>{vendor.name}</div>
{vendor.privacyPolicyUrl
? (
<a
href={vendor.privacyPolicyUrl}
target="_blank"
className={`flex gap-1 text-txt-info items-center hover:underline ${!props.hasAnyCountries ? "md:justify-end" : ""}`}
rel="noreferrer"
>
<IconShield size={16} className="flex-none" />
<span>{__("Privacy")}</span>
</a>
)
: (
<div></div>
)}
{vendor.countries.length > 0 && (
<div className={`flex gap-1 text-txt-secondary items-center ${props.hasAnyCountries ? "md:justify-end" : ""}`}>
<IconPin size={16} className="flex-none" />
<span>
{vendor.countries
.map(country => getCountryName(__, country))
.join(", ")}
</span>
</div>
)}
</div>
</div>
);

25
apps/trust/src/components/__generated__/VendorRowFragment.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<d9bec9231c4fff6da2f9fa23d68675e1>>
* @generated SignedSource<<93ab4de166540c22f47f2cf5fe51c009>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -10,14 +10,11 @@
import { ReaderFragment } from 'relay-runtime';
export type CountryCode = "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AQ" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BR" | "BS" | "BT" | "BV" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CF" | "CG" | "CH" | "CI" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CV" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "EU" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB" | "GD" | "GE" | "GF" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GP" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HM" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MF" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NC" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PM" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RE" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SD" | "SE" | "SG" | "SH" | "SI" | "SJ" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TF" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "UM" | "US" | "UY" | "UZ" | "VA" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WF" | "WS" | "YE" | "YT" | "ZA" | "ZM" | "ZW";
export type VendorCategory = "ANALYTICS" | "CLOUD_MONITORING" | "CLOUD_PROVIDER" | "COLLABORATION" | "CUSTOMER_SUPPORT" | "DATA_STORAGE_AND_PROCESSING" | "DOCUMENT_MANAGEMENT" | "EMPLOYEE_MANAGEMENT" | "ENGINEERING" | "FINANCE" | "IDENTITY_PROVIDER" | "IT" | "MARKETING" | "OFFICE_OPERATIONS" | "OTHER" | "PASSWORD_MANAGEMENT" | "PRODUCT_AND_DESIGN" | "PROFESSIONAL_SERVICES" | "RECRUITING" | "SALES" | "SECURITY" | "VERSION_CONTROL";
import { FragmentRefs } from "relay-runtime";
export type VendorRowFragment$data = {
readonly category: VendorCategory;
readonly countries: ReadonlyArray<CountryCode>;
readonly id: string;
readonly description: string | null | undefined;
readonly name: string;
readonly privacyPolicyUrl: string | null | undefined;
readonly websiteUrl: string | null | undefined;
readonly " $fragmentType": "VendorRowFragment";
};
@@ -32,13 +29,6 @@ const node: ReaderFragment = {
"metadata": null,
"name": "VendorRowFragment",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -50,7 +40,7 @@ const node: ReaderFragment = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"name": "description",
"storageKey": null
},
{
@@ -60,13 +50,6 @@ const node: ReaderFragment = {
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "privacyPolicyUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
@@ -79,6 +62,6 @@ const node: ReaderFragment = {
"abstractKey": null
};
(node as any).hash = "eba669a2b65ef7b9990799516b7d9932";
(node as any).hash = "deaa52007cf14fbc93ca5a82f6dbba42";
export default node;

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

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<6ca2f281af2d0dfbe388980e05bc8d0c>>
* @generated SignedSource<<006540288cfca33589264e1f596e1028>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -181,28 +181,21 @@ v15 = [
"value": 50
}
],
v16 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
v17 = [
v16 = [
{
"kind": "Literal",
"name": "first",
"value": 5
}
],
v18 = {
v17 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "isUserAuthorized",
"storageKey": null
},
v19 = {
v18 = {
"alias": null,
"args": null,
"kind": "ScalarField",
@@ -454,15 +447,8 @@ return {
"storageKey": null
},
(v10/*: any*/),
(v16/*: any*/),
(v12/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "privacyPolicyUrl",
"storageKey": null
}
(v11/*: any*/),
(v12/*: any*/)
],
"storageKey": null
}
@@ -474,7 +460,7 @@ return {
},
{
"alias": null,
"args": (v17/*: any*/),
"args": (v16/*: any*/),
"concreteType": "DocumentConnection",
"kind": "LinkedField",
"name": "documents",
@@ -504,8 +490,8 @@ return {
"name": "title",
"storageKey": null
},
(v17/*: any*/),
(v18/*: any*/),
(v19/*: any*/),
{
"alias": null,
"args": null,
@@ -524,7 +510,7 @@ return {
},
{
"alias": null,
"args": (v17/*: any*/),
"args": (v16/*: any*/),
"concreteType": "TrustCenterFileConnection",
"kind": "LinkedField",
"name": "trustCenterFiles",
@@ -547,10 +533,16 @@ return {
"plural": false,
"selections": [
(v2/*: any*/),
(v16/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"storageKey": null
},
(v10/*: any*/),
(v18/*: any*/),
(v19/*: any*/)
(v17/*: any*/),
(v18/*: any*/)
],
"storageKey": null
}
@@ -602,8 +594,8 @@ return {
"name": "filename",
"storageKey": null
},
(v18/*: any*/),
(v19/*: any*/)
(v17/*: any*/),
(v18/*: any*/)
],
"storageKey": null
},
@@ -649,12 +641,12 @@ return {
]
},
"params": {
"cacheID": "f0861cffe9c1b2e60c6408a69ce5690f",
"cacheID": "af3118fae0bbc255713aae845ab83032",
"id": null,
"metadata": {},
"name": "TrustGraphCurrentQuery",
"operationKind": "query",
"text": "query TrustGraphCurrentQuery {\n viewer {\n email\n fullName\n id\n }\n currentTrustCenter {\n id\n slug\n isViewerMember\n hasAcceptedNonDisclosureAgreement\n logoFileUrl\n darkLogoFileUrl\n ndaFileName\n ndaFileUrl\n organization {\n name\n description\n websiteUrl\n email\n headquarterAddress\n id\n }\n ...OverviewPageFragment\n vendorInfo: vendors(first: 0) {\n totalCount\n }\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"
"text": "query TrustGraphCurrentQuery {\n viewer {\n email\n fullName\n id\n }\n currentTrustCenter {\n id\n slug\n isViewerMember\n hasAcceptedNonDisclosureAgreement\n logoFileUrl\n darkLogoFileUrl\n ndaFileName\n ndaFileUrl\n organization {\n name\n description\n websiteUrl\n email\n headquarterAddress\n id\n }\n ...OverviewPageFragment\n vendorInfo: vendors(first: 0) {\n totalCount\n }\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 name\n description\n websiteUrl\n countries\n}\n"
}
};
})();

15
apps/trust/src/queries/__generated__/TrustGraphCurrentVendorsQuery.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<a3c8818351ece417d86f795d14d5f3f0>>
* @generated SignedSource<<185bfb58c14dbcc1d372726d2f435475>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -197,7 +197,7 @@ return {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "category",
"name": "description",
"storageKey": null
},
{
@@ -206,13 +206,6 @@ return {
"kind": "ScalarField",
"name": "websiteUrl",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "privacyPolicyUrl",
"storageKey": null
}
],
"storageKey": null
@@ -229,12 +222,12 @@ return {
]
},
"params": {
"cacheID": "9fde94112be0665245d50a25fd166d85",
"cacheID": "cb54aef75c2c7696abeea7ef139d99ce",
"id": null,
"metadata": {},
"name": "TrustGraphCurrentVendorsQuery",
"operationKind": "query",
"text": "query TrustGraphCurrentVendorsQuery {\n currentTrustCenter {\n id\n organization {\n name\n id\n }\n vendors(first: 50) {\n edges {\n node {\n id\n countries\n ...VendorRowFragment\n }\n }\n }\n }\n}\n\nfragment VendorRowFragment on Vendor {\n id\n name\n category\n websiteUrl\n privacyPolicyUrl\n countries\n}\n"
"text": "query TrustGraphCurrentVendorsQuery {\n currentTrustCenter {\n id\n organization {\n name\n id\n }\n vendors(first: 50) {\n edges {\n node {\n id\n countries\n ...VendorRowFragment\n }\n }\n }\n }\n}\n\nfragment VendorRowFragment on Vendor {\n name\n description\n websiteUrl\n countries\n}\n"
}
};
})();

4
packages/helpers/src/countries.ts
View File

@@ -101,7 +101,7 @@ const countryNames: Record<CountryCode, (t: Translator) => string> = {
"ER": (__) => __("Eritrea"),
"ES": (__) => __("Spain"),
"ET": (__) => __("Ethiopia"),
"EU": (__) => __("European Union"),
"EU": (__) => __("EU"),
"FI": (__) => __("Finland"),
"FJ": (__) => __("Fiji"),
"FK": (__) => __("Falkland Islands"),
@@ -264,7 +264,7 @@ const countryNames: Record<CountryCode, (t: Translator) => string> = {
"UA": (__) => __("Ukraine"),
"UG": (__) => __("Uganda"),
"UM": (__) => __("United States Minor Outlying Islands"),
"US": (__) => __("United States"),
"US": (__) => __("USA"),
"UY": (__) => __("Uruguay"),
"UZ": (__) => __("Uzbekistan"),
"VA": (__) => __("Vatican City"),

1
pkg/server/api/trust/v1/schema.graphql
View File

@@ -431,6 +431,7 @@ enum VendorCategory
type Vendor implements Node {
id: ID!
name: String!
description: String
category: VendorCategory!
websiteUrl: String
privacyPolicyUrl: String

47
pkg/server/api/trust/v1/schema/schema.go
View File

@@ -247,6 +247,7 @@ type ComplexityRoot struct {
Vendor struct {
Category func(childComplexity int) int
Countries func(childComplexity int) int
Description func(childComplexity int) int
ID func(childComplexity int) int
Name func(childComplexity int) int
PrivacyPolicyURL func(childComplexity int) int
@@ -1051,6 +1052,12 @@ func (e *executableSchema) Complexity(ctx context.Context, typeName, field strin
}
return e.complexity.Vendor.Countries(childComplexity), true
case "Vendor.description":
if e.complexity.Vendor.Description == nil {
break
}
return e.complexity.Vendor.Description(childComplexity), true
case "Vendor.id":
if e.complexity.Vendor.ID == nil {
break
@@ -1662,6 +1669,7 @@ enum VendorCategory
type Vendor implements Node {
id: ID!
name: String!
description: String
category: VendorCategory!
websiteUrl: String
privacyPolicyUrl: String
@@ -5881,6 +5889,35 @@ func (ec *executionContext) fieldContext_Vendor_name(_ context.Context, field gr
return fc, nil
}
func (ec *executionContext) _Vendor_description(ctx context.Context, field graphql.CollectedField, obj *types.Vendor) (ret graphql.Marshaler) {
return graphql.ResolveField(
ctx,
ec.OperationContext,
field,
ec.fieldContext_Vendor_description,
func(ctx context.Context) (any, error) {
return obj.Description, nil
},
nil,
ec.marshalOString2ᚖstring,
true,
false,
)
}
func (ec *executionContext) fieldContext_Vendor_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
fc = &graphql.FieldContext{
Object: "Vendor",
Field: field,
IsMethod: false,
IsResolver: false,
Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
return nil, errors.New("field of type String does not have child fields")
},
}
return fc, nil
}
func (ec *executionContext) _Vendor_category(ctx context.Context, field graphql.CollectedField, obj *types.Vendor) (ret graphql.Marshaler) {
return graphql.ResolveField(
ctx,
@@ -6157,6 +6194,8 @@ func (ec *executionContext) fieldContext_VendorEdge_node(_ context.Context, fiel
return ec.fieldContext_Vendor_id(ctx, field)
case "name":
return ec.fieldContext_Vendor_name(ctx, field)
case "description":
return ec.fieldContext_Vendor_description(ctx, field)
case "category":
return ec.fieldContext_Vendor_category(ctx, field)
case "websiteUrl":
@@ -7976,7 +8015,11 @@ func (ec *executionContext) _Node(ctx context.Context, sel ast.SelectionSet, obj
}
return ec._Audit(ctx, sel, obj)
default:
panic(fmt.Errorf("unexpected type %T", obj))
if typedObj, ok := obj.(graphql.Marshaler); ok {
return typedObj
} else {
panic(fmt.Errorf("unexpected type %T; non-generated variants of Node must implement graphql.Marshaler", obj))
}
}
}
@@ -10161,6 +10204,8 @@ func (ec *executionContext) _Vendor(ctx context.Context, sel ast.SelectionSet, o
if out.Values[i] == graphql.Null {
out.Invalids++
}
case "description":
out.Values[i] = ec._Vendor_description(ctx, field, obj)
case "category":
out.Values[i] = ec._Vendor_category(ctx, field, obj)
if out.Values[i] == graphql.Null {

1
pkg/server/api/trust/v1/types/types.go
View File

@@ -247,6 +247,7 @@ type TrustCenterReferenceEdge struct {
type Vendor struct {
ID gid.GID `json:"id"`
Name string `json:"name"`
Description *string `json:"description,omitempty"`
Category coredata.VendorCategory `json:"category"`
WebsiteURL *string `json:"websiteUrl,omitempty"`
PrivacyPolicyURL *string `json:"privacyPolicyUrl,omitempty"`

1
pkg/server/api/trust/v1/types/vendor.go
View File

@@ -54,6 +54,7 @@ func NewVendor(v *coredata.Vendor) *Vendor {
return &Vendor{
ID: v.ID,
Name: v.Name,
Description: v.Description,
Category: v.Category,
WebsiteURL: v.WebsiteURL,
PrivacyPolicyURL: v.PrivacyPolicyURL,

2
pkg/server/api/trust/v1/v1_resolver.go
View File

@@ -3,7 +3,7 @@ package trust_v1
// This file will be automatically regenerated based on the schema, any resolver
// implementations
// will be copied through when generating and any unknown code will be moved to the end.
// Code generated by github.com/99designs/gqlgen version v0.17.84
// Code generated by github.com/99designs/gqlgen version v0.17.86
import (
"context"