Enable starred templates on scaffolder

Signed-off-by: Victor Perera <v-vperera@expediagroup.com>

plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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.
+ */
+
+import React, { ComponentProps } from 'react';
+import { useStarredEntities } from '@backstage/plugin-catalog-react';
+import { IconButton, makeStyles, Tooltip, withStyles } from '@material-ui/core';
+import StarBorder from '@material-ui/icons/StarBorder';
+import Star from '@material-ui/icons/Star';
+import { Entity } from '@backstage/catalog-model';
+
+type Props = ComponentProps<typeof IconButton> & { entity: Entity };
+
+const YellowStar = withStyles({
+  root: {
+    color: '#f3ba37',
+  },
+})(Star);
+
+const useStyles = makeStyles(theme => ({
+  starButton: {
+    position: 'absolute',
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
+    padding: '0.25rem',
+  },
+}));
+
+export const favouriteTemplateTooltip = (isStarred: boolean) =>
+  isStarred ? 'Remove from favorites' : 'Add to favorites';
+
+export const favouriteTemplateIcon = (isStarred: boolean) =>
+  isStarred ? <YellowStar /> : <StarBorder style={{ color: 'white' }} />;
+
+/**
+ * IconButton for showing if a current entity is starred and adding/removing it from the favourite entities
+ * @param props MaterialUI IconButton props extended by required `entity` prop
+ */
+export const FavouriteTemplate = (props: Props) => {
+  const classes = useStyles();
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
+  const isStarred = isStarredEntity(props.entity);
+  return (
+    <IconButton
+      color="inherit"
+      className={classes.starButton}
+      {...props}
+      onClick={() => toggleStarredEntity(props.entity)}
+    >
+      <Tooltip title={favouriteTemplateTooltip(isStarred)}>
+        {favouriteTemplateIcon(isStarred)}
+      </Tooltip>
+    </IconButton>
+  );
+};

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

@@ -61,6 +61,7 @@ const getTemplateCardProps = (
     type: template.spec.type ?? '',
     description: template.metadata.description ?? '-',
     tags: (template.metadata?.tags as string[]) ?? [],
+    entityTemplate: template,
   };
 };
 

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -28,8 +28,13 @@ import {
 import React from 'react';
 import { generatePath } from 'react-router';
 import { rootRouteRef } from '../../routes';
+import { Entity } from '@backstage/catalog-model';
+import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate';
 
 const useStyles = makeStyles({
+  cardHeader: {
+    position: 'relative',
+  },
   title: {
     backgroundImage: ({ backgroundImage }: any) => backgroundImage,
   },
@@ -48,6 +53,7 @@ export type TemplateCardProps = {
   title: string;
   type: string;
   name: string;
+  entityTemplate: Entity;
 };
 
 export const TemplateCard = ({
@@ -56,6 +62,7 @@ export const TemplateCard = ({
   title,
   type,
   name,
+  entityTemplate,
 }: TemplateCardProps) => {
   const backstageTheme = useTheme<BackstageTheme>();
   const rootLink = useRouteRef(rootRouteRef);
@@ -69,7 +76,8 @@ export const TemplateCard = ({
 
   return (
     <Card>
-      <CardMedia>
+      <CardMedia className={classes.cardHeader}>
+        <FavouriteTemplate entity={entityTemplate} />
         <ItemCardHeader
           title={title}
           subtitle={type}