Add FavouriteEntity component

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -24,17 +24,9 @@ import {
 } from '@backstage/core';
 import CatalogLayout from './CatalogLayout';
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
-import {
-  Button,
-  Link,
-  makeStyles,
-  Typography,
-  withStyles,
-} from '@material-ui/core';
+import { Button, Link, makeStyles, Typography } from '@material-ui/core';
 import Edit from '@material-ui/icons/Edit';
 import GitHub from '@material-ui/icons/GitHub';
-import Star from '@material-ui/icons/Star';
-import StarOutline from '@material-ui/icons/StarBorder';
 import React, { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { CatalogFilter } from '../CatalogFilter/CatalogFilter';
@@ -47,6 +39,7 @@ import {
   filterGroups,
   labeledEntityTypes,
 } from '../../data/filters';
+import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -77,12 +70,6 @@ export const CatalogPage: FC<{}> = () => {
 
   const styles = useStyles();
 
-  const YellowStar = withStyles({
-    root: {
-      color: '#f3ba37',
-    },
-  })(Star);
-
   const actions = [
     (rowData: Entity) => {
       const location = findLocationForEntityMeta(rowData.metadata);
@@ -119,14 +106,7 @@ export const CatalogPage: FC<{}> = () => {
         hidden: location?.type !== 'github',
       };
     },
-    (rowData: Entity) => {
-      const isStarred = isStarredEntity(rowData);
-      return {
-        icon: isStarred ? YellowStar : StarOutline,
-        tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
-        onClick: () => toggleStarredEntity(rowData),
-      };
-    },
+    (rowData: Entity) => <FavouriteEntity entity={rowData} />,
   ];
 
   return (

plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx

@@ -17,13 +17,20 @@
 import { Entity } from '@backstage/catalog-model';
 import { InfoCard, StructuredMetadataTable } from '@backstage/core';
 import React, { FC } from 'react';
+import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 
 type Props = {
   entity: Entity;
 };
 
+const InfoCardHeaderStyle = { display: 'inline-flex', alignItems: 'baseline' };
+
 export const EntityMetadataCard: FC<Props> = ({ entity }) => (
-  <InfoCard title="Information">
+  <InfoCard
+    title="Information"
+    headerProps={{ action: <FavouriteEntity entity={entity} /> }}
+    headerStyle={InfoCardHeaderStyle}
+  >
     <StructuredMetadataTable metadata={entity.metadata} />
   </InfoCard>
 );

plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 { IconButton, Tooltip, withStyles } from '@material-ui/core';
+import StarBorder from '@material-ui/icons/StarBorder';
+import Star from '@material-ui/icons/Star';
+import { useEntities } from '../../hooks/useEntities';
+import { Entity } from '@backstage/catalog-model';
+
+type Props = ComponentProps<typeof IconButton> & { entity: Entity };
+
+const YellowStar = withStyles({
+  root: {
+    color: '#f3ba37',
+  },
+})(Star);
+
+/**
+ * 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 FavouriteEntity: React.FC<Props> = props => {
+  const { toggleStarredEntity, isStarredEntity } = useEntities();
+  const isStarred = isStarredEntity(props.entity);
+  return (
+    <IconButton
+      aria-label="star"
+      {...props}
+      onClick={() => toggleStarredEntity(props.entity)}
+    >
+      <Tooltip title={isStarred ? 'Remove from favorites' : 'Add to favorites'}>
+        {isStarred ? <YellowStar /> : <StarBorder />}
+      </Tooltip>
+    </IconButton>
+  );
+};