Merge pull request #17951 from backstage/blam/scaffolder-filtering

`scaffolder/next`: Keep the same filtering behaviour as the current

.changeset/shy-numbers-try.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+---
+
+`scaffolder/next`: Don't render `TemplateGroups` when there's no results in with search query

plugins/scaffolder-react/alpha-api-report.md

@@ -206,7 +206,7 @@ export interface TemplateCardProps {
 export const TemplateCategoryPicker: () => JSX.Element | null;
 
 // @alpha
-export const TemplateGroup: (props: TemplateGroupProps) => JSX.Element;
+export const TemplateGroup: (props: TemplateGroupProps) => JSX.Element | null;
 
 // @alpha (undocumented)
 export type TemplateGroupFilter = {

plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.test.tsx

@@ -22,16 +22,6 @@ import { TemplateCard } from '../TemplateCard';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 
 describe('TemplateGroup', () => {
-  it('should return a message when no templates are passed in', async () => {
-    const { getByText } = render(
-      <TemplateGroup onSelected={jest.fn()} title="Test" templates={[]} />,
-    );
-
-    expect(
-      getByText(/No templates found that match your filter/),
-    ).toBeInTheDocument();
-  });
-
   it('should render a card for each template with the template being passed as a prop', () => {
     const mockOnSelected = jest.fn();
     const mockTemplates: { template: TemplateEntityV1beta3 }[] = [
@@ -130,14 +120,6 @@ describe('TemplateGroup', () => {
       );
     }
   });
-
-  it('should render the title when no templates passed', () => {
-    const { getByText } = render(
-      <TemplateGroup onSelected={jest.fn()} title="Test" templates={[]} />,
-    );
-    expect(getByText('Test')).toBeInTheDocument();
-  });
-
   it('should render the title when there are templates in the list', () => {
     const mockTemplates: { template: TemplateEntityV1beta3 }[] = [
       {
@@ -163,10 +145,20 @@ describe('TemplateGroup', () => {
 
   it('should allow for passing through a user given title component', () => {
     const TitleComponent = <p>Im a custom header</p>;
+    const mockTemplates: { template: TemplateEntityV1beta3 }[] = [
+      {
+        template: {
+          apiVersion: 'scaffolder.backstage.io/v1beta3',
+          kind: 'Template',
+          metadata: { name: 'test' },
+          spec: { parameters: [], steps: [], type: 'website' },
+        },
+      },
+    ];
     const { getByText } = render(
       <TemplateGroup
         onSelected={jest.fn()}
-        templates={[]}
+        templates={mockTemplates}
         title={TitleComponent}
       />,
     );

plugins/scaffolder-react/src/next/components/TemplateGroup/TemplateGroup.tsx

@@ -19,9 +19,7 @@ import {
   Content,
   ContentHeader,
   ItemCardGrid,
-  Link,
 } from '@backstage/core-components';
-import { Typography } from '@material-ui/core';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { TemplateCardProps, TemplateCard } from '../TemplateCard';
 import { IconComponent } from '@backstage/core-plugin-api';
@@ -61,18 +59,7 @@ export const TemplateGroup = (props: TemplateGroupProps) => {
     typeof title === 'string' ? <ContentHeader title={title} /> : title;
 
   if (templates.length === 0) {
-    return (
-      <Content>
-        {titleComponent}
-        <Typography variant="body2">
-          No templates found that match your filter. Learn more about{' '}
-          <Link to="https://backstage.io/docs/features/software-templates/adding-templates">
-            adding templates
-          </Link>
-          .
-        </Typography>
-      </Content>
-    );
+    return null;
   }
 
   const Card = CardComponent || TemplateCard;