Move favourite star to title in header of EntityPage

plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx

@@ -17,20 +17,13 @@
 import { Entity } from '@backstage/catalog-model';
 import { InfoCard, StructuredMetadataTable } from '@backstage/core';
 import React, { FC } from 'react';
-import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 
 type Props = {
   entity: Entity;
 };
 
-const InfoCardHeaderStyle = { display: 'inline-flex', alignItems: 'baseline' };
-
 export const EntityMetadataCard: FC<Props> = ({ entity }) => (
-  <InfoCard
-    title="Information"
-    headerProps={{ action: <FavouriteEntity entity={entity} /> }}
-    headerStyle={InfoCardHeaderStyle}
-  >
+  <InfoCard title="Information">
     <StructuredMetadataTable metadata={entity.metadata} />
   </InfoCard>
 );

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

@@ -43,7 +43,11 @@ export const FavouriteEntity: React.FC<Props> = props => {
   const { toggleStarredEntity, isStarredEntity } = useEntities();
   const isStarred = isStarredEntity(props.entity);
   return (
-    <IconButton {...props} onClick={() => toggleStarredEntity(props.entity)}>
+    <IconButton
+      color="inherit"
+      {...props}
+      onClick={() => toggleStarredEntity(props.entity)}
+    >
       <Tooltip title={favouriteEntityTooltip(isStarred)}>
         <SvgIcon component={favouriteEntityIcon(isStarred)} />
       </Tooltip>