diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index ef77cf573f..5dbf886df2 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -24,17 +24,9 @@ import {
} from '@backstage/core';
import CatalogLayout from './CatalogLayout';
import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
-import {
- Button,
- Link,
- makeStyles,
- Typography,
- withStyles,
-} from '@material-ui/core';
+import { Button, Link, makeStyles, Typography } 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 React, { FC } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { CatalogFilter } from '../CatalogFilter/CatalogFilter';
@@ -47,6 +39,7 @@ import {
filterGroups,
labeledEntityTypes,
} from '../../data/filters';
+import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
const useStyles = makeStyles(theme => ({
contentWrapper: {
@@ -77,12 +70,6 @@ export const CatalogPage: FC<{}> = () => {
const styles = useStyles();
- const YellowStar = withStyles({
- root: {
- color: '#f3ba37',
- },
- })(Star);
-
const actions = [
(rowData: Entity) => {
const location = findLocationForEntityMeta(rowData.metadata);
@@ -119,14 +106,7 @@ export const CatalogPage: FC<{}> = () => {
hidden: location?.type !== 'github',
};
},
- (rowData: Entity) => {
- const isStarred = isStarredEntity(rowData);
- return {
- icon: isStarred ? YellowStar : StarOutline,
- tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
- onClick: () => toggleStarredEntity(rowData),
- };
- },
+ (rowData: Entity) => ,
];
return (
diff --git a/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx b/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx
index 57082a9c91..f1e1589b3b 100644
--- a/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx
+++ b/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx
@@ -17,13 +17,20 @@
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 = ({ entity }) => (
-
+ }}
+ headerStyle={InfoCardHeaderStyle}
+ >
);
diff --git a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx
new file mode 100644
index 0000000000..38dc654fea
--- /dev/null
+++ b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { useEntities } from '../../hooks/useEntities';
+import { Entity } from '@backstage/catalog-model';
+
+type Props = ComponentProps & { entity: Entity };
+
+const YellowStar = withStyles({
+ root: {
+ color: '#f3ba37',
+ },
+})(Star);
+
+/**
+ * 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 } = useEntities();
+ const isStarred = isStarredEntity(props.entity);
+ return (
+ toggleStarredEntity(props.entity)}
+ >
+
+ {isStarred ? : }
+
+
+ );
+};