diff --git a/.changeset/swift-readers-sin.md b/.changeset/swift-readers-sin.md new file mode 100644 index 0000000000..05bd05a94c --- /dev/null +++ b/.changeset/swift-readers-sin.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Allow custom images in the empty state component diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx index 53314497fb..65e9641dd0 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx @@ -76,3 +76,19 @@ export const WithAction = () => ( /> ); + +export const CustomImage = () => ( +
+ + ), + }} + /> +
+); diff --git a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx index 6487fcf4e6..b24dbd812b 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx @@ -36,4 +36,18 @@ describe('', () => { expect(rendered.getByLabelText('button')).toBeInTheDocument(); expect(rendered.getByAltText('annotation is missing')).toBeInTheDocument(); }); + + it('renders custom image if one is provided', async () => { + const { getByText } = await renderWithEffects( + wrapInTestApp( + Custom Image }} + />, + ), + ); + + expect(getByText('Some empty state text')).toBeInTheDocument(); + expect(getByText('Custom Image')).toBeInTheDocument(); + }); }); diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx index b4fbf6d510..3691ffca9e 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx @@ -42,7 +42,7 @@ const useStyles = makeStyles( type Props = { title: string; description?: string | JSX.Element; - missing: 'field' | 'info' | 'content' | 'data'; + missing: 'field' | 'info' | 'content' | 'data' | { customImage: JSX.Element }; action?: JSX.Element; }; @@ -78,7 +78,11 @@ export function EmptyState(props: Props) { - + {typeof missing === 'string' ? ( + + ) : ( + missing.customImage + )} );