Merge pull request #11047 from shmaram/entity-not-found-custom-component

Added an ability to use a custom component when an entity is not found

.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/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)

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>

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();
@@ -265,13 +267,17 @@ export const EntityLayout = (props: EntityLayoutProps) => {
 
       {!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>
+          {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>
       )}