From 5c8074ba2a88da6f8811c93c3b7a82f05f538737 Mon Sep 17 00:00:00 2001
From: tudi2d <phugenroth@googlemail.com>
Date: Tue, 30 Jun 2020 12:22:16 +0200
Subject: [PATCH] Replace icon & tooltip for star in changed CatalogTable

---
 .../src/components/CatalogTable/CatalogTable.tsx  | 15 ++++++---------
 .../FavouriteEntity/FavouriteEntity.tsx           |  4 ++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index b507b96f05..27793c81b1 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/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),
       };
     },
diff --git a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx
index 0bb033b3e2..0f608836a9 100644
--- a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx
+++ b/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