feat(global-header): support multiple support links

workspaces/global-header/.changeset/selfish-gorillas-bake.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': minor
+---
+
+Support multiple support links

workspaces/global-header/plugins/global-header/src/components/SupportButton/SupportButton.test.tsx

@@ -52,6 +52,37 @@ const configWithoutSupportUrl = mockApis.config({
   },
 });
 
+const configWithSupportItems = mockApis.config({
+  data: {
+    app: {
+      support: {
+        items: [
+          {
+            title: 'Issues',
+            icon: 'github',
+            links: [
+              {
+                url: 'https://github.com/backstage/backstage/issues',
+                title: 'GitHub Issues',
+              },
+            ],
+          },
+          {
+            title: 'Discord Chatroom',
+            icon: 'chat',
+            links: [
+              {
+                url: 'https://discord.gg/backstage-687207715902193673',
+                title: '#backstage',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+});
+
 describe('SupportButton', () => {
   it('renders a button when the support url is defined', async () => {
     const { getByTestId } = await renderInTestApp(
@@ -104,4 +135,20 @@ describe('SupportButton', () => {
       '_blank',
     );
   });
+
+  it('renders multiple buttons when support items are defined in config', async () => {
+    const { getAllByTestId } = await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, configWithSupportItems]]}>
+        <SupportButton />
+      </TestApiProvider>,
+    );
+    const buttons = getAllByTestId('support-button');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0].getAttribute('href')).toEqual(
+      'https://github.com/backstage/backstage/issues',
+    );
+    expect(buttons[1].getAttribute('href')).toEqual(
+      'https://discord.gg/backstage-687207715902193673',
+    );
+  });
 });

workspaces/global-header/plugins/global-header/src/components/SupportButton/SupportButton.tsx

@@ -22,6 +22,17 @@ import { CSSProperties } from 'react';
 import { useTranslation } from '../../hooks/useTranslation';
 import { translateWithFallback } from '../../utils/translationUtils';
 
+interface SupportLink {
+  url: string;
+  title: string;
+}
+
+interface SupportItem {
+  title: string;
+  icon?: string;
+  links: SupportLink[];
+}
+
 /**
  * @public
  */
@@ -30,6 +41,7 @@ export interface SupportButtonProps {
   title?: string;
   titleKey?: string;
   to?: string;
+  items?: SupportItem[];
   tooltip?: string;
   style?: CSSProperties;
   onClick?: () => void;
@@ -41,6 +53,7 @@ export const SupportButton = ({
   title = 'Support',
   titleKey = 'help.supportTitle',
   to,
+  items,
   icon = 'support',
   tooltip,
   style,
@@ -53,6 +66,45 @@ export const SupportButton = ({
   const displayTitle = translateWithFallback(t, titleKey, title);
   const supportUrl = to ?? config?.getOptionalString('app.support.url');
 
+  const supportItems =
+    items ??
+    (config
+      ?.getOptionalConfigArray('app.support.items')
+      ?.map(item => ({
+        title: item.getString('title'),
+        icon: item.getOptionalString('icon'),
+        links: item.getConfigArray('links').map(link => ({
+          url: link.getString('url'),
+          title: link.getString('title'),
+        })),
+      })) as SupportItem[] | undefined);
+
+  if (supportItems && supportItems.length > 0) {
+    return (
+      <>
+        {supportItems.map((item: SupportItem) =>
+          item.links.map((link: SupportLink) => (
+            <MenuItem
+              key={link.url}
+              to={link.url}
+              component={Link}
+              sx={{ width: '100%', color: 'inherit', ...style }}
+              onClick={onClick}
+              data-testid="support-button"
+            >
+              <MenuItemLink
+                to={link.url}
+                title={link.title}
+                icon={item.icon ?? icon}
+                tooltip={tooltip}
+              />
+            </MenuItem>
+          )),
+        )}
+      </>
+    );
+  }
+
   if (!supportUrl) {
     return null;
   }