core-plugin-api: Deprecate favoriteEntityTooltip and favoriteEntityIcon

Signed-off-by: Johan Haals <johan.haals@gmail.com>

.changeset/metal-months-tie.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Deprecated `favoriteEntityTooltip` and `favoriteEntityIcon` since the utility value is very low.

.changeset/small-brooms-retire.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Removed usage of deprecated favorite utility methods.

plugins/catalog-react/api-report.md

@@ -400,7 +400,7 @@ export type EntityTypeReturn = {
 // @public
 export const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
 
 // @public (undocumented)
@@ -408,7 +408,7 @@ export type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
   entity: Entity;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const favoriteEntityTooltip: (
   isStarred: boolean,
 ) => 'Remove from favorites' | 'Add to favorites';

plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx

@@ -32,11 +32,17 @@ const YellowStar = withStyles({
   },
 })(Star);
 
-/** @public */
+/**
+ * @public
+ * @deprecated due to low utility value.
+ */
 export const favoriteEntityTooltip = (isStarred: boolean) =>
   isStarred ? 'Remove from favorites' : 'Add to favorites';
 
-/** @public */
+/**
+ * @public
+ * @deprecated due to low utility value.
+ */
 export const favoriteEntityIcon = (isStarred: boolean) =>
   isStarred ? <YellowStar /> : <StarBorder />;
 
@@ -55,8 +61,10 @@ export const FavoriteEntity = (props: FavoriteEntityProps) => {
       {...props}
       onClick={() => toggleStarredEntity()}
     >
-      <Tooltip title={favoriteEntityTooltip(isStarredEntity)}>
-        {favoriteEntityIcon(isStarredEntity)}
+      <Tooltip
+        title={isStarredEntity ? 'Remove from favorites' : 'Add to favorites'}
+      >
+        {isStarredEntity ? <YellowStar /> : <StarBorder />}
       </Tooltip>
     </IconButton>
   );

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

@@ -20,8 +20,6 @@ import {
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
 import {
-  favoriteEntityIcon,
-  favoriteEntityTooltip,
   formatEntityRefTitle,
   getEntityRelations,
   useEntityList,
@@ -40,6 +38,9 @@ import {
   TableProps,
   WarningPanel,
 } from '@backstage/core-components';
+import StarBorder from '@material-ui/icons/StarBorder';
+import { withStyles } from '@material-ui/core/styles';
+import Star from '@material-ui/icons/Star';
 
 /**
  * Props for {@link CatalogTable}.
@@ -51,6 +52,12 @@ export interface CatalogTableProps {
   actions?: TableProps<CatalogTableRow>['actions'];
 }
 
+const YellowStar = withStyles({
+  root: {
+    color: '#f3ba37',
+  },
+})(Star);
+
 /** @public */
 export const CatalogTable = (props: CatalogTableProps) => {
   const { columns, actions } = props;
@@ -116,8 +123,8 @@ export const CatalogTable = (props: CatalogTableProps) => {
       const isStarred = isStarredEntity(entity);
       return {
         cellStyle: { paddingLeft: '1em' },
-        icon: () => favoriteEntityIcon(isStarred),
-        tooltip: favoriteEntityTooltip(isStarred),
+        icon: () => (isStarred ? <YellowStar /> : <StarBorder />),
+        tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
         onClick: () => toggleStarredEntity(entity),
       };
     },

plugins/techdocs/src/home/components/Tables/actions.tsx

@@ -16,11 +16,16 @@
 
 import React from 'react';
 import ShareIcon from '@material-ui/icons/Share';
-import {
-  favoriteEntityIcon,
-  favoriteEntityTooltip,
-} from '@backstage/plugin-catalog-react';
 import { DocsTableRow } from './types';
+import { withStyles } from '@material-ui/styles';
+import Star from '@material-ui/icons/Star';
+import StarBorder from '@material-ui/icons/StarBorder';
+
+const YellowStar = withStyles({
+  root: {
+    color: '#f3ba37',
+  },
+})(Star);
 
 /**
  * Not directly exported, but through DocsTable.actions and EntityListDocsTable.actions
@@ -46,8 +51,8 @@ export const actionFactories = {
       const isStarred = isStarredEntity(entity);
       return {
         cellStyle: { paddingLeft: '1em' },
-        icon: () => favoriteEntityIcon(isStarred),
-        tooltip: favoriteEntityTooltip(isStarred),
+        icon: () => (isStarred ? <YellowStar /> : <StarBorder />),
+        tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
         onClick: () => toggleStarredEntity(entity),
       };
     };