Merge pull request #14639 from Roohn/master

SupportButton: Add option to override items

.changeset/modern-mugs-shout.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add items prop to SupportButton. This prop can be used to override the items that would otherwise be grabbed from the config.

packages/core-components/src/components/SupportButton/SupportButton.test.tsx

@@ -15,31 +15,38 @@
  */
 
 import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
 import {
-  render,
-  act,
-  RenderResult,
-  waitFor,
-  fireEvent,
-  screen,
-} from '@testing-library/react';
-import { wrapInTestApp, renderInTestApp } from '@backstage/test-utils';
+  MockConfigApi,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
 import { SupportButton } from './SupportButton';
+import { configApiRef } from '@backstage/core-plugin-api';
+
+const configApi = new MockConfigApi({
+  app: {
+    support: {
+      url: 'https://github.com',
+      items: [
+        {
+          title: 'Github',
+          icon: 'github',
+          links: [{ title: 'Github Issues', url: '/issues' }],
+        },
+      ],
+    },
+  },
+});
 
 const SUPPORT_BUTTON_ID = 'support-button';
 const POPOVER_ID = 'support-button-popover';
 
 describe('<SupportButton />', () => {
   it('renders without exploding', async () => {
-    let renderResult: RenderResult;
+    await renderInTestApp(<SupportButton />);
 
-    await act(async () => {
-      renderResult = render(wrapInTestApp(<SupportButton />));
-    });
-
-    await waitFor(() =>
-      expect(renderResult.getByTestId(SUPPORT_BUTTON_ID)).toBeInTheDocument(),
-    );
+    expect(screen.getByTestId(SUPPORT_BUTTON_ID)).toBeInTheDocument();
   });
 
   it('supports passing a title', async () => {
@@ -48,26 +55,52 @@ describe('<SupportButton />', () => {
     expect(screen.getByText('Custom title')).toBeInTheDocument();
   });
 
+  it('supports passing link items through props', async () => {
+    await renderInTestApp(
+      <SupportButton
+        items={[
+          {
+            title: 'Documentation',
+            icon: 'description',
+            links: [{ title: 'Show docs', url: '/docs' }],
+          },
+        ]}
+      />,
+    );
+
+    const supportButton = screen.getByTestId(SUPPORT_BUTTON_ID);
+    expect(supportButton).toBeInTheDocument();
+
+    fireEvent.click(supportButton);
+
+    const documentationItem = screen.getByText('Documentation');
+    expect(documentationItem).toBeInTheDocument();
+  });
+
+  it('shows items from support config', async () => {
+    await renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, configApi]]}>
+        <SupportButton />
+      </TestApiProvider>,
+    );
+
+    const supportButton = screen.getByTestId(SUPPORT_BUTTON_ID);
+    expect(supportButton).toBeInTheDocument();
+
+    fireEvent.click(supportButton);
+
+    const defaultGithubSupportConfig = screen.getByText('Github Issues');
+    expect(defaultGithubSupportConfig).toBeInTheDocument();
+  });
+
   it('shows popover on click', async () => {
-    let renderResult: RenderResult;
+    await renderInTestApp(<SupportButton />);
 
-    await act(async () => {
-      renderResult = render(wrapInTestApp(<SupportButton />));
-    });
+    const supportButton = screen.getByTestId(SUPPORT_BUTTON_ID);
+    expect(supportButton).toBeInTheDocument();
 
-    let button: HTMLElement;
+    fireEvent.click(supportButton);
 
-    await waitFor(() => {
-      expect(renderResult.getByTestId(SUPPORT_BUTTON_ID)).toBeInTheDocument();
-      button = renderResult.getByTestId(SUPPORT_BUTTON_ID);
-    });
-
-    await act(async () => {
-      fireEvent.click(button);
-    });
-
-    await waitFor(() => {
-      expect(renderResult.getByTestId(POPOVER_ID)).toBeInTheDocument();
-    });
+    expect(screen.getByTestId(POPOVER_ID)).toBeInTheDocument();
   });
 });

packages/core-components/src/components/SupportButton/SupportButton.tsx

@@ -35,6 +35,7 @@ import { Link } from '../Link';
 
 type SupportButtonProps = {
   title?: string;
+  items?: SupportItem[];
   children?: React.ReactNode;
 };
 
@@ -82,8 +83,8 @@ const SupportListItem = ({ item }: { item: SupportItem }) => {
 };
 
 export function SupportButton(props: SupportButtonProps) {
-  const { title, children } = props;
-  const { items } = useSupportConfig();
+  const { title, items, children } = props;
+  const { items: configItems } = useSupportConfig();
 
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
@@ -150,10 +151,9 @@ export function SupportButton(props: SupportButtonProps) {
               {child}
             </ListItem>
           ))}
-          {items &&
-            items.map((item, i) => (
-              <SupportListItem item={item} key={`item-${i}`} />
-            ))}
+          {(items ?? configItems).map((item, i) => (
+            <SupportListItem item={item} key={`item-${i}`} />
+          ))}
         </List>
         <DialogActions>
           <Button color="primary" onClick={popoverCloseHandler}>