From c1336d845cb5bfc43eab48e0f03ec41fb4b23ad2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Thu, 16 Jul 2026 14:27:29 +0200 Subject: [PATCH] Hide empty commitment groups on the portal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Groups with no cards render nothing, but the section still reserved its eyebrow slot for the first group by index and kept its padded wrapper, leaving a stray "Security Commitments" label misplacement and an empty gap when every group was empty. Filter out cardless groups before rendering so the eyebrow lands on the first visible group and the whole section collapses when nothing renders. Signed-off-by: Émile Ré --- .../SecurityCommitmentsSection.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/compliance-portal/src/components/SecurityCommitments/SecurityCommitmentsSection.tsx b/apps/compliance-portal/src/components/SecurityCommitments/SecurityCommitmentsSection.tsx index 63635736c..1e252113e 100644 --- a/apps/compliance-portal/src/components/SecurityCommitments/SecurityCommitmentsSection.tsx +++ b/apps/compliance-portal/src/components/SecurityCommitments/SecurityCommitmentsSection.tsx @@ -36,6 +36,15 @@ const securityCommitmentsSectionFragment = graphql` edges { node { id + # Same args as SecurityCommitmentGroupListItem_group so Relay merges + # this into one fetch; used only to drop groups with no cards. + commitments(first: 100) { + edges { + node { + id + } + } + } ...SecurityCommitmentGroupListItem_group } } @@ -68,7 +77,12 @@ function SecurityCommitmentsSectionContent({ trustCenterKey }: SecurityCommitmen const data = useFragment(securityCommitmentsSectionFragment, trustCenterKey); const slots = securityCommitments(); - const groups = data.commitmentGroups.edges.map(edge => edge.node); + // Groups with no cards render nothing, so filter them out here to keep the + // section eyebrow on the first visible group and to hide the whole section + // (no empty padded gap) when nothing will render. + const groups = data.commitmentGroups.edges + .map(edge => edge.node) + .filter(node => node.commitments.edges.length > 0); if (groups.length === 0) { return null;