added support for a custom component when entity not found

Signed-off-by: shahar.shmaram <shahar.shmaram@appsflyer.com>

.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

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>