/* * Copyright 2026 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { DateTime } from 'luxon'; import { InfoCard, InfoCardVariants, Progress, } from '@backstage/core-components'; import { useApi, useRouteRef, useAnalytics } from '@backstage/core-plugin-api'; import { announcementAdminRouteRef, announcementViewRouteRef, rootRouteRef, } from '../../routes'; import { formatAnnouncementStartTime } from '../utils/announcementDateUtils'; import { announcementsApiRef, useAnnouncements, useAnnouncementsTranslation, useAnnouncementsPermissions, } from '@backstage-community/plugin-announcements-react'; import { Alert, Box, Flex, Link, List, ListRow, Tag, TagGroup, Text, } from '@backstage/ui'; import { RiMegaphoneLine } from '@remixicon/react'; type AnnouncementsCardOpts = { title?: string; max?: number; category?: string; active?: boolean; variant?: InfoCardVariants; sortBy?: 'created_at' | 'start_at'; order?: 'asc' | 'desc'; current?: boolean; hideStartAt?: boolean; }; export const AnnouncementsCard = ({ title, max, category, active, variant = 'gridItem', sortBy, order, current, hideStartAt, }: AnnouncementsCardOpts) => { const announcementsApi = useApi(announcementsApiRef); const announcementsLink = useRouteRef(rootRouteRef); const viewAnnouncementLink = useRouteRef(announcementViewRouteRef); const announcementAdminLink = useRouteRef(announcementAdminRouteRef); const lastSeen = announcementsApi.lastSeenDate(); const analytics = useAnalytics(); const { t } = useAnnouncementsTranslation(); const { announcements, loading, error } = useAnnouncements({ max: max || 5, category, active, sortBy, order, current, }); const permissions = useAnnouncementsPermissions(); if (loading) { return ; } else if (error) { return ; } const deepLink = { link: announcementsLink(), title: t('announcementsCard.seeAll'), }; return ( ( {`${t('announcementsCard.noAnnouncements')} `} {t('announcementsCard.addOne')} ? ) : undefined } > {announcement => ( } > analytics.captureEvent('click', announcement.title, { attributes: { announcementId: announcement.id, location: 'AnnouncementsCard', }, }) } > {announcement.title} {DateTime.fromISO(announcement.created_at).toRelative()} {announcement.category && ( <> {` ${t('announcementsCard.in')} `} {announcement.category.title} )} {announcement.excerpt} {announcement.tags && announcement.tags.length > 0 && ( {announcement.tags.map(tag => ( {tag.title} ))} )} {!hideStartAt && ( {formatAnnouncementStartTime( announcement.start_at, t('announcementsCard.occurred'), t('announcementsCard.scheduled'), t('announcementsCard.today'), )} )} )} ); };