From 13f23f65107d82d118ad09dfe033db0c680483bf Mon Sep 17 00:00:00 2001
From: Joon Park <joonp@spotify.com>
Date: Fri, 2 Sep 2022 13:15:25 +0100
Subject: [PATCH 1/4] Allow custom images in empty state component

Signed-off-by: Joon Park <joonp@spotify.com>
---
 .changeset/swift-readers-sin.md                  |  5 +++++
 .../components/EmptyState/EmptyState.test.tsx    | 16 ++++++++++++++++
 .../src/components/EmptyState/EmptyState.tsx     | 13 +++++++++----
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/swift-readers-sin.md

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.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
index 6487fcf4e6..f4a772c0d2 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
@@ -36,4 +36,20 @@ 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, getByRole } = await renderWithEffects(
+      wrapInTestApp(
+        <EmptyState
+          title="Some empty state text"
+          action={<Button aria-label="button">Action</Button>}
+          customImage={<div>Custom Image</div>}
+        />,
+      ),
+    );
+
+    expect(getByText('Some empty state text')).toBeInTheDocument();
+    expect(getByText('Custom Image')).toBeInTheDocument();
+    expect(getByRole('button')).toBeInTheDocument();
+  });
 });
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index b4fbf6d510..7671dabadb 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -42,9 +42,14 @@ const useStyles = makeStyles(
 type Props = {
   title: string;
   description?: string | JSX.Element;
-  missing: 'field' | 'info' | 'content' | 'data';
   action?: JSX.Element;
-};
+} & (
+  | {
+      missing: 'field' | 'info' | 'content' | 'data';
+      customImage?: never;
+    }
+  | { missing?: never; customImage: JSX.Element }
+);
 
 /**
  * Various placeholder views for empty state pages
@@ -53,7 +58,7 @@ type Props = {
  *
  */
 export function EmptyState(props: Props) {
-  const { title, description, missing, action } = props;
+  const { title, description, missing, action, customImage } = props;
   const classes = useStyles();
   return (
     <Grid
@@ -78,7 +83,7 @@ export function EmptyState(props: Props) {
         </Grid>
       </Grid>
       <Grid item xs={12} md={6} className={classes.imageContainer}>
-        <EmptyStateImage missing={missing} />
+        {customImage ?? <EmptyStateImage missing={missing} />}
       </Grid>
     </Grid>
   );

From def8111ae108921f8bbe2505c3ef1a3f18110d5a Mon Sep 17 00:00:00 2001
From: Joon Park <joonp@spotify.com>
Date: Fri, 2 Sep 2022 16:34:15 +0100
Subject: [PATCH 2/4] Simplify prop type

Signed-off-by: Joon Park <joonp@spotify.com>
---
 .../src/components/EmptyState/EmptyState.test.tsx   |  6 ++----
 .../src/components/EmptyState/EmptyState.tsx        | 13 ++++---------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
index f4a772c0d2..b24dbd812b 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.test.tsx
@@ -38,18 +38,16 @@ describe('<EmptyState />', () => {
   });
 
   it('renders custom image if one is provided', async () => {
-    const { getByText, getByRole } = await renderWithEffects(
+    const { getByText } = await renderWithEffects(
       wrapInTestApp(
         <EmptyState
           title="Some empty state text"
-          action={<Button aria-label="button">Action</Button>}
-          customImage={<div>Custom Image</div>}
+          missing={{ customImage: <div>Custom Image</div> }}
         />,
       ),
     );
 
     expect(getByText('Some empty state text')).toBeInTheDocument();
     expect(getByText('Custom Image')).toBeInTheDocument();
-    expect(getByRole('button')).toBeInTheDocument();
   });
 });
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index 7671dabadb..79f54807ff 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -42,14 +42,9 @@ const useStyles = makeStyles(
 type Props = {
   title: string;
   description?: string | JSX.Element;
+  missing: 'field' | 'info' | 'content' | 'data' | { customImage: JSX.Element };
   action?: JSX.Element;
-} & (
-  | {
-      missing: 'field' | 'info' | 'content' | 'data';
-      customImage?: never;
-    }
-  | { missing?: never; customImage: JSX.Element }
-);
+};
 
 /**
  * Various placeholder views for empty state pages
@@ -58,7 +53,7 @@ type Props = {
  *
  */
 export function EmptyState(props: Props) {
-  const { title, description, missing, action, customImage } = props;
+  const { title, description, missing, action } = props;
   const classes = useStyles();
   return (
     <Grid
@@ -83,7 +78,7 @@ export function EmptyState(props: Props) {
         </Grid>
       </Grid>
       <Grid item xs={12} md={6} className={classes.imageContainer}>
-        {customImage ?? <EmptyStateImage missing={missing} />}
+        {typeof missing === 'string' ? <EmptyStateImage missing={missing} /> : missing.customImage}
       </Grid>
     </Grid>
   );

From 801ecc0354c87ccfb6dd9f85b8837e407ce4d59c Mon Sep 17 00:00:00 2001
From: Joon Park <joonp@spotify.com>
Date: Fri, 2 Sep 2022 16:34:32 +0100
Subject: [PATCH 3/4] Add storybook

Signed-off-by: Joon Park <joonp@spotify.com>
---
 .../src/components/EmptyState/EmptyState.stories.tsx   | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
index 53314497fb..4d85a81719 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
@@ -76,3 +76,13 @@ 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>
+);

From 21494054dc07b667f0b988181bee1e00d63b837a Mon Sep 17 00:00:00 2001
From: Joon Park <joonp@spotify.com>
Date: Fri, 2 Sep 2022 16:52:24 +0100
Subject: [PATCH 4/4] Prettier

Signed-off-by: Joon Park <joonp@spotify.com>
---
 .../src/components/EmptyState/EmptyState.stories.tsx   | 10 ++++++++--
 .../src/components/EmptyState/EmptyState.tsx           |  6 +++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
index 4d85a81719..65e9641dd0 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.stories.tsx
@@ -77,12 +77,18 @@ 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" /> }}
+      missing={{
+        customImage: (
+          <img
+            src="https://backstage.io/animations/backstage-software-catalog-icon-1.gif"
+            alt="Backstage example"
+          />
+        ),
+      }}
     />
   </div>
 );
diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx
index 79f54807ff..3691ffca9e 100644
--- a/packages/core-components/src/components/EmptyState/EmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx
@@ -78,7 +78,11 @@ export function EmptyState(props: Props) {
         </Grid>
       </Grid>
       <Grid item xs={12} md={6} className={classes.imageContainer}>
-        {typeof missing === 'string' ? <EmptyStateImage missing={missing} /> : missing.customImage}
+        {typeof missing === 'string' ? (
+          <EmptyStateImage missing={missing} />
+        ) : (
+          missing.customImage
+        )}
       </Grid>
     </Grid>
   );