chore: reworking the TemplatePage to use the new one from -react

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

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

@@ -142,20 +142,22 @@ export const TemplateCard = (props: TemplateCardProps) => {
               </Grid>
               <Grid item xs={12}>
                 <Grid container spacing={2}>
-                  {props.additionalLinks?.map(({ icon, text, url }) => (
-                    <Grid className={styles.linkText} item xs={6}>
+                  {props.additionalLinks?.map(({ icon, text, url }, index) => (
+                    <Grid className={styles.linkText} item xs={6} key={index}>
                       <CardLink icon={icon} text={text} url={url} />
                     </Grid>
                   ))}
-                  {template.metadata.links?.map(({ url, icon, title }) => (
-                    <Grid className={styles.linkText} item xs={6}>
-                      <CardLink
-                        icon={iconResolver(icon)}
-                        text={title || url}
-                        url={url}
-                      />
-                    </Grid>
-                  ))}
+                  {template.metadata.links?.map(
+                    ({ url, icon, title }, index) => (
+                      <Grid className={styles.linkText} item xs={6} key={index}>
+                        <CardLink
+                          icon={iconResolver(icon)}
+                          text={title || url}
+                          url={url}
+                        />
+                      </Grid>
+                    ),
+                  )}
                 </Grid>
               </Grid>
             </>

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

@@ -21,18 +21,10 @@ import {
   isTemplateEntityV1beta3,
   TemplateEntityV1beta3,
 } from '@backstage/plugin-scaffolder-common';
-import { Progress, Link, DocsIcon } from '@backstage/core-components';
+import { Progress, Link } from '@backstage/core-components';
 import { Typography } from '@material-ui/core';
-import {
-  errorApiRef,
-  IconComponent,
-  useApi,
-  useApp,
-  useRouteRef,
-} from '@backstage/core-plugin-api';
+import { errorApiRef, IconComponent, useApi } from '@backstage/core-plugin-api';
 import { TemplateGroup } from '@backstage/plugin-scaffolder-react/alpha';
-import { viewTechDocRouteRef } from '../../routes';
-import { useNavigate } from 'react-router-dom';
 
 /**
  * @alpha
@@ -51,10 +43,7 @@ export interface TemplateGroupsProps {
   TemplateCardComponent?: React.ComponentType<{
     template: TemplateEntityV1beta3;
   }>;
-  onTemplateSelected?: (template: {
-    namespace: string;
-    templateName: string;
-  }) => void;
+  onTemplateSelected?: (template: TemplateEntityV1beta3) => void;
   additionalLinksForEntity?: (template: TemplateEntityV1beta3) => {
     icon: IconComponent;
     text: string;
@@ -72,8 +61,7 @@ export const TemplateGroups = (props: TemplateGroupsProps) => {
   const errorApi = useApi(errorApiRef);
   const onSelected = useCallback(
     (template: TemplateEntityV1beta3) => {
-      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
-      onTemplateSelected?.({ namespace, templateName: name });
+      onTemplateSelected?.(template);
     },
     [onTemplateSelected],
   );

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

@@ -17,6 +17,7 @@ export * from './Stepper';
 export * from './TemplateCard';
 export * from './ReviewState';
 export * from './TemplateGroup';
+export * from './TemplateGroups';
 export * from './Workflow';
 export * from './TemplateOutputs';
 export * from './Form';