Fix material-table action for starring entity

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

@@ -39,7 +39,10 @@ import {
   filterGroups,
   labeledEntityTypes,
 } from '../../data/filters';
-import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
+import {
+  favouriteEntityIcon,
+  favouriteEntityTooltip,
+} from '../FavouriteEntity/FavouriteEntity';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -106,7 +109,14 @@ export const CatalogPage: FC<{}> = () => {
         hidden: location?.type !== 'github',
       };
     },
-    (rowData: Entity) => <FavouriteEntity entity={rowData} />,
+    (rowData: Entity) => {
+      const isStarred = isStarredEntity(rowData);
+      return {
+        icon: favouriteEntityIcon(isStarred),
+        tooltip: favouriteEntityTooltip(isStarred),
+        onClick: () => toggleStarredEntity(rowData),
+      };
+    },
   ];
 
   return (

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

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentProps } from 'react';
-import { IconButton, Tooltip, withStyles } from '@material-ui/core';
+import { IconButton, Tooltip, withStyles, SvgIcon } from '@material-ui/core';
 import StarBorder from '@material-ui/icons/StarBorder';
 import Star from '@material-ui/icons/Star';
 import { useEntities } from '../../hooks/useEntities';
@@ -29,6 +29,12 @@ const YellowStar = withStyles({
   },
 })(Star);
 
+export const favouriteEntityTooltip = (isStarred: boolean) =>
+  isStarred ? 'Remove from favorites' : 'Add to favorites';
+
+export const favouriteEntityIcon = (isStarred: boolean) =>
+  isStarred ? YellowStar : StarBorder;
+
 /**
  * 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
@@ -37,13 +43,9 @@ 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 />}
+    <IconButton {...props} onClick={() => toggleStarredEntity(props.entity)}>
+      <Tooltip title={favouriteEntityTooltip(isStarred)}>
+        <SvgIcon component={favouriteEntityIcon(isStarred)} />
       </Tooltip>
     </IconButton>
   );