@backstage-community/plugin-announcements 1.2.0 → 1.3.0

package/dist/alpha/components/admin/tags/TagsContent.esm.js

@@ -0,0 +1,112 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useTags, announcementsApiRef, useAnnouncementsTranslation, useAnnouncementsPermissions } from '@backstage-community/plugin-announcements-react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+import { useDeleteConfirmationDialogState } from '../shared/DeleteConfirmationDialog/useDeleteConfirmationDialogState.esm.js';
+import { DeleteConfirmationDialog } from '../shared/DeleteConfirmationDialog/DeleteConfirmationDialog.esm.js';
+import '@backstage/ui';
+import { CreateTagDialog } from './CreateTagDialog.esm.js';
+import { TagsTableCard } from './TagsTableCard.esm.js';
+
+const TagsContent = () => {
+  const [showNewTagForm, setShowNewTagForm] = useState(false);
+  const { tags, retry: refresh } = useTags();
+  const announcementsApi = useApi(announcementsApiRef);
+  const alertApi = useApi(alertApiRef);
+  const { t } = useAnnouncementsTranslation();
+  const permissions = useAnnouncementsPermissions();
+  const {
+    isOpen: isDeleteDialogOpen,
+    close: closeDeleteDialog,
+    open: openDeleteDialog,
+    item: tagToDelete
+  } = useDeleteConfirmationDialogState();
+  const onConfirmCreate = async (request) => {
+    const { title } = request;
+    try {
+      await announcementsApi.createTag({
+        title
+      });
+      alertApi.post({
+        message: `${title} ${t("admin.tagsContent.createdMessage")}`,
+        severity: "success"
+      });
+      setShowNewTagForm(false);
+      refresh();
+    } catch (err) {
+      if (err.response?.status === 409) {
+        alertApi.post({
+          message: t("admin.tagsContent.errors.alreadyExists"),
+          severity: "error"
+        });
+      } else {
+        alertApi.post({ message: err.message, severity: "error" });
+      }
+    }
+  };
+  const onCreateButtonClick = () => {
+    setShowNewTagForm(true);
+  };
+  const onCancelCreate = () => {
+    setShowNewTagForm(false);
+  };
+  const onCancelDelete = () => {
+    closeDeleteDialog();
+  };
+  const onConfirmDelete = async () => {
+    closeDeleteDialog();
+    try {
+      await announcementsApi.deleteTag(tagToDelete.slug);
+      alertApi.post({
+        message: t("admin.tagsContent.table.tagDeleted"),
+        severity: "success"
+      });
+    } catch (err) {
+      alertApi.post({
+        message: err.body.error.message,
+        severity: "error"
+      });
+    }
+    refresh();
+  };
+  const onDeleteClick = (tag) => {
+    openDeleteDialog(tag);
+  };
+  const canCreate = !permissions.create.loading && permissions.create.allowed;
+  const canDelete = !permissions.delete.loading && permissions.delete.allowed;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TagsTableCard,
+      {
+        tags: tags ?? [],
+        onCreateClick: onCreateButtonClick,
+        onDeleteClick,
+        canCreate,
+        canDelete
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreateTagDialog,
+      {
+        open: showNewTagForm,
+        onConfirm: onConfirmCreate,
+        onCancel: onCancelCreate,
+        canSubmit: canCreate
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteConfirmationDialog,
+      {
+        type: "tag",
+        itemTitle: tagToDelete?.title,
+        open: isDeleteDialogOpen,
+        onCancel: onCancelDelete,
+        onConfirm: onConfirmDelete,
+        canDelete
+      }
+    )
+  ] });
+};
+
+export { TagsContent };
+//# sourceMappingURL=TagsContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsContent.esm.js","sources":["../../../../../src/alpha/components/admin/tags/TagsContent.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 {\n  CreateTagRequest,\n  announcementsApiRef,\n  useAnnouncementsTranslation,\n  useTags,\n  useAnnouncementsPermissions,\n} from '@backstage-community/plugin-announcements-react';\nimport { Tag } from '@backstage-community/plugin-announcements-common';\nimport { useApi, alertApiRef } from '@backstage/core-plugin-api';\nimport { ResponseError } from '@backstage/errors';\n\nimport {\n  useDeleteConfirmationDialogState,\n  DeleteConfirmationDialog,\n} from '../shared';\nimport { CreateTagDialog } from './CreateTagDialog';\nimport { TagsTableCard } from './TagsTableCard';\n\n/**\n * @internal\n */\nexport const TagsContent = () => {\n  const [showNewTagForm, setShowNewTagForm] = useState(false);\n  const { tags, retry: refresh } = useTags();\n  const announcementsApi = useApi(announcementsApiRef);\n  const alertApi = useApi(alertApiRef);\n  const { t } = useAnnouncementsTranslation();\n  const permissions = useAnnouncementsPermissions();\n\n  const {\n    isOpen: isDeleteDialogOpen,\n    close: closeDeleteDialog,\n    open: openDeleteDialog,\n    item: tagToDelete,\n  } = useDeleteConfirmationDialogState<Tag>();\n\n  const onConfirmCreate = async (request: CreateTagRequest) => {\n    const { title } = request;\n\n    try {\n      await announcementsApi.createTag({\n        title,\n      });\n\n      alertApi.post({\n        message: `${title} ${t('admin.tagsContent.createdMessage')}`,\n        severity: 'success',\n      });\n\n      setShowNewTagForm(false);\n      refresh();\n    } catch (err: any) {\n      if (err.response?.status === 409) {\n        alertApi.post({\n          message: t('admin.tagsContent.errors.alreadyExists'),\n          severity: 'error',\n        });\n      } else {\n        alertApi.post({ message: (err as Error).message, severity: 'error' });\n      }\n    }\n  };\n\n  const onCreateButtonClick = () => {\n    setShowNewTagForm(true);\n  };\n\n  const onCancelCreate = () => {\n    setShowNewTagForm(false);\n  };\n\n  const onCancelDelete = () => {\n    closeDeleteDialog();\n  };\n\n  const onConfirmDelete = async () => {\n    closeDeleteDialog();\n\n    try {\n      await announcementsApi.deleteTag(tagToDelete!.slug);\n\n      alertApi.post({\n        message: t('admin.tagsContent.table.tagDeleted'),\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 = (tag: Tag) => {\n    openDeleteDialog(tag);\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      <TagsTableCard\n        tags={tags ?? []}\n        onCreateClick={onCreateButtonClick}\n        onDeleteClick={onDeleteClick}\n        canCreate={canCreate}\n        canDelete={canDelete}\n      />\n\n      <CreateTagDialog\n        open={showNewTagForm}\n        onConfirm={onConfirmCreate}\n        onCancel={onCancelCreate}\n        canSubmit={canCreate}\n      />\n\n      <DeleteConfirmationDialog\n        type=\"tag\"\n        itemTitle={tagToDelete?.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/tags/TagsTable.esm.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { Table, TableHeader, Column, TableBody, Row, CellText, Cell, ButtonIcon } from '@backstage/ui';
+import { RiDeleteBinLine } from '@remixicon/react';
+
+const TagsTableEmptyState = () => {
+  const { t } = useAnnouncementsTranslation();
+  return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(CellText, { colSpan: 3, title: t("admin.tagsContent.table.noTagsFound") }) });
+};
+const TagTableRow = (props) => {
+  const { tag, onDeleteClick } = props;
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(CellText, { title: tag.title }),
+    /* @__PURE__ */ jsx(CellText, { title: tag.slug }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(
+      ButtonIcon,
+      {
+        icon: /* @__PURE__ */ jsx(RiDeleteBinLine, {}),
+        variant: "tertiary",
+        onClick: () => onDeleteClick(tag)
+      }
+    ) })
+  ] }, tag.slug);
+};
+const TagsTable = (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.tagsContent.table.title") }),
+      /* @__PURE__ */ jsx(Column, { id: "slug", children: t("admin.tagsContent.table.slug") }),
+      /* @__PURE__ */ jsx(Column, { id: "actions", children: t("admin.tagsContent.table.actions") })
+    ] }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.length > 0 ? data.map((tag) => /* @__PURE__ */ jsx(
+      TagTableRow,
+      {
+        tag,
+        onDeleteClick
+      },
+      tag.slug
+    )) : /* @__PURE__ */ jsx(TagsTableEmptyState, {}) })
+  ] });
+};
+
+export { TagsTable };
+//# sourceMappingURL=TagsTable.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsTable.esm.js","sources":["../../../../../src/alpha/components/admin/tags/TagsTable.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 */\n\nimport { Tag } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\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\nconst TagsTableEmptyState = () => {\n  const { t } = useAnnouncementsTranslation();\n\n  return (\n    <Row>\n      <CellText colSpan={3} title={t('admin.tagsContent.table.noTagsFound')} />\n    </Row>\n  );\n};\n\ntype TagTableRowProps = {\n  tag: Tag;\n  onDeleteClick?: (tag: Tag) => void;\n};\n\nconst TagTableRow = (props: TagTableRowProps) => {\n  const { tag, onDeleteClick } = props;\n\n  return (\n    <Row key={tag.slug}>\n      <CellText title={tag.title} />\n      <CellText title={tag.slug} />\n      <Cell>\n        <ButtonIcon\n          icon={<RiDeleteBinLine />}\n          variant=\"tertiary\"\n          onClick={() => onDeleteClick!(tag)}\n        />\n      </Cell>\n    </Row>\n  );\n};\n\n/**\n * @internal\n */\ntype TagsTableProps = {\n  data: Tag[];\n  onDeleteClick?: (tag: Tag) => void;\n};\n\n/**\n * @internal\n */\nexport const TagsTable = (props: TagsTableProps) => {\n  const { data, onDeleteClick } = props;\n  const { t } = useAnnouncementsTranslation();\n\n  return (\n    <Table>\n      <TableHeader>\n        <Column id=\"title\" isRowHeader>\n          {t('admin.tagsContent.table.title')}\n        </Column>\n        <Column id=\"slug\">{t('admin.tagsContent.table.slug')}</Column>\n        <Column id=\"actions\">{t('admin.tagsContent.table.actions')}</Column>\n      </TableHeader>\n      <TableBody>\n        {data.length > 0 ? (\n          data.map(tag => (\n            <TagTableRow\n              key={tag.slug}\n              tag={tag}\n              onDeleteClick={onDeleteClick}\n            />\n          ))\n        ) : (\n          <TagsTableEmptyState />\n        )}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BA,MAAM,sBAAsB,MAAM;AAChC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EACE,uBAAA,GAAA,CAAC,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAS,GAAG,KAAO,EAAA,CAAA,CAAE,qCAAqC,CAAA,EAAG,CACzE,EAAA,CAAA;AAEJ,CAAA;AAOA,MAAM,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,EAAM,MAAA,EAAE,GAAK,EAAA,aAAA,EAAkB,GAAA,KAAA;AAE/B,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,CAAI,KAAO,EAAA,CAAA;AAAA,oBAC3B,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,CAAI,IAAM,EAAA,CAAA;AAAA,wBAC1B,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,GAAG;AAAA;AAAA,KAErC,EAAA;AAAA,GAAA,EAAA,EATQ,IAAI,IAUd,CAAA;AAEJ,CAAA;AAaa,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,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,+BAA+B,CACpC,EAAA,CAAA;AAAA,0BACC,MAAO,EAAA,EAAA,EAAA,EAAG,MAAQ,EAAA,QAAA,EAAA,CAAA,CAAE,8BAA8B,CAAE,EAAA,CAAA;AAAA,0BACpD,MAAO,EAAA,EAAA,EAAA,EAAG,SAAW,EAAA,QAAA,EAAA,CAAA,CAAE,iCAAiC,CAAE,EAAA;AAAA,KAC7D,EAAA,CAAA;AAAA,wBACC,SACE,EAAA,EAAA,QAAA,EAAA,IAAA,CAAK,SAAS,CACb,GAAA,IAAA,CAAK,IAAI,CACP,GAAA,qBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QAEC,GAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,GAAI,CAAA;AAAA,KAIZ,CAAA,mBAEA,GAAA,CAAA,mBAAA,EAAA,EAAoB,CAEzB,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/admin/tags/TagsTableCard.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 { TagsTable } from './TagsTable.esm.js';
+
+const TagsTableCard = (props) => {
+  const { tags, onCreateClick, onDeleteClick, canCreate, canDelete } = props;
+  const [pageSize, setPageSize] = useState(5);
+  const [offset, setOffset] = useState(0);
+  const { t } = useAnnouncementsTranslation();
+  const paginatedTags = useMemo(() => {
+    const start = offset;
+    const end = offset + pageSize;
+    return tags.slice(start, end);
+  }, [tags, offset, pageSize]);
+  const title = `${t("tagsPage.title")} (${tags.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.tagsContent.createButton") })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(
+      TagsTable,
+      {
+        data: paginatedTags,
+        onDeleteClick: canDelete ? onDeleteClick : void 0
+      }
+    ) }),
+    tags.length > 0 && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(
+      TablePagination,
+      {
+        offset,
+        pageSize,
+        setOffset,
+        setPageSize,
+        rowCount: tags.length
+      }
+    ) })
+  ] });
+};
+
+export { TagsTableCard };
+//# sourceMappingURL=TagsTableCard.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsTableCard.esm.js","sources":["../../../../../src/alpha/components/admin/tags/TagsTableCard.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 { Tag } 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 { TagsTable } from './TagsTable';\n\n/**\n * @internal\n */\ntype TagsTableCardProps = {\n  tags: Tag[];\n  onCreateClick: () => void;\n  onDeleteClick: (tag: Tag) => void;\n  canCreate: boolean;\n  canDelete: boolean;\n};\n\n/**\n * @internal\n */\nexport const TagsTableCard = (props: TagsTableCardProps) => {\n  const { tags, onCreateClick, onDeleteClick, canCreate, canDelete } = props;\n\n  const [pageSize, setPageSize] = useState(5);\n  const [offset, setOffset] = useState(0);\n  const { t } = useAnnouncementsTranslation();\n\n  const paginatedTags = useMemo(() => {\n    const start = offset;\n    const end = offset + pageSize;\n    return tags.slice(start, end);\n  }, [tags, offset, pageSize]);\n\n  const title = `${t('tagsPage.title')} (${tags.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.tagsContent.createButton')}\n          </Button>\n        </Flex>\n      </CardHeader>\n\n      <CardBody>\n        <TagsTable\n          data={paginatedTags}\n          onDeleteClick={canDelete ? onDeleteClick : undefined}\n        />\n      </CardBody>\n\n      {tags.length > 0 && (\n        <CardFooter>\n          <TablePagination\n            offset={offset}\n            pageSize={pageSize}\n            setOffset={setOffset}\n            setPageSize={setPageSize}\n            rowCount={tags.length}\n          />\n        </CardFooter>\n      )}\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6Ca,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,IAAM,EAAA,aAAA,EAAe,aAAe,EAAA,SAAA,EAAW,WAAc,GAAA,KAAA;AAErE,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,aAAA,GAAgB,QAAQ,MAAM;AAClC,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,MAAM,MAAS,GAAA,QAAA;AACrB,IAAO,OAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAO,GAAG,CAAA;AAAA,GAC3B,EAAA,CAAC,IAAM,EAAA,MAAA,EAAQ,QAAQ,CAAC,CAAA;AAE3B,EAAA,MAAM,QAAQ,CAAG,EAAA,CAAA,CAAE,gBAAgB,CAAC,CAAA,EAAA,EAAK,KAAK,MAAM,CAAA,CAAA,CAAA;AAEpD,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,gCAAgC,CACrC,EAAA;AAAA,KAAA,EACF,CACF,EAAA,CAAA;AAAA,wBAEC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,aAAA;AAAA,QACN,aAAA,EAAe,YAAY,aAAgB,GAAA,KAAA;AAAA;AAAA,KAE/C,EAAA,CAAA;AAAA,IAEC,IAAK,CAAA,MAAA,GAAS,CACb,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,IAAK,CAAA;AAAA;AAAA,KAEnB,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/announcements/AnnouncementCard.esm.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { DateTime } from 'luxon';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { Box, Text, Link, Card, CardHeader, Flex, CardBody, CardFooter, TagGroup, Tag } from '@backstage/ui';
+import { formatAnnouncementStartTime } from '../../../components/utils/announcementDateUtils.esm.js';
+import { rootRouteRef, announcementViewRouteRef } from '../../../routes.esm.js';
+
+const AnnouncementCard = ({
+  announcement,
+  hideStartAt
+}) => {
+  const announcementsLink = useRouteRef(rootRouteRef);
+  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);
+  const { t } = useAnnouncementsTranslation();
+  const subTitle = /* @__PURE__ */ jsxs(Box, { mt: "1", children: [
+    /* @__PURE__ */ jsxs(Text, { variant: "body-small", as: "span", children: [
+      t("announcementsPage.card.by"),
+      " ",
+      /* @__PURE__ */ jsx(
+        EntityRefLink,
+        {
+          entityRef: announcement.on_behalf_of || announcement.publisher,
+          hideIcon: true
+        }
+      ),
+      announcement.category && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        t("announcementsPage.card.in"),
+        " ",
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: `${announcementsLink()}?category=${announcement.category.slug}`,
+            children: announcement.category.title
+          }
+        )
+      ] }),
+      ", ",
+      DateTime.fromISO(announcement.created_at).toRelative()
+    ] }),
+    !hideStartAt && /* @__PURE__ */ jsx(Text, { variant: "body-x-small", as: "p", children: formatAnnouncementStartTime(
+      announcement.start_at,
+      t("announcementsCard.occurred"),
+      t("announcementsCard.scheduled"),
+      t("announcementsCard.today")
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          variant: "title-x-small",
+          href: viewAnnouncementLink({ id: announcement.id }),
+          truncate: true,
+          children: announcement.title
+        }
+      ),
+      subTitle
+    ] }) }),
+    /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(Text, { children: announcement.excerpt }) }),
+    /* @__PURE__ */ jsx(CardFooter, { children: announcement.tags && announcement.tags.length > 0 && /* @__PURE__ */ jsx(TagGroup, { "aria-label": "Announcement Tags", children: announcement.tags.map((tag) => /* @__PURE__ */ jsx(
+      Tag,
+      {
+        size: "small",
+        href: `${announcementsLink()}?tags=${tag.slug}`,
+        children: tag.title
+      },
+      tag.slug
+    )) }) })
+  ] });
+};
+
+export { AnnouncementCard };
+//# sourceMappingURL=AnnouncementCard.esm.js.map

package/dist/alpha/components/announcements/AnnouncementCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementCard.esm.js","sources":["../../../../src/alpha/components/announcements/AnnouncementCard.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 { Announcement } from '@backstage-community/plugin-announcements-common';\nimport { DateTime } from 'luxon';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport {\n  Box,\n  CardFooter,\n  Text,\n  Card,\n  CardHeader,\n  CardBody,\n  Link,\n  Tag,\n  TagGroup,\n  Flex,\n} from '@backstage/ui';\nimport { formatAnnouncementStartTime } from '../../../components/utils/announcementDateUtils';\nimport { rootRouteRef, announcementViewRouteRef } from '../../../routes';\n\ntype AnnouncementCardProps = {\n  announcement: Announcement;\n  hideStartAt?: boolean;\n};\n\nexport const AnnouncementCard = ({\n  announcement,\n  hideStartAt,\n}: AnnouncementCardProps) => {\n  const announcementsLink = useRouteRef(rootRouteRef);\n  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);\n  const { t } = useAnnouncementsTranslation();\n\n  const subTitle = (\n    <Box mt=\"1\">\n      <Text variant=\"body-small\" as=\"span\">\n        {t('announcementsPage.card.by')}{' '}\n        <EntityRefLink\n          entityRef={announcement.on_behalf_of || announcement.publisher}\n          hideIcon\n        />\n        {announcement.category && (\n          <>\n            {' '}\n            {t('announcementsPage.card.in')}{' '}\n            <Link\n              href={`${announcementsLink()}?category=${\n                announcement.category.slug\n              }`}\n            >\n              {announcement.category.title}\n            </Link>\n          </>\n        )}\n        , {DateTime.fromISO(announcement.created_at).toRelative()}\n      </Text>\n\n      {!hideStartAt && (\n        <Text variant=\"body-x-small\" as=\"p\">\n          {formatAnnouncementStartTime(\n            announcement.start_at,\n            t('announcementsCard.occurred'),\n            t('announcementsCard.scheduled'),\n            t('announcementsCard.today'),\n          )}\n        </Text>\n      )}\n    </Box>\n  );\n\n  return (\n    <Card>\n      <CardHeader>\n        <Flex direction=\"column\" gap=\"2\">\n          <Link\n            variant=\"title-x-small\"\n            href={viewAnnouncementLink({ id: announcement.id })}\n            truncate\n          >\n            {announcement.title}\n          </Link>\n\n          {subTitle}\n        </Flex>\n      </CardHeader>\n\n      <CardBody>\n        <Text>{announcement.excerpt}</Text>\n      </CardBody>\n\n      <CardFooter>\n        {announcement.tags && announcement.tags.length > 0 && (\n          <TagGroup aria-label=\"Announcement Tags\">\n            {announcement.tags.map(tag => (\n              <Tag\n                key={tag.slug}\n                size=\"small\"\n                href={`${announcementsLink()}?tags=${tag.slug}`}\n              >\n                {tag.title}\n              </Tag>\n            ))}\n          </TagGroup>\n        )}\n      </CardFooter>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/announcements/AnnouncementsGrid.esm.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAnnouncements } from '@backstage-community/plugin-announcements-react';
+import { Pagination } from '@material-ui/lab';
+import { Skeleton, Box, Text, Grid, Flex } from '@backstage/ui';
+import { AnnouncementCard } from './AnnouncementCard.esm.js';
+
+const AnnouncementsGrid = ({
+  maxPerPage,
+  category,
+  tags,
+  active,
+  sortBy,
+  order,
+  hideStartAt
+}) => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const [page, setPage] = useState(1);
+  const handleChange = (_event, value) => {
+    setPage(value);
+  };
+  const tagsParam = queryParams.get("tags");
+  const tagsFromUrl = useMemo(() => {
+    return tagsParam ? tagsParam.split(",") : void 0;
+  }, [tagsParam]);
+  const { announcements, loading, error } = useAnnouncements(
+    {
+      max: maxPerPage,
+      page,
+      category,
+      tags: tags || tagsFromUrl,
+      active,
+      sortBy,
+      order
+    },
+    { dependencies: [maxPerPage, page, category, tagsFromUrl] }
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(Skeleton, {});
+  } else if (error) {
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { children: "Error loading announcements" }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Grid.Root, { columns: { xs: "12", md: "2", lg: "3" }, children: announcements.results.map((announcement) => /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(
+      AnnouncementCard,
+      {
+        announcement,
+        hideStartAt
+      }
+    ) }, announcement.id)) }),
+    announcements.count > 0 && /* @__PURE__ */ jsx(Flex, { justify: "center", my: "10", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        count: Math.ceil(announcements.count / maxPerPage),
+        page,
+        onChange: handleChange
+      }
+    ) })
+  ] });
+};
+
+export { AnnouncementsGrid };
+//# sourceMappingURL=AnnouncementsGrid.esm.js.map

package/dist/alpha/components/announcements/AnnouncementsGrid.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementsGrid.esm.js","sources":["../../../../src/alpha/components/announcements/AnnouncementsGrid.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 { useLocation } from 'react-router-dom';\nimport { useAnnouncements } from '@backstage-community/plugin-announcements-react';\nimport { Pagination } from '@material-ui/lab';\nimport { Flex, Grid, Box, Skeleton, Text } from '@backstage/ui';\nimport { AnnouncementCard } from './AnnouncementCard';\n\ntype AnnouncementsGridProps = {\n  maxPerPage: number;\n  category?: string;\n  tags?: string[];\n  active?: boolean;\n  sortBy?: 'created_at' | 'start_at';\n  order?: 'asc' | 'desc';\n  hideStartAt?: boolean;\n};\n\nexport const AnnouncementsGrid = ({\n  maxPerPage,\n  category,\n  tags,\n  active,\n  sortBy,\n  order,\n  hideStartAt,\n}: AnnouncementsGridProps) => {\n  const location = useLocation();\n  const queryParams = new URLSearchParams(location.search);\n\n  const [page, setPage] = useState(1);\n  const handleChange = (_event: any, value: number) => {\n    setPage(value);\n  };\n\n  const tagsParam = queryParams.get('tags');\n  const tagsFromUrl = useMemo(() => {\n    return tagsParam ? tagsParam.split(',') : undefined;\n  }, [tagsParam]);\n\n  const { announcements, loading, error } = useAnnouncements(\n    {\n      max: maxPerPage,\n      page: page,\n      category,\n      tags: tags || tagsFromUrl,\n      active,\n      sortBy,\n      order,\n    },\n    { dependencies: [maxPerPage, page, category, tagsFromUrl] },\n  );\n\n  if (loading) {\n    return <Skeleton />;\n  } else if (error) {\n    return (\n      <Box>\n        <Text>Error loading announcements</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      <Grid.Root columns={{ xs: '12', md: '2', lg: '3' }}>\n        {announcements.results.map(announcement => (\n          <Grid.Item key={announcement.id}>\n            <AnnouncementCard\n              announcement={announcement}\n              hideStartAt={hideStartAt}\n            />\n          </Grid.Item>\n        ))}\n      </Grid.Root>\n\n      {announcements.count > 0 && (\n        <Flex justify=\"center\" my=\"10\">\n          <Pagination\n            count={Math.ceil(announcements.count / maxPerPage)}\n            page={page}\n            onChange={handleChange}\n          />\n        </Flex>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAgCO,MAAM,oBAAoB,CAAC;AAAA,EAChC,UAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,WAAc,GAAA,IAAI,eAAgB,CAAA,QAAA,CAAS,MAAM,CAAA;AAEvD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAM,MAAA,YAAA,GAAe,CAAC,MAAA,EAAa,KAAkB,KAAA;AACnD,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,SAAA,GAAY,WAAY,CAAA,GAAA,CAAI,MAAM,CAAA;AACxC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAO,SAAY,GAAA,SAAA,CAAU,KAAM,CAAA,GAAG,CAAI,GAAA,KAAA,CAAA;AAAA,GAC5C,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,EAAE,aAAA,EAAe,OAAS,EAAA,KAAA,EAAU,GAAA,gBAAA;AAAA,IACxC;AAAA,MACE,GAAK,EAAA,UAAA;AAAA,MACL,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAM,IAAQ,IAAA,WAAA;AAAA,MACd,MAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,EAAE,YAAc,EAAA,CAAC,YAAY,IAAM,EAAA,QAAA,EAAU,WAAW,CAAE;AAAA,GAC5D;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,QAAS,EAAA,EAAA,CAAA;AAAA,aACR,KAAO,EAAA;AAChB,IAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,yCAA2B,CACnC,EAAA,CAAA;AAAA;AAIJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAK,IAAL,EAAA,EAAU,SAAS,EAAE,EAAA,EAAI,MAAM,EAAI,EAAA,GAAA,EAAK,IAAI,GAAI,EAAA,EAC9C,wBAAc,OAAQ,CAAA,GAAA,CAAI,kCACxB,GAAA,CAAA,IAAA,CAAK,MAAL,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QACA;AAAA;AAAA,KAHY,EAAA,EAAA,YAAA,CAAa,EAK7B,CACD,CACH,EAAA,CAAA;AAAA,IAEC,aAAA,CAAc,QAAQ,CACrB,oBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,QAAA,EAAS,IAAG,IACxB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,IAAA,CAAK,IAAK,CAAA,aAAA,CAAc,QAAQ,UAAU,CAAA;AAAA,QACjD,IAAA;AAAA,QACA,QAAU,EAAA;AAAA;AAAA,KAEd,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/announcements/AnnouncementsPage.esm.js

@@ -0,0 +1,47 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useLocation } from 'react-router-dom';
+import { useAnnouncementsPermissions, useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { HeaderPage, Container } from '@backstage/ui';
+import { AnnouncementsGrid } from './AnnouncementsGrid.esm.js';
+import { ContextMenu } from './ContextMenu.esm.js';
+
+const AnnouncementsPage = (props) => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const permissions = useAnnouncementsPermissions();
+  const { t } = useAnnouncementsTranslation();
+  const {
+    hideInactive,
+    hideStartAt,
+    title,
+    maxPerPage,
+    category,
+    sortby,
+    order
+  } = props;
+  const canManageAnnouncements = !permissions.create.loading && permissions.create.allowed;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      HeaderPage,
+      {
+        title: title ?? t("announcementsPage.announcements"),
+        customActions: canManageAnnouncements && /* @__PURE__ */ jsx(ContextMenu, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AnnouncementsGrid,
+      {
+        maxPerPage: maxPerPage ?? 10,
+        category: category ?? queryParams.get("category") ?? void 0,
+        tags: props.tags,
+        active: !!hideInactive,
+        sortBy: sortby ?? "created_at",
+        order: order ?? "desc",
+        hideStartAt
+      }
+    ) })
+  ] });
+};
+
+export { AnnouncementsPage };
+//# sourceMappingURL=AnnouncementsPage.esm.js.map

package/dist/alpha/components/announcements/AnnouncementsPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementsPage.esm.js","sources":["../../../../src/alpha/components/announcements/AnnouncementsPage.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 { useLocation } from 'react-router-dom';\nimport {\n  useAnnouncementsPermissions,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport { Container, HeaderPage } from '@backstage/ui';\n\nimport { AnnouncementsGrid } from './AnnouncementsGrid';\nimport { ContextMenu } from './ContextMenu';\nimport { MarkdownRendererTypeProps } from '../../../components';\n\nexport type AnnouncementsPageProps = {\n  title: string;\n  maxPerPage?: number;\n  category?: string;\n  tags?: string[];\n  hideInactive?: boolean;\n  hideStartAt?: boolean;\n  markdownRenderer?: MarkdownRendererTypeProps;\n  sortby?: 'created_at' | 'start_at';\n  order?: 'asc' | 'desc';\n};\n\nexport const AnnouncementsPage = (props: AnnouncementsPageProps) => {\n  const location = useLocation();\n  const queryParams = new URLSearchParams(location.search);\n  const permissions = useAnnouncementsPermissions();\n  const { t } = useAnnouncementsTranslation();\n\n  const {\n    hideInactive,\n    hideStartAt,\n    title,\n    maxPerPage,\n    category,\n    sortby,\n    order,\n  } = props;\n\n  const canManageAnnouncements =\n    !permissions.create.loading && permissions.create.allowed;\n\n  return (\n    <>\n      <HeaderPage\n        title={title ?? t('announcementsPage.announcements')}\n        customActions={canManageAnnouncements && <ContextMenu />}\n      />\n\n      <Container>\n        <AnnouncementsGrid\n          maxPerPage={maxPerPage ?? 10}\n          category={category ?? queryParams.get('category') ?? undefined}\n          tags={props.tags}\n          active={!!hideInactive}\n          sortBy={sortby ?? 'created_at'}\n          order={order ?? 'desc'}\n          hideStartAt={hideStartAt}\n        />\n      </Container>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsCa,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,WAAc,GAAA,IAAI,eAAgB,CAAA,QAAA,CAAS,MAAM,CAAA;AACvD,EAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,yBACJ,CAAC,WAAA,CAAY,MAAO,CAAA,OAAA,IAAW,YAAY,MAAO,CAAA,OAAA;AAEpD,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,KAAS,IAAA,CAAA,CAAE,iCAAiC,CAAA;AAAA,QACnD,aAAA,EAAe,sBAA0B,oBAAA,GAAA,CAAC,WAAY,EAAA,EAAA;AAAA;AAAA,KACxD;AAAA,wBAEC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,YAAY,UAAc,IAAA,EAAA;AAAA,QAC1B,QAAU,EAAA,QAAA,IAAY,WAAY,CAAA,GAAA,CAAI,UAAU,CAAK,IAAA,KAAA,CAAA;AAAA,QACrD,MAAM,KAAM,CAAA,IAAA;AAAA,QACZ,MAAA,EAAQ,CAAC,CAAC,YAAA;AAAA,QACV,QAAQ,MAAU,IAAA,YAAA;AAAA,QAClB,OAAO,KAAS,IAAA,MAAA;AAAA,QAChB;AAAA;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/announcements/ContextMenu.esm.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { MenuTrigger, ButtonIcon, Menu, MenuItem } from '@backstage/ui';
+import { RiMore2Fill } from '@remixicon/react';
+import { announcementAdminRouteRef } from '../../../routes.esm.js';
+
+const ContextMenu = () => {
+  const { t } = useAnnouncementsTranslation();
+  const adminRoute = useRouteRef(announcementAdminRouteRef);
+  const adminRouteLinkName = t("announcementsPage.contextMenu.admin");
+  return /* @__PURE__ */ jsxs(MenuTrigger, { children: [
+    /* @__PURE__ */ jsx(ButtonIcon, { icon: /* @__PURE__ */ jsx(RiMore2Fill, {}), variant: "tertiary" }),
+    /* @__PURE__ */ jsx(Menu, { placement: "bottom end", children: /* @__PURE__ */ jsx(MenuItem, { href: adminRoute(), children: adminRouteLinkName }) })
+  ] });
+};
+
+export { ContextMenu };
+//# sourceMappingURL=ContextMenu.esm.js.map

package/dist/alpha/components/announcements/ContextMenu.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.esm.js","sources":["../../../../src/alpha/components/announcements/ContextMenu.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 { useRouteRef } from '@backstage/core-plugin-api';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport { ButtonIcon, Menu, MenuItem, MenuTrigger } from '@backstage/ui';\nimport { RiMore2Fill } from '@remixicon/react';\n\nimport { announcementAdminRouteRef } from '../../../routes';\n\n/**\n * @remarks - does not include permissions check\n * @internal\n */\nexport const ContextMenu = () => {\n  const { t } = useAnnouncementsTranslation();\n\n  const adminRoute = useRouteRef(announcementAdminRouteRef);\n  const adminRouteLinkName = t('announcementsPage.contextMenu.admin');\n\n  return (\n    <MenuTrigger>\n      <ButtonIcon icon={<RiMore2Fill />} variant=\"tertiary\" />\n      <Menu placement=\"bottom end\">\n        <MenuItem href={adminRoute()}>{adminRouteLinkName}</MenuItem>\n      </Menu>\n    </MenuTrigger>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,cAAc,MAAM;AAC/B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAM,MAAA,UAAA,GAAa,YAAY,yBAAyB,CAAA;AACxD,EAAM,MAAA,kBAAA,GAAqB,EAAE,qCAAqC,CAAA;AAElE,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,IAAM,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,CAAA,EAAI,SAAQ,UAAW,EAAA,CAAA;AAAA,oBACtD,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,YACd,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,IAAM,EAAA,UAAA,EAAe,EAAA,QAAA,EAAA,kBAAA,EAAmB,CACpD,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}