@backstage-community/plugin-announcements 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage-community/plugin-announcements
 
+## 1.3.2
+
+### Patch Changes
+
+- ee5069b: Adds filtering components for categories and tags to the announcements page in the new frontend system.
+- d901927: Removed unused dependencies from the package
+- Updated dependencies [d901927]
+- Updated dependencies [ee5069b]
+  - @backstage-community/plugin-announcements-react@0.18.2
+
 ## 1.3.1
 
 ### Patch Changes

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

@@ -1,45 +1,24 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { DateTime } from 'luxon';
+import { jsxs, jsx } from 'react/jsx-runtime';
 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 { Box, Text, Card, CardHeader, Flex, Link, CardBody, CardFooter } from '@backstage/ui';
 import { formatAnnouncementStartTime } from '../../../components/utils/announcementDateUtils.esm.js';
-import { rootRouteRef, announcementViewRouteRef } from '../../../routes.esm.js';
+import { announcementViewRouteRef } from '../../../routes.esm.js';
+import { AnnouncementTags } from '../shared/AnnouncementTags/AnnouncementTags.esm.js';
+import { AnnouncementPublishedBy } from '../shared/AnnouncementPublishedBy/AnnouncementPublishedBy.esm.js';
+import '@backstage/frontend-plugin-api';
+import '@remixicon/react';
+import 'react-router-dom';
+import 'react';
 
 const AnnouncementCard = ({
   announcement,
   hideStartAt
 }) => {
-  const announcementsLink = useRouteRef(rootRouteRef);
-  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);
   const { t } = useAnnouncementsTranslation();
+  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);
   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()
-    ] }),
+    /* @__PURE__ */ jsx(AnnouncementPublishedBy, { announcement }),
     !hideStartAt && /* @__PURE__ */ jsx(Text, { variant: "body-x-small", as: "p", children: formatAnnouncementStartTime(
       announcement.start_at,
       t("announcementsCard.occurred"),
@@ -61,15 +40,7 @@ const AnnouncementCard = ({
       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
-    )) }) })
+    /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(AnnouncementTags, { tags: announcement.tags }) })
   ] });
 };
 

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

@@ -1 +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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"}
+{"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 { useRouteRef } from '@backstage/core-plugin-api';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport {\n  Box,\n  CardFooter,\n  Text,\n  Card,\n  CardHeader,\n  CardBody,\n  Link,\n  Flex,\n} from '@backstage/ui';\nimport { formatAnnouncementStartTime } from '../../../components/utils/announcementDateUtils';\nimport { announcementViewRouteRef } from '../../../routes';\nimport { AnnouncementPublishedBy, AnnouncementTags } from '../shared';\n\ntype AnnouncementCardProps = {\n  announcement: Announcement;\n  hideStartAt?: boolean;\n};\n\nexport const AnnouncementCard = ({\n  announcement,\n  hideStartAt,\n}: AnnouncementCardProps) => {\n  const { t } = useAnnouncementsTranslation();\n  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);\n\n  const subTitle = (\n    <Box mt=\"1\">\n      <AnnouncementPublishedBy announcement={announcement} />\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        <AnnouncementTags tags={announcement.tags} />\n      </CardFooter>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqCO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,YAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAC1C,EAAM,MAAA,oBAAA,GAAuB,YAAY,wBAAwB,CAAA;AAEjE,EAAA,MAAM,QACJ,mBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAG,GACN,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,2BAAwB,YAA4B,EAAA,CAAA;AAAA,IAEpD,CAAC,WACA,oBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,cAAA,EAAe,IAAG,GAC7B,EAAA,QAAA,EAAA,2BAAA;AAAA,MACC,YAAa,CAAA,QAAA;AAAA,MACb,EAAE,4BAA4B,CAAA;AAAA,MAC9B,EAAE,6BAA6B,CAAA;AAAA,MAC/B,EAAE,yBAAyB;AAAA,KAE/B,EAAA;AAAA,GAEJ,EAAA,CAAA;AAGF,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAU,EAAA,QAAA,EAAS,KAAI,GAC3B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,eAAA;AAAA,UACR,MAAM,oBAAqB,CAAA,EAAE,EAAI,EAAA,YAAA,CAAa,IAAI,CAAA;AAAA,UAClD,QAAQ,EAAA,IAAA;AAAA,UAEP,QAAa,EAAA,YAAA,CAAA;AAAA;AAAA,OAChB;AAAA,MAEC;AAAA,KAAA,EACH,CACF,EAAA,CAAA;AAAA,wBAEC,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAM,EAAA,EAAA,QAAA,EAAA,YAAA,CAAa,SAAQ,CAC9B,EAAA,CAAA;AAAA,wBAEC,UACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,oBAAiB,IAAM,EAAA,YAAA,CAAa,MAAM,CAC7C,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Card, CardBody, Flex, Text, Button } from '@backstage/ui';
+import { useAnnouncementsTranslation, useCategories, useTags } from '@backstage-community/plugin-announcements-react';
+import '@backstage/frontend-plugin-api';
+import '../../../routes.esm.js';
+import 'luxon';
+import '@backstage/plugin-catalog-react';
+import '@remixicon/react';
+import { useSearchParams } from 'react-router-dom';
+import { CategorySelectInput } from '../shared/CategorySelectInput/CategorySelectInput.esm.js';
+import { TagsSelectInput } from '../shared/TagsSelectInput/TagsSelectInput.esm.js';
+
+const AnnouncementsFilters = () => {
+  const { t } = useAnnouncementsTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { categories } = useCategories();
+  const { tags } = useTags();
+  const handleCategoryChange = (category) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (category) {
+      newParams.set("category", category.slug);
+    } else {
+      newParams.delete("category");
+    }
+    setSearchParams(newParams, { replace: true });
+  };
+  const handleTagsChange = (selectedTags) => {
+    const newParams = new URLSearchParams(searchParams);
+    if (selectedTags && selectedTags.length > 0) {
+      newParams.set("tags", selectedTags.map((tag) => tag.slug).join(","));
+    } else {
+      newParams.delete("tags");
+    }
+    setSearchParams(newParams, { replace: true });
+  };
+  const handleClearFilters = () => {
+    const newParams = new URLSearchParams(searchParams);
+    newParams.delete("category");
+    newParams.delete("tags");
+    setSearchParams(newParams, { replace: true });
+  };
+  const selectedTagsFromUrl = useMemo(() => {
+    const tagsParam = searchParams.get("tags");
+    if (!tagsParam || !tags) return [];
+    const tagSlugs = tagsParam.split(",").filter(Boolean);
+    return tagSlugs.map((slug) => tags.find((tag) => tag.slug === slug)).filter((tag) => tag !== void 0);
+  }, [searchParams, tags]);
+  const hasActiveFilters = useMemo(() => {
+    return searchParams.get("category") !== null || searchParams.get("tags") !== null;
+  }, [searchParams]);
+  return /* @__PURE__ */ jsxs(Flex, { justify: "between", children: [
+    /* @__PURE__ */ jsxs(Flex, { children: [
+      /* @__PURE__ */ jsx(Flex, { align: "center", children: /* @__PURE__ */ jsx(Text, { variant: "body-medium", weight: "bold", children: t("announcementsPage.filter.label") }) }),
+      /* @__PURE__ */ jsx(
+        CategorySelectInput,
+        {
+          initialCategory: categories?.find((c) => c.slug === searchParams.get("category")) ?? void 0,
+          setCategory: handleCategoryChange,
+          hideLabel: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TagsSelectInput,
+        {
+          initialTags: selectedTagsFromUrl.length > 0 ? selectedTagsFromUrl : void 0,
+          setTags: handleTagsChange,
+          hideLabel: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { justify: "end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: handleClearFilters,
+        isDisabled: !hasActiveFilters,
+        children: t("announcementsPage.filter.clear")
+      }
+    ) })
+  ] });
+};
+const AnnouncementsFilterBar = () => {
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(AnnouncementsFilters, {}) }) });
+};
+
+export { AnnouncementsFilterBar, AnnouncementsFilters };
+//# sourceMappingURL=AnnouncementsFilterBar.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementsFilterBar.esm.js","sources":["../../../../src/alpha/components/announcements/AnnouncementsFilterBar.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 */\n\nimport { useMemo } from 'react';\nimport { Button, Card, CardBody, Flex, Text } from '@backstage/ui';\nimport {\n  useCategories,\n  useTags,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport {\n  Category,\n  Tag,\n} from '@backstage-community/plugin-announcements-common';\n\nimport { CategorySelectInput, TagsSelectInput } from '../shared';\nimport { useSearchParams } from 'react-router-dom';\n\nexport const AnnouncementsFilters = () => {\n  const { t } = useAnnouncementsTranslation();\n\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  const { categories } = useCategories();\n  const { tags } = useTags();\n\n  const handleCategoryChange = (category: Category | null) => {\n    const newParams = new URLSearchParams(searchParams);\n    if (category) {\n      newParams.set('category', category.slug);\n    } else {\n      newParams.delete('category');\n    }\n    setSearchParams(newParams, { replace: true });\n  };\n\n  const handleTagsChange = (selectedTags: Tag[] | null) => {\n    const newParams = new URLSearchParams(searchParams);\n    if (selectedTags && selectedTags.length > 0) {\n      newParams.set('tags', selectedTags.map(tag => tag.slug).join(','));\n    } else {\n      newParams.delete('tags');\n    }\n    setSearchParams(newParams, { replace: true });\n  };\n\n  const handleClearFilters = () => {\n    const newParams = new URLSearchParams(searchParams);\n    newParams.delete('category');\n    newParams.delete('tags');\n    setSearchParams(newParams, { replace: true });\n  };\n\n  const selectedTagsFromUrl = useMemo(() => {\n    const tagsParam = searchParams.get('tags');\n    if (!tagsParam || !tags) return [];\n\n    const tagSlugs = tagsParam.split(',').filter(Boolean);\n    return tagSlugs\n      .map(slug => tags.find(tag => tag.slug === slug))\n      .filter((tag): tag is Tag => tag !== undefined);\n  }, [searchParams, tags]);\n\n  const hasActiveFilters = useMemo(() => {\n    return (\n      searchParams.get('category') !== null || searchParams.get('tags') !== null\n    );\n  }, [searchParams]);\n\n  return (\n    <Flex justify=\"between\">\n      <Flex>\n        <Flex align=\"center\">\n          <Text variant=\"body-medium\" weight=\"bold\">\n            {t('announcementsPage.filter.label')}\n          </Text>\n        </Flex>\n\n        <CategorySelectInput\n          initialCategory={\n            categories?.find(c => c.slug === searchParams.get('category')) ??\n            undefined\n          }\n          setCategory={handleCategoryChange}\n          hideLabel\n        />\n\n        <TagsSelectInput\n          initialTags={\n            selectedTagsFromUrl.length > 0 ? selectedTagsFromUrl : undefined\n          }\n          setTags={handleTagsChange}\n          hideLabel\n        />\n      </Flex>\n\n      <Flex justify=\"end\">\n        <Button\n          variant=\"secondary\"\n          onClick={handleClearFilters}\n          isDisabled={!hasActiveFilters}\n        >\n          {t('announcementsPage.filter.clear')}\n        </Button>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const AnnouncementsFilterBar = () => {\n  return (\n    <Card>\n      <CardBody>\n        <AnnouncementsFilters />\n      </CardBody>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,8 @@
 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 { useState } from 'react';
+import { useAnnouncementsTranslation, useAnnouncements } from '@backstage-community/plugin-announcements-react';
 import { Pagination } from '@material-ui/lab';
-import { Skeleton, Box, Text, Grid, Flex } from '@backstage/ui';
+import { Card, CardBody, Text, Grid, Skeleton, Flex } from '@backstage/ui';
 import { AnnouncementCard } from './AnnouncementCard.esm.js';
 
 const AnnouncementsGrid = ({
@@ -15,41 +14,39 @@ const AnnouncementsGrid = ({
   order,
   hideStartAt
 }) => {
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
+  const { t } = useAnnouncementsTranslation();
   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,
+      tags,
       active,
       sortBy,
       order
     },
-    { dependencies: [maxPerPage, page, category, tagsFromUrl] }
+    { dependencies: [maxPerPage, page, category, tags] }
   );
-  if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, {});
-  } else if (error) {
-    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { children: "Error loading announcements" }) });
+  if (error) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(Text, { color: "danger", children: t("announcementsPage.errorLoadingAnnouncements") }) }) });
   }
   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)) }),
+    !loading ? /* @__PURE__ */ jsxs(Grid.Root, { columns: { xs: "12", md: "2", lg: "3" }, children: [
+      announcements.results.length > 0 && announcements.results.map((announcement) => /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(
+        AnnouncementCard,
+        {
+          announcement,
+          hideStartAt
+        }
+      ) }, announcement.id)),
+      announcements.results.length === 0 && /* @__PURE__ */ jsx(Grid.Item, { colSpan: "12", children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: category || tags ? /* @__PURE__ */ jsx(Text, { children: t(
+        "announcementsPage.filter.noFilteredAnnouncementsFound"
+      ) }) : /* @__PURE__ */ jsx(Text, { children: t("announcementsPage.noAnnouncementsFound") }) }) }) })
+    ] }) : /* @__PURE__ */ jsx(Skeleton, {}),
     announcements.count > 0 && /* @__PURE__ */ jsx(Flex, { justify: "center", my: "10", children: /* @__PURE__ */ jsx(
       Pagination,
       {

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

@@ -1 +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;;;;"}
+{"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 } from 'react';\nimport {\n  useAnnouncements,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport { Pagination } from '@material-ui/lab';\nimport { Flex, Grid, Skeleton, Text, Card, CardBody } 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 { t } = useAnnouncementsTranslation();\n\n  const [page, setPage] = useState(1);\n  const handleChange = (_event: any, value: number) => {\n    setPage(value);\n  };\n\n  const { announcements, loading, error } = useAnnouncements(\n    {\n      max: maxPerPage,\n      page,\n      category,\n      tags,\n      active,\n      sortBy,\n      order,\n    },\n    { dependencies: [maxPerPage, page, category, tags] },\n  );\n\n  if (error) {\n    return (\n      <Card>\n        <CardBody>\n          <Text color=\"danger\">\n            {t('announcementsPage.errorLoadingAnnouncements')}\n          </Text>\n        </CardBody>\n      </Card>\n    );\n  }\n\n  return (\n    <>\n      {!loading ? (\n        <Grid.Root columns={{ xs: '12', md: '2', lg: '3' }}>\n          {announcements.results.length > 0 &&\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\n          {announcements.results.length === 0 && (\n            <Grid.Item colSpan=\"12\">\n              <Card>\n                <CardBody>\n                  {category || tags ? (\n                    <Text>\n                      {t(\n                        'announcementsPage.filter.noFilteredAnnouncementsFound',\n                      )}\n                    </Text>\n                  ) : (\n                    <Text>{t('announcementsPage.noAnnouncementsFound')}</Text>\n                  )}\n                </CardBody>\n              </Card>\n            </Grid.Item>\n          )}\n        </Grid.Root>\n      ) : (\n        <Skeleton />\n      )}\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":";;;;;;;AAkCO,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,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,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,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,IAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,EAAE,YAAc,EAAA,CAAC,YAAY,IAAM,EAAA,QAAA,EAAU,IAAI,CAAE;AAAA,GACrD;AAEA,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,KAAM,EAAA,QAAA,EACT,QAAE,EAAA,CAAA,CAAA,6CAA6C,CAClD,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,OACA,mBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EAAU,OAAA,EAAS,EAAE,EAAA,EAAI,IAAM,EAAA,EAAA,EAAI,GAAK,EAAA,EAAA,EAAI,KAC1C,EAAA,QAAA,EAAA;AAAA,MAAc,aAAA,CAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,IAC9B,aAAc,CAAA,OAAA,CAAQ,IAAI,CACxB,YAAA,qBAAA,GAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,YAAA;AAAA,UACA;AAAA;AAAA,OACF,EAAA,EAJc,YAAa,CAAA,EAK7B,CACD,CAAA;AAAA,MAEF,cAAc,OAAQ,CAAA,MAAA,KAAW,CAChC,oBAAA,GAAA,CAAC,KAAK,IAAL,EAAA,EAAU,OAAQ,EAAA,IAAA,EACjB,8BAAC,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,YACE,QAAY,EAAA,QAAA,IAAA,IAAA,uBACV,IACE,EAAA,EAAA,QAAA,EAAA,CAAA;AAAA,QACC;AAAA,OACF,EACF,oBAEC,GAAA,CAAA,IAAA,EAAA,EAAM,YAAE,wCAAwC,CAAA,EAAE,CAEvD,EAAA,CAAA,EACF,CACF,EAAA;AAAA,KAEJ,EAAA,CAAA,uBAEC,QAAS,EAAA,EAAA,CAAA;AAAA,IAGX,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

@@ -1,16 +1,16 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useLocation } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useAnnouncementsPermissions, useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
-import { HeaderPage, Container } from '@backstage/ui';
+import { HeaderPage, Container, Flex } from '@backstage/ui';
 import { AnnouncementsGrid } from './AnnouncementsGrid.esm.js';
+import { AnnouncementsFilterBar } from './AnnouncementsFilterBar.esm.js';
 import { ContextMenu } from './ContextMenu.esm.js';
 
 const AnnouncementsPage = (props) => {
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
+  const [searchParams] = useSearchParams();
   const permissions = useAnnouncementsPermissions();
   const { t } = useAnnouncementsTranslation();
-  const { hideStartAt, title, maxPerPage, category, sortby, order } = props;
+  const { hideStartAt, title, maxPerPage, category, sortby, order, tags } = props;
   const canManageAnnouncements = !permissions.create.loading && permissions.create.allowed;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -20,18 +20,21 @@ const AnnouncementsPage = (props) => {
         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,
-        sortBy: sortby ?? "created_at",
-        order: order ?? "desc",
-        hideStartAt,
-        active: true
-      }
-    ) })
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsx(AnnouncementsFilterBar, {}),
+      /* @__PURE__ */ jsx(
+        AnnouncementsGrid,
+        {
+          maxPerPage: maxPerPage ?? 10,
+          category: category ?? searchParams.get("category") ?? void 0,
+          tags: tags ?? (searchParams.get("tags") ? searchParams.get("tags")?.split(",") : void 0),
+          sortBy: sortby ?? "created_at",
+          order: order ?? "desc",
+          hideStartAt,
+          active: true
+        }
+      )
+    ] }) })
   ] });
 };
 

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

@@ -1 +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  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 { hideStartAt, title, maxPerPage, category, sortby, order } = 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          sortBy={sortby ?? 'created_at'}\n          order={order ?? 'desc'}\n          hideStartAt={hideStartAt}\n          active\n        />\n      </Container>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAqCa,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,EAAA,MAAM,EAAE,WAAa,EAAA,KAAA,EAAO,YAAY,QAAU,EAAA,MAAA,EAAQ,OAAU,GAAA,KAAA;AAEpE,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,QAAQ,MAAU,IAAA,YAAA;AAAA,QAClB,OAAO,KAAS,IAAA,MAAA;AAAA,QAChB,WAAA;AAAA,QACA,MAAM,EAAA;AAAA;AAAA,KAEV,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"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 { useSearchParams } from 'react-router-dom';\nimport {\n  useAnnouncementsPermissions,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport { Container, Flex, HeaderPage } from '@backstage/ui';\n\nimport { AnnouncementsGrid } from './AnnouncementsGrid';\nimport { AnnouncementsFilterBar } from './AnnouncementsFilterBar';\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  hideStartAt?: boolean;\n  markdownRenderer?: MarkdownRendererTypeProps;\n  sortby?: 'created_at' | 'start_at';\n  order?: 'asc' | 'desc';\n};\n\nexport const AnnouncementsPage = (props: AnnouncementsPageProps) => {\n  const [searchParams] = useSearchParams();\n  const permissions = useAnnouncementsPermissions();\n  const { t } = useAnnouncementsTranslation();\n\n  const { hideStartAt, title, maxPerPage, category, sortby, order, tags } =\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        <Flex direction=\"column\">\n          <AnnouncementsFilterBar />\n          <AnnouncementsGrid\n            maxPerPage={maxPerPage ?? 10}\n            category={category ?? searchParams.get('category') ?? undefined}\n            tags={\n              tags ??\n              (searchParams.get('tags')\n                ? searchParams.get('tags')?.split(',')\n                : undefined)\n            }\n            sortBy={sortby ?? 'created_at'}\n            order={order ?? 'desc'}\n            hideStartAt={hideStartAt}\n            active\n          />\n        </Flex>\n      </Container>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCa,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAM,MAAA,CAAC,YAAY,CAAA,GAAI,eAAgB,EAAA;AACvC,EAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAM,MAAA,EAAE,aAAa,KAAO,EAAA,UAAA,EAAY,UAAU,MAAQ,EAAA,KAAA,EAAO,MAC/D,GAAA,KAAA;AAEF,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,oBAEC,GAAA,CAAA,SAAA,EAAA,EACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,WAAU,QACd,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,sBAAuB,EAAA,EAAA,CAAA;AAAA,sBACxB,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,YAAY,UAAc,IAAA,EAAA;AAAA,UAC1B,QAAU,EAAA,QAAA,IAAY,YAAa,CAAA,GAAA,CAAI,UAAU,CAAK,IAAA,KAAA,CAAA;AAAA,UACtD,IACE,EAAA,IAAA,KACC,YAAa,CAAA,GAAA,CAAI,MAAM,CAAA,GACpB,YAAa,CAAA,GAAA,CAAI,MAAM,CAAA,EAAG,KAAM,CAAA,GAAG,CACnC,GAAA,KAAA,CAAA,CAAA;AAAA,UAEN,QAAQ,MAAU,IAAA,YAAA;AAAA,UAClB,OAAO,KAAS,IAAA,MAAA;AAAA,UAChB,WAAA;AAAA,UACA,MAAM,EAAA;AAAA;AAAA;AACR,KAAA,EACF,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -40,6 +40,7 @@ import '@material-ui/icons/Delete';
 import '@material-ui/icons/Edit';
 import '@material-ui/icons/Visibility';
 import { MarkdownRenderer } from '../../../components/MarkdownRenderer/MarkdownRenderer.esm.js';
+import '@backstage/frontend-plugin-api';
 import { BackToAnnouncementsButton } from '../shared/BackToAnnouncementsButton/BackToAnnouncementsButton.esm.js';
 
 const AnnouncementCategoryBadge = (props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAnnouncementPage.esm.js","sources":["../../../../src/alpha/components/announcements/ViewAnnouncementPage.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 { useEffect } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport { DateTime } from 'luxon';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  Container,\n  Flex,\n  HeaderPage,\n  Link,\n  Text,\n  Grid,\n  Box,\n  Skeleton,\n  Tag,\n  TagGroup,\n} from '@backstage/ui';\nimport {\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n  useAnalytics,\n} from '@backstage/core-plugin-api';\nimport { Alert } from '@material-ui/lab';\nimport { RiHashtag, RiPriceTag3Line } from '@remixicon/react';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport {\n  announcementsApiRef,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport {\n  Announcement,\n  Tag as AnnouncementTag,\n  Category,\n} from '@backstage-community/plugin-announcements-common';\n\nimport { announcementViewRouteRef, rootRouteRef } from '../../../routes';\nimport {\n  MarkdownRenderer,\n  MarkdownRendererTypeProps,\n} from '../../../components';\nimport { BackToAnnouncementsButton } from '../shared';\n\nconst AnnouncementCategoryBadge = (props: {\n  category: Category | undefined;\n}) => {\n  const { category } = props;\n  const announcementsLink = useRouteRef(rootRouteRef);\n\n  if (!category) {\n    return null;\n  }\n\n  return (\n    <Link\n      href={`${announcementsLink()}?category=${category.slug}`}\n      color=\"secondary\"\n      variant=\"body-small\"\n    >\n      <Flex align=\"center\" gap=\"2\">\n        <RiPriceTag3Line size={16} /> {category?.title}\n      </Flex>\n    </Link>\n  );\n};\n\nconst AnnouncementTagsTagGroup = (props: { tags: AnnouncementTag[] }) => {\n  const announcementsLink = useRouteRef(rootRouteRef);\n  const { t } = useAnnouncementsTranslation();\n  return (\n    <TagGroup aria-label={t('viewAnnouncementPage.tagsAriaLabel')}>\n      {props.tags.map(tag => (\n        <Tag\n          key={tag.slug}\n          size=\"small\"\n          href={`${announcementsLink()}?tag=${tag.slug}`}\n        >\n          <RiHashtag size={10} /> {tag.title}\n        </Tag>\n      ))}\n    </TagGroup>\n  );\n};\n\ntype AnnouncementDetailsCardProps = {\n  announcement: Announcement;\n  markdownRenderer?: MarkdownRendererTypeProps;\n};\n\nconst AnnouncementDetailsCard = (props: AnnouncementDetailsCardProps) => {\n  const { announcement, markdownRenderer } = props;\n  const { title, category, body, created_at, on_behalf_of, publisher, tags } =\n    announcement;\n\n  const announcementsApi = useApi(announcementsApiRef);\n  const analytics = useAnalytics();\n  const { t } = useAnnouncementsTranslation();\n\n  const lastSeen = announcementsApi.lastSeenDate();\n  const announcementCreatedAt = DateTime.fromISO(created_at);\n\n  if (announcementCreatedAt > lastSeen) {\n    announcementsApi.markLastSeenDate(announcementCreatedAt);\n  }\n\n  useEffect(() => {\n    if (!announcement) {\n      return;\n    }\n\n    analytics.captureEvent('view', announcement.title, {\n      attributes: {\n        announcementId: announcement.id,\n        location: 'AnnouncementPage',\n      },\n    });\n  }, [analytics, announcement]);\n\n  return (\n    <Card>\n      <Box\n        style={{\n          borderBottom: 'solid 1px #e0e0e0',\n          paddingBottom: 16,\n          paddingRight: 8,\n        }}\n      >\n        <CardHeader>\n          <Flex justify=\"between\" pb=\"3\">\n            <AnnouncementCategoryBadge category={category} />\n\n            <Text variant=\"body-small\" as=\"p\">\n              {DateTime.fromISO(created_at).toRelative()}\n            </Text>\n          </Flex>\n          <Text variant=\"title-medium\" as=\"h2\">\n            {title}\n          </Text>\n\n          <Text variant=\"body-small\" as=\"p\">\n            {t('viewAnnouncementPage.by')}{' '}\n            <EntityRefLink entityRef={on_behalf_of || publisher} hideIcon />\n          </Text>\n        </CardHeader>\n      </Box>\n\n      <CardBody>\n        <AnnouncementTagsTagGroup tags={tags ?? []} />\n        <MarkdownRenderer content={body} rendererType={markdownRenderer} />\n      </CardBody>\n    </Card>\n  );\n};\n\ntype ViewAnnouncementPageProps = {\n  title: string;\n  markdownRenderer?: MarkdownRendererTypeProps;\n};\n\nexport const ViewAnnouncementPage = (props: ViewAnnouncementPageProps) => {\n  const { id } = useRouteRefParams(announcementViewRouteRef);\n  const announcementsApi = useApi(announcementsApiRef);\n  const { t } = useAnnouncementsTranslation();\n\n  const announcementsLink = useRouteRef(rootRouteRef);\n\n  const {\n    value: announcement,\n    loading,\n    error,\n  } = useAsync(async () => announcementsApi.announcementByID(id), [id]);\n\n  if (loading) {\n    return <Skeleton />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  } else if (!announcement) {\n    return <Alert severity=\"error\">{t('viewAnnouncementPage.notFound')}</Alert>;\n  }\n\n  return (\n    <>\n      <HeaderPage\n        title={`${announcement.title ?? ''}`}\n        breadcrumbs={[\n          {\n            label: t('viewAnnouncementPage.announcements'),\n            href: announcementsLink(),\n          },\n        ]}\n      />\n\n      <Container>\n        <Grid.Root columns=\"1\">\n          <Grid.Item>\n            <AnnouncementDetailsCard\n              announcement={announcement}\n              markdownRenderer={props.markdownRenderer}\n            />\n          </Grid.Item>\n\n          <Grid.Item>\n            <Box mb=\"8\">\n              <BackToAnnouncementsButton />\n            </Box>\n          </Grid.Item>\n        </Grid.Root>\n      </Container>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ViewAnnouncementPage.esm.js","sources":["../../../../src/alpha/components/announcements/ViewAnnouncementPage.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 { useEffect } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport { DateTime } from 'luxon';\nimport {\n  Card,\n  CardBody,\n  CardHeader,\n  Container,\n  Flex,\n  HeaderPage,\n  Link,\n  Text,\n  Grid,\n  Box,\n  Skeleton,\n  Tag,\n  TagGroup,\n} from '@backstage/ui';\nimport {\n  useApi,\n  useRouteRef,\n  useRouteRefParams,\n  useAnalytics,\n} from '@backstage/core-plugin-api';\nimport { Alert } from '@material-ui/lab';\nimport { RiHashtag, RiPriceTag3Line } from '@remixicon/react';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport {\n  announcementsApiRef,\n  useAnnouncementsTranslation,\n} from '@backstage-community/plugin-announcements-react';\nimport {\n  Announcement,\n  Tag as AnnouncementTag,\n  Category,\n} from '@backstage-community/plugin-announcements-common';\n\nimport { announcementViewRouteRef, rootRouteRef } from '../../../routes';\nimport {\n  MarkdownRenderer,\n  MarkdownRendererTypeProps,\n} from '../../../components';\nimport { BackToAnnouncementsButton } from '../shared';\n\nconst AnnouncementCategoryBadge = (props: {\n  category: Category | undefined;\n}) => {\n  const { category } = props;\n  const announcementsLink = useRouteRef(rootRouteRef);\n\n  if (!category) {\n    return null;\n  }\n\n  return (\n    <Link\n      href={`${announcementsLink()}?category=${category.slug}`}\n      color=\"secondary\"\n      variant=\"body-small\"\n    >\n      <Flex align=\"center\" gap=\"2\">\n        <RiPriceTag3Line size={16} /> {category?.title}\n      </Flex>\n    </Link>\n  );\n};\n\nconst AnnouncementTagsTagGroup = (props: { tags: AnnouncementTag[] }) => {\n  const announcementsLink = useRouteRef(rootRouteRef);\n  const { t } = useAnnouncementsTranslation();\n  return (\n    <TagGroup aria-label={t('viewAnnouncementPage.tagsAriaLabel')}>\n      {props.tags.map(tag => (\n        <Tag\n          key={tag.slug}\n          size=\"small\"\n          href={`${announcementsLink()}?tag=${tag.slug}`}\n        >\n          <RiHashtag size={10} /> {tag.title}\n        </Tag>\n      ))}\n    </TagGroup>\n  );\n};\n\ntype AnnouncementDetailsCardProps = {\n  announcement: Announcement;\n  markdownRenderer?: MarkdownRendererTypeProps;\n};\n\nconst AnnouncementDetailsCard = (props: AnnouncementDetailsCardProps) => {\n  const { announcement, markdownRenderer } = props;\n  const { title, category, body, created_at, on_behalf_of, publisher, tags } =\n    announcement;\n\n  const announcementsApi = useApi(announcementsApiRef);\n  const analytics = useAnalytics();\n  const { t } = useAnnouncementsTranslation();\n\n  const lastSeen = announcementsApi.lastSeenDate();\n  const announcementCreatedAt = DateTime.fromISO(created_at);\n\n  if (announcementCreatedAt > lastSeen) {\n    announcementsApi.markLastSeenDate(announcementCreatedAt);\n  }\n\n  useEffect(() => {\n    if (!announcement) {\n      return;\n    }\n\n    analytics.captureEvent('view', announcement.title, {\n      attributes: {\n        announcementId: announcement.id,\n        location: 'AnnouncementPage',\n      },\n    });\n  }, [analytics, announcement]);\n\n  return (\n    <Card>\n      <Box\n        style={{\n          borderBottom: 'solid 1px #e0e0e0',\n          paddingBottom: 16,\n          paddingRight: 8,\n        }}\n      >\n        <CardHeader>\n          <Flex justify=\"between\" pb=\"3\">\n            <AnnouncementCategoryBadge category={category} />\n\n            <Text variant=\"body-small\" as=\"p\">\n              {DateTime.fromISO(created_at).toRelative()}\n            </Text>\n          </Flex>\n          <Text variant=\"title-medium\" as=\"h2\">\n            {title}\n          </Text>\n\n          <Text variant=\"body-small\" as=\"p\">\n            {t('viewAnnouncementPage.by')}{' '}\n            <EntityRefLink entityRef={on_behalf_of || publisher} hideIcon />\n          </Text>\n        </CardHeader>\n      </Box>\n\n      <CardBody>\n        <AnnouncementTagsTagGroup tags={tags ?? []} />\n        <MarkdownRenderer content={body} rendererType={markdownRenderer} />\n      </CardBody>\n    </Card>\n  );\n};\n\ntype ViewAnnouncementPageProps = {\n  title: string;\n  markdownRenderer?: MarkdownRendererTypeProps;\n};\n\nexport const ViewAnnouncementPage = (props: ViewAnnouncementPageProps) => {\n  const { id } = useRouteRefParams(announcementViewRouteRef);\n  const announcementsApi = useApi(announcementsApiRef);\n  const { t } = useAnnouncementsTranslation();\n\n  const announcementsLink = useRouteRef(rootRouteRef);\n\n  const {\n    value: announcement,\n    loading,\n    error,\n  } = useAsync(async () => announcementsApi.announcementByID(id), [id]);\n\n  if (loading) {\n    return <Skeleton />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  } else if (!announcement) {\n    return <Alert severity=\"error\">{t('viewAnnouncementPage.notFound')}</Alert>;\n  }\n\n  return (\n    <>\n      <HeaderPage\n        title={`${announcement.title ?? ''}`}\n        breadcrumbs={[\n          {\n            label: t('viewAnnouncementPage.announcements'),\n            href: announcementsLink(),\n          },\n        ]}\n      />\n\n      <Container>\n        <Grid.Root columns=\"1\">\n          <Grid.Item>\n            <AnnouncementDetailsCard\n              announcement={announcement}\n              markdownRenderer={props.markdownRenderer}\n            />\n          </Grid.Item>\n\n          <Grid.Item>\n            <Box mb=\"8\">\n              <BackToAnnouncementsButton />\n            </Box>\n          </Grid.Item>\n        </Grid.Root>\n      </Container>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/alpha/components/shared/AnnouncementPublishedBy/AnnouncementPublishedBy.esm.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { DateTime } from 'luxon';
+import { useRouteRef } from '@backstage/frontend-plugin-api';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
+import { Text, Link } from '@backstage/ui';
+import { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';
+import { rootRouteRef } from '../../../../routes.esm.js';
+
+const AnnouncementPublishedBy = ({
+  announcement
+}) => {
+  const { t } = useAnnouncementsTranslation();
+  const announcementsLink = useRouteRef(rootRouteRef);
+  return /* @__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()
+  ] });
+};
+
+export { AnnouncementPublishedBy };
+//# sourceMappingURL=AnnouncementPublishedBy.esm.js.map

package/dist/alpha/components/shared/AnnouncementPublishedBy/AnnouncementPublishedBy.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementPublishedBy.esm.js","sources":["../../../../../src/alpha/components/shared/AnnouncementPublishedBy/AnnouncementPublishedBy.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { DateTime } from 'luxon';\nimport { useRouteRef } from '@backstage/frontend-plugin-api';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { Text, Link } from '@backstage/ui';\n\nimport { Announcement } from '@backstage-community/plugin-announcements-common';\nimport { useAnnouncementsTranslation } from '@backstage-community/plugin-announcements-react';\nimport { rootRouteRef } from '../../../../routes';\n\ntype AnnouncementPublishedByProps = {\n  announcement: Announcement;\n};\n\nexport const AnnouncementPublishedBy = ({\n  announcement,\n}: AnnouncementPublishedByProps) => {\n  const { t } = useAnnouncementsTranslation();\n\n  const announcementsLink = useRouteRef(rootRouteRef);\n\n  return (\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};\n"],"names":[],"mappings":";;;;;;;;AA4BO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,CAAoC,KAAA;AAClC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAM,MAAA,iBAAA,GAAoB,YAAY,YAAY,CAAA;AAElD,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,YAAA,EAAa,IAAG,MAC3B,EAAA,QAAA,EAAA;AAAA,IAAA,CAAA,CAAE,2BAA2B,CAAA;AAAA,IAAG,GAAA;AAAA,oBACjC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,YAAa,CAAA,YAAA,IAAgB,YAAa,CAAA,SAAA;AAAA,QACrD,QAAQ,EAAA;AAAA;AAAA,KACV;AAAA,IACC,YAAA,CAAa,4BAET,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MACA,EAAE,2BAA2B,CAAA;AAAA,MAAG,GAAA;AAAA,sBACjC,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,MAAM,CAAG,EAAA,iBAAA,IAAqB,CAC5B,UAAA,EAAA,YAAA,CAAa,SAAS,IACxB,CAAA,CAAA;AAAA,UAEC,uBAAa,QAAS,CAAA;AAAA;AAAA;AACzB,KACF,EAAA,CAAA;AAAA,IACA,IAAA;AAAA,IACC,QAAS,CAAA,OAAA,CAAQ,YAAa,CAAA,UAAU,EAAE,UAAW;AAAA,GAC1D,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/shared/AnnouncementTags/AnnouncementTags.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { TagGroup, Tag } from '@backstage/ui';
+import { useRouteRef } from '@backstage/frontend-plugin-api';
+import { rootRouteRef } from '../../../../routes.esm.js';
+
+const AnnouncementTags = (props) => {
+  const announcementsLink = useRouteRef(rootRouteRef);
+  if (!props.tags || props.tags.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(TagGroup, { children: props.tags.map((tag) => /* @__PURE__ */ jsx(
+    Tag,
+    {
+      href: `${announcementsLink?.()}?tags=${tag.slug}`,
+      children: tag.title
+    },
+    tag.slug
+  )) });
+};
+
+export { AnnouncementTags };
+//# sourceMappingURL=AnnouncementTags.esm.js.map

package/dist/alpha/components/shared/AnnouncementTags/AnnouncementTags.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementTags.esm.js","sources":["../../../../../src/alpha/components/shared/AnnouncementTags/AnnouncementTags.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 */\n\nimport { Tag as BuiTagComponent, TagGroup } from '@backstage/ui';\nimport { useRouteRef } from '@backstage/frontend-plugin-api';\nimport { Tag } from '@backstage-community/plugin-announcements-common';\n\nimport { rootRouteRef } from '../../../../routes';\n\nexport type AnnouncementTagsProps = {\n  tags?: Tag[];\n};\n\nexport const AnnouncementTags = (props: AnnouncementTagsProps) => {\n  const announcementsLink = useRouteRef(rootRouteRef);\n\n  if (!props.tags || props.tags.length === 0) {\n    return null;\n  }\n\n  return (\n    <TagGroup>\n      {props.tags.map(tag => (\n        <BuiTagComponent\n          key={tag.slug}\n          href={`${announcementsLink?.()}?tags=${tag.slug}`}\n        >\n          {tag.title}\n        </BuiTagComponent>\n      ))}\n    </TagGroup>\n  );\n};\n"],"names":["BuiTagComponent"],"mappings":";;;;;AA0Ba,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAM,MAAA,iBAAA,GAAoB,YAAY,YAAY,CAAA;AAElD,EAAA,IAAI,CAAC,KAAM,CAAA,IAAA,IAAQ,KAAM,CAAA,IAAA,CAAK,WAAW,CAAG,EAAA;AAC1C,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA,EACE,QAAM,EAAA,KAAA,CAAA,IAAA,CAAK,IAAI,CACd,GAAA,qBAAA,GAAA;AAAA,IAACA,GAAA;AAAA,IAAA;AAAA,MAEC,MAAM,CAAG,EAAA,iBAAA,IAAqB,CAAA,MAAA,EAAS,IAAI,IAAI,CAAA,CAAA;AAAA,MAE9C,QAAI,EAAA,GAAA,CAAA;AAAA,KAAA;AAAA,IAHA,GAAI,CAAA;AAAA,GAKZ,CACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/alpha/components/shared/CategorySelectInput/CategorySelectInput.esm.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Select } from '@backstage/ui';
+import { useAnnouncementsTranslation, useCategories } from '@backstage-community/plugin-announcements-react';
+
+const CategorySelectInput = ({
+  setCategory,
+  initialCategory,
+  hideLabel = false
+}) => {
+  const { t } = useAnnouncementsTranslation();
+  const { categories, loading: categoriesLoading } = useCategories();
+  const selectOptions = useMemo(() => {
+    if (!categories) return [];
+    return categories.map((category) => ({
+      value: category.slug,
+      label: category.title
+    }));
+  }, [categories]);
+  const selectedCategory = useMemo(() => {
+    if (!initialCategory) return void 0;
+    const category = categories?.find((cat) => cat.slug === initialCategory.slug);
+    return category ?? initialCategory;
+  }, [initialCategory, categories]);
+  const handleChange = (value) => {
+    if (!value) {
+      setCategory(null);
+      return;
+    }
+    let stringValue = null;
+    if (Array.isArray(value)) {
+      stringValue = String(value[0] ?? "");
+    } else {
+      stringValue = String(value);
+    }
+    if (!stringValue) {
+      setCategory(null);
+      return;
+    }
+    const category = categories?.find((cat) => cat.slug === stringValue);
+    if (!category) {
+      setCategory(null);
+      return;
+    }
+    setCategory(category);
+  };
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      name: "category",
+      label: hideLabel ? null : t("announcementsPage.filter.category"),
+      searchable: true,
+      placeholder: t("announcementsPage.filter.categoryPlaceholder"),
+      searchPlaceholder: t(
+        "announcementsPage.filter.categorySearchPlaceholder"
+      ),
+      value: selectedCategory?.slug ?? null,
+      onChange: handleChange,
+      options: selectOptions,
+      isDisabled: categoriesLoading || selectOptions.length === 0
+    },
+    selectedCategory?.slug ?? "none"
+  );
+};
+
+export { CategorySelectInput };
+//# sourceMappingURL=CategorySelectInput.esm.js.map

package/dist/alpha/components/shared/CategorySelectInput/CategorySelectInput.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategorySelectInput.esm.js","sources":["../../../../../src/alpha/components/shared/CategorySelectInput/CategorySelectInput.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 { Key, useMemo } from 'react';\nimport { Select } from '@backstage/ui';\nimport {\n  useAnnouncementsTranslation,\n  useCategories,\n} from '@backstage-community/plugin-announcements-react';\nimport { Category } from '@backstage-community/plugin-announcements-common';\n\ntype CategorySelectInputProps = {\n  initialCategory?: Category;\n  setCategory: (category: Category | null) => void;\n  hideLabel?: boolean;\n};\n\nexport const CategorySelectInput = ({\n  setCategory,\n  initialCategory,\n  hideLabel = false,\n}: CategorySelectInputProps) => {\n  const { t } = useAnnouncementsTranslation();\n\n  const { categories, loading: categoriesLoading } = useCategories();\n\n  const selectOptions = useMemo(() => {\n    if (!categories) return [];\n    return categories.map(category => ({\n      value: category.slug,\n      label: category.title,\n    }));\n  }, [categories]);\n\n  const selectedCategory = useMemo(() => {\n    if (!initialCategory) return undefined;\n\n    const category = categories?.find(cat => cat.slug === initialCategory.slug);\n\n    return category ?? initialCategory;\n  }, [initialCategory, categories]);\n\n  const handleChange = (value: Key[] | Key | null) => {\n    if (!value) {\n      setCategory(null);\n      return;\n    }\n\n    let stringValue: string | null = null;\n\n    if (Array.isArray(value)) {\n      stringValue = String(value[0] ?? '');\n    } else {\n      stringValue = String(value);\n    }\n\n    if (!stringValue) {\n      setCategory(null);\n      return;\n    }\n\n    const category = categories?.find(cat => cat.slug === stringValue);\n\n    if (!category) {\n      setCategory(null);\n      return;\n    }\n\n    setCategory(category);\n  };\n\n  return (\n    <Select\n      key={selectedCategory?.slug ?? 'none'}\n      name=\"category\"\n      label={hideLabel ? null : t('announcementsPage.filter.category')}\n      searchable\n      placeholder={t('announcementsPage.filter.categoryPlaceholder')}\n      searchPlaceholder={t(\n        'announcementsPage.filter.categorySearchPlaceholder',\n      )}\n      value={selectedCategory?.slug ?? null}\n      onChange={handleChange}\n      options={selectOptions}\n      isDisabled={categoriesLoading || selectOptions.length === 0}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA6BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,WAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAY,GAAA;AACd,CAAgC,KAAA;AAC9B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,MAAM,EAAE,UAAA,EAAY,OAAS,EAAA,iBAAA,KAAsB,aAAc,EAAA;AAEjE,EAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM;AAClC,IAAI,IAAA,CAAC,UAAY,EAAA,OAAO,EAAC;AACzB,IAAO,OAAA,UAAA,CAAW,IAAI,CAAa,QAAA,MAAA;AAAA,MACjC,OAAO,QAAS,CAAA,IAAA;AAAA,MAChB,OAAO,QAAS,CAAA;AAAA,KAChB,CAAA,CAAA;AAAA,GACJ,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,gBAAA,GAAmB,QAAQ,MAAM;AACrC,IAAI,IAAA,CAAC,iBAAwB,OAAA,KAAA,CAAA;AAE7B,IAAA,MAAM,WAAW,UAAY,EAAA,IAAA,CAAK,SAAO,GAAI,CAAA,IAAA,KAAS,gBAAgB,IAAI,CAAA;AAE1E,IAAA,OAAO,QAAY,IAAA,eAAA;AAAA,GAClB,EAAA,CAAC,eAAiB,EAAA,UAAU,CAAC,CAAA;AAEhC,EAAM,MAAA,YAAA,GAAe,CAAC,KAA8B,KAAA;AAClD,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA;AAAA;AAGF,IAAA,IAAI,WAA6B,GAAA,IAAA;AAEjC,IAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,MAAA,WAAA,GAAc,MAAO,CAAA,KAAA,CAAM,CAAC,CAAA,IAAK,EAAE,CAAA;AAAA,KAC9B,MAAA;AACL,MAAA,WAAA,GAAc,OAAO,KAAK,CAAA;AAAA;AAG5B,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA;AAAA;AAGF,IAAA,MAAM,WAAW,UAAY,EAAA,IAAA,CAAK,CAAO,GAAA,KAAA,GAAA,CAAI,SAAS,WAAW,CAAA;AAEjE,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA;AAAA;AAGF,IAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,GACtB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAEC,IAAK,EAAA,UAAA;AAAA,MACL,KAAO,EAAA,SAAA,GAAY,IAAO,GAAA,CAAA,CAAE,mCAAmC,CAAA;AAAA,MAC/D,UAAU,EAAA,IAAA;AAAA,MACV,WAAA,EAAa,EAAE,8CAA8C,CAAA;AAAA,MAC7D,iBAAmB,EAAA,CAAA;AAAA,QACjB;AAAA,OACF;AAAA,MACA,KAAA,EAAO,kBAAkB,IAAQ,IAAA,IAAA;AAAA,MACjC,QAAU,EAAA,YAAA;AAAA,MACV,OAAS,EAAA,aAAA;AAAA,MACT,UAAA,EAAY,iBAAqB,IAAA,aAAA,CAAc,MAAW,KAAA;AAAA,KAAA;AAAA,IAXrD,kBAAkB,IAAQ,IAAA;AAAA,GAYjC;AAEJ;;;;"}

package/dist/alpha/components/shared/TagsSelectInput/TagsSelectInput.esm.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Select } from '@backstage/ui';
+import { useAnnouncementsTranslation, useTags } from '@backstage-community/plugin-announcements-react';
+
+const TagsSelectInput = ({
+  setTags,
+  initialTags,
+  hideLabel = false
+}) => {
+  const { t } = useAnnouncementsTranslation();
+  const { tags, loading: tagsLoading } = useTags();
+  const selectOptions = useMemo(() => {
+    if (!tags) return [];
+    return tags.map((tag) => ({
+      value: tag.slug,
+      label: tag.title
+    }));
+  }, [tags]);
+  const selectedTags = useMemo(() => {
+    if (!initialTags || initialTags.length === 0) return [];
+    return initialTags.map((initialTag) => {
+      const tag = tags?.find((tagItem) => tagItem.slug === initialTag.slug);
+      return tag ?? initialTag;
+    });
+  }, [initialTags, tags]);
+  const selectedTagSlugs = useMemo(() => {
+    return selectedTags.map((tag) => tag.slug);
+  }, [selectedTags]);
+  const handleChange = (value) => {
+    if (!value) {
+      setTags(null);
+      return;
+    }
+    let stringValues = [];
+    if (Array.isArray(value)) {
+      stringValues = value.map((v) => String(v));
+    } else {
+      stringValues = [String(value)];
+    }
+    if (stringValues.length === 0) {
+      setTags(null);
+      return;
+    }
+    const selectedTagsList = stringValues.map((slug) => tags?.find((tag) => tag.slug === slug)).filter((tag) => tag !== void 0);
+    setTags(selectedTagsList.length > 0 ? selectedTagsList : null);
+  };
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      name: "tags",
+      label: hideLabel ? null : t("announcementsPage.filter.tags"),
+      placeholder: t("announcementsPage.filter.tagsPlaceholder"),
+      searchPlaceholder: t("announcementsPage.filter.tagsSearchPlaceholder"),
+      searchable: true,
+      selectionMode: "multiple",
+      value: selectedTagSlugs,
+      onChange: handleChange,
+      options: selectOptions,
+      isDisabled: tagsLoading || selectOptions.length === 0
+    },
+    selectedTagSlugs.join(",") || "none"
+  );
+};
+
+export { TagsSelectInput };
+//# sourceMappingURL=TagsSelectInput.esm.js.map

package/dist/alpha/components/shared/TagsSelectInput/TagsSelectInput.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsSelectInput.esm.js","sources":["../../../../../src/alpha/components/shared/TagsSelectInput/TagsSelectInput.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 { Key, useMemo } from 'react';\nimport { Select } from '@backstage/ui';\nimport {\n  useAnnouncementsTranslation,\n  useTags,\n} from '@backstage-community/plugin-announcements-react';\nimport { Tag } from '@backstage-community/plugin-announcements-common';\n\ntype TagsSelectInputProps = {\n  initialTags?: Tag[];\n  setTags: (tags: Tag[] | null) => void;\n  hideLabel?: boolean;\n};\n\nexport const TagsSelectInput = ({\n  setTags,\n  initialTags,\n  hideLabel = false,\n}: TagsSelectInputProps) => {\n  const { t } = useAnnouncementsTranslation();\n\n  const { tags, loading: tagsLoading } = useTags();\n\n  const selectOptions = useMemo(() => {\n    if (!tags) return [];\n    return tags.map(tag => ({\n      value: tag.slug,\n      label: tag.title,\n    }));\n  }, [tags]);\n\n  const selectedTags = useMemo(() => {\n    if (!initialTags || initialTags.length === 0) return [];\n\n    return initialTags.map(initialTag => {\n      const tag = tags?.find(tagItem => tagItem.slug === initialTag.slug);\n      return tag ?? initialTag;\n    });\n  }, [initialTags, tags]);\n\n  const selectedTagSlugs = useMemo(() => {\n    return selectedTags.map(tag => tag.slug);\n  }, [selectedTags]);\n\n  const handleChange = (value: Key[] | Key | null) => {\n    if (!value) {\n      setTags(null);\n      return;\n    }\n\n    let stringValues: string[] = [];\n\n    if (Array.isArray(value)) {\n      stringValues = value.map(v => String(v));\n    } else {\n      stringValues = [String(value)];\n    }\n\n    if (stringValues.length === 0) {\n      setTags(null);\n      return;\n    }\n\n    const selectedTagsList = stringValues\n      .map(slug => tags?.find(tag => tag.slug === slug))\n      .filter((tag): tag is Tag => tag !== undefined);\n\n    setTags(selectedTagsList.length > 0 ? selectedTagsList : null);\n  };\n\n  return (\n    <Select\n      key={selectedTagSlugs.join(',') || 'none'}\n      name=\"tags\"\n      label={hideLabel ? null : t('announcementsPage.filter.tags')}\n      placeholder={t('announcementsPage.filter.tagsPlaceholder')}\n      searchPlaceholder={t('announcementsPage.filter.tagsSearchPlaceholder')}\n      searchable\n      selectionMode=\"multiple\"\n      value={selectedTagSlugs}\n      onChange={handleChange}\n      options={selectOptions}\n      isDisabled={tagsLoading || selectOptions.length === 0}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage-community/plugin-announcements",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "license": "Apache-2.0",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@backstage-community/plugin-announcements-common": "^0.15.0",
-    "@backstage-community/plugin-announcements-react": "^0.18.1",
+    "@backstage-community/plugin-announcements-react": "^0.18.2",
     "@backstage/catalog-model": "^1.7.6",
     "@backstage/core-app-api": "^1.19.3",
     "@backstage/core-compat-api": "^0.5.5",
@@ -85,7 +85,6 @@
     "@remixicon/react": "^4.7.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@uiw/react-md-editor": "^4.0.8",
-    "add": "^2.0.6",
     "luxon": "^3.2.0",
     "react-use": "^17.2.4",
     "slugify": "1.6.6"
@@ -105,8 +104,6 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/luxon": "^3.3.3",
-    "cross-fetch": "^4.0.0",
-    "msw": "^1.3.2",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.3.0"