From 719e48dbb4220553c4b81d7795e4cc233633435c Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Wed, 29 Jan 2025 10:15:30 +0100 Subject: [PATCH] catalog-graph: fix flickering when parent re-renders Signed-off-by: Vincenzo Scamporlino --- .changeset/short-keys-heal.md | 5 +++++ .../src/components/CatalogGraphCard/CatalogGraphCard.tsx | 4 ++-- plugins/catalog-react/report.api.md | 2 ++ 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/short-keys-heal.md diff --git a/.changeset/short-keys-heal.md b/.changeset/short-keys-heal.md new file mode 100644 index 0000000000..0c8b26055f --- /dev/null +++ b/.changeset/short-keys-heal.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': patch +--- + +Fixed an issue causing the `CatalogGraphCard` to redraw its content whenever the parent component re-renders, resulting in flickering. diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index e7ac8bf15b..73b4f2f2ee 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -28,7 +28,7 @@ import { } from '@backstage/plugin-catalog-react'; import { makeStyles, Theme } from '@material-ui/core/styles'; import qs from 'qs'; -import React, { MouseEvent, ReactNode, useCallback } from 'react'; +import React, { MouseEvent, ReactNode, useCallback, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { catalogGraphRouteRef } from '../../routes'; import { @@ -86,7 +86,7 @@ export const CatalogGraphCard = ( } = props; const { entity } = useEntity(); - const entityName = getCompoundEntityRef(entity); + const entityName = useMemo(() => getCompoundEntityRef(entity), [entity]); const catalogEntityRoute = useRouteRef(entityRouteRef); const catalogGraphRoute = useRouteRef(catalogGraphRouteRef); const navigate = useNavigate(); diff --git a/plugins/catalog-react/report.api.md b/plugins/catalog-react/report.api.md index 1e637f79a5..b3495faf08 100644 --- a/plugins/catalog-react/report.api.md +++ b/plugins/catalog-react/report.api.md @@ -685,7 +685,9 @@ export function humanizeEntityRef( export function InspectEntityDialog(props: { open: boolean; entity: Entity; + initialTab?: 'overview' | 'ancestry' | 'colocated' | 'json' | 'yaml'; onClose: () => void; + onSelect?: (tab: string) => void; }): React_2.JSX.Element | null; // @public