fix(catalog): address review feedback for BUI card migration

- 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

@@ -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',

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>
   );

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} />
       ))}