From 3d422028d3d4595f56e306ffa6ba7cf6160ac116 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Mon, 2 Mar 2026 17:56:08 +0100
Subject: [PATCH] fix(catalog): address review feedback for BUI card migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace `as any` cast with type-safe `as Columns` in LinksGridList,
  clamping column count to the valid 1–12 range
- Restore pagination (pageSize: 5) in EntityLabelsCard using the
  BUI `useTable` hook
- Use translation ref for EntityLabelsCard column headers instead
  of hard-coded English strings

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 plugins/catalog/src/alpha/translation.ts      |  2 +
 .../EntityLabelsCard/EntityLabelsCard.tsx     | 59 +++++++++++--------
 .../EntityLinksCard/LinksGridList.tsx         |  7 ++-
 3 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/plugins/catalog/src/alpha/translation.ts b/plugins/catalog/src/alpha/translation.ts
index f346c408b9..3d48c0915a 100644
--- a/plugins/catalog/src/alpha/translation.ts
+++ b/plugins/catalog/src/alpha/translation.ts
@@ -111,6 +111,8 @@ export const catalogTranslationRef = createTranslationRef({
     },
     entityLabelsCard: {
       title: 'Labels',
+      columnKeyLabel: 'Label',
+      columnValueLabel: 'Value',
       emptyDescription:
         'No labels defined for this entity. You can add labels to your entity YAML as shown in the highlighted example below:',
       readMoreButtonTitle: 'Read more',
diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx
index 403ecefd1f..95985f31c3 100644
--- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx
+++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx
@@ -19,11 +19,13 @@ import { EntityLabelsEmptyState } from './EntityLabelsEmptyState';
 import {
   Table,
   CellText,
+  useTable,
   type ColumnConfig,
   type TableItem,
 } from '@backstage/ui';
 import { catalogTranslationRef } from '../../alpha/translation';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { useMemo } from 'react';
 
 /** @public */
 export interface EntityLabelsCardProps {
@@ -36,20 +38,6 @@ interface LabelItem extends TableItem {
   value: string;
 }
 
-const columnConfig: ColumnConfig<LabelItem>[] = [
-  {
-    id: 'key',
-    label: 'Label',
-    isRowHeader: true,
-    cell: item => <CellText title={item.key} />,
-  },
-  {
-    id: 'value',
-    label: 'Value',
-    cell: item => <CellText title={item.value} />,
-  },
-];
-
 export const EntityLabelsCard = (props: EntityLabelsCardProps) => {
   const { title } = props;
   const { entity } = useEntity();
@@ -57,20 +45,45 @@ export const EntityLabelsCard = (props: EntityLabelsCardProps) => {
 
   const labels = entity?.metadata?.labels;
 
+  const columnConfig: ColumnConfig<LabelItem>[] = useMemo(
+    () => [
+      {
+        id: 'key',
+        label: t('entityLabelsCard.columnKeyLabel'),
+        isRowHeader: true,
+        cell: item => <CellText title={item.key} />,
+      },
+      {
+        id: 'value',
+        label: t('entityLabelsCard.columnValueLabel'),
+        cell: item => <CellText title={item.value} />,
+      },
+    ],
+    [t],
+  );
+
+  const data = useMemo(
+    () =>
+      Object.keys(labels ?? {}).map(labelKey => ({
+        id: labelKey,
+        key: labelKey,
+        value: labels![labelKey],
+      })),
+    [labels],
+  );
+
+  const { tableProps } = useTable({
+    mode: 'complete',
+    data,
+    paginationOptions: { pageSize: 5 },
+  });
+
   return (
     <EntityInfoCard title={title || t('entityLabelsCard.title')}>
       {!labels || Object.keys(labels).length === 0 ? (
         <EntityLabelsEmptyState />
       ) : (
-        <Table
-          columnConfig={columnConfig}
-          data={Object.keys(labels).map(labelKey => ({
-            id: labelKey,
-            key: labelKey,
-            value: labels[labelKey],
-          }))}
-          pagination={{ type: 'none' }}
-        />
+        <Table columnConfig={columnConfig} {...tableProps} />
       )}
     </EntityInfoCard>
   );
diff --git a/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx b/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx
index 90b7e2058b..dfb0b280ff 100644
--- a/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx
+++ b/plugins/catalog/src/components/EntityLinksCard/LinksGridList.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Grid } from '@backstage/ui';
+import { Grid, type Columns } from '@backstage/ui';
 import { IconLink } from './IconLink';
 import { ColumnBreakpoints } from './types';
 import { useDynamicColumns } from './useDynamicColumns';
@@ -36,7 +36,10 @@ export function LinksGridList(props: LinksGridListProps) {
   const numOfCols = useDynamicColumns(cols);
 
   return (
-    <Grid.Root columns={String(numOfCols) as any} gap="2">
+    <Grid.Root
+      columns={String(Math.min(Math.max(numOfCols, 1), 12)) as Columns}
+      gap="2"
+    >
       {items.map(({ text, href, Icon }, i) => (
         <IconLink key={i} href={href} text={text ?? href} Icon={Icon} />
       ))}