From 91f5ed82d661cb32c1cc8e0d95d13a7277786052 Mon Sep 17 00:00:00 2001 From: Tommy Le Date: Tue, 9 Dec 2025 10:54:43 +0100 Subject: [PATCH] fix(catalog): filter icon links before calling useProps The catalogAboutEntityCard was calling useProps() for all icon links before checking filters, causing hooks with side effects to execute for all entity types. This fix reverses the order to check the filter first, then only call useProps() if the filter passes. This prevents unnecessary side effects like API calls, auth flows, or state updates from running for icon links that won't be displayed. Signed-off-by: Tommy Le --- .changeset/ready-results-march.md | 5 +++++ plugins/catalog/src/alpha/entityCards.tsx | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/ready-results-march.md diff --git a/.changeset/ready-results-march.md b/.changeset/ready-results-march.md new file mode 100644 index 0000000000..c28ade8de9 --- /dev/null +++ b/.changeset/ready-results-march.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fixed `catalogAboutEntityCard` to filter icon links before calling useProps(), preventing side effects from hooks in filtered-out links diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx index 6df50a5123..556a130dff 100644 --- a/plugins/catalog/src/alpha/entityCards.tsx +++ b/plugins/catalog/src/alpha/entityCards.tsx @@ -41,12 +41,14 @@ export const catalogAboutEntityCard = EntityCardBlueprint.makeWithOverrides({ // The "useProps" functions may be calling other hooks, so we need to // call them in a component function to avoid breaking the rules of hooks. const links = inputs.iconLinks.reduce((rest, iconLink) => { - const props = iconLink.get(EntityIconLinkBlueprint.dataRefs.useProps)(); const filter = buildFilterFn( iconLink.get(EntityIconLinkBlueprint.dataRefs.filterFunction), iconLink.get(EntityIconLinkBlueprint.dataRefs.filterExpression), ); if (filter(entity)) { + const props = iconLink.get( + EntityIconLinkBlueprint.dataRefs.useProps, + )(); return [...rest, props]; } return rest;