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';

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { useApp, useRouteRef } from '@backstage/core-plugin-api';
 
 import {
   Content,
   ContentHeader,
+  DocsIcon,
   Header,
   Page,
   SupportButton,
@@ -40,13 +41,19 @@ import {
 } from '@backstage/plugin-scaffolder-react/alpha';
 
 import { RegisterExistingButton } from './RegisterExistingButton';
-import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
+import {
+  TemplateGroupFilter,
+  TemplateGroups,
+} from '@backstage/plugin-scaffolder-react/alpha';
 import {
   actionsRouteRef,
   editRouteRef,
   registerComponentRouteRef,
   scaffolderListTaskRouteRef,
+  selectedTemplateRouteRef,
+  viewTechDocRouteRef,
 } from '../../routes';
+import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 
 /**
  * @alpha
@@ -93,6 +100,9 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
   const editorLink = useRouteRef(editRouteRef);
   const actionsLink = useRouteRef(actionsRouteRef);
   const tasksLink = useRouteRef(scaffolderListTaskRouteRef);
+  const viewTechDocsLink = useRouteRef(viewTechDocRouteRef);
+  const templateRoute = useRouteRef(selectedTemplateRouteRef);
+  const app = useApp();
 
   const groups = givenGroups.length
     ? createGroupsWithOther(givenGroups)
@@ -113,6 +123,34 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
         : undefined,
   };
 
+  const additionalLinksForEntity = useCallback(
+    (template: TemplateEntityV1beta3) => {
+      const { kind, namespace, name } = parseEntityRef(
+        stringifyEntityRef(template),
+      );
+      return template.metadata.annotations?.['backstage.io/techdocs-ref'] &&
+        viewTechDocsLink
+        ? [
+            {
+              icon: app.getSystemIcon('docs') ?? DocsIcon,
+              text: 'View TechDocs',
+              url: viewTechDocsLink({ kind, namespace, name }),
+            },
+          ]
+        : [];
+    },
+    [app, viewTechDocsLink],
+  );
+
+  const onTemplateSelected = useCallback(
+    (template: TemplateEntityV1beta3) => {
+      const { namespace, name } = parseEntityRef(stringifyEntityRef(template));
+
+      navigate(templateRoute({ namespace, templateName: name }));
+    },
+    [navigate, templateRoute],
+  );
+
   return (
     <EntityListProvider>
       <Page themeId="website">
@@ -152,6 +190,8 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
                 groups={groups}
                 templateFilter={templateFilter}
                 TemplateCardComponent={TemplateCardComponent}
+                onTemplateSelected={onTemplateSelected}
+                additionalLinksForEntity={additionalLinksForEntity}
               />
             </CatalogFilterLayout.Content>
           </CatalogFilterLayout>

plugins/scaffolder/src/next/TemplateListPage/index.ts

@@ -15,9 +15,3 @@
  */
 export { TemplateListPage } from './TemplateListPage';
 export type { TemplateListPageProps } from './TemplateListPage';
-
-export { TemplateGroups } from './TemplateGroups';
-export type {
-  TemplateGroupFilter,
-  TemplateGroupsProps,
-} from './TemplateGroups';