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) => ( + + ))}