From 27032df2d18da6aa821a9eae933f0096a4069a36 Mon Sep 17 00:00:00 2001
From: "shahar.shmaram" <shahar.shmaram@appsflyer.com>
Date: Thu, 21 Apr 2022 12:55:16 +0300
Subject: [PATCH 1/4] added supoprt for a custom component when entity not
 found

Signed-off-by: shahar.shmaram <shahar.shmaram@appsflyer.com>
---
 .../src/components/EntityLayout/EntityLayout.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
index d4244419cb..f76690c010 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
@@ -152,6 +152,7 @@ export interface EntityLayoutProps {
   UNSTABLE_extraContextMenuItems?: ExtraContextMenuItem[];
   UNSTABLE_contextMenuOptions?: contextMenuOptions;
   children?: React.ReactNode;
+  NotFoundComponent?: React.ReactNode;
 }
 
 /**
@@ -176,6 +177,7 @@ export const EntityLayout = (props: EntityLayoutProps) => {
     UNSTABLE_extraContextMenuItems,
     UNSTABLE_contextMenuOptions,
     children,
+    NotFoundComponent,
   } = props;
   const { kind, namespace, name } = useRouteRefParams(entityRouteRef);
   const { entity, loading, error } = useAsyncEntity();
@@ -259,7 +261,17 @@ export const EntityLayout = (props: EntityLayoutProps) => {
 
       {error && (
         <Content>
-          <Alert severity="error">{error.toString()}</Alert>
+          {NotFoundComponent ? (
+            NotFoundComponent
+          ) : (
+            <WarningPanel title="Entity not found">
+              There is no {kind} with the requested{' '}
+              <Link to="https://backstage.io/docs/features/software-catalog/references">
+                kind, namespace, and name
+              </Link>
+              .
+            </WarningPanel>
+          )}
         </Content>
       )}
 

From 0cd4f041b7e9218fb0c5ac69d75a67735a977a84 Mon Sep 17 00:00:00 2001
From: "shahar.shmaram" <shahar.shmaram@appsflyer.com>
Date: Thu, 21 Apr 2022 12:57:36 +0300
Subject: [PATCH 2/4] added support for a custom component when entity not
 found

Signed-off-by: shahar.shmaram <shahar.shmaram@appsflyer.com>
---
 .../components/EntityLayout/EntityLayout.tsx   | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
index f76690c010..693137fe21 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
@@ -260,6 +260,12 @@ export const EntityLayout = (props: EntityLayoutProps) => {
       {entity && <RoutedTabs routes={routes} />}
 
       {error && (
+        <Content>
+          <Alert severity="error">{error.toString()}</Alert>
+        </Content>
+      )}
+
+      {!loading && !error && !entity && (
         <Content>
           {NotFoundComponent ? (
             NotFoundComponent
@@ -275,18 +281,6 @@ export const EntityLayout = (props: EntityLayoutProps) => {
         </Content>
       )}
 
-      {!loading && !error && !entity && (
-        <Content>
-          <WarningPanel title="Entity not found">
-            There is no {kind} with the requested{' '}
-            <Link to="https://backstage.io/docs/features/software-catalog/references">
-              kind, namespace, and name
-            </Link>
-            .
-          </WarningPanel>
-        </Content>
-      )}
-
       <UnregisterEntityDialog
         open={confirmationDialogOpen}
         entity={entity!}

From ceca63d149412eba4c28ac1ab7d9a4449cc696f6 Mon Sep 17 00:00:00 2001
From: "shahar.shmaram" <shahar.shmaram@appsflyer.com>
Date: Sat, 23 Apr 2022 00:18:45 +0300
Subject: [PATCH 3/4] added support for a custom component when entity not
 found

Signed-off-by: shahar.shmaram <shahar.shmaram@appsflyer.com>
---
 .changeset/nasty-humans-give.md               |  5 ++++
 .../EntityLayout/EntityLayout.test.tsx        | 30 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/nasty-humans-give.md

diff --git a/.changeset/nasty-humans-give.md b/.changeset/nasty-humans-give.md
new file mode 100644
index 0000000000..85ce3149ba
--- /dev/null
+++ b/.changeset/nasty-humans-give.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': minor
+---
+
+Added the prop `NotFoundComponent` to `EntityLayout` which can be used to include a custom component when an entity is not found in the catalog
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
index c1deaf4b74..0a3f443d3e 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
@@ -106,7 +106,7 @@ describe('EntityLayout', () => {
     expect(rendered.getByText('tabbed-test-content')).toBeInTheDocument();
   });
 
-  it('renders error message when entity is not found', async () => {
+  it('renders default error message when entity is not found', async () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={mockApis}>
         <AsyncEntityProvider loading={false}>
@@ -130,6 +130,34 @@ describe('EntityLayout', () => {
     expect(rendered.queryByText('tabbed-test-content')).not.toBeInTheDocument();
   });
 
+  it('renders custom message when entity is not found', async () => {
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={mockApis}>
+        <AsyncEntityProvider loading={false}>
+          <EntityLayout
+            NotFoundComponent={<div>Oppps.. Your entity was not found</div>}
+          >
+            <EntityLayout.Route path="/" title="tabbed-test-title">
+              <div>tabbed-test-content</div>
+            </EntityLayout.Route>
+          </EntityLayout>
+        </AsyncEntityProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog/:namespace/:kind/:name': entityRouteRef,
+        },
+      },
+    );
+
+    expect(
+      rendered.getByText('Oppps.. Your entity was not found'),
+    ).toBeInTheDocument();
+    expect(rendered.queryByText('my-entity')).not.toBeInTheDocument();
+    expect(rendered.queryByText('tabbed-test-title')).not.toBeInTheDocument();
+    expect(rendered.queryByText('tabbed-test-content')).not.toBeInTheDocument();
+  });
+
   it('navigates when user clicks different tab', async () => {
     const rendered = await renderInTestApp(
       <Routes>

From 0e971111b285c663435347124bb47e8f5e45d8bf Mon Sep 17 00:00:00 2001
From: "shahar.shmaram" <shahar.shmaram@appsflyer.com>
Date: Mon, 25 Apr 2022 11:56:30 +0300
Subject: [PATCH 4/4] changes to the api-report.md

Signed-off-by: shahar.shmaram <shahar.shmaram@appsflyer.com>
---
 plugins/catalog/api-report.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md
index d1e733a553..f9c0df5abc 100644
--- a/plugins/catalog/api-report.md
+++ b/plugins/catalog/api-report.md
@@ -247,6 +247,8 @@ export const EntityLayout: {
 export interface EntityLayoutProps {
   // (undocumented)
   children?: React_2.ReactNode;
+  // (undocumented)
+  NotFoundComponent?: React_2.ReactNode;
   // Warning: (ae-forgotten-export) The symbol "contextMenuOptions" needs to be exported by the entry point index.d.ts
   //
   // (undocumented)