diff --git a/.changeset/gorgeous-pumas-speak.md b/.changeset/gorgeous-pumas-speak.md new file mode 100644 index 0000000000..60f40c6748 --- /dev/null +++ b/.changeset/gorgeous-pumas-speak.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +fix entity switch rendering when there is no default case diff --git a/.changeset/silver-bikes-breathe.md b/.changeset/silver-bikes-breathe.md index 63dabf7b2e..0288580bba 100644 --- a/.changeset/silver-bikes-breathe.md +++ b/.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 + + Jenkins + CodeBuild + No CI/CD + +``` + +This allows the component to have multiple CI/CD systems and all of those are +rendered on the same page. diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx index 8ee44041c8..13e214d823 100644 --- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx +++ b/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( + + + + A

} /> + B

} /> +
+
+
, + ); + + 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( + + + + A

} /> + B

} /> +
+
+
, + ); + + 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; diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx index 6ad3c66ab3..3cd806faa5 100644 --- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx +++ b/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;