@backstage-community/plugin-announcements 1.3.2 → 2.0.0

package/dist/alpha/components/admin/announcements/AnnouncementsTable.esm.js

@@ -1,25 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { DateTime } from 'luxon';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
-import { Table, TableHeader, Column, TableBody, Row, CellText, Cell, Flex, Text, TagGroup, Tag, ButtonIcon } from '@backstage/ui';
+import { Cell, Flex, Text, CellText, TagGroup, Tag, ButtonIcon, useTable, Table } from '@backstage/ui';
 import { RiEyeLine, RiEditLine, RiDeleteBinLine } from '@remixicon/react';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { ActiveInactiveAnnouncementIndicatorIcon } from './ActiveInactiveAnnouncementIndicator.esm.js';
+import { useEffect } from 'react';
 
-const AnnouncementsTableEmptyState = () => {
-  const { t } = useAnnouncementsTranslation();
-  return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(
-    CellText,
-    {
-      colSpan: 9,
-      title: t("admin.announcementsContent.noAnnouncementsFound")
-    }
-  ) });
-};
-const EmptyPlaceholder = () => {
-  return /* @__PURE__ */ jsx(CellText, { title: "-" });
-};
 const isValidEntityRef = (entityRef) => {
   if (!entityRef) {
     return false;
@@ -31,9 +19,13 @@ const isValidEntityRef = (entityRef) => {
     return false;
   }
 };
-const AnnouncementTableRow = (props) => {
+const truncateText = (text, maxLength = 50) => {
+  if (text.length <= maxLength) return text;
+  return `${text.substring(0, maxLength)}...`;
+};
+const AnnouncementsTable = (props) => {
   const {
-    announcement,
+    data,
     onPreviewClick,
     onEditClick,
     onDeleteClick,
@@ -41,118 +33,133 @@ const AnnouncementTableRow = (props) => {
     canDelete,
     editingAnnouncementId
   } = props;
-  const isCurrentlyEditing = editingAnnouncementId === announcement.id;
-  const isEditDisabled = editingAnnouncementId !== null && !isCurrentlyEditing;
-  const truncateText = (text, maxLength = 50) => {
-    if (text.length <= maxLength) return text;
-    return `${text.substring(0, maxLength)}...`;
-  };
-  const hasValidPublisher = announcement.publisher && isValidEntityRef(announcement.publisher);
-  return /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Flex, { children: [
-      /* @__PURE__ */ jsx(
-        ActiveInactiveAnnouncementIndicatorIcon,
-        {
-          announcement
-        }
-      ),
-      /* @__PURE__ */ jsx(Text, { variant: "body-small", title: announcement.title, children: announcement.title })
-    ] }) }),
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Text, { variant: "body-small", children: truncateText(announcement.body) }) }),
-    hasValidPublisher ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(EntityRefLink, { entityRef: parseEntityRef(announcement.publisher) }) }) : /* @__PURE__ */ jsx(EmptyPlaceholder, {}),
-    announcement.category ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Text, { variant: "body-small", children: announcement.category.title }) }) : /* @__PURE__ */ jsx(EmptyPlaceholder, {}),
-    announcement.tags && announcement.tags.length > 0 ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(TagGroup, { children: announcement.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "small", children: tag.title }, tag.slug)) }) }) : /* @__PURE__ */ jsx(EmptyPlaceholder, {}),
-    /* @__PURE__ */ jsx(
-      CellText,
-      {
-        title: DateTime.fromISO(announcement.created_at).toFormat("M/d/yy")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      CellText,
-      {
-        title: DateTime.fromISO(announcement.start_at).toFormat("M/d/yy")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      CellText,
-      {
-        title: announcement.until_date ? DateTime.fromISO(announcement.until_date).toFormat("M/d/yy") : "-"
+  const { t } = useAnnouncementsTranslation();
+  const columns = [
+    {
+      id: "title",
+      label: t("admin.announcementsContent.table.title"),
+      isRowHeader: true,
+      cell: (announcement) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Flex, { children: [
+        /* @__PURE__ */ jsx(
+          ActiveInactiveAnnouncementIndicatorIcon,
+          {
+            announcement
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { variant: "body-small", title: announcement.title, children: announcement.title })
+      ] }) })
+    },
+    {
+      id: "body",
+      label: t("admin.announcementsContent.table.body"),
+      cell: (announcement) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Text, { variant: "body-small", children: truncateText(announcement.body) }) })
+    },
+    {
+      id: "publisher",
+      label: t("admin.announcementsContent.table.publisher"),
+      cell: (announcement) => {
+        const hasValidPublisher = announcement.publisher && isValidEntityRef(announcement.publisher);
+        return hasValidPublisher ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(EntityRefLink, { entityRef: parseEntityRef(announcement.publisher) }) }) : /* @__PURE__ */ jsx(CellText, { title: "-" });
       }
-    ),
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Flex, { gap: "small", children: [
-      /* @__PURE__ */ jsx(
-        ButtonIcon,
+    },
+    {
+      id: "category",
+      label: t("admin.announcementsContent.table.category"),
+      cell: (announcement) => announcement.category ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Text, { variant: "body-small", children: announcement.category.title }) }) : /* @__PURE__ */ jsx(CellText, { title: "-" })
+    },
+    {
+      id: "tags",
+      label: t("admin.announcementsContent.table.tags"),
+      cell: (announcement) => announcement.tags && announcement.tags.length > 0 ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(TagGroup, { children: announcement.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { size: "small", children: tag.title }, tag.slug)) }) }) : /* @__PURE__ */ jsx(CellText, { title: "-" })
+    },
+    {
+      id: "created_at",
+      label: t("admin.announcementsContent.table.created_at"),
+      cell: (announcement) => /* @__PURE__ */ jsx(
+        CellText,
         {
-          icon: /* @__PURE__ */ jsx(RiEyeLine, {}),
-          variant: "tertiary",
-          onClick: () => onPreviewClick?.(announcement),
-          "aria-label": "preview",
-          "data-testid": "preview"
+          title: DateTime.fromISO(announcement.created_at).toFormat("M/d/yy")
         }
-      ),
-      /* @__PURE__ */ jsx(
-        ButtonIcon,
+      )
+    },
+    {
+      id: "start_at",
+      label: t("admin.announcementsContent.table.start_at"),
+      cell: (announcement) => /* @__PURE__ */ jsx(
+        CellText,
         {
-          icon: /* @__PURE__ */ jsx(RiEditLine, {}),
-          variant: "tertiary",
-          onClick: () => onEditClick?.(announcement),
-          "aria-label": "edit",
-          "data-testid": "edit-icon",
-          isDisabled: !canEdit || isEditDisabled
+          title: DateTime.fromISO(announcement.start_at).toFormat("M/d/yy")
         }
-      ),
-      /* @__PURE__ */ jsx(
-        ButtonIcon,
+      )
+    },
+    {
+      id: "until_date",
+      label: t("admin.announcementsContent.table.until_date"),
+      cell: (announcement) => /* @__PURE__ */ jsx(
+        CellText,
         {
-          icon: /* @__PURE__ */ jsx(RiDeleteBinLine, {}),
-          variant: "tertiary",
-          onClick: () => onDeleteClick?.(announcement),
-          "aria-label": "delete",
-          "data-testid": "delete-icon",
-          isDisabled: !canDelete
+          title: announcement.until_date ? DateTime.fromISO(announcement.until_date).toFormat("M/d/yy") : "-"
         }
       )
-    ] }) })
-  ] }, announcement.id);
-};
-const AnnouncementsTable = (props) => {
-  const {
-    data,
-    onPreviewClick,
-    onEditClick,
-    onDeleteClick,
-    canEdit,
-    canDelete,
-    editingAnnouncementId
-  } = props;
-  const { t } = useAnnouncementsTranslation();
-  return /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsxs(TableHeader, { children: [
-      /* @__PURE__ */ jsx(Column, { isRowHeader: true, children: t("admin.announcementsContent.table.title") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.body") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.publisher") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.category") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.tags") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.created_at") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.start_at") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.until_date") }),
-      /* @__PURE__ */ jsx(Column, { children: t("admin.announcementsContent.table.actions") })
-    ] }),
-    /* @__PURE__ */ jsx(TableBody, { children: data?.length > 0 ? data.map((announcement) => /* @__PURE__ */ jsx(
-      AnnouncementTableRow,
-      {
-        announcement,
-        onPreviewClick,
-        onEditClick,
-        onDeleteClick,
-        canEdit,
-        canDelete,
-        editingAnnouncementId
-      },
-      announcement.id
-    )) : /* @__PURE__ */ jsx(AnnouncementsTableEmptyState, {}) })
-  ] });
+    },
+    {
+      id: "actions",
+      label: t("admin.announcementsContent.table.actions"),
+      cell: (announcement) => {
+        const isCurrentlyEditing = editingAnnouncementId === announcement.id;
+        const isEditDisabled = editingAnnouncementId !== null && !isCurrentlyEditing;
+        return /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsxs(Flex, { gap: "small", children: [
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              icon: /* @__PURE__ */ jsx(RiEyeLine, {}),
+              variant: "tertiary",
+              onClick: () => onPreviewClick?.(announcement),
+              "aria-label": "preview",
+              "data-testid": "preview"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              icon: /* @__PURE__ */ jsx(RiEditLine, {}),
+              variant: "tertiary",
+              onClick: () => onEditClick?.(announcement),
+              "aria-label": "edit",
+              "data-testid": "edit-icon",
+              isDisabled: !canEdit || isEditDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              icon: /* @__PURE__ */ jsx(RiDeleteBinLine, {}),
+              variant: "tertiary",
+              onClick: () => onDeleteClick?.(announcement),
+              "aria-label": "delete",
+              "data-testid": "delete-icon",
+              isDisabled: !canDelete
+            }
+          )
+        ] }) });
+      }
+    }
+  ];
+  const { tableProps, reload } = useTable({
+    mode: "complete",
+    getData: () => data
+  });
+  useEffect(() => {
+    reload();
+  }, [data, reload]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columnConfig: columns,
+      emptyState: /* @__PURE__ */ jsx(Text, { children: t("admin.announcementsContent.noAnnouncementsFound") }),
+      ...tableProps
+    }
+  );
 };
 
 export { AnnouncementsTable };

package/dist/alpha/components/admin/announcements/AnnouncementsTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnouncementsTable.esm.js","sources":["../../../../../src/alpha/components/admin/announcements/AnnouncementsTable.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { DateTime } from 'luxon';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { Announcement } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport {\n  Cell,\n  CellText,\n  Column,\n  Row,\n  Table,\n  TableBody,\n  TableHeader,\n  ButtonIcon,\n  Flex,\n  Tag,\n  TagGroup,\n  Text,\n} from '@backstage/ui';\nimport { RiEyeLine, RiEditLine, RiDeleteBinLine } from '@remixicon/react';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\n\nimport { ActiveInactiveAnnouncementIndicatorIcon } from './ActiveInactiveAnnouncementIndicator';\n\nconst AnnouncementsTableEmptyState = () => {\n  const { t } = useAnnouncementsTranslation();\n\n  return (\n    <Row>\n      <CellText\n        colSpan={9}\n        title={t('admin.announcementsContent.noAnnouncementsFound')}\n      />\n    </Row>\n  );\n};\n\ntype AnnouncementTableRowProps = {\n  announcement: Announcement;\n  onPreviewClick?: (announcement: Announcement) => void;\n  onEditClick?: (announcement: Announcement) => void;\n  onDeleteClick?: (announcement: Announcement) => void;\n  canEdit?: boolean;\n  canDelete?: boolean;\n  editingAnnouncementId?: string | null;\n};\n\nconst EmptyPlaceholder = () => {\n  return <CellText title=\"-\" />;\n};\n\nconst isValidEntityRef = (entityRef: string): boolean => {\n  if (!entityRef) {\n    return false;\n  }\n  try {\n    parseEntityRef(entityRef);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nconst AnnouncementTableRow = (props: AnnouncementTableRowProps) => {\n  const {\n    announcement,\n    onPreviewClick,\n    onEditClick,\n    onDeleteClick,\n    canEdit,\n    canDelete,\n    editingAnnouncementId,\n  } = props;\n  const isCurrentlyEditing = editingAnnouncementId === announcement.id;\n  const isEditDisabled = editingAnnouncementId !== null && !isCurrentlyEditing;\n\n  const truncateText = (text: string, maxLength: number = 50) => {\n    if (text.length <= maxLength) return text;\n    return `${text.substring(0, maxLength)}...`;\n  };\n\n  const hasValidPublisher =\n    announcement.publisher && isValidEntityRef(announcement.publisher);\n\n  return (\n    <Row key={announcement.id}>\n      <Cell>\n        <Flex>\n          <ActiveInactiveAnnouncementIndicatorIcon\n            announcement={announcement}\n          />\n          <Text variant=\"body-small\" title={announcement.title}>\n            {announcement.title}\n          </Text>\n        </Flex>\n      </Cell>\n      <Cell>\n        <Text variant=\"body-small\">{truncateText(announcement.body)}</Text>\n      </Cell>\n\n      {hasValidPublisher ? (\n        <Cell>\n          <EntityRefLink entityRef={parseEntityRef(announcement.publisher)} />\n        </Cell>\n      ) : (\n        <EmptyPlaceholder />\n      )}\n\n      {announcement.category ? (\n        <Cell>\n          <Text variant=\"body-small\">{announcement.category.title}</Text>\n        </Cell>\n      ) : (\n        <EmptyPlaceholder />\n      )}\n      {announcement.tags && announcement.tags.length > 0 ? (\n        <Cell>\n          <TagGroup>\n            {announcement.tags.map(tag => (\n              <Tag key={tag.slug} size=\"small\">\n                {tag.title}\n              </Tag>\n            ))}\n          </TagGroup>\n        </Cell>\n      ) : (\n        <EmptyPlaceholder />\n      )}\n\n      <CellText\n        title={DateTime.fromISO(announcement.created_at).toFormat('M/d/yy')}\n      />\n      <CellText\n        title={DateTime.fromISO(announcement.start_at).toFormat('M/d/yy')}\n      />\n      <CellText\n        title={\n          announcement.until_date\n            ? DateTime.fromISO(announcement.until_date).toFormat('M/d/yy')\n            : '-'\n        }\n      />\n      <Cell>\n        <Flex gap=\"small\">\n          <ButtonIcon\n            icon={<RiEyeLine />}\n            variant=\"tertiary\"\n            onClick={() => onPreviewClick?.(announcement)}\n            aria-label=\"preview\"\n            data-testid=\"preview\"\n          />\n          <ButtonIcon\n            icon={<RiEditLine />}\n            variant=\"tertiary\"\n            onClick={() => onEditClick?.(announcement)}\n            aria-label=\"edit\"\n            data-testid=\"edit-icon\"\n            isDisabled={!canEdit || isEditDisabled}\n          />\n          <ButtonIcon\n            icon={<RiDeleteBinLine />}\n            variant=\"tertiary\"\n            onClick={() => onDeleteClick?.(announcement)}\n            aria-label=\"delete\"\n            data-testid=\"delete-icon\"\n            isDisabled={!canDelete}\n          />\n        </Flex>\n      </Cell>\n    </Row>\n  );\n};\n\n/**\n * @internal\n */\ntype AnnouncementsTableProps = {\n  data: Announcement[];\n  onPreviewClick?: (announcement: Announcement) => void;\n  onEditClick?: (announcement: Announcement) => void;\n  onDeleteClick?: (announcement: Announcement) => void;\n  canEdit?: boolean;\n  canDelete?: boolean;\n  editingAnnouncementId?: string | null;\n};\n\n/**\n * @internal\n */\nexport const AnnouncementsTable = (props: AnnouncementsTableProps) => {\n  const {\n    data,\n    onPreviewClick,\n    onEditClick,\n    onDeleteClick,\n    canEdit,\n    canDelete,\n    editingAnnouncementId,\n  } = props;\n  const { t } = useAnnouncementsTranslation();\n\n  return (\n    <Table>\n      <TableHeader>\n        <Column isRowHeader>\n          {t('admin.announcementsContent.table.title')}\n        </Column>\n        <Column>{t('admin.announcementsContent.table.body')}</Column>\n        <Column>{t('admin.announcementsContent.table.publisher')}</Column>\n        <Column>{t('admin.announcementsContent.table.category')}</Column>\n        <Column>{t('admin.announcementsContent.table.tags')}</Column>\n        <Column>{t('admin.announcementsContent.table.created_at')}</Column>\n        <Column>{t('admin.announcementsContent.table.start_at')}</Column>\n        <Column>{t('admin.announcementsContent.table.until_date')}</Column>\n        <Column>{t('admin.announcementsContent.table.actions')}</Column>\n      </TableHeader>\n      <TableBody>\n        {data?.length > 0 ? (\n          data.map(announcement => (\n            <AnnouncementTableRow\n              key={announcement.id}\n              announcement={announcement}\n              onPreviewClick={onPreviewClick}\n              onEditClick={onEditClick}\n              onDeleteClick={onDeleteClick}\n              canEdit={canEdit}\n              canDelete={canDelete}\n              editingAnnouncementId={editingAnnouncementId}\n            />\n          ))\n        ) : (\n          <AnnouncementsTableEmptyState />\n        )}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AnnouncementsTable.esm.js","sources":["../../../../../src/alpha/components/admin/announcements/AnnouncementsTable.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { DateTime } from 'luxon';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { Announcement } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport {\n  Cell,\n  CellText,\n  Table,\n  useTable,\n  type ColumnConfig,\n  ButtonIcon,\n  Flex,\n  Tag,\n  TagGroup,\n  Text,\n} from '@backstage/ui';\nimport { RiEyeLine, RiEditLine, RiDeleteBinLine } from '@remixicon/react';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\n\nimport { ActiveInactiveAnnouncementIndicatorIcon } from './ActiveInactiveAnnouncementIndicator';\nimport { useEffect } from 'react';\n\nconst isValidEntityRef = (entityRef: string): boolean => {\n  if (!entityRef) {\n    return false;\n  }\n  try {\n    parseEntityRef(entityRef);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\nconst truncateText = (text: string, maxLength: number = 50) => {\n  if (text.length <= maxLength) return text;\n  return `${text.substring(0, maxLength)}...`;\n};\n\n/**\n * @internal\n */\ntype AnnouncementsTableProps = {\n  data: Announcement[];\n  onPreviewClick?: (announcement: Announcement) => void;\n  onEditClick?: (announcement: Announcement) => void;\n  onDeleteClick?: (announcement: Announcement) => void;\n  canEdit?: boolean;\n  canDelete?: boolean;\n  editingAnnouncementId?: string | null;\n};\n\n/**\n * @internal\n */\nexport const AnnouncementsTable = (props: AnnouncementsTableProps) => {\n  const {\n    data,\n    onPreviewClick,\n    onEditClick,\n    onDeleteClick,\n    canEdit,\n    canDelete,\n    editingAnnouncementId,\n  } = props;\n  const { t } = useAnnouncementsTranslation();\n\n  const columns: ColumnConfig<Announcement>[] = [\n    {\n      id: 'title',\n      label: t('admin.announcementsContent.table.title'),\n      isRowHeader: true,\n      cell: announcement => (\n        <Cell>\n          <Flex>\n            <ActiveInactiveAnnouncementIndicatorIcon\n              announcement={announcement}\n            />\n            <Text variant=\"body-small\" title={announcement.title}>\n              {announcement.title}\n            </Text>\n          </Flex>\n        </Cell>\n      ),\n    },\n    {\n      id: 'body',\n      label: t('admin.announcementsContent.table.body'),\n      cell: announcement => (\n        <Cell>\n          <Text variant=\"body-small\">{truncateText(announcement.body)}</Text>\n        </Cell>\n      ),\n    },\n    {\n      id: 'publisher',\n      label: t('admin.announcementsContent.table.publisher'),\n      cell: announcement => {\n        const hasValidPublisher =\n          announcement.publisher && isValidEntityRef(announcement.publisher);\n        return hasValidPublisher ? (\n          <Cell>\n            <EntityRefLink entityRef={parseEntityRef(announcement.publisher)} />\n          </Cell>\n        ) : (\n          <CellText title=\"-\" />\n        );\n      },\n    },\n    {\n      id: 'category',\n      label: t('admin.announcementsContent.table.category'),\n      cell: announcement =>\n        announcement.category ? (\n          <Cell>\n            <Text variant=\"body-small\">{announcement.category.title}</Text>\n          </Cell>\n        ) : (\n          <CellText title=\"-\" />\n        ),\n    },\n    {\n      id: 'tags',\n      label: t('admin.announcementsContent.table.tags'),\n      cell: announcement =>\n        announcement.tags && announcement.tags.length > 0 ? (\n          <Cell>\n            <TagGroup>\n              {announcement.tags.map(tag => (\n                <Tag key={tag.slug} size=\"small\">\n                  {tag.title}\n                </Tag>\n              ))}\n            </TagGroup>\n          </Cell>\n        ) : (\n          <CellText title=\"-\" />\n        ),\n    },\n    {\n      id: 'created_at',\n      label: t('admin.announcementsContent.table.created_at'),\n      cell: announcement => (\n        <CellText\n          title={DateTime.fromISO(announcement.created_at).toFormat('M/d/yy')}\n        />\n      ),\n    },\n    {\n      id: 'start_at',\n      label: t('admin.announcementsContent.table.start_at'),\n      cell: announcement => (\n        <CellText\n          title={DateTime.fromISO(announcement.start_at).toFormat('M/d/yy')}\n        />\n      ),\n    },\n    {\n      id: 'until_date',\n      label: t('admin.announcementsContent.table.until_date'),\n      cell: announcement => (\n        <CellText\n          title={\n            announcement.until_date\n              ? DateTime.fromISO(announcement.until_date).toFormat('M/d/yy')\n              : '-'\n          }\n        />\n      ),\n    },\n    {\n      id: 'actions',\n      label: t('admin.announcementsContent.table.actions'),\n      cell: announcement => {\n        const isCurrentlyEditing = editingAnnouncementId === announcement.id;\n        const isEditDisabled =\n          editingAnnouncementId !== null && !isCurrentlyEditing;\n\n        return (\n          <Cell>\n            <Flex gap=\"small\">\n              <ButtonIcon\n                icon={<RiEyeLine />}\n                variant=\"tertiary\"\n                onClick={() => onPreviewClick?.(announcement)}\n                aria-label=\"preview\"\n                data-testid=\"preview\"\n              />\n              <ButtonIcon\n                icon={<RiEditLine />}\n                variant=\"tertiary\"\n                onClick={() => onEditClick?.(announcement)}\n                aria-label=\"edit\"\n                data-testid=\"edit-icon\"\n                isDisabled={!canEdit || isEditDisabled}\n              />\n              <ButtonIcon\n                icon={<RiDeleteBinLine />}\n                variant=\"tertiary\"\n                onClick={() => onDeleteClick?.(announcement)}\n                aria-label=\"delete\"\n                data-testid=\"delete-icon\"\n                isDisabled={!canDelete}\n              />\n            </Flex>\n          </Cell>\n        );\n      },\n    },\n  ];\n\n  const { tableProps, reload } = useTable({\n    mode: 'complete',\n    getData: () => data,\n  });\n\n  useEffect(() => {\n    reload();\n  }, [data, reload]);\n\n  return (\n    <Table\n      columnConfig={columns}\n      emptyState={\n        <Text>{t('admin.announcementsContent.noAnnouncementsFound')}</Text>\n      }\n      {...tableProps}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/admin/announcements/AnnouncementsTableCard.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
-import { Card, CardBody, CardFooter, TablePagination } from '@backstage/ui';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { Card, CardHeader, Flex, Text, Button, CardBody } from '@backstage/ui';
 import { AnnouncementsTable } from './AnnouncementsTable.esm.js';
 import { ActiveInactiveAnnouncementIndicator } from './ActiveInactiveAnnouncementIndicator.esm.js';
 
@@ -10,24 +10,25 @@ const AnnouncementsTableCard = (props) => {
     onPreviewClick,
     onEditClick,
     onDeleteClick,
+    onCreateClick,
     canEdit,
     canDelete,
+    canCreate,
     editingAnnouncementId
   } = props;
-  const [pageSize, setPageSize] = useState(10);
-  const [offset, setOffset] = useState(0);
-  const paginatedAnnouncements = useMemo(() => {
-    const start = offset;
-    const end = offset + pageSize;
-    return announcements.slice(start, end);
-  }, [announcements, offset, pageSize]);
+  const { t } = useAnnouncementsTranslation();
+  const title = `${t("admin.announcementsContent.announcements")} (${announcements.length})`;
   return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "title-x-small", children: title }),
+      /* @__PURE__ */ jsx(Button, { isDisabled: !canCreate, onClick: onCreateClick, children: t("admin.announcementsContent.createButton") })
+    ] }) }),
     /* @__PURE__ */ jsxs(CardBody, { children: [
       /* @__PURE__ */ jsx(ActiveInactiveAnnouncementIndicator, {}),
       /* @__PURE__ */ jsx(
         AnnouncementsTable,
         {
-          data: paginatedAnnouncements,
+          data: announcements,
           onPreviewClick,
           onEditClick,
           onDeleteClick,
@@ -36,17 +37,7 @@ const AnnouncementsTableCard = (props) => {
           editingAnnouncementId
         }
       )
-    ] }),
-    announcements.length > 0 && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
-      TablePagination,
-      {
-        offset,
-        pageSize,
-        setOffset,
-        setPageSize,
-        rowCount: announcements.length
-      }
-    ) })
+    ] })
   ] });
 };
 

package/dist/alpha/components/admin/announcements/AnnouncementsTableCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnouncementsTableCard.esm.js","sources":["../../../../../src/alpha/components/admin/announcements/AnnouncementsTableCard.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useMemo } from 'react';\nimport { Announcement } from '@backstage-community/plugin-announcements-common';\nimport { TablePagination, Card, CardBody, CardFooter } from '@backstage/ui';\n\nimport { AnnouncementsTable } from './AnnouncementsTable';\nimport { ActiveInactiveAnnouncementIndicator } from './ActiveInactiveAnnouncementIndicator';\n\n/**\n * @internal\n */\ntype AnnouncementsTableCardProps = {\n  announcements: Announcement[];\n  onPreviewClick: (announcement: Announcement) => void;\n  onEditClick: (announcement: Announcement) => void;\n  onDeleteClick: (announcement: Announcement) => void;\n  canEdit: boolean;\n  canDelete: boolean;\n  editingAnnouncementId?: string | null;\n};\n\n/**\n * @internal\n */\nexport const AnnouncementsTableCard = (props: AnnouncementsTableCardProps) => {\n  const {\n    announcements,\n    onPreviewClick,\n    onEditClick,\n    onDeleteClick,\n    canEdit,\n    canDelete,\n    editingAnnouncementId,\n  } = props;\n\n  const [pageSize, setPageSize] = useState(10);\n  const [offset, setOffset] = useState(0);\n\n  const paginatedAnnouncements = useMemo(() => {\n    const start = offset;\n    const end = offset + pageSize;\n    return announcements.slice(start, end);\n  }, [announcements, offset, pageSize]);\n\n  return (\n    <Card>\n      <CardBody>\n        <ActiveInactiveAnnouncementIndicator />\n\n        <AnnouncementsTable\n          data={paginatedAnnouncements}\n          onPreviewClick={onPreviewClick}\n          onEditClick={onEditClick}\n          onDeleteClick={onDeleteClick}\n          canEdit={canEdit}\n          canDelete={canDelete}\n          editingAnnouncementId={editingAnnouncementId}\n        />\n      </CardBody>\n\n      {announcements.length > 0 && (\n        <CardFooter>\n          <TablePagination\n            offset={offset}\n            pageSize={pageSize}\n            setOffset={setOffset}\n            setPageSize={setPageSize}\n            rowCount={announcements.length}\n          />\n        </CardFooter>\n      )}\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsCa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,EAAE,CAAA;AAC3C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,CAAC,CAAA;AAEtC,EAAM,MAAA,sBAAA,GAAyB,QAAQ,MAAM;AAC3C,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,MAAM,MAAS,GAAA,QAAA;AACrB,IAAO,OAAA,aAAA,CAAc,KAAM,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,GACpC,EAAA,CAAC,aAAe,EAAA,MAAA,EAAQ,QAAQ,CAAC,CAAA;AAEpC,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mCAAoC,EAAA,EAAA,CAAA;AAAA,sBAErC,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,IAAM,EAAA,sBAAA;AAAA,UACN,cAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA;AAAA,UACA,OAAA;AAAA,UACA,SAAA;AAAA,UACA;AAAA;AAAA;AACF,KACF,EAAA,CAAA;AAAA,IAEC,aAAc,CAAA,MAAA,GAAS,CACtB,oBAAA,GAAA,CAAC,UACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAU,aAAc,CAAA;AAAA;AAAA,KAE5B,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AnnouncementsTableCard.esm.js","sources":["../../../../../src/alpha/components/admin/announcements/AnnouncementsTableCard.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Announcement } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport { Card, CardBody, CardHeader, Text, Flex, Button } from '@backstage/ui';\n\nimport { AnnouncementsTable } from './AnnouncementsTable';\nimport { ActiveInactiveAnnouncementIndicator } from './ActiveInactiveAnnouncementIndicator';\n\n/**\n * @internal\n */\ntype AnnouncementsTableCardProps = {\n  announcements: Announcement[];\n  onPreviewClick: (announcement: Announcement) => void;\n  onEditClick: (announcement: Announcement) => void;\n  onDeleteClick: (announcement: Announcement) => void;\n  onCreateClick: () => void;\n  canEdit: boolean;\n  canDelete: boolean;\n  canCreate: boolean;\n  editingAnnouncementId?: string | null;\n};\n\n/**\n * @internal\n */\nexport const AnnouncementsTableCard = (props: AnnouncementsTableCardProps) => {\n  const {\n    announcements,\n    onPreviewClick,\n    onEditClick,\n    onDeleteClick,\n    onCreateClick,\n    canEdit,\n    canDelete,\n    canCreate,\n    editingAnnouncementId,\n  } = props;\n\n  const { t } = useAnnouncementsTranslation();\n\n  const title = `${t('admin.announcementsContent.announcements')} (${\n    announcements.length\n  })`;\n\n  return (\n    <Card>\n      <CardHeader>\n        <Flex justify=\"between\" align=\"center\">\n          <Text variant=\"title-x-small\">{title}</Text>\n          <Button isDisabled={!canCreate} onClick={onCreateClick}>\n            {t('admin.announcementsContent.createButton')}\n          </Button>\n        </Flex>\n      </CardHeader>\n\n      <CardBody>\n        <ActiveInactiveAnnouncementIndicator />\n\n        <AnnouncementsTable\n          data={announcements}\n          onPreviewClick={onPreviewClick}\n          onEditClick={onEditClick}\n          onDeleteClick={onDeleteClick}\n          canEdit={canEdit}\n          canDelete={canDelete}\n          editingAnnouncementId={editingAnnouncementId}\n        />\n      </CardBody>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAwCa,MAAA,sBAAA,GAAyB,CAAC,KAAuC,KAAA;AAC5E,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,MAAM,QAAQ,CAAG,EAAA,CAAA,CAAE,0CAA0C,CAAC,CAAA,EAAA,EAC5D,cAAc,MAChB,CAAA,CAAA,CAAA;AAEA,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,SAAA,EAAU,OAAM,QAC5B,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAiB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBACrC,GAAA,CAAC,UAAO,UAAY,EAAA,CAAC,WAAW,OAAS,EAAA,aAAA,EACtC,QAAE,EAAA,CAAA,CAAA,yCAAyC,CAC9C,EAAA;AAAA,KAAA,EACF,CACF,EAAA,CAAA;AAAA,yBAEC,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mCAAoC,EAAA,EAAA,CAAA;AAAA,sBAErC,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,IAAM,EAAA,aAAA;AAAA,UACN,cAAA;AAAA,UACA,WAAA;AAAA,UACA,aAAA;AAAA,UACA,OAAA;AAAA,UACA,SAAA;AAAA,UACA;AAAA;AAAA;AACF,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/admin/categories/CategoriesTable.esm.js

@@ -1,51 +1,52 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Table, TableHeader, Column, TableBody, Row, CellText, Cell, ButtonIcon } from '@backstage/ui';
+import { jsx } from 'react/jsx-runtime';
+import { CellText, Cell, ButtonIcon, useTable, Table, Text } from '@backstage/ui';
 import { RiDeleteBinLine } from '@remixicon/react';
 import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { useEffect } from 'react';
 
-const CategoriesTableEmptyState = () => {
-  const { t } = useAnnouncementsTranslation();
-  return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(
-    CellText,
-    {
-      colSpan: 3,
-      title: t("admin.categoriesContent.table.noCategoriesFound")
-    }
-  ) });
-};
-const CategoryTableRow = (props) => {
-  const { category, onDeleteClick } = props;
-  return /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(CellText, { title: category.title }),
-    /* @__PURE__ */ jsx(CellText, { title: category.slug }),
-    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        icon: /* @__PURE__ */ jsx(RiDeleteBinLine, {}),
-        variant: "tertiary",
-        onClick: () => onDeleteClick(category)
-      }
-    ) })
-  ] }, category.slug);
-};
 const CategoriesTable = (props) => {
   const { data, onDeleteClick } = props;
   const { t } = useAnnouncementsTranslation();
-  return /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsxs(TableHeader, { children: [
-      /* @__PURE__ */ jsx(Column, { id: "title", isRowHeader: true, children: t("admin.categoriesContent.table.title") }),
-      /* @__PURE__ */ jsx(Column, { id: "slug", children: t("admin.categoriesContent.table.slug") }),
-      /* @__PURE__ */ jsx(Column, { id: "actions", children: t("admin.categoriesContent.table.actions") })
-    ] }),
-    /* @__PURE__ */ jsx(TableBody, { children: data.length > 0 ? data.map((category) => /* @__PURE__ */ jsx(
-      CategoryTableRow,
-      {
-        category,
-        onDeleteClick
-      },
-      category.slug
-    )) : /* @__PURE__ */ jsx(CategoriesTableEmptyState, {}) })
-  ] });
+  const columns = [
+    {
+      id: "title",
+      label: t("admin.categoriesContent.table.title"),
+      isRowHeader: true,
+      cell: (category) => /* @__PURE__ */ jsx(CellText, { title: category.title })
+    },
+    {
+      id: "slug",
+      label: t("admin.categoriesContent.table.slug"),
+      cell: (category) => /* @__PURE__ */ jsx(CellText, { title: category.slug })
+    },
+    {
+      id: "actions",
+      label: t("admin.categoriesContent.table.actions"),
+      cell: (category) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          icon: /* @__PURE__ */ jsx(RiDeleteBinLine, {}),
+          variant: "tertiary",
+          onClick: () => onDeleteClick?.(category)
+        }
+      ) })
+    }
+  ];
+  const { tableProps, reload } = useTable({
+    mode: "complete",
+    getData: () => data.map((category) => ({ ...category, id: category.slug }))
+  });
+  useEffect(() => {
+    reload();
+  }, [data, reload]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      columnConfig: columns,
+      emptyState: /* @__PURE__ */ jsx(Text, { children: t("admin.categoriesContent.table.noCategoriesFound") }),
+      ...tableProps
+    }
+  );
 };
 
 export { CategoriesTable };

package/dist/alpha/components/admin/categories/CategoriesTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTable.esm.js","sources":["../../../../../src/alpha/components/admin/categories/CategoriesTable.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  CellText,\n  Column,\n  Row,\n  Table,\n  TableBody,\n  TableHeader,\n  Cell,\n  ButtonIcon,\n} from '@backstage/ui';\nimport { RiDeleteBinLine } from '@remixicon/react';\n\nimport { Category } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\n\nconst CategoriesTableEmptyState = () => {\n  const { t } = useAnnouncementsTranslation();\n\n  return (\n    <Row>\n      <CellText\n        colSpan={3}\n        title={t('admin.categoriesContent.table.noCategoriesFound')}\n      />\n    </Row>\n  );\n};\n\ntype CategoryTableRowProps = {\n  category: Category;\n  onDeleteClick?: (category: Category) => void;\n};\n\nconst CategoryTableRow = (props: CategoryTableRowProps) => {\n  const { category, onDeleteClick } = props;\n\n  return (\n    <Row key={category.slug}>\n      <CellText title={category.title} />\n      <CellText title={category.slug} />\n      <Cell>\n        <ButtonIcon\n          icon={<RiDeleteBinLine />}\n          variant=\"tertiary\"\n          onClick={() => onDeleteClick!(category)}\n        />\n      </Cell>\n    </Row>\n  );\n};\n\n/**\n * @internal\n */\ntype CategoriesTableProps = {\n  data: Category[];\n  onDeleteClick?: (category: Category) => void;\n};\n\n/**\n * @internal\n */\nexport const CategoriesTable = (props: CategoriesTableProps) => {\n  const { data, onDeleteClick } = props;\n  const { t } = useAnnouncementsTranslation();\n\n  return (\n    <Table>\n      <TableHeader>\n        <Column id=\"title\" isRowHeader>\n          {t('admin.categoriesContent.table.title')}\n        </Column>\n        <Column id=\"slug\">{t('admin.categoriesContent.table.slug')}</Column>\n        <Column id=\"actions\">\n          {t('admin.categoriesContent.table.actions')}\n        </Column>\n      </TableHeader>\n      <TableBody>\n        {data.length > 0 ? (\n          data.map(category => (\n            <CategoryTableRow\n              key={category.slug}\n              category={category}\n              onDeleteClick={onDeleteClick}\n            />\n          ))\n        ) : (\n          <CategoriesTableEmptyState />\n        )}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BA,MAAM,4BAA4B,MAAM;AACtC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,2BACG,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,KAAA,EAAO,EAAE,iDAAiD;AAAA;AAAA,GAE9D,EAAA,CAAA;AAEJ,CAAA;AAOA,MAAM,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AACzD,EAAM,MAAA,EAAE,QAAU,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEpC,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,QAAA,CAAS,KAAO,EAAA,CAAA;AAAA,oBAChC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,QAAA,CAAS,IAAM,EAAA,CAAA;AAAA,wBAC/B,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,sBAAO,eAAgB,EAAA,EAAA,CAAA;AAAA,QACvB,OAAQ,EAAA,UAAA;AAAA,QACR,OAAA,EAAS,MAAM,aAAA,CAAe,QAAQ;AAAA;AAAA,KAE1C,EAAA;AAAA,GAAA,EAAA,EATQ,SAAS,IAUnB,CAAA;AAEJ,CAAA;AAaa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,IAAM,EAAA,aAAA,EAAkB,GAAA,KAAA;AAChC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,4BACG,KACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAO,EAAG,EAAA,OAAA,EAAQ,aAAW,IAC3B,EAAA,QAAA,EAAA,CAAA,CAAE,qCAAqC,CAC1C,EAAA,CAAA;AAAA,0BACC,MAAO,EAAA,EAAA,EAAA,EAAG,MAAQ,EAAA,QAAA,EAAA,CAAA,CAAE,oCAAoC,CAAE,EAAA,CAAA;AAAA,0BAC1D,MAAO,EAAA,EAAA,EAAA,EAAG,SACR,EAAA,QAAA,EAAA,CAAA,CAAE,uCAAuC,CAC5C,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,wBACC,SACE,EAAA,EAAA,QAAA,EAAA,IAAA,CAAK,SAAS,CACb,GAAA,IAAA,CAAK,IAAI,CACP,QAAA,qBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QAEC,QAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,QAAS,CAAA;AAAA,KAIjB,CAAA,mBAEA,GAAA,CAAA,yBAAA,EAAA,EAA0B,CAE/B,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CategoriesTable.esm.js","sources":["../../../../../src/alpha/components/admin/categories/CategoriesTable.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport {\n  CellText,\n  Cell,\n  ButtonIcon,\n  Table,\n  useTable,\n  type ColumnConfig,\n  TableItem,\n  Text,\n} from '@backstage/ui';\nimport { RiDeleteBinLine } from '@remixicon/react';\n\nimport { Category } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport { useEffect } from 'react';\n\n/**\n * @internal\n */\ntype CategoriesTableProps = {\n  data: Category[];\n  onDeleteClick?: (category: Category) => void;\n};\n\ntype CategoryTableItem = TableItem & Category;\n\n/**\n * @internal\n */\nexport const CategoriesTable = (props: CategoriesTableProps) => {\n  const { data, onDeleteClick } = props;\n  const { t } = useAnnouncementsTranslation();\n\n  const columns: ColumnConfig<CategoryTableItem>[] = [\n    {\n      id: 'title',\n      label: t('admin.categoriesContent.table.title'),\n      isRowHeader: true,\n      cell: category => <CellText title={category.title} />,\n    },\n    {\n      id: 'slug',\n      label: t('admin.categoriesContent.table.slug'),\n      cell: category => <CellText title={category.slug} />,\n    },\n    {\n      id: 'actions',\n      label: t('admin.categoriesContent.table.actions'),\n      cell: category => (\n        <Cell>\n          <ButtonIcon\n            icon={<RiDeleteBinLine />}\n            variant=\"tertiary\"\n            onClick={() => onDeleteClick?.(category)}\n          />\n        </Cell>\n      ),\n    },\n  ];\n\n  const { tableProps, reload } = useTable({\n    mode: 'complete',\n    getData: () => data.map(category => ({ ...category, id: category.slug })),\n  });\n\n  useEffect(() => {\n    reload();\n  }, [data, reload]);\n\n  return (\n    <Table\n      columnConfig={columns}\n      emptyState={\n        <Text>{t('admin.categoriesContent.table.noCategoriesFound')}</Text>\n      }\n      {...tableProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA4Ca,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,IAAM,EAAA,aAAA,EAAkB,GAAA,KAAA;AAChC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,MAAM,OAA6C,GAAA;AAAA,IACjD;AAAA,MACE,EAAI,EAAA,OAAA;AAAA,MACJ,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,MAC9C,WAAa,EAAA,IAAA;AAAA,MACb,MAAM,CAAY,QAAA,qBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,SAAS,KAAO,EAAA;AAAA,KACrD;AAAA,IACA;AAAA,MACE,EAAI,EAAA,MAAA;AAAA,MACJ,KAAA,EAAO,EAAE,oCAAoC,CAAA;AAAA,MAC7C,MAAM,CAAY,QAAA,qBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,SAAS,IAAM,EAAA;AAAA,KACpD;AAAA,IACA;AAAA,MACE,EAAI,EAAA,SAAA;AAAA,MACJ,KAAA,EAAO,EAAE,uCAAuC,CAAA;AAAA,MAChD,IAAA,EAAM,CACJ,QAAA,qBAAA,GAAA,CAAC,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAA,sBAAO,eAAgB,EAAA,EAAA,CAAA;AAAA,UACvB,OAAQ,EAAA,UAAA;AAAA,UACR,OAAA,EAAS,MAAM,aAAA,GAAgB,QAAQ;AAAA;AAAA,OAE3C,EAAA;AAAA;AAEJ,GACF;AAEA,EAAA,MAAM,EAAE,UAAA,EAAY,MAAO,EAAA,GAAI,QAAS,CAAA;AAAA,IACtC,IAAM,EAAA,UAAA;AAAA,IACN,OAAA,EAAS,MAAM,IAAA,CAAK,GAAI,CAAA,CAAA,QAAA,MAAa,EAAE,GAAG,QAAU,EAAA,EAAA,EAAI,QAAS,CAAA,IAAA,EAAO,CAAA;AAAA,GACzE,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,MAAA,EAAA;AAAA,GACN,EAAA,CAAC,IAAM,EAAA,MAAM,CAAC,CAAA;AAEjB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAc,EAAA,OAAA;AAAA,MACd,UACE,kBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,QAAA,EAAA,CAAA,CAAE,iDAAiD,CAAE,EAAA,CAAA;AAAA,MAE7D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/alpha/components/admin/categories/CategoriesTableCard.esm.js

@@ -1,19 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
 import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
-import { Card, CardHeader, Flex, Text, Button, CardBody, CardFooter, TablePagination } from '@backstage/ui';
+import { Card, CardHeader, Flex, Text, Button, CardBody } from '@backstage/ui';
 import { CategoriesTable } from './CategoriesTable.esm.js';
 
 const CategoriesTableCard = (props) => {
   const { categories, onCreateClick, onDeleteClick, canCreate, canDelete } = props;
-  const [pageSize, setPageSize] = useState(5);
-  const [offset, setOffset] = useState(0);
   const { t } = useAnnouncementsTranslation();
-  const paginatedCategories = useMemo(() => {
-    const start = offset;
-    const end = offset + pageSize;
-    return categories.slice(start, end);
-  }, [categories, offset, pageSize]);
   const title = `${t("categoriesPage.title")} (${categories.length})`;
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
@@ -23,19 +15,9 @@ const CategoriesTableCard = (props) => {
     /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(
       CategoriesTable,
       {
-        data: paginatedCategories,
+        data: categories,
         onDeleteClick: canDelete ? onDeleteClick : void 0
       }
-    ) }),
-    categories.length > 0 && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
-      TablePagination,
-      {
-        offset,
-        pageSize,
-        setOffset,
-        setPageSize,
-        rowCount: categories.length
-      }
     ) })
   ] });
 };

package/dist/alpha/components/admin/categories/CategoriesTableCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTableCard.esm.js","sources":["../../../../../src/alpha/components/admin/categories/CategoriesTableCard.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useMemo } from 'react';\nimport { Category } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport {\n  Button,\n  TablePagination,\n  Card,\n  CardBody,\n  CardFooter,\n  CardHeader,\n  Text,\n  Flex,\n} from '@backstage/ui';\n\nimport { CategoriesTable } from './CategoriesTable';\n\n/**\n * @internal\n */\ntype CategoriesTableCardProps = {\n  categories: Category[];\n  onCreateClick: () => void;\n  onDeleteClick: (category: Category) => void;\n  canCreate: boolean;\n  canDelete: boolean;\n};\n\n/**\n * @internal\n */\nexport const CategoriesTableCard = (props: CategoriesTableCardProps) => {\n  const { categories, onCreateClick, onDeleteClick, canCreate, canDelete } =\n    props;\n\n  const [pageSize, setPageSize] = useState(5);\n  const [offset, setOffset] = useState(0);\n  const { t } = useAnnouncementsTranslation();\n\n  const paginatedCategories = useMemo(() => {\n    const start = offset;\n    const end = offset + pageSize;\n    return categories.slice(start, end);\n  }, [categories, offset, pageSize]);\n\n  const title = `${t('categoriesPage.title')} (${categories.length})`;\n\n  return (\n    <Card>\n      <CardHeader>\n        <Flex justify=\"between\" align=\"center\">\n          <Text variant=\"title-x-small\">{title}</Text>\n          <Button isDisabled={!canCreate} onClick={onCreateClick}>\n            {t('admin.categoriesContent.createButton')}\n          </Button>\n        </Flex>\n      </CardHeader>\n\n      <CardBody>\n        <CategoriesTable\n          data={paginatedCategories}\n          onDeleteClick={canDelete ? onDeleteClick : undefined}\n        />\n      </CardBody>\n\n      {categories.length > 0 && (\n        <CardFooter>\n          <TablePagination\n            offset={offset}\n            pageSize={pageSize}\n            setOffset={setOffset}\n            setPageSize={setPageSize}\n            rowCount={categories.length}\n          />\n        </CardFooter>\n      )}\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6Ca,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAA,MAAM,EAAE,UAAY,EAAA,aAAA,EAAe,aAAe,EAAA,SAAA,EAAW,WAC3D,GAAA,KAAA;AAEF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,CAAC,CAAA;AAC1C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,CAAC,CAAA;AACtC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAM,MAAA,mBAAA,GAAsB,QAAQ,MAAM;AACxC,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,MAAM,MAAS,GAAA,QAAA;AACrB,IAAO,OAAA,UAAA,CAAW,KAAM,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,GACjC,EAAA,CAAC,UAAY,EAAA,MAAA,EAAQ,QAAQ,CAAC,CAAA;AAEjC,EAAA,MAAM,QAAQ,CAAG,EAAA,CAAA,CAAE,sBAAsB,CAAC,CAAA,EAAA,EAAK,WAAW,MAAM,CAAA,CAAA,CAAA;AAEhE,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,SAAA,EAAU,OAAM,QAC5B,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAiB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBACrC,GAAA,CAAC,UAAO,UAAY,EAAA,CAAC,WAAW,OAAS,EAAA,aAAA,EACtC,QAAE,EAAA,CAAA,CAAA,sCAAsC,CAC3C,EAAA;AAAA,KAAA,EACF,CACF,EAAA,CAAA;AAAA,wBAEC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,mBAAA;AAAA,QACN,aAAA,EAAe,YAAY,aAAgB,GAAA,KAAA;AAAA;AAAA,KAE/C,EAAA,CAAA;AAAA,IAEC,UAAW,CAAA,MAAA,GAAS,CACnB,oBAAA,GAAA,CAAC,UACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAU,UAAW,CAAA;AAAA;AAAA,KAEzB,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CategoriesTableCard.esm.js","sources":["../../../../../src/alpha/components/admin/categories/CategoriesTableCard.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Category } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport { Button, Card, CardBody, CardHeader, Text, Flex } from '@backstage/ui';\n\nimport { CategoriesTable } from './CategoriesTable';\n\n/**\n * @internal\n */\ntype CategoriesTableCardProps = {\n  categories: Category[];\n  onCreateClick: () => void;\n  onDeleteClick: (category: Category) => void;\n  canCreate: boolean;\n  canDelete: boolean;\n};\n\n/**\n * @internal\n */\nexport const CategoriesTableCard = (props: CategoriesTableCardProps) => {\n  const { categories, onCreateClick, onDeleteClick, canCreate, canDelete } =\n    props;\n\n  const { t } = useAnnouncementsTranslation();\n\n  const title = `${t('categoriesPage.title')} (${categories.length})`;\n\n  return (\n    <Card>\n      <CardHeader>\n        <Flex justify=\"between\" align=\"center\">\n          <Text variant=\"title-x-small\">{title}</Text>\n          <Button isDisabled={!canCreate} onClick={onCreateClick}>\n            {t('admin.categoriesContent.createButton')}\n          </Button>\n        </Flex>\n      </CardHeader>\n\n      <CardBody>\n        <CategoriesTable\n          data={categories}\n          onDeleteClick={canDelete ? onDeleteClick : undefined}\n        />\n      </CardBody>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmCa,MAAA,mBAAA,GAAsB,CAAC,KAAoC,KAAA;AACtE,EAAA,MAAM,EAAE,UAAY,EAAA,aAAA,EAAe,aAAe,EAAA,SAAA,EAAW,WAC3D,GAAA,KAAA;AAEF,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,MAAM,QAAQ,CAAG,EAAA,CAAA,CAAE,sBAAsB,CAAC,CAAA,EAAA,EAAK,WAAW,MAAM,CAAA,CAAA,CAAA;AAEhE,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,SAAA,EAAU,OAAM,QAC5B,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,eAAA,EAAiB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBACrC,GAAA,CAAC,UAAO,UAAY,EAAA,CAAC,WAAW,OAAS,EAAA,aAAA,EACtC,QAAE,EAAA,CAAA,CAAA,sCAAsC,CAC3C,EAAA;AAAA,KAAA,EACF,CACF,EAAA,CAAA;AAAA,wBAEC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,UAAA;AAAA,QACN,aAAA,EAAe,YAAY,aAAgB,GAAA,KAAA;AAAA;AAAA,KAE/C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}