@backstage-community/plugin-announcements 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @backstage-community/plugin-announcements
 
+## 1.3.0
+
+### Minor Changes
+
+- b9c2943: Backstage version bump to v1.46.1
+
+### Patch Changes
+
+- ce95092: The core announcements page end users visit has been rewritten with `@backstage/ui` for users on the new frontend system. Users on the existing frontend system will not see any changes.
+- 699c87f: Updated dependency `cross-fetch` to `4.1.0`.
+- fb4ae44: The category and tag content tabs in the admin portal have been rewritten with `@backstage/ui` for users on the new frontend system. Users on the existing frontend system will not see any changes.
+- Updated dependencies [d5dc6b3]
+- Updated dependencies [ce95092]
+- Updated dependencies [b9c2943]
+  - @backstage-community/plugin-announcements-react@0.18.0
+  - @backstage-community/plugin-announcements-common@0.15.0
+
+## 1.2.0
+
+### Minor Changes
+
+- 411e4c6: Backstage version bump to v1.46.0.
+  This release includes fix for frontend error `Package subpath './' is not defined by "exports"`.
+
+### Patch Changes
+
+- 0768c4e: - New dedicated routes to the admin portal (`/announcements/admin`, `/announcements/admin/categories`, `/announcements/admin/tags`)
+
+  - The exported `AnnouncementsTimeline` and `AnnouncementsAdminPortal` components have been deprecated as they will not be migrated to the new frontend system. Please see each component's deprecation notice for more details.
+
+  ### New frontend system + @backstage/ui updates
+
+  We are rebuilding several major components of the announcements plugin from scratch leveraging the `@backstage/ui` library. To start, the admin portal now leverages the new header component from the `@backstage/ui` library. Users who have migrated to the new frontend system will gradually receive these until the plugin is fully migrated. Users on the existing frontend system will not see any changes.
+
+- Updated dependencies [411e4c6]
+  - @backstage-community/plugin-announcements-common@0.14.0
+  - @backstage-community/plugin-announcements-react@0.17.0
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/alpha/Router.esm.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Routes, Route } from 'react-router-dom';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+import { announcementCreatePermission } from '@backstage-community/plugin-announcements-common';
+import { AnnouncementsAdminPage } from './components/admin/AnnouncementsAdminPage.esm.js';
+import { CategoriesContent } from './components/admin/categories/CategoriesContent.esm.js';
+import { TagsContent } from './components/admin/tags/TagsContent.esm.js';
+import { AnnouncementsPage } from './components/announcements/AnnouncementsPage.esm.js';
+import { ViewAnnouncementPage } from './components/announcements/ViewAnnouncementPage.esm.js';
+import '@backstage/core-plugin-api';
+import 'luxon';
+import '@backstage-community/plugin-announcements-react';
+import '@backstage/core-components';
+import '@material-ui/lab';
+import '@material-ui/core';
+import '@mui/material/Stack';
+import '../routes.esm.js';
+import '../components/Admin/AdminPortal/AdminPortal.esm.js';
+import { AnnouncementsContent } from '../components/Admin/AnnouncementsContent/AnnouncementsContent.esm.js';
+import '../components/MarkdownRenderer/MarkdownRenderer.esm.js';
+
+const Router = (props) => {
+  const propsWithDefaults = {
+    title: "Announcements",
+    hideInactive: false,
+    hideStartAt: false,
+    markdownRenderer: "backstage",
+    ...props
+  };
+  return /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { path: "/", element: /* @__PURE__ */ jsx(AnnouncementsPage, { ...propsWithDefaults }) }),
+    /* @__PURE__ */ jsx(
+      Route,
+      {
+        path: "/view/:id",
+        element: /* @__PURE__ */ jsx(
+          ViewAnnouncementPage,
+          {
+            markdownRenderer: propsWithDefaults.markdownRenderer,
+            title: propsWithDefaults.title
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Route,
+      {
+        path: "/admin",
+        element: /* @__PURE__ */ jsx(RequirePermission, { permission: announcementCreatePermission, children: /* @__PURE__ */ jsx(
+          AnnouncementsAdminPage,
+          {
+            title: props.title,
+            defaultInactive: props.defaultInactive
+          }
+        ) }),
+        children: [
+          /* @__PURE__ */ jsx(
+            Route,
+            {
+              path: "",
+              element: /* @__PURE__ */ jsx(AnnouncementsContent, { defaultInactive: props.defaultInactive })
+            }
+          ),
+          /* @__PURE__ */ jsx(Route, { path: "categories", element: /* @__PURE__ */ jsx(CategoriesContent, {}) }),
+          /* @__PURE__ */ jsx(Route, { path: "tags", element: /* @__PURE__ */ jsx(TagsContent, {}) })
+        ]
+      }
+    )
+  ] });
+};
+
+export { Router };
+//# sourceMappingURL=Router.esm.js.map

package/dist/alpha/Router.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.esm.js","sources":["../../src/alpha/Router.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 { Routes, Route } from 'react-router-dom';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { announcementCreatePermission } from '@backstage-community/plugin-announcements-common';\nimport {\n  AnnouncementsAdminPage,\n  CategoriesContent,\n  TagsContent,\n  AnnouncementsPage,\n  AnnouncementsPageProps,\n  ViewAnnouncementPage,\n} from './components';\n\n// todo: pending rebuild for nfs with `@backstage/ui`\nimport { AnnouncementsContent, MarkdownRendererTypeProps } from '../components';\n\ntype RouterProps = {\n  title?: string;\n  category?: string;\n  hideInactive?: boolean;\n  hideStartAt?: boolean;\n  markdownRenderer?: MarkdownRendererTypeProps;\n  defaultInactive?: boolean;\n};\n\nexport const Router = (props: RouterProps) => {\n  const propsWithDefaults: AnnouncementsPageProps = {\n    title: 'Announcements',\n    hideInactive: false,\n    hideStartAt: false,\n    markdownRenderer: 'backstage',\n    ...props,\n  };\n\n  return (\n    <Routes>\n      <Route path=\"/\" element={<AnnouncementsPage {...propsWithDefaults} />} />\n      <Route\n        path=\"/view/:id\"\n        element={\n          <ViewAnnouncementPage\n            markdownRenderer={propsWithDefaults.markdownRenderer}\n            title={propsWithDefaults.title}\n          />\n        }\n      />\n      <Route\n        path=\"/admin\"\n        element={\n          <RequirePermission permission={announcementCreatePermission}>\n            <AnnouncementsAdminPage\n              title={props.title}\n              defaultInactive={props.defaultInactive}\n            />\n          </RequirePermission>\n        }\n      >\n        <Route\n          path=\"\"\n          element={\n            <AnnouncementsContent defaultInactive={props.defaultInactive} />\n          }\n        />\n        <Route path=\"categories\" element={<CategoriesContent />} />\n        <Route path=\"tags\" element={<TagsContent />} />\n      </Route>\n    </Routes>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAA,MAAM,iBAA4C,GAAA;AAAA,IAChD,KAAO,EAAA,eAAA;AAAA,IACP,YAAc,EAAA,KAAA;AAAA,IACd,WAAa,EAAA,KAAA;AAAA,IACb,gBAAkB,EAAA,WAAA;AAAA,IAClB,GAAG;AAAA,GACL;AAEA,EAAA,4BACG,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,KAAA,EAAA,EAAM,MAAK,GAAI,EAAA,OAAA,sBAAU,iBAAmB,EAAA,EAAA,GAAG,mBAAmB,CAAI,EAAA,CAAA;AAAA,oBACvE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,WAAA;AAAA,QACL,OACE,kBAAA,GAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,kBAAkB,iBAAkB,CAAA,gBAAA;AAAA,YACpC,OAAO,iBAAkB,CAAA;AAAA;AAAA;AAC3B;AAAA,KAEJ;AAAA,oBACA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,OACE,kBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,UAAA,EAAY,4BAC7B,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,sBAAA;AAAA,UAAA;AAAA,YACC,OAAO,KAAM,CAAA,KAAA;AAAA,YACb,iBAAiB,KAAM,CAAA;AAAA;AAAA,SAE3B,EAAA,CAAA;AAAA,QAGF,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAK,EAAA,EAAA;AAAA,cACL,OACE,kBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,eAAA,EAAiB,MAAM,eAAiB,EAAA;AAAA;AAAA,WAElE;AAAA,8BACC,KAAM,EAAA,EAAA,IAAA,EAAK,cAAa,OAAS,kBAAA,GAAA,CAAC,qBAAkB,CAAI,EAAA,CAAA;AAAA,8BACxD,KAAM,EAAA,EAAA,IAAA,EAAK,QAAO,OAAS,kBAAA,GAAA,CAAC,eAAY,CAAI,EAAA;AAAA;AAAA;AAAA;AAC/C,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/admin/AnnouncementsAdminPage.esm.js

@@ -0,0 +1,43 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { HeaderPage, Container } from '@backstage/ui';
+import { Outlet } from 'react-router-dom';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { rootRouteRef, announcementAdminRouteRef, adminCategoriesRouteRef, adminTagsRouteRef } from '../../../routes.esm.js';
+
+function AnnouncementsAdminPage(props) {
+  const { title } = props;
+  const announcementsRoute = useRouteRef(rootRouteRef);
+  const adminRoute = useRouteRef(announcementAdminRouteRef);
+  const adminCategoriesRoute = useRouteRef(adminCategoriesRouteRef);
+  const adminTagsRoute = useRouteRef(adminTagsRouteRef);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      HeaderPage,
+      {
+        title: title ?? "Admin Portal",
+        breadcrumbs: [{ label: "Announcements", href: announcementsRoute() }],
+        tabs: [
+          {
+            id: "announcements",
+            label: "Announcements",
+            href: adminRoute()
+          },
+          {
+            id: "categories",
+            label: "Categories",
+            href: adminCategoriesRoute()
+          },
+          {
+            id: "tags",
+            label: "Tags",
+            href: adminTagsRoute()
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Container, { "data-testid": "announcements-admin-page-container-outlet", children: /* @__PURE__ */ jsx(Outlet, {}) })
+  ] });
+}
+
+export { AnnouncementsAdminPage };
+//# sourceMappingURL=AnnouncementsAdminPage.esm.js.map

package/dist/alpha/components/admin/AnnouncementsAdminPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementsAdminPage.esm.js","sources":["../../../../src/alpha/components/admin/AnnouncementsAdminPage.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 { Container, HeaderPage } from '@backstage/ui';\nimport { Outlet } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport {\n  adminCategoriesRouteRef,\n  announcementAdminRouteRef,\n  adminTagsRouteRef,\n  rootRouteRef,\n} from '../../../routes';\n\nexport type AnnouncementsAdminPageProps = {\n  title?: string;\n  defaultInactive?: boolean;\n};\n\nexport function AnnouncementsAdminPage(props: AnnouncementsAdminPageProps) {\n  const { title } = props;\n\n  const announcementsRoute = useRouteRef(rootRouteRef);\n  const adminRoute = useRouteRef(announcementAdminRouteRef);\n  const adminCategoriesRoute = useRouteRef(adminCategoriesRouteRef);\n  const adminTagsRoute = useRouteRef(adminTagsRouteRef);\n\n  return (\n    <>\n      <HeaderPage\n        title={title ?? 'Admin Portal'}\n        breadcrumbs={[{ label: 'Announcements', href: announcementsRoute() }]}\n        tabs={[\n          {\n            id: 'announcements',\n            label: 'Announcements',\n            href: adminRoute(),\n          },\n          {\n            id: 'categories',\n            label: 'Categories',\n            href: adminCategoriesRoute(),\n          },\n          {\n            id: 'tags',\n            label: 'Tags',\n            href: adminTagsRoute(),\n          },\n        ]}\n      />\n\n      <Container data-testid=\"announcements-admin-page-container-outlet\">\n        <Outlet />\n      </Container>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA8BO,SAAS,uBAAuB,KAAoC,EAAA;AACzE,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAElB,EAAM,MAAA,kBAAA,GAAqB,YAAY,YAAY,CAAA;AACnD,EAAM,MAAA,UAAA,GAAa,YAAY,yBAAyB,CAAA;AACxD,EAAM,MAAA,oBAAA,GAAuB,YAAY,uBAAuB,CAAA;AAChE,EAAM,MAAA,cAAA,GAAiB,YAAY,iBAAiB,CAAA;AAEpD,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,KAAS,IAAA,cAAA;AAAA,QAChB,WAAA,EAAa,CAAC,EAAE,KAAA,EAAO,iBAAiB,IAAM,EAAA,kBAAA,IAAsB,CAAA;AAAA,QACpE,IAAM,EAAA;AAAA,UACJ;AAAA,YACE,EAAI,EAAA,eAAA;AAAA,YACJ,KAAO,EAAA,eAAA;AAAA,YACP,MAAM,UAAW;AAAA,WACnB;AAAA,UACA;AAAA,YACE,EAAI,EAAA,YAAA;AAAA,YACJ,KAAO,EAAA,YAAA;AAAA,YACP,MAAM,oBAAqB;AAAA,WAC7B;AAAA,UACA;AAAA,YACE,EAAI,EAAA,MAAA;AAAA,YACJ,KAAO,EAAA,MAAA;AAAA,YACP,MAAM,cAAe;AAAA;AACvB;AACF;AAAA,KACF;AAAA,wBAEC,SAAU,EAAA,EAAA,aAAA,EAAY,2CACrB,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,CACV,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,105 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { announcementsApiRef, useAnnouncementsTranslation, useAnnouncementsPermissions, useCategories } from '@backstage-community/plugin-announcements-react';
+import { useDeleteConfirmationDialogState } from '../shared/DeleteConfirmationDialog/useDeleteConfirmationDialogState.esm.js';
+import { DeleteConfirmationDialog } from '../shared/DeleteConfirmationDialog/DeleteConfirmationDialog.esm.js';
+import '@backstage/ui';
+import { CreateCatagoryDialog } from './CreateCatagoryDialog.esm.js';
+import { CategoriesTableCard } from './CategoriesTableCard.esm.js';
+
+const CategoriesContent = () => {
+  const announcementsApi = useApi(announcementsApiRef);
+  const alertApi = useApi(alertApiRef);
+  const [showNewCategoryForm, setShowNewCategoryForm] = useState(false);
+  const { t } = useAnnouncementsTranslation();
+  const permissions = useAnnouncementsPermissions();
+  const { categories, retry: refresh } = useCategories();
+  const {
+    isOpen: isDeleteDialogOpen,
+    close: closeDeleteDialog,
+    open: openDeleteDialog,
+    item: categoryToDelete
+  } = useDeleteConfirmationDialogState();
+  const onConfirmCreate = async (request) => {
+    const { title } = request;
+    try {
+      await announcementsApi.createCategory({
+        title
+      });
+      alertApi.post({
+        message: `${title} ${t("admin.categoriesContent.createdMessage")}`,
+        severity: "success"
+      });
+      setShowNewCategoryForm(false);
+      refresh();
+    } catch (err) {
+      alertApi.post({ message: err.message, severity: "error" });
+    }
+  };
+  const onCreateButtonClick = () => {
+    setShowNewCategoryForm(true);
+  };
+  const onCancelCreate = () => {
+    setShowNewCategoryForm(false);
+  };
+  const onCancelDelete = () => {
+    closeDeleteDialog();
+  };
+  const onConfirmDelete = async () => {
+    closeDeleteDialog();
+    try {
+      await announcementsApi.deleteCategory(categoryToDelete.slug);
+      alertApi.post({
+        message: t("admin.categoriesContent.table.categoryDeleted"),
+        severity: "success"
+      });
+    } catch (err) {
+      alertApi.post({
+        message: err.body.error.message,
+        severity: "error"
+      });
+    }
+    refresh();
+  };
+  const onDeleteClick = (category) => {
+    openDeleteDialog(category);
+  };
+  const canCreate = !permissions.create.loading && permissions.create.allowed;
+  const canDelete = !permissions.delete.loading && permissions.delete.allowed;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CategoriesTableCard,
+      {
+        categories: categories ?? [],
+        onCreateClick: onCreateButtonClick,
+        onDeleteClick,
+        canCreate,
+        canDelete
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreateCatagoryDialog,
+      {
+        open: showNewCategoryForm,
+        onConfirm: onConfirmCreate,
+        onCancel: onCancelCreate,
+        canSubmit: canCreate
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteConfirmationDialog,
+      {
+        type: "category",
+        itemTitle: categoryToDelete?.title,
+        open: isDeleteDialogOpen,
+        onCancel: onCancelDelete,
+        onConfirm: onConfirmDelete,
+        canDelete
+      }
+    )
+  ] });
+};
+
+export { CategoriesContent };
+//# sourceMappingURL=CategoriesContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesContent.esm.js","sources":["../../../../../src/alpha/components/admin/categories/CategoriesContent.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 } from 'react';\nimport { useApi, alertApiRef } from '@backstage/core-plugin-api';\nimport { ResponseError } from '@backstage/errors';\nimport {\n  CreateCategoryRequest,\n  announcementsApiRef,\n  useAnnouncementsTranslation,\n  useCategories,\n  useAnnouncementsPermissions,\n} from '@backstage-community/plugin-announcements-react';\nimport { Category } from '@backstage-community/plugin-announcements-common';\n\nimport {\n  useDeleteConfirmationDialogState,\n  DeleteConfirmationDialog,\n} from '../shared';\nimport { CreateCatagoryDialog } from './CreateCatagoryDialog';\nimport { CategoriesTableCard } from './CategoriesTableCard';\n\n/**\n * @internal\n */\nexport const CategoriesContent = () => {\n  const announcementsApi = useApi(announcementsApiRef);\n  const alertApi = useApi(alertApiRef);\n\n  const [showNewCategoryForm, setShowNewCategoryForm] = useState(false);\n  const { t } = useAnnouncementsTranslation();\n  const permissions = useAnnouncementsPermissions();\n\n  const { categories, retry: refresh } = useCategories();\n\n  const {\n    isOpen: isDeleteDialogOpen,\n    close: closeDeleteDialog,\n    open: openDeleteDialog,\n    item: categoryToDelete,\n  } = useDeleteConfirmationDialogState<Category>();\n\n  const onConfirmCreate = async (request: CreateCategoryRequest) => {\n    const { title } = request;\n\n    try {\n      await announcementsApi.createCategory({\n        title,\n      });\n\n      alertApi.post({\n        message: `${title} ${t('admin.categoriesContent.createdMessage')}`,\n        severity: 'success',\n      });\n\n      setShowNewCategoryForm(false);\n      refresh();\n    } catch (err) {\n      alertApi.post({ message: (err as Error).message, severity: 'error' });\n    }\n  };\n\n  const onCreateButtonClick = () => {\n    setShowNewCategoryForm(true);\n  };\n\n  const onCancelCreate = () => {\n    setShowNewCategoryForm(false);\n  };\n\n  const onCancelDelete = () => {\n    closeDeleteDialog();\n  };\n\n  const onConfirmDelete = async () => {\n    closeDeleteDialog();\n\n    try {\n      await announcementsApi.deleteCategory(categoryToDelete!.slug);\n\n      alertApi.post({\n        message: t('admin.categoriesContent.table.categoryDeleted'),\n        severity: 'success',\n      });\n    } catch (err) {\n      alertApi.post({\n        message: (err as ResponseError).body.error.message,\n        severity: 'error',\n      });\n    }\n\n    refresh();\n  };\n\n  const onDeleteClick = (category: Category) => {\n    openDeleteDialog(category);\n  };\n\n  const canCreate = !permissions.create.loading && permissions.create.allowed;\n  const canDelete = !permissions.delete.loading && permissions.delete.allowed;\n\n  return (\n    <>\n      <CategoriesTableCard\n        categories={categories ?? []}\n        onCreateClick={onCreateButtonClick}\n        onDeleteClick={onDeleteClick}\n        canCreate={canCreate}\n        canDelete={canDelete}\n      />\n\n      <CreateCatagoryDialog\n        open={showNewCategoryForm}\n        onConfirm={onConfirmCreate}\n        onCancel={onCancelCreate}\n        canSubmit={canCreate}\n      />\n\n      <DeleteConfirmationDialog\n        type=\"category\"\n        itemTitle={categoryToDelete?.title}\n        open={isDeleteDialogOpen}\n        onCancel={onCancelDelete}\n        onConfirm={onConfirmDelete}\n        canDelete={canDelete}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqCO,MAAM,oBAAoB,MAAM;AACrC,EAAM,MAAA,gBAAA,GAAmB,OAAO,mBAAmB,CAAA;AACnD,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AAEnC,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAAS,KAAK,CAAA;AACpE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAC1C,EAAA,MAAM,cAAc,2BAA4B,EAAA;AAEhD,EAAA,MAAM,EAAE,UAAA,EAAY,KAAO,EAAA,OAAA,KAAY,aAAc,EAAA;AAErD,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA,kBAAA;AAAA,IACR,KAAO,EAAA,iBAAA;AAAA,IACP,IAAM,EAAA,gBAAA;AAAA,IACN,IAAM,EAAA;AAAA,MACJ,gCAA2C,EAAA;AAE/C,EAAM,MAAA,eAAA,GAAkB,OAAO,OAAmC,KAAA;AAChE,IAAM,MAAA,EAAE,OAAU,GAAA,OAAA;AAElB,IAAI,IAAA;AACF,MAAA,MAAM,iBAAiB,cAAe,CAAA;AAAA,QACpC;AAAA,OACD,CAAA;AAED,MAAA,QAAA,CAAS,IAAK,CAAA;AAAA,QACZ,SAAS,CAAG,EAAA,KAAK,CAAI,CAAA,EAAA,CAAA,CAAE,wCAAwC,CAAC,CAAA,CAAA;AAAA,QAChE,QAAU,EAAA;AAAA,OACX,CAAA;AAED,MAAA,sBAAA,CAAuB,KAAK,CAAA;AAC5B,MAAQ,OAAA,EAAA;AAAA,aACD,GAAK,EAAA;AACZ,MAAA,QAAA,CAAS,KAAK,EAAE,OAAA,EAAU,IAAc,OAAS,EAAA,QAAA,EAAU,SAAS,CAAA;AAAA;AACtE,GACF;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,sBAAA,CAAuB,IAAI,CAAA;AAAA,GAC7B;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,sBAAA,CAAuB,KAAK,CAAA;AAAA,GAC9B;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAkB,iBAAA,EAAA;AAAA,GACpB;AAEA,EAAA,MAAM,kBAAkB,YAAY;AAClC,IAAkB,iBAAA,EAAA;AAElB,IAAI,IAAA;AACF,MAAM,MAAA,gBAAA,CAAiB,cAAe,CAAA,gBAAA,CAAkB,IAAI,CAAA;AAE5D,MAAA,QAAA,CAAS,IAAK,CAAA;AAAA,QACZ,OAAA,EAAS,EAAE,+CAA+C,CAAA;AAAA,QAC1D,QAAU,EAAA;AAAA,OACX,CAAA;AAAA,aACM,GAAK,EAAA;AACZ,MAAA,QAAA,CAAS,IAAK,CAAA;AAAA,QACZ,OAAA,EAAU,GAAsB,CAAA,IAAA,CAAK,KAAM,CAAA,OAAA;AAAA,QAC3C,QAAU,EAAA;AAAA,OACX,CAAA;AAAA;AAGH,IAAQ,OAAA,EAAA;AAAA,GACV;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,QAAuB,KAAA;AAC5C,IAAA,gBAAA,CAAiB,QAAQ,CAAA;AAAA,GAC3B;AAEA,EAAA,MAAM,YAAY,CAAC,WAAA,CAAY,MAAO,CAAA,OAAA,IAAW,YAAY,MAAO,CAAA,OAAA;AACpE,EAAA,MAAM,YAAY,CAAC,WAAA,CAAY,MAAO,CAAA,OAAA,IAAW,YAAY,MAAO,CAAA,OAAA;AAEpE,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,cAAc,EAAC;AAAA,QAC3B,aAAe,EAAA,mBAAA;AAAA,QACf,aAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oBAEA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,mBAAA;AAAA,QACN,SAAW,EAAA,eAAA;AAAA,QACX,QAAU,EAAA,cAAA;AAAA,QACV,SAAW,EAAA;AAAA;AAAA,KACb;AAAA,oBAEA,GAAA;AAAA,MAAC,wBAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,WAAW,gBAAkB,EAAA,KAAA;AAAA,QAC7B,IAAM,EAAA,kBAAA;AAAA,QACN,QAAU,EAAA,cAAA;AAAA,QACV,SAAW,EAAA,eAAA;AAAA,QACX;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Table, TableHeader, Column, TableBody, Row, CellText, Cell, ButtonIcon } from '@backstage/ui';
+import { RiDeleteBinLine } from '@remixicon/react';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-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, {}) })
+  ] });
+};
+
+export { CategoriesTable };
+//# sourceMappingURL=CategoriesTable.esm.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,44 @@
+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 { 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: [
+      /* @__PURE__ */ jsx(Text, { variant: "title-x-small", children: title }),
+      /* @__PURE__ */ jsx(Button, { isDisabled: !canCreate, onClick: onCreateClick, children: t("admin.categoriesContent.createButton") })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(
+      CategoriesTable,
+      {
+        data: paginatedCategories,
+        onDeleteClick: canDelete ? onDeleteClick : void 0
+      }
+    ) }),
+    categories.length > 0 && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
+      TablePagination,
+      {
+        offset,
+        pageSize,
+        setOffset,
+        setPageSize,
+        rowCount: categories.length
+      }
+    ) })
+  ] });
+};
+
+export { CategoriesTableCard };
+//# sourceMappingURL=CategoriesTableCard.esm.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import 'react';
+import '@backstage/ui';
+import { CreateTitleDialog } from '../shared/CreateTitleDialog/CreateTitleDialog.esm.js';
+
+const CreateCatagoryDialog = (props) => {
+  const { open, onConfirm, onCancel, canSubmit } = props;
+  const { t } = useAnnouncementsTranslation();
+  const translationKeys = {
+    new: t("categoriesForm.newCategory"),
+    edit: t("categoriesForm.editCategory"),
+    titleLabel: t("categoriesForm.titleLabel"),
+    submit: t("categoriesForm.submit"),
+    cancel: t("admin.categoriesContent.cancelButton")
+  };
+  return /* @__PURE__ */ jsx(
+    CreateTitleDialog,
+    {
+      open,
+      onCancel,
+      translationKeys,
+      onSubmit: onConfirm,
+      canSubmit
+    }
+  );
+};
+
+export { CreateCatagoryDialog };
+//# sourceMappingURL=CreateCatagoryDialog.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateCatagoryDialog.esm.js","sources":["../../../../../src/alpha/components/admin/categories/CreateCatagoryDialog.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 */\n\nimport {\n  CreateCategoryRequest,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport { CreateTitleDialog } from '../shared';\n\n/**\n * @internal\n */\ntype CreateCatagoryDialogProps = {\n  open: boolean;\n  onConfirm: (request: CreateCategoryRequest) => Promise<void>;\n  onCancel: () => void;\n  canSubmit?: boolean;\n};\n\n/**\n * @internal\n */\nexport const CreateCatagoryDialog = (props: CreateCatagoryDialogProps) => {\n  const { open, onConfirm, onCancel, canSubmit } = props;\n\n  const { t } = useAnnouncementsTranslation();\n\n  const translationKeys = {\n    new: t('categoriesForm.newCategory'),\n    edit: t('categoriesForm.editCategory'),\n    titleLabel: t('categoriesForm.titleLabel'),\n    submit: t('categoriesForm.submit'),\n    cancel: t('admin.categoriesContent.cancelButton'),\n  };\n\n  return (\n    <CreateTitleDialog<CreateCategoryRequest>\n      open={open}\n      onCancel={onCancel}\n      translationKeys={translationKeys}\n      onSubmit={onConfirm}\n      canSubmit={canSubmit}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAmCa,MAAA,oBAAA,GAAuB,CAAC,KAAqC,KAAA;AACxE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAW,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA;AAEjD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,MAAM,eAAkB,GAAA;AAAA,IACtB,GAAA,EAAK,EAAE,4BAA4B,CAAA;AAAA,IACnC,IAAA,EAAM,EAAE,6BAA6B,CAAA;AAAA,IACrC,UAAA,EAAY,EAAE,2BAA2B,CAAA;AAAA,IACzC,MAAA,EAAQ,EAAE,uBAAuB,CAAA;AAAA,IACjC,MAAA,EAAQ,EAAE,sCAAsC;AAAA,GAClD;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,SAAA;AAAA,MACV;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/alpha/components/admin/shared/CreateTitleDialog/CreateTitleDialog.esm.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { DialogTrigger, Dialog, DialogHeader, DialogBody, TextField, DialogFooter, Button } from '@backstage/ui';
+
+const CreateTitleDialog = (props) => {
+  const {
+    initialData,
+    translationKeys,
+    onSubmit,
+    open,
+    onCancel,
+    testIds,
+    canSubmit
+  } = props;
+  const [form, setForm] = useState(initialData ?? { title: "" });
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setForm(initialData ?? { title: "" });
+    }
+  }, [open, initialData]);
+  const handleSubmit = async (event) => {
+    setLoading(true);
+    event.preventDefault();
+    try {
+      await onSubmit(form);
+      onCancel();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const isDisabled = useMemo(() => {
+    return loading || !form?.title || canSubmit === false;
+  }, [loading, form?.title, canSubmit]);
+  return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      isOpen: open,
+      isDismissable: true,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          onCancel();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: initialData?.title ? translationKeys.edit : translationKeys.new }),
+        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            id: testIds?.form ?? "title-form",
+            "data-testid": testIds?.form ?? "title-form",
+            children: /* @__PURE__ */ jsx(
+              TextField,
+              {
+                id: "title",
+                "data-testid": testIds?.input ?? "title-input",
+                type: "text",
+                label: translationKeys.titleLabel,
+                value: form.title,
+                onChange: (e) => setForm((prev) => ({ ...prev, title: e })),
+                isRequired: true
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              type: "submit",
+              form: testIds?.form ?? "title-form",
+              "data-testid": testIds?.button ?? "title-submit-button",
+              isDisabled,
+              children: translationKeys.submit
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: onCancel, variant: "secondary", slot: "close", children: translationKeys.cancel ?? "Cancel" })
+        ] })
+      ]
+    }
+  ) });
+};
+
+export { CreateTitleDialog };
+//# sourceMappingURL=CreateTitleDialog.esm.js.map

package/dist/alpha/components/admin/shared/CreateTitleDialog/CreateTitleDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateTitleDialog.esm.js","sources":["../../../../../../src/alpha/components/admin/shared/CreateTitleDialog/CreateTitleDialog.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 { FormEvent, useEffect, useMemo, useState } from 'react';\nimport {\n  Button,\n  TextField,\n  Dialog,\n  DialogTrigger,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n} from '@backstage/ui';\n\ntype CreateTitleDialogTranslationKeys = {\n  new: string;\n  edit: string;\n  titleLabel: string;\n  submit: string;\n  cancel?: string;\n};\n\ntype CreateTitleDialogTestIds = {\n  form?: string;\n  input?: string;\n  button?: string;\n};\n\nexport type CreateTitleDialogRequest = {\n  title: string;\n};\n\nexport type CreateTitleDialogProps<T extends CreateTitleDialogRequest> = {\n  initialData?: T;\n  translationKeys: CreateTitleDialogTranslationKeys;\n  onSubmit: (data: T) => Promise<void>;\n  open: boolean;\n  onCancel: () => void;\n  testIds?: CreateTitleDialogTestIds;\n  canSubmit?: boolean;\n};\n\nexport const CreateTitleDialog = <T extends CreateTitleDialogRequest>(\n  props: CreateTitleDialogProps<T>,\n) => {\n  const {\n    initialData,\n    translationKeys,\n    onSubmit,\n    open,\n    onCancel,\n    testIds,\n    canSubmit,\n  } = props;\n\n  const [form, setForm] = useState<T>(initialData ?? ({ title: '' } as T));\n  const [loading, setLoading] = useState(false);\n\n  // Reset form when dialog opens (for create mode) or when initialData changes\n  useEffect(() => {\n    if (open) {\n      setForm(initialData ?? ({ title: '' } as T));\n    }\n  }, [open, initialData]);\n\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    setLoading(true);\n    event.preventDefault();\n\n    try {\n      await onSubmit(form);\n      onCancel();\n    } finally {\n      // will still handle setting loading to false even if onSubmit fails\n      setLoading(false);\n    }\n  };\n\n  const isDisabled = useMemo(() => {\n    return loading || !form?.title || canSubmit === false;\n  }, [loading, form?.title, canSubmit]);\n\n  return (\n    <DialogTrigger>\n      <Dialog\n        isOpen={open}\n        isDismissable\n        onOpenChange={isOpen => {\n          if (!isOpen) {\n            onCancel();\n          }\n        }}\n      >\n        <DialogHeader>\n          {initialData?.title ? translationKeys.edit : translationKeys.new}\n        </DialogHeader>\n\n        <DialogBody>\n          <form\n            onSubmit={handleSubmit}\n            id={testIds?.form ?? 'title-form'}\n            data-testid={testIds?.form ?? 'title-form'}\n          >\n            <TextField\n              id=\"title\"\n              data-testid={testIds?.input ?? 'title-input'}\n              type=\"text\"\n              label={translationKeys.titleLabel}\n              value={form.title}\n              onChange={e => setForm(prev => ({ ...prev, title: e }))}\n              isRequired\n            />\n          </form>\n        </DialogBody>\n\n        <DialogFooter>\n          <Button\n            variant=\"primary\"\n            type=\"submit\"\n            form={testIds?.form ?? 'title-form'}\n            data-testid={testIds?.button ?? 'title-submit-button'}\n            isDisabled={isDisabled}\n          >\n            {translationKeys.submit}\n          </Button>\n\n          <Button onClick={onCancel} variant=\"secondary\" slot=\"close\">\n            {translationKeys.cancel ?? 'Cancel'}\n          </Button>\n        </DialogFooter>\n      </Dialog>\n    </DialogTrigger>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/admin/shared/DeleteConfirmationDialog/DeleteConfirmationDialog.esm.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { DialogTrigger, Dialog, DialogHeader, DialogBody, DialogFooter, Button } from '@backstage/ui';
+
+const DeleteConfirmationDialog = (props) => {
+  const { type, open, onConfirm, onCancel, itemTitle, canDelete } = props;
+  const { t } = useAnnouncementsTranslation();
+  const title = t("confirmDeleteDialog.title");
+  const body = t("confirmDeleteDialog.body", { type });
+  const cancelText = t("confirmDeleteDialog.cancel");
+  const deleteText = t("confirmDeleteDialog.delete");
+  return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      isOpen: open,
+      isDismissable: true,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          onCancel();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: title }),
+        /* @__PURE__ */ jsx(DialogBody, { children: itemTitle ? itemTitle : body }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: onConfirm,
+              variant: "primary",
+              isDisabled: canDelete === false,
+              children: deleteText
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: onCancel, variant: "secondary", slot: "close", children: cancelText })
+        ] })
+      ]
+    }
+  ) });
+};
+
+export { DeleteConfirmationDialog };
+//# sourceMappingURL=DeleteConfirmationDialog.esm.js.map

package/dist/alpha/components/admin/shared/DeleteConfirmationDialog/DeleteConfirmationDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteConfirmationDialog.esm.js","sources":["../../../../../../src/alpha/components/admin/shared/DeleteConfirmationDialog/DeleteConfirmationDialog.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 */\n\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport {\n  Button,\n  Dialog,\n  DialogTrigger,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n} from '@backstage/ui';\n\ntype DeleteConfirmationDialogProps = {\n  type: 'announcement' | 'category' | 'tag';\n  itemTitle?: string;\n  open: boolean;\n  onConfirm: () => any;\n  onCancel: () => any;\n  canDelete?: boolean;\n};\n\nexport const DeleteConfirmationDialog = (\n  props: DeleteConfirmationDialogProps,\n) => {\n  const { type, open, onConfirm, onCancel, itemTitle, canDelete } = props;\n\n  const { t } = useAnnouncementsTranslation();\n\n  const title = t('confirmDeleteDialog.title');\n  const body = t('confirmDeleteDialog.body', { type });\n  const cancelText = t('confirmDeleteDialog.cancel');\n  const deleteText = t('confirmDeleteDialog.delete');\n\n  return (\n    <DialogTrigger>\n      <Dialog\n        isOpen={open}\n        isDismissable\n        onOpenChange={isOpen => {\n          if (!isOpen) {\n            onCancel();\n          }\n        }}\n      >\n        <DialogHeader>{title}</DialogHeader>\n        <DialogBody>{itemTitle ? itemTitle : body}</DialogBody>\n        <DialogFooter>\n          <Button\n            onClick={onConfirm}\n            variant=\"primary\"\n            isDisabled={canDelete === false}\n          >\n            {deleteText}\n          </Button>\n          <Button onClick={onCancel} variant=\"secondary\" slot=\"close\">\n            {cancelText}\n          </Button>\n        </DialogFooter>\n      </Dialog>\n    </DialogTrigger>\n  );\n};\n"],"names":[],"mappings":";;;;AAmCa,MAAA,wBAAA,GAA2B,CACtC,KACG,KAAA;AACH,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,WAAW,QAAU,EAAA,SAAA,EAAW,WAAc,GAAA,KAAA;AAElE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAM,MAAA,KAAA,GAAQ,EAAE,2BAA2B,CAAA;AAC3C,EAAA,MAAM,IAAO,GAAA,CAAA,CAAE,0BAA4B,EAAA,EAAE,MAAM,CAAA;AACnD,EAAM,MAAA,UAAA,GAAa,EAAE,4BAA4B,CAAA;AACjD,EAAM,MAAA,UAAA,GAAa,EAAE,4BAA4B,CAAA;AAEjD,EAAA,2BACG,aACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,MAAQ,EAAA,IAAA;AAAA,MACR,aAAa,EAAA,IAAA;AAAA,MACb,cAAc,CAAU,MAAA,KAAA;AACtB,QAAA,IAAI,CAAC,MAAQ,EAAA;AACX,UAAS,QAAA,EAAA;AAAA;AACX,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,gBAAc,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,wBACpB,GAAA,CAAA,UAAA,EAAA,EAAY,QAAY,EAAA,SAAA,GAAA,SAAA,GAAY,IAAK,EAAA,CAAA;AAAA,6BACzC,YACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAS,EAAA,SAAA;AAAA,cACT,OAAQ,EAAA,SAAA;AAAA,cACR,YAAY,SAAc,KAAA,KAAA;AAAA,cAEzB,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACA,GAAA,CAAC,UAAO,OAAS,EAAA,QAAA,EAAU,SAAQ,WAAY,EAAA,IAAA,EAAK,SACjD,QACH,EAAA,UAAA,EAAA;AAAA,SACF,EAAA;AAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}