fix: entity switch result when there is no default case

this happens when there is only cases with `if` defined but no
default case

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/gorgeous-pumas-speak.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+fix entity switch rendering when there is no default case

.changeset/silver-bikes-breathe.md

@@ -2,4 +2,23 @@
 '@backstage/plugin-catalog': minor
 ---
 
-allow entity switch to render all cases that match the condition
+Allow `EntitySwitch` to render all cases that match the condition.
+
+This change introduces a new parameter for the `EntitySwitch` component
+`renderMultipleMatches`. In case the parameter value is `all`, the `EntitySwitch`
+will render all `EntitySwitch.Case` that contain `if` parameter, and it
+evaluates to true. In case none of the cases match, the default case will be
+rendered, if any.
+
+This means for example in the CI/CD page you can now do the following:
+
+```tsx
+<EntitySwitch renderMultipleMatches="all">
+  <EntitySwitch.Case if={isJenkinsAvailable}>Jenkins</EntitySwitch.Case>
+  <EntitySwitch.Case if={isCodebuildAvailable}>CodeBuild</EntitySwitch.Case>
+  <EntitySwitch.Case>No CI/CD</EntitySwitch.Case>
+</EntitySwitch>
+```
+
+This allows the component to have multiple CI/CD systems and all of those are
+rendered on the same page.

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

@@ -173,6 +173,42 @@ describe('EntitySwitch', () => {
     expect(screen.getByText('C')).toBeInTheDocument();
   });
 
+  it('should render nothing if no default case is set for multiple matches', () => {
+    const entity = { metadata: { name: 'mock' }, kind: 'component' } as Entity;
+
+    render(
+      <Wrapper>
+        <EntityProvider entity={entity}>
+          <EntitySwitch renderMultipleMatches="all">
+            <EntitySwitch.Case if={isKind('system')} children={<p>A</p>} />
+            <EntitySwitch.Case if={isKind('system')} children={<p>B</p>} />
+          </EntitySwitch>
+        </EntityProvider>
+      </Wrapper>,
+    );
+
+    expect(screen.queryByText('A')).not.toBeInTheDocument();
+    expect(screen.queryByText('B')).not.toBeInTheDocument();
+  });
+
+  it('should render nothing if no default case is set for default', () => {
+    const entity = { metadata: { name: 'mock' }, kind: 'component' } as Entity;
+
+    render(
+      <Wrapper>
+        <EntityProvider entity={entity}>
+          <EntitySwitch>
+            <EntitySwitch.Case if={isKind('system')} children={<p>A</p>} />
+            <EntitySwitch.Case if={isKind('system')} children={<p>B</p>} />
+          </EntitySwitch>
+        </EntityProvider>
+      </Wrapper>,
+    );
+
+    expect(screen.queryByText('A')).not.toBeInTheDocument();
+    expect(screen.queryByText('B')).not.toBeInTheDocument();
+  });
+
   it('should switch with async condition that is true', async () => {
     const entity = { metadata: { name: 'mock' }, kind: 'component' } as Entity;
 

plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx

@@ -169,7 +169,7 @@ function AsyncEntitySwitch({
 }
 
 function getDefaultChildren(results: SwitchCaseResult[]) {
-  return results.filter(r => r.if === undefined)[0].children ?? null;
+  return results.filter(r => r.if === undefined)[0]?.children ?? null;
 }
 
 EntitySwitch.Case = EntitySwitchCaseComponent;