Merge pull request #6829 from victormorfin97/supportCustomTemplateCard

Support  custom template card on ScaffolderPage

.changeset/beige-glasses-dream.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Allow to pass custom TemplateCard to ScaffolderPage

plugins/scaffolder/api-report.md

@@ -8,12 +8,16 @@
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { ComponentProps } from 'react';
+import { ComponentType } from 'react';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
+import { Entity } from '@backstage/catalog-model';
 import { EntityName } from '@backstage/catalog-model';
 import { Extension } from '@backstage/core-plugin-api';
 import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { FieldProps } from '@rjsf/core';
 import { FieldValidation } from '@rjsf/core';
+import { IconButton } from '@material-ui/core';
 import { IdentityApi } from '@backstage/core-plugin-api';
 import { JsonObject } from '@backstage/config';
 import { JSONSchema } from '@backstage/catalog-model';
@@ -22,6 +26,7 @@ import { Observable } from '@backstage/core-plugin-api';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { ScmIntegrationRegistry } from '@backstage/integration';
+import { TemplateEntityV1beta2 } from '@backstage/catalog-model';
 
 // Warning: (ae-missing-release-tag) "createScaffolderFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -74,6 +79,13 @@ export const EntityPicker: ({
 // @public (undocumented)
 export const EntityPickerFieldExtension: () => null;
 
+// Warning: (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
+// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
+// Warning: (ae-missing-release-tag) "FavouriteTemplate" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export const FavouriteTemplate: (props: Props) => JSX.Element;
+
 // Warning: (ae-missing-release-tag) "FieldExtensionOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -204,7 +216,15 @@ export const ScaffolderFieldExtensions: React_2.ComponentType;
 // Warning: (ae-missing-release-tag) "ScaffolderPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const ScaffolderPage: () => JSX.Element;
+export const ScaffolderPage: ({
+  TemplateCardComponent,
+}: {
+  TemplateCardComponent?:
+    | ComponentType<{
+        template: TemplateEntityV1beta2;
+      }>
+    | undefined;
+}) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "scaffolderPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

plugins/scaffolder/src/components/FavouriteTemplate/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 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 './FavouriteTemplate';

plugins/scaffolder/src/components/Router.tsx

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Routes, Route, useOutlet } from 'react-router';
+import { TemplateEntityV1beta2 } from '@backstage/catalog-model';
 import { ScaffolderPage } from './ScaffolderPage';
 import { TemplatePage } from './TemplatePage';
 import { TaskPage } from './TaskPage';
@@ -29,7 +30,13 @@ import {
 } from '../extensions';
 import { useElementFilter } from '@backstage/core-plugin-api';
 
-export const Router = () => {
+type RouterProps = {
+  TemplateCardComponent?:
+    | ComponentType<{ template: TemplateEntityV1beta2 }>
+    | undefined;
+};
+
+export const Router = ({ TemplateCardComponent }: RouterProps) => {
   const outlet = useOutlet();
 
   const customFieldExtensions = useElementFilter(outlet, elements =>
@@ -54,7 +61,12 @@ export const Router = () => {
 
   return (
     <Routes>
-      <Route path="/" element={<ScaffolderPage />} />
+      <Route
+        path="/"
+        element={
+          <ScaffolderPage TemplateCardComponent={TemplateCardComponent} />
+        }
+      />
       <Route
         path="/templates/:templateName"
         element={<TemplatePage customFieldExtensions={fieldExtensions} />}

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

@@ -23,6 +23,7 @@ import {
   Page,
   SupportButton,
 } from '@backstage/core-components';
+import { TemplateEntityV1beta2 } from '@backstage/catalog-model';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import {
   EntityKindPicker,
@@ -32,7 +33,7 @@ import {
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
 import { makeStyles } from '@material-ui/core';
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { registerComponentRouteRef } from '../../routes';
 import { TemplateList } from '../TemplateList';
 import { TemplateTypePicker } from '../TemplateTypePicker';
@@ -46,7 +47,15 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const ScaffolderPageContents = () => {
+export type ScaffolderPageProps = {
+  TemplateCardComponent?:
+    | ComponentType<{ template: TemplateEntityV1beta2 }>
+    | undefined;
+};
+
+export const ScaffolderPageContents = ({
+  TemplateCardComponent,
+}: ScaffolderPageProps) => {
   const styles = useStyles();
 
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
@@ -87,7 +96,7 @@ export const ScaffolderPageContents = () => {
             <EntityTagPicker />
           </div>
           <div>
-            <TemplateList />
+            <TemplateList TemplateCardComponent={TemplateCardComponent} />
           </div>
         </div>
       </Content>
@@ -95,8 +104,10 @@ export const ScaffolderPageContents = () => {
   );
 };
 
-export const ScaffolderPage = () => (
+export const ScaffolderPage = ({
+  TemplateCardComponent,
+}: ScaffolderPageProps) => (
   <EntityListProvider>
-    <ScaffolderPageContents />
+    <ScaffolderPageContents TemplateCardComponent={TemplateCardComponent} />
   </EntityListProvider>
 );

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

@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { TemplateEntityV1beta2 } from '@backstage/catalog-model';
+import React, { ComponentType } from 'react';
+import {
+  stringifyEntityRef,
+  TemplateEntityV1beta2,
+} from '@backstage/catalog-model';
 import {
   ItemCardGrid,
   Progress,
@@ -25,8 +28,15 @@ import { useEntityListProvider } from '@backstage/plugin-catalog-react';
 import { Link, Typography } from '@material-ui/core';
 import { TemplateCard } from '../TemplateCard';
 
-export const TemplateList = () => {
+export type TemplateListProps = {
+  TemplateCardComponent?:
+    | ComponentType<{ template: TemplateEntityV1beta2 }>
+    | undefined;
+};
+
+export const TemplateList = ({ TemplateCardComponent }: TemplateListProps) => {
   const { loading, error, entities } = useEntityListProvider();
+  const Card = TemplateCardComponent || TemplateCard;
   return (
     <>
       {loading && <Progress />}
@@ -50,9 +60,9 @@ export const TemplateList = () => {
       <ItemCardGrid>
         {entities &&
           entities?.length > 0 &&
-          entities.map((template, i) => (
-            <TemplateCard
-              key={i}
+          entities.map(template => (
+            <Card
+              key={stringifyEntityRef(template)}
               template={template as TemplateEntityV1beta2}
             />
           ))}

plugins/scaffolder/src/index.ts

@@ -37,3 +37,4 @@ export {
   RepoUrlPicker,
   TextValuePicker,
 } from './components/fields';
+export { FavouriteTemplate } from './components/FavouriteTemplate';