From d4afa7e30da1e54f826b1ddd51220fd4d05a6d29 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 15 Mar 2022 20:46:30 +0100
Subject: [PATCH] catalog: fix EntitySwitch to render default case

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/shy-seals-deny.md                   |  5 +++++
 .../EntitySwitch/EntitySwitch.test.tsx         | 17 ++++++++++++++++-
 .../components/EntitySwitch/EntitySwitch.tsx   | 18 +++++++++++++++---
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/shy-seals-deny.md

diff --git a/.changeset/shy-seals-deny.md b/.changeset/shy-seals-deny.md
new file mode 100644
index 0000000000..1687ccaa75
--- /dev/null
+++ b/.changeset/shy-seals-deny.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Fix for `EntitySwitch` not properly falling back to render the default entity page when the entity is missing.
diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx
index 8768e9728e..9588327c3b 100644
--- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx
+++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx
@@ -15,7 +15,10 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog-react';
+import {
+  AsyncEntityProvider,
+  EntityProvider,
+} from '@backstage/plugin-catalog-react';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { isKind } from './conditions';
@@ -76,6 +79,18 @@ describe('EntitySwitch', () => {
     expect(rendered.queryByText('A')).not.toBeInTheDocument();
     expect(rendered.queryByText('B')).not.toBeInTheDocument();
     expect(rendered.queryByText('C')).toBeInTheDocument();
+
+    rendered.rerender(
+      <Wrapper>
+        <AsyncEntityProvider entity={undefined} loading={false}>
+          {content}
+        </AsyncEntityProvider>
+      </Wrapper>,
+    );
+
+    expect(rendered.queryByText('A')).not.toBeInTheDocument();
+    expect(rendered.queryByText('B')).not.toBeInTheDocument();
+    expect(rendered.queryByText('C')).toBeInTheDocument();
   });
 
   it('should switch child when filters switch', () => {
diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx
index 1b8667ce2a..993e7daa80 100644
--- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx
+++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx
@@ -63,7 +63,7 @@ export interface EntitySwitchProps {
 
 /** @public */
 export const EntitySwitch = (props: EntitySwitchProps) => {
-  const { entity } = useAsyncEntity();
+  const { entity, loading } = useAsyncEntity();
   const apis = useApiHolder();
   const results = useElementFilter(
     props.children,
@@ -75,11 +75,23 @@ export const EntitySwitch = (props: EntitySwitchProps) => {
         })
         .getElements()
         .flatMap<SwitchCaseResult>((element: ReactElement) => {
-          if (!entity) {
+          // Nothing is rendered while loading
+          if (loading) {
             return [];
           }
+
           const { if: condition, children: elementsChildren } =
             element.props as EntitySwitchCase;
+
+          // If the entity is missing or there is an error, render the default page
+          if (!entity) {
+            return [
+              {
+                if: condition === undefined,
+                children: elementsChildren,
+              },
+            ];
+          }
           return [
             {
               if: condition?.(entity, { apis }) ?? true,
@@ -87,7 +99,7 @@ export const EntitySwitch = (props: EntitySwitchProps) => {
             },
           ];
         }),
-    [apis, entity],
+    [apis, entity, loading],
   );
   const hasAsyncCases = results.some(
     r => typeof r.if === 'object' && 'then' in r.if,