diff --git a/.changeset/metal-months-tie.md b/.changeset/metal-months-tie.md new file mode 100644 index 0000000000..890c7e8b5d --- /dev/null +++ b/.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. diff --git a/.changeset/small-brooms-retire.md b/.changeset/small-brooms-retire.md new file mode 100644 index 0000000000..2aa722a666 --- /dev/null +++ b/.changeset/small-brooms-retire.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-catalog': patch +'@backstage/plugin-techdocs': patch +--- + +Removed usage of deprecated favorite utility methods. diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 78ad5d4b97..3f9a2c47e1 100644 --- a/plugins/catalog-react/api-report.md +++ b/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 & { entity: Entity; }; -// @public (undocumented) +// @public @deprecated (undocumented) export const favoriteEntityTooltip: ( isStarred: boolean, ) => 'Remove from favorites' | 'Add to favorites'; diff --git a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx b/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx index 3832a82877..eaa2821448 100644 --- a/plugins/catalog-react/src/components/FavoriteEntity/FavoriteEntity.tsx +++ b/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 ? : ; @@ -55,8 +61,10 @@ export const FavoriteEntity = (props: FavoriteEntityProps) => { {...props} onClick={() => toggleStarredEntity()} > - - {favoriteEntityIcon(isStarredEntity)} + + {isStarredEntity ? : } ); diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index a9a6f26228..06a2395ab6 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/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['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 ? : ), + tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites', onClick: () => toggleStarredEntity(entity), }; }, diff --git a/plugins/techdocs/src/home/components/Tables/actions.tsx b/plugins/techdocs/src/home/components/Tables/actions.tsx index d0dbb8bf47..3fd8881718 100644 --- a/plugins/techdocs/src/home/components/Tables/actions.tsx +++ b/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 ? : ), + tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites', onClick: () => toggleStarredEntity(entity), }; };