feat(EntityLayout): show not found message for missing entity

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/gorgeous-ties-doubt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Show a Not Found message when navigating to a nonexistent entity

plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx

@@ -61,6 +61,30 @@ describe('EntityLayout', () => {
     expect(rendered.getByText('tabbed-test-content')).toBeInTheDocument();
   });
 
+  it('renders error message when entity is not found', async () => {
+    const noEntityData = {
+      ...mockEntityData,
+      entity: undefined,
+    };
+
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={mockApis}>
+        <EntityContext.Provider value={noEntityData}>
+          <EntityLayout>
+            <EntityLayout.Route path="/" title="tabbed-test-title">
+              <div>tabbed-test-content</div>
+            </EntityLayout.Route>
+          </EntityLayout>
+        </EntityContext.Provider>
+      </ApiProvider>,
+    );
+
+    expect(rendered.getByText('Warning: Entity 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

@@ -23,9 +23,11 @@ import {
   Content,
   Header,
   HeaderLabel,
+  Link,
   Page,
   Progress,
   RoutedTabs,
+  WarningPanel,
 } from '@backstage/core-components';
 import {
   attachComponentData,
@@ -245,6 +247,19 @@ export const EntityLayout = ({
           <Alert severity="error">{error.toString()}</Alert>
         </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!}