Merge pull request #13508 from backstage/joonp/empty-state-custom-img

Allow custom images in empty state component

.changeset/swift-readers-sin.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Allow custom images in the empty state component

packages/core-components/src/components/EmptyState/EmptyState.stories.tsx

@@ -76,3 +76,19 @@ export const WithAction = () => (
     />
   </div>
 );
+
+export const CustomImage = () => (
+  <div style={containerStyle}>
+    <EmptyState
+      title="Custom image example"
+      missing={{
+        customImage: (
+          <img
+            src="https://backstage.io/animations/backstage-software-catalog-icon-1.gif"
+            alt="Backstage example"
+          />
+        ),
+      }}
+    />
+  </div>
+);

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

@@ -36,4 +36,18 @@ describe('<EmptyState />', () => {
     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(
+        <EmptyState
+          title="Some empty state text"
+          missing={{ customImage: <div>Custom Image</div> }}
+        />,
+      ),
+    );
+
+    expect(getByText('Some empty state text')).toBeInTheDocument();
+    expect(getByText('Custom Image')).toBeInTheDocument();
+  });
 });

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) {
         </Grid>
       </Grid>
       <Grid item xs={12} md={6} className={classes.imageContainer}>
-        <EmptyStateImage missing={missing} />
+        {typeof missing === 'string' ? (
+          <EmptyStateImage missing={missing} />
+        ) : (
+          missing.customImage
+        )}
       </Grid>
     </Grid>
   );