diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index b507b96f05..b5afbcaa0b 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[] = [ { @@ -125,13 +127,8 @@ export const CatalogTable = ({ const isStarred = isStarredEntity(rowData); return { cellStyle: { paddingLeft: '1em' }, - icon: () => - isStarred ? ( - - ) : ( - - ), - tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites', + icon: () => favouriteEntityIcon(isStarred), + tooltip: favouriteEntityTooltip(isStarred), onClick: () => toggleStarredEntity(rowData), }; }, diff --git a/plugins/catalog/src/components/EntityPage/EntityPage.tsx b/plugins/catalog/src/components/EntityPage/EntityPage.tsx index e5db5b9230..1c56924589 100644 --- a/plugins/catalog/src/components/EntityPage/EntityPage.tsx +++ b/plugins/catalog/src/components/EntityPage/EntityPage.tsx @@ -28,7 +28,7 @@ import { useApi, } from '@backstage/core'; import { SentryIssuesWidget } from '@backstage/plugin-sentry'; -import { Grid } from '@material-ui/core'; +import { Grid, Box } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; import React, { FC, useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -37,6 +37,7 @@ import { catalogApiRef } from '../..'; import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu'; import { EntityMetadataCard } from '../EntityMetadataCard/EntityMetadataCard'; import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog'; +import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity'; const REDIRECT_DELAY = 1000; function headerProps( @@ -63,6 +64,16 @@ export const getPageTheme = (entity?: Entity): PageTheme => { return pageTheme[themeKey] ?? pageTheme.home; }; +const EntityPageTitle: FC<{ title: string; entity: Entity | undefined }> = ({ + entity, + title, +}) => ( + + {title} + {entity && } + +); + export const EntityPage: FC<{}> = () => { const { optionalNamespaceAndName, kind } = useParams() as { optionalNamespaceAndName: string; @@ -138,7 +149,11 @@ export const EntityPage: FC<{}> = () => { return ( -
+
} + pageTitleOverride={headerTitle} + type={headerType} + > {entity && ( <> & { entity: Entity }; + +const YellowStar = withStyles({ + root: { + color: '#f3ba37', + }, +})(Star); + +export const favouriteEntityTooltip = (isStarred: boolean) => + isStarred ? 'Remove from favorites' : 'Add to favorites'; + +export const favouriteEntityIcon = (isStarred: boolean) => + isStarred ? : ; + +/** + * 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 + */ +export const FavouriteEntity: React.FC = props => { + const { toggleStarredEntity, isStarredEntity } = useStarredEntities(); + const isStarred = isStarredEntity(props.entity); + return ( + toggleStarredEntity(props.entity)} + > + + {favouriteEntityIcon(isStarred)} + + + ); +};