feat(announcements): add banner for nfs (#6086)

this adds the missing banner for the new frontend system to show
announcements globally.

Signed-off-by: Hellgren Heikki <[email protected]>

Author: drodil

workspaces/announcements/.changeset/wet-dogs-shop.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-announcements': patch
+---
+
+Added announcement banner as app root element for the new frontend system.

workspaces/announcements/plugins/announcements/report-alpha.api.md

@@ -14,6 +14,7 @@ import { EntityPredicate } from '@backstage/plugin-catalog-react/alpha';
 import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
 import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
+import { ExtensionInput } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
@@ -47,6 +48,45 @@ const _default: OverridableFrontendPlugin<
         params: ApiFactory<TApi, TImpl, TDeps>,
       ) => ExtensionBlueprintParams<AnyApiFactory>;
     }>;
+    'app-root-element:announcements/banner': ExtensionDefinition<{
+      config: {
+        variant: 'block' | 'floating';
+        max: number | undefined;
+        category: string | undefined;
+        active: boolean | undefined;
+        current: boolean | undefined;
+        tags: string[] | undefined;
+      };
+      configInput: {
+        variant?: 'block' | 'floating' | undefined;
+        max?: number | undefined;
+        active?: boolean | undefined;
+        current?: boolean | undefined;
+        tags?: string[] | undefined;
+        category?: string | undefined;
+      };
+      output: ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>;
+      inputs: {
+        [x: string]: ExtensionInput<
+          ExtensionDataRef<
+            unknown,
+            string,
+            {
+              optional?: true | undefined;
+            }
+          >,
+          {
+            optional: boolean;
+            singleton: boolean;
+          }
+        >;
+      };
+      kind: 'app-root-element';
+      name: 'banner';
+      params: {
+        element: JSX.Element;
+      };
+    }>;
     'entity-card:announcements/announcements': ExtensionDefinition<{
       kind: 'entity-card';
       name: 'announcements';

workspaces/announcements/plugins/announcements/src/alpha.ts

@@ -24,6 +24,7 @@ import {
   announcementsSearchResultListItem,
 } from './alpha/search';
 import { rootRouteRef } from './routes';
+import { announcementsBanner } from './alpha/banner';
 
 /**
  * @alpha
@@ -40,5 +41,6 @@ export default createFrontendPlugin({
     announcementsNavItem,
     announcementsSearchResultListItem,
     announcementsSearchFilterResultType,
+    announcementsBanner,
   ],
 });

workspaces/announcements/plugins/announcements/src/alpha/banner.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 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 { AppRootElementBlueprint } from '@backstage/frontend-plugin-api';
+import { NewAnnouncementBanner } from '../components/NewAnnouncementBanner';
+
+/**
+ * @alpha
+ */
+export const announcementsBanner = AppRootElementBlueprint.makeWithOverrides({
+  name: 'banner',
+  config: {
+    schema: {
+      variant: z => z.enum(['block', 'floating']).default('floating'),
+      max: z => z.number().optional(),
+      category: z => z.string().optional(),
+      active: z => z.boolean().optional(),
+      current: z => z.boolean().optional(),
+      tags: z => z.array(z.string()).optional(),
+    },
+  },
+  factory: (originalFactory, { config }) => {
+    return originalFactory({
+      element: <NewAnnouncementBanner {...config} />,
+    });
+  },
+});

workspaces/announcements/plugins/announcements/src/alpha/index.ts

@@ -18,3 +18,4 @@ export * from './entityCards';
 export * from './navItems';
 export * from './pages';
 export * from './search';
+export * from './banner';