chore: added a favorite icon back to the card header with flex

Signed-off-by: blam <ben@blam.sh>

app-config.yaml

@@ -284,6 +284,9 @@ catalog:
     - type: file
       target: ../../cypress/e2e-fixture.catalog.info.yaml
 
+    - type: file
+      target: '../../template-test.yaml'
+
     - type: url
       target: https://github.com/benjdlambert/software-templates/blob/main/scaffolder-templates/react-ssr-template/template.yaml
 scaffolder:

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

@@ -15,39 +15,66 @@
  */
 
 import React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core';
-import { ItemCardHeader } from '@backstage/core-components';
+import {
+  Link,
+  makeStyles,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@material-ui/core';
+import { ItemCardHeader, WarningIcon } from '@backstage/core-components';
 import { BackstageTheme } from '@backstage/theme';
+import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { FavoriteEntity } from '@backstage/plugin-catalog-react';
 
-const useStyles = makeStyles<{}, { cardBackgroundImage: string }>(theme => ({
-  header: {
-    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
-  },
-}));
+const useStyles = makeStyles<BackstageTheme, { cardBackgroundImage: string }>(
+  theme => ({
+    header: {
+      backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
+    },
+    subtitleWrapper: {
+      display: 'flex',
+      justifyContent: 'space-between',
+    },
+  }),
+);
 
 /**
  * Props for the CardHeader component
  */
 export interface CardHeaderProps {
-  type?: string;
-  title: string;
+  template: TemplateEntityV1beta3;
 }
 
 /**
  * The Card Header with the background for the TemplateCard.
  */
 export const CardHeader = (props: CardHeaderProps) => {
-  const { type = 'other', title } = props;
+  const {
+    template: {
+      metadata: { title, name },
+      spec: { type },
+    },
+  } = props;
   const { getPageTheme } = useTheme<BackstageTheme>();
   const themeForType = getPageTheme({ themeId: type });
   const styles = useStyles({
     cardBackgroundImage: themeForType.backgroundImage,
   });
 
+  const SubtitleComponent = (
+    <div className={styles.subtitleWrapper}>
+      <div>{type}</div>
+      <div>
+        <FavoriteEntity entity={props.template} style={{ padding: 0 }} />
+      </div>
+    </div>
+  );
+
   return (
     <ItemCardHeader
-      title={title}
-      subtitle={type}
+      title={title ?? name}
+      subtitle={SubtitleComponent}
       classes={{ root: styles.header }}
     />
   );

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

@@ -34,10 +34,7 @@ export const TemplateCard = (props: TemplateCardProps) => {
   const { template } = props;
   return (
     <Card>
-      <CardHeader
-        type={template.spec.type}
-        title={template.metadata.title ?? template.metadata.name}
-      />
+      <CardHeader template={template} />
     </Card>
   );
 };