From 826bcc46b6afebaa915d5d0da0df2803d031e2a3 Mon Sep 17 00:00:00 2001
From: Victor Perera <v-vperera@expediagroup.com>
Date: Tue, 27 Apr 2021 10:36:14 -0500
Subject: [PATCH] Issues/sugestions fixed

Signed-off-by: Victor Perera victorcito001@hotmail.com
Signed-off-by: Victor Perera <v-vperera@expediagroup.com>
---
 .../FavouriteTemplate/FavouriteTemplate.tsx   | 15 ++++--
 .../ScaffolderPage/ScaffolderPage.tsx         | 18 +------
 .../components/TemplateCard/TemplateCard.tsx  | 50 ++++++++++++-------
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx b/plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx
index 99f6c21a1d..ae6057beff 100644
--- a/plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx
+++ b/plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, useMemo } 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';
@@ -29,6 +29,12 @@ const YellowStar = withStyles({
   },
 })(Star);
 
+const WhiteBorderStar = withStyles({
+  root: {
+    color: '#ffffff',
+  },
+})(StarBorder);
+
 const useStyles = makeStyles(theme => ({
   starButton: {
     position: 'absolute',
@@ -42,7 +48,7 @@ export const favouriteTemplateTooltip = (isStarred: boolean) =>
   isStarred ? 'Remove from favorites' : 'Add to favorites';
 
 export const favouriteTemplateIcon = (isStarred: boolean) =>
-  isStarred ? <YellowStar /> : <StarBorder style={{ color: 'white' }} />;
+  isStarred ? <YellowStar /> : <WhiteBorderStar />;
 
 /**
  * IconButton for showing if a current entity is starred and adding/removing it from the favourite entities
@@ -51,7 +57,10 @@ export const favouriteTemplateIcon = (isStarred: boolean) =>
 export const FavouriteTemplate = (props: Props) => {
   const classes = useStyles();
   const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
-  const isStarred = isStarredEntity(props.entity);
+  const isStarred = useMemo(() => isStarredEntity(props.entity), [
+    isStarredEntity,
+    props.entity,
+  ]);
   return (
     <IconButton
       color="inherit"
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index 00b13853ec..4a482402f8 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -39,7 +39,7 @@ import { ResultsFilter } from '../ResultsFilter/ResultsFilter';
 import { ScaffolderFilter } from '../ScaffolderFilter';
 import { ButtonGroup } from '../ScaffolderFilter/ScaffolderFilter';
 import SearchToolbar from '../SearchToolbar/SearchToolbar';
-import { TemplateCard, TemplateCardProps } from '../TemplateCard';
+import { TemplateCard } from '../TemplateCard';
 import { registerComponentRouteRef } from '../../routes';
 
 const useStyles = makeStyles(theme => ({
@@ -51,20 +51,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const getTemplateCardProps = (
-  template: TemplateEntityV1alpha1,
-): TemplateCardProps & { key: string } => {
-  return {
-    key: template.metadata.uid!,
-    name: template.metadata.name,
-    title: `${(template.metadata.title || template.metadata.name) ?? ''}`,
-    type: template.spec.type ?? '',
-    description: template.metadata.description ?? '-',
-    tags: (template.metadata?.tags as string[]) ?? [],
-    entityTemplate: template,
-  };
-};
-
 export const ScaffolderPageContents = () => {
   const styles = useStyles();
   const {
@@ -189,7 +175,7 @@ export const ScaffolderPageContents = () => {
               {matchingEntities &&
                 matchingEntities?.length > 0 &&
                 matchingEntities.map(template => (
-                  <TemplateCard {...getTemplateCardProps(template)} />
+                  <TemplateCard template={template} />
                 ))}
             </ItemCardGrid>
           </div>
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 2e9cfe6470..8c64d981ad 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -28,7 +28,7 @@ import {
 import React from 'react';
 import { generatePath } from 'react-router';
 import { rootRouteRef } from '../../routes';
-import { Entity } from '@backstage/catalog-model';
+import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate';
 
 const useStyles = makeStyles({
@@ -48,52 +48,66 @@ const useStyles = makeStyles({
 });
 
 export type TemplateCardProps = {
+  template: TemplateEntityV1alpha1;
+};
+
+type TemplateProps = {
   description: string;
   tags: string[];
   title: string;
   type: string;
   name: string;
-  entityTemplate: Entity;
 };
 
-export const TemplateCard = ({
-  description,
-  tags,
-  title,
-  type,
-  name,
-  entityTemplate,
-}: TemplateCardProps) => {
+const getTemplateCardProps = (
+  template: TemplateEntityV1alpha1,
+): TemplateProps & { key: string } => {
+  return {
+    key: template.metadata.uid!,
+    name: template.metadata.name,
+    title: `${(template.metadata.title || template.metadata.name) ?? ''}`,
+    type: template.spec.type ?? '',
+    description: template.metadata.description ?? '-',
+    tags: (template.metadata?.tags as string[]) ?? [],
+  };
+};
+
+export const TemplateCard = ({ template }: TemplateCardProps) => {
   const backstageTheme = useTheme<BackstageTheme>();
   const rootLink = useRouteRef(rootRouteRef);
+  const templateProps = getTemplateCardProps(template);
 
-  const themeId = pageTheme[type] ? type : 'other';
+  const themeId = pageTheme[templateProps.type] ? templateProps.type : 'other';
   const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(`${rootLink()}/templates/:templateName`, {
-    templateName: name,
+    templateName: templateProps.name,
   });
 
   return (
     <Card>
       <CardMedia className={classes.cardHeader}>
-        <FavouriteTemplate entity={entityTemplate} />
+        <FavouriteTemplate entity={template} />
         <ItemCardHeader
-          title={title}
-          subtitle={type}
+          title={templateProps.title}
+          subtitle={templateProps.type}
           classes={{ root: classes.title }}
         />
       </CardMedia>
       <CardContent>
         <Box>
-          {tags?.map(tag => (
+          {templateProps.tags?.map(tag => (
             <Chip size="small" label={tag} key={tag} />
           ))}
         </Box>
-        <Box className={classes.description}>{description}</Box>
+        <Box className={classes.description}>{templateProps.description}</Box>
       </CardContent>
       <CardActions>
-        <Button color="primary" to={href} aria-label={`Choose ${title} `}>
+        <Button
+          color="primary"
+          to={href}
+          aria-label={`Choose ${templateProps.title} `}
+        >
           Choose
         </Button>
       </CardActions>