Merge pull request #5485 from GunnerStraiker1/Starred-templates

Enable Starred templates on Create New Component

.changeset/long-ladybugs-promise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Enable starred templates on Scaffolder frontend

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

@@ -0,0 +1,76 @@
+/*
+ * 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, 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';
+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 WhiteBorderStar = withStyles({
+  root: {
+    color: '#ffffff',
+  },
+})(StarBorder);
+
+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 /> : <WhiteBorderStar />;
+
+/**
+ * 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 = useMemo(() => isStarredEntity(props.entity), [
+    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

@@ -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,19 +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[]) ?? [],
-  };
-};
-
 export const ScaffolderPageContents = () => {
   const styles = useStyles();
   const {
@@ -188,7 +175,7 @@ export const ScaffolderPageContents = () => {
               {matchingEntities &&
                 matchingEntities?.length > 0 &&
                 matchingEntities.map(template => (
-                  <TemplateCard {...getTemplateCardProps(template)} />
+                  <TemplateCard template={template} />
                 ))}
             </ItemCardGrid>
           </div>

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 { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
+import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate';
 
 const useStyles = makeStyles({
+  cardHeader: {
+    position: 'relative',
+  },
   title: {
     backgroundImage: ({ backgroundImage }: any) => backgroundImage,
   },
@@ -43,6 +48,10 @@ const useStyles = makeStyles({
 });
 
 export type TemplateCardProps = {
+  template: TemplateEntityV1alpha1;
+};
+
+type TemplateProps = {
   description: string;
   tags: string[];
   title: string;
@@ -50,42 +59,55 @@ export type TemplateCardProps = {
   name: string;
 };
 
-export const TemplateCard = ({
-  description,
-  tags,
-  title,
-  type,
-  name,
-}: 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>
+      <CardMedia className={classes.cardHeader}>
+        <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>