chore: move template groups to react instead

Signed-off-by: blam <ben@blam.sh>

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

@@ -28,7 +28,6 @@ import { TemplateGroups } from './TemplateGroups';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { errorApiRef } from '@backstage/core-plugin-api';
 import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
-import { rootRouteRef } from '../../routes';
 
 describe('TemplateGroups', () => {
   beforeEach(() => jest.clearAllMocks());
@@ -40,11 +39,6 @@ describe('TemplateGroups', () => {
       <TestApiProvider apis={[[errorApiRef, {}]]}>
         <TemplateGroups groups={[]} />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(await findByTestId('progress')).toBeInTheDocument();
@@ -62,11 +56,6 @@ describe('TemplateGroups', () => {
       <TestApiProvider apis={[[errorApiRef, errorApi]]}>
         <TemplateGroups groups={[]} />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(errorApi.post).toHaveBeenCalledWith(mockError);
@@ -83,11 +72,6 @@ describe('TemplateGroups', () => {
       <TestApiProvider apis={[[errorApiRef, {}]]}>
         <TemplateGroups groups={[]} />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(await findByText(/No templates found/)).toBeInTheDocument();
@@ -104,11 +88,6 @@ describe('TemplateGroups', () => {
       <TestApiProvider apis={[[errorApiRef, {}]]}>
         <TemplateGroups groups={[]} />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(await findByText(/No templates found/)).toBeInTheDocument();
@@ -144,11 +123,6 @@ describe('TemplateGroups', () => {
       <TestApiProvider apis={[[errorApiRef, {}]]}>
         <TemplateGroups groups={[{ title: 'all', filter: () => true }]} />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(TemplateGroup).toHaveBeenCalledWith(
@@ -193,11 +167,6 @@ describe('TemplateGroups', () => {
           groups={[{ title: 'all', filter: e => e.metadata.name === 't1' }]}
         />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(TemplateGroup).toHaveBeenCalledWith(
@@ -241,11 +210,6 @@ describe('TemplateGroups', () => {
           templateFilter={e => e.metadata.name === 't1'}
         />
       </TestApiProvider>,
-      {
-        mountedRoutes: {
-          '/create': rootRouteRef,
-        },
-      },
     );
 
     expect(TemplateGroup).toHaveBeenCalledWith(

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

@@ -17,19 +17,22 @@ import React, { useCallback } from 'react';
 
 import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { useEntityList } from '@backstage/plugin-catalog-react';
-import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import {
+  isTemplateEntityV1beta3,
+  TemplateEntityV1beta3,
+} from '@backstage/plugin-scaffolder-common';
 import { Progress, Link, DocsIcon } from '@backstage/core-components';
 import { Typography } from '@material-ui/core';
 import {
   errorApiRef,
+  IconComponent,
   useApi,
   useApp,
   useRouteRef,
 } from '@backstage/core-plugin-api';
 import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
-import { viewTechDocRouteRef, selectedTemplateRouteRef } from '../../routes';
+import { viewTechDocRouteRef } from '../../routes';
 import { useNavigate } from 'react-router-dom';
-import { isTemplateEntity } from '../../lib/isTemplateEntity';
 
 /**
  * @alpha
@@ -48,6 +51,15 @@ export interface TemplateGroupsProps {
   TemplateCardComponent?: React.ComponentType<{
     template: TemplateEntityV1beta3;
   }>;
+  onTemplateSelected?: (template: {
+    namespace: string;
+    templateName: string;
+  }) => void;
+  additionalLinksForEntity?: (template: TemplateEntityV1beta3) => {
+    icon: IconComponent;
+    text: string;
+    url: string;
+  }[];
 }
 
 /**
@@ -55,18 +67,15 @@ export interface TemplateGroupsProps {
  */
 export const TemplateGroups = (props: TemplateGroupsProps) => {
   const { loading, error, entities } = useEntityList();
-  const { groups, templateFilter, TemplateCardComponent } = props;
+  const { groups, templateFilter, TemplateCardComponent, onTemplateSelected } =
+    props;
   const errorApi = useApi(errorApiRef);
-  const app = useApp();
-  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);
-  const templateRoute = useRouteRef(selectedTemplateRouteRef);
-  const navigate = useNavigate();
   const onSelected = useCallback(
     (template: TemplateEntityV1beta3) => {
       const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
-      navigate(templateRoute({ namespace, templateName: name }));
+      onTemplateSelected?.({ namespace, templateName: name });
     },
-    [navigate, templateRoute],
+    [onTemplateSelected],
   );
 
   if (loading) {
@@ -94,24 +103,12 @@ export const TemplateGroups = (props: TemplateGroupsProps) => {
     <>
       {groups.map(({ title, filter }, index) => {
         const templates = entities
-          .filter(isTemplateEntity)
+          .filter(isTemplateEntityV1beta3)
           .filter(e => (templateFilter ? !templateFilter(e) : true))
           .filter(filter)
           .map(template => {
-            const { kind, namespace, name } = parseEntityRef(
-              stringifyEntityRef(template),
-            );
             const additionalLinks =
-              template.metadata.annotations?.['backstage.io/techdocs-ref'] &&
-              viewTechDocsLink
-                ? [
-                    {
-                      icon: app.getSystemIcon('docs') ?? DocsIcon,
-                      text: 'View TechDocs',
-                      url: viewTechDocsLink({ kind, namespace, name }),
-                    },
-                  ]
-                : [];
+              props.additionalLinksForEntity?.(template) ?? [];
 
             return {
               template,

plugins/scaffolder-react/src/next/components/TemplateGroups/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './TemplateGroups';