Merge pull request #1489 from tudi2d/1471-starring-entity-pages

#1471 - Add Starring on entity pages

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/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,
+}) => (
+  <Box display="inline-flex" alignItems="center" height="1em">
+    {title}
+    {entity && <FavouriteEntity entity={entity} />}
+  </Box>
+);
+
 export const EntityPage: FC<{}> = () => {
   const { optionalNamespaceAndName, kind } = useParams() as {
     optionalNamespaceAndName: string;
@@ -138,7 +149,11 @@ export const EntityPage: FC<{}> = () => {
 
   return (
     <Page theme={getPageTheme(entity)}>
-      <Header title={headerTitle} type={headerType}>
+      <Header
+        title={<EntityPageTitle title={headerTitle} entity={entity} />}
+        pageTitleOverride={headerTitle}
+        type={headerType}
+      >
         {entity && (
           <>
             <HeaderLabel

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

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ComponentProps } from 'react';
+import { IconButton, Tooltip, withStyles } from '@material-ui/core';
+import StarBorder from '@material-ui/icons/StarBorder';
+import Star from '@material-ui/icons/Star';
+import { useStarredEntities } from '../../hooks/useStarredEntites';
+import { Entity } from '@backstage/catalog-model';
+
+type Props = ComponentProps<typeof IconButton> & { 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 ? <YellowStar /> : <StarBorder />;
+
+/**
+ * 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> = props => {
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
+  const isStarred = isStarredEntity(props.entity);
+  return (
+    <IconButton
+      color="inherit"
+      {...props}
+      onClick={() => toggleStarredEntity(props.entity)}
+    >
+      <Tooltip title={favouriteEntityTooltip(isStarred)}>
+        {favouriteEntityIcon(isStarred)}
+      </Tooltip>
+    </IconButton>
+  );
+};