@backstage-community/plugin-announcements 1.2.0 → 1.3.1

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Card, CardBody, CardFooter, TablePagination } from '@backstage/ui';
+import { AnnouncementsTable } from './AnnouncementsTable.esm.js';
+import { ActiveInactiveAnnouncementIndicator } from './ActiveInactiveAnnouncementIndicator.esm.js';
+
+const AnnouncementsTableCard = (props) => {
+  const {
+    announcements,
+    onPreviewClick,
+    onEditClick,
+    onDeleteClick,
+    canEdit,
+    canDelete,
+    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]);
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardBody, { children: [
+      /* @__PURE__ */ jsx(ActiveInactiveAnnouncementIndicator, {}),
+      /* @__PURE__ */ jsx(
+        AnnouncementsTable,
+        {
+          data: paginatedAnnouncements,
+          onPreviewClick,
+          onEditClick,
+          onDeleteClick,
+          canEdit,
+          canDelete,
+          editingAnnouncementId
+        }
+      )
+    ] }),
+    announcements.length > 0 && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
+      TablePagination,
+      {
+        offset,
+        pageSize,
+        setOffset,
+        setPageSize,
+        rowCount: announcements.length
+      }
+    ) })
+  ] });
+};
+
+export { AnnouncementsTableCard };
+//# sourceMappingURL=AnnouncementsTableCard.esm.js.map

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

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

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":"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"}

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;;;;"}

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

@@ -0,0 +1,29 @@
+import { useState, useCallback } from 'react';
+
+function useDeleteConfirmationDialogState() {
+  const [state, setState] = useState({ open: false });
+  const setOpen = useCallback(
+    (t) => {
+      setState({
+        open: true,
+        item: t
+      });
+    },
+    [setState]
+  );
+  const setClosed = useCallback(() => {
+    setState({
+      open: false,
+      item: void 0
+    });
+  }, [setState]);
+  return {
+    open: setOpen,
+    close: setClosed,
+    item: state.item,
+    isOpen: state.open
+  };
+}
+
+export { useDeleteConfirmationDialogState };
+//# sourceMappingURL=useDeleteConfirmationDialogState.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDeleteConfirmationDialogState.esm.js","sources":["../../../../../../src/alpha/components/admin/shared/DeleteConfirmationDialog/useDeleteConfirmationDialogState.ts"],"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, useCallback } from 'react';\n\ntype DeleteConfirmationDialogState<T> = {\n  open: (t: T) => void;\n  close: () => void;\n  isOpen: boolean;\n  item?: T;\n};\n\nexport function useDeleteConfirmationDialogState<\n  T,\n>(): DeleteConfirmationDialogState<T> {\n  const [state, setState] = useState<{\n    open: boolean;\n    item?: T;\n  }>({ open: false });\n\n  const setOpen = useCallback(\n    (t: T) => {\n      setState({\n        open: true,\n        item: t,\n      });\n    },\n    [setState],\n  );\n\n  const setClosed = useCallback(() => {\n    setState({\n      open: false,\n      item: undefined,\n    });\n  }, [setState]);\n\n  return {\n    open: setOpen,\n    close: setClosed,\n\n    item: state.item,\n    isOpen: state.open,\n  };\n}\n"],"names":[],"mappings":";;AAwBO,SAAS,gCAEsB,GAAA;AACpC,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,SAGvB,EAAE,IAAA,EAAM,OAAO,CAAA;AAElB,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,CAAS,KAAA;AACR,MAAS,QAAA,CAAA;AAAA,QACP,IAAM,EAAA,IAAA;AAAA,QACN,IAAM,EAAA;AAAA,OACP,CAAA;AAAA,KACH;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAS,QAAA,CAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,IAAM,EAAA,KAAA;AAAA,KACP,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAO,OAAA;AAAA,IACL,IAAM,EAAA,OAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,IAEP,MAAM,KAAM,CAAA,IAAA;AAAA,IACZ,QAAQ,KAAM,CAAA;AAAA,GAChB;AACF;;;;"}

package/dist/alpha/components/admin/tags/CreateTagDialog.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 CreateTagDialog = (props) => {
+  const { open, onConfirm, onCancel, canSubmit } = props;
+  const { t } = useAnnouncementsTranslation();
+  const translationKeys = {
+    new: t("tagsForm.newTag"),
+    edit: t("tagsForm.editTag"),
+    titleLabel: t("tagsForm.titleLabel"),
+    submit: t("tagsForm.submit"),
+    cancel: t("admin.tagsContent.cancelButton")
+  };
+  return /* @__PURE__ */ jsx(
+    CreateTitleDialog,
+    {
+      open,
+      onCancel,
+      translationKeys,
+      onSubmit: onConfirm,
+      canSubmit
+    }
+  );
+};
+
+export { CreateTagDialog };
+//# sourceMappingURL=CreateTagDialog.esm.js.map

package/dist/alpha/components/admin/tags/CreateTagDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateTagDialog.esm.js","sources":["../../../../../src/alpha/components/admin/tags/CreateTagDialog.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  CreateTagRequest,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport { CreateTitleDialog } from '../shared';\n\n/**\n * @internal\n */\ntype CreateTagDialogProps = {\n  open: boolean;\n  onConfirm: (request: CreateTagRequest) => Promise<void>;\n  onCancel: () => void;\n  canSubmit?: boolean;\n};\n\n/**\n * @internal\n */\nexport const CreateTagDialog = (props: CreateTagDialogProps) => {\n  const { open, onConfirm, onCancel, canSubmit } = props;\n\n  const { t } = useAnnouncementsTranslation();\n\n  const translationKeys = {\n    new: t('tagsForm.newTag'),\n    edit: t('tagsForm.editTag'),\n    titleLabel: t('tagsForm.titleLabel'),\n    submit: t('tagsForm.submit'),\n    cancel: t('admin.tagsContent.cancelButton'),\n  };\n\n  return (\n    <CreateTitleDialog<CreateTagRequest>\n      open={open}\n      onCancel={onCancel}\n      translationKeys={translationKeys}\n      onSubmit={onConfirm}\n      canSubmit={canSubmit}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAmCa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,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,iBAAiB,CAAA;AAAA,IACxB,IAAA,EAAM,EAAE,kBAAkB,CAAA;AAAA,IAC1B,UAAA,EAAY,EAAE,qBAAqB,CAAA;AAAA,IACnC,MAAA,EAAQ,EAAE,iBAAiB,CAAA;AAAA,IAC3B,MAAA,EAAQ,EAAE,gCAAgC;AAAA,GAC5C;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;;;;"}