Add props to support the custom templateCard component

Signed-off-by: victormorfin97 <v-vmorfin@expediagroup.com>

plugins/scaffolder/src/components/Router.tsx

@@ -29,7 +29,11 @@ import {
 } from '../extensions';
 import { useElementFilter } from '@backstage/core-plugin-api';
 
-export const Router = () => {
+type RouterProps = {
+  renderTemplateCard?: Function | undefined;
+};
+
+export const Router = ({ renderTemplateCard }: RouterProps) => {
   const outlet = useOutlet();
 
   const customFieldExtensions = useElementFilter(outlet, elements =>
@@ -54,7 +58,10 @@ export const Router = () => {
 
   return (
     <Routes>
-      <Route path="/" element={<ScaffolderPage />} />
+      <Route
+        path="/"
+        element={<ScaffolderPage renderTemplateCard={renderTemplateCard} />}
+      />
       <Route
         path="/templates/:templateName"
         element={<TemplatePage customFieldExtensions={fieldExtensions} />}

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -46,7 +46,13 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const ScaffolderPageContents = () => {
+export type ScaffolderPageProps = {
+  renderTemplateCard: Function | undefined;
+};
+
+export const ScaffolderPageContents = ({
+  renderTemplateCard,
+}: ScaffolderPageProps) => {
   const styles = useStyles();
 
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
@@ -87,7 +93,7 @@ export const ScaffolderPageContents = () => {
             <EntityTagPicker />
           </div>
           <div>
-            <TemplateList />
+            <TemplateList renderTemplateCard={renderTemplateCard} />
           </div>
         </div>
       </Content>
@@ -95,8 +101,8 @@ export const ScaffolderPageContents = () => {
   );
 };
 
-export const ScaffolderPage = () => (
+export const ScaffolderPage = ({ renderTemplateCard }: ScaffolderPageProps) => (
   <EntityListProvider>
-    <ScaffolderPageContents />
+    <ScaffolderPageContents renderTemplateCard={renderTemplateCard} />
   </EntityListProvider>
 );

plugins/scaffolder/src/components/TemplateList/TemplateList.tsx

@@ -25,7 +25,11 @@ import { useEntityListProvider } from '@backstage/plugin-catalog-react';
 import { Link, Typography } from '@material-ui/core';
 import { TemplateCard } from '../TemplateCard';
 
-export const TemplateList = () => {
+export type TemplateListProps = {
+  renderTemplateCard?: Function | undefined;
+};
+
+export const TemplateList = ({ renderTemplateCard }: TemplateListProps) => {
   const { loading, error, entities } = useEntityListProvider();
   return (
     <>
@@ -50,12 +54,16 @@ export const TemplateList = () => {
       <ItemCardGrid>
         {entities &&
           entities?.length > 0 &&
-          entities.map((template, i) => (
-            <TemplateCard
-              key={i}
-              template={template as TemplateEntityV1beta2}
-            />
-          ))}
+          entities.map((template, i) =>
+            renderTemplateCard ? (
+              renderTemplateCard(i, template)
+            ) : (
+              <TemplateCard
+                key={i}
+                template={template as TemplateEntityV1beta2}
+              />
+            ),
+          )}
       </ItemCardGrid>
     </>
   );