diff --git a/.changeset/modern-mugs-shout.md b/.changeset/modern-mugs-shout.md
new file mode 100644
index 0000000000..8f45810d21
--- /dev/null
+++ b/.changeset/modern-mugs-shout.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Adds prop to SupportButton to override support config items and adds the option to show custom list items per page
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
index 341ed145a6..2a46227e87 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
+++ b/packages/core-components/src/components/SupportButton/SupportButton.test.tsx
@@ -15,31 +15,37 @@
*/
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 = {
+ getOptionalConfig: () =>
+ new MockConfigApi({
+ 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('', () => {
it('renders without exploding', async () => {
- let renderResult: RenderResult;
+ await renderInTestApp();
- await act(async () => {
- renderResult = render(wrapInTestApp());
- });
-
- await waitFor(() =>
- expect(renderResult.getByTestId(SUPPORT_BUTTON_ID)).toBeInTheDocument(),
- );
+ expect(screen.getByTestId(SUPPORT_BUTTON_ID)).toBeInTheDocument();
});
it('supports passing a title', async () => {
@@ -48,26 +54,52 @@ describe('', () => {
expect(screen.getByText('Custom title')).toBeInTheDocument();
});
+ it('supports passing link items through props', async () => {
+ await renderInTestApp(
+ ,
+ );
+
+ 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(
+
+
+ ,
+ );
+
+ 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();
- await act(async () => {
- renderResult = render(wrapInTestApp());
- });
+ 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();
});
});
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx
index 01de79bdee..a155d39025 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.tsx
+++ b/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(null);
@@ -150,10 +151,9 @@ export function SupportButton(props: SupportButtonProps) {
{child}
))}
- {items &&
- items.map((item, i) => (
-
- ))}
+ {(items ?? configItems).map((item, i) => (
+
+ ))}