Replace icon & tooltip for star in changed CatalogTable

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -18,14 +18,16 @@ import { Table, TableColumn, TableProps } from '@backstage/core';
 import { Link } 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 { Alert } from '@material-ui/lab';
 import React from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { useStarredEntities } from '../../hooks/useStarredEntites';
 import { entityRoute } from '../../routes';
+import {
+  favouriteEntityIcon,
+  favouriteEntityTooltip,
+} from '../FavouriteEntity/FavouriteEntity';
 
 const columns: TableColumn<Entity>[] = [
   {
@@ -125,13 +127,8 @@ export const CatalogTable = ({
       const isStarred = isStarredEntity(rowData);
       return {
         cellStyle: { paddingLeft: '1em' },
-        icon: () =>
-          isStarred ? (
-            <Star htmlColor="#f3ba37" fontSize="small" />
-          ) : (
-            <StarOutline fontSize="small" />
-          ),
-        tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
+        icon: favouriteEntityIcon(isStarred),
+        tooltip: favouriteEntityTooltip(isStarred),
         onClick: () => toggleStarredEntity(rowData),
       };
     },

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

@@ -18,7 +18,7 @@ import React, { ComponentProps } from 'react';
 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';
+import { useStarredEntities } from '../../hooks/useStarredEntites';
 import { Entity } from '@backstage/catalog-model';
 
 type Props = ComponentProps<typeof IconButton> & { entity: Entity };
@@ -40,7 +40,7 @@ export const favouriteEntityIcon = (isStarred: boolean) =>
  * @param props MaterialUI IconButton props extended by required `entity` prop
  */
 export const FavouriteEntity: React.FC<Props> = props => {
-  const { toggleStarredEntity, isStarredEntity } = useEntities();
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
   const isStarred = isStarredEntity(props.entity);
   return (
     <IconButton