From d42d1eaa1a21e48ae28a8600d88f2194b1fadd5c Mon Sep 17 00:00:00 2001 From: tudi2d Date: Mon, 29 Jun 2020 14:14:25 +0200 Subject: [PATCH 1/5] Add FavouriteEntity component --- .../components/CatalogPage/CatalogPage.tsx | 26 ++-------- .../EntityMetadataCard/EntityMetadataCard.tsx | 9 +++- .../FavouriteEntity/FavouriteEntity.tsx | 50 +++++++++++++++++++ 3 files changed, 61 insertions(+), 24 deletions(-) create mode 100644 plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx 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 ? : } + + + ); +}; From 6bfa4d23c7645d091d01f893fb0e18d3857c4352 Mon Sep 17 00:00:00 2001 From: tudi2d Date: Mon, 29 Jun 2020 14:39:57 +0200 Subject: [PATCH 2/5] Fix material-table action for starring entity --- .../src/components/CatalogPage/CatalogPage.tsx | 14 ++++++++++++-- .../FavouriteEntity/FavouriteEntity.tsx | 18 ++++++++++-------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 5dbf886df2..bad303bd53 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -39,7 +39,10 @@ import { filterGroups, labeledEntityTypes, } from '../../data/filters'; -import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity'; +import { + favouriteEntityIcon, + favouriteEntityTooltip, +} from '../FavouriteEntity/FavouriteEntity'; const useStyles = makeStyles(theme => ({ contentWrapper: { @@ -106,7 +109,14 @@ export const CatalogPage: FC<{}> = () => { hidden: location?.type !== 'github', }; }, - (rowData: Entity) => , + (rowData: Entity) => { + const isStarred = isStarredEntity(rowData); + return { + icon: favouriteEntityIcon(isStarred), + tooltip: favouriteEntityTooltip(isStarred), + onClick: () => toggleStarredEntity(rowData), + }; + }, ]; return ( diff --git a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx index 38dc654fea..3ea5b68d4b 100644 --- a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx +++ b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx @@ -15,7 +15,7 @@ */ import React, { ComponentProps } from 'react'; -import { IconButton, Tooltip, withStyles } from '@material-ui/core'; +import { IconButton, Tooltip, withStyles, SvgIcon } from '@material-ui/core'; import StarBorder from '@material-ui/icons/StarBorder'; import Star from '@material-ui/icons/Star'; import { useEntities } from '../../hooks/useEntities'; @@ -29,6 +29,12 @@ const YellowStar = withStyles({ }, })(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 @@ -37,13 +43,9 @@ export const FavouriteEntity: React.FC = props => { const { toggleStarredEntity, isStarredEntity } = useEntities(); const isStarred = isStarredEntity(props.entity); return ( - toggleStarredEntity(props.entity)} - > - - {isStarred ? : } + toggleStarredEntity(props.entity)}> + + ); From 255777e83cde55f83df07f449c2b4020513b2f32 Mon Sep 17 00:00:00 2001 From: tudi2d Date: Tue, 30 Jun 2020 11:50:51 +0200 Subject: [PATCH 3/5] Move favourite star to title in header of EntityPage --- .../EntityMetadataCard/EntityMetadataCard.tsx | 9 +-------- .../src/components/EntityPage/EntityPage.tsx | 19 +++++++++++++++++-- .../FavouriteEntity/FavouriteEntity.tsx | 6 +++++- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx b/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx index f1e1589b3b..57082a9c91 100644 --- a/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx +++ b/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 = ({ entity }) => ( - }} - headerStyle={InfoCardHeaderStyle} - > + ); 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 && ( <> = props => { const { toggleStarredEntity, isStarredEntity } = useEntities(); const isStarred = isStarredEntity(props.entity); return ( - toggleStarredEntity(props.entity)}> + toggleStarredEntity(props.entity)} + > From 5c8074ba2a88da6f8811c93c3b7a82f05f538737 Mon Sep 17 00:00:00 2001 From: tudi2d Date: Tue, 30 Jun 2020 12:22:16 +0200 Subject: [PATCH 4/5] Replace icon & tooltip for star in changed CatalogTable --- .../src/components/CatalogTable/CatalogTable.tsx | 15 ++++++--------- .../FavouriteEntity/FavouriteEntity.tsx | 4 ++-- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index b507b96f05..27793c81b1 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/FavouriteEntity/FavouriteEntity.tsx b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx index 0bb033b3e2..0f608836a9 100644 --- a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx +++ b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx @@ -18,7 +18,7 @@ import React, { ComponentProps } from 'react'; import { IconButton, Tooltip, withStyles, SvgIcon } from '@material-ui/core'; import StarBorder from '@material-ui/icons/StarBorder'; import Star from '@material-ui/icons/Star'; -import { useEntities } from '../../hooks/useEntities'; +import { useStarredEntities } from '../../hooks/useStarredEntites'; import { Entity } from '@backstage/catalog-model'; type Props = ComponentProps & { entity: Entity }; @@ -40,7 +40,7 @@ export const favouriteEntityIcon = (isStarred: boolean) => * @param props MaterialUI IconButton props extended by required `entity` prop */ export const FavouriteEntity: React.FC = props => { - const { toggleStarredEntity, isStarredEntity } = useEntities(); + const { toggleStarredEntity, isStarredEntity } = useStarredEntities(); const isStarred = isStarredEntity(props.entity); return ( Date: Tue, 30 Jun 2020 12:36:06 +0200 Subject: [PATCH 5/5] Fix type error breaking build --- .../catalog/src/components/CatalogTable/CatalogTable.tsx | 2 +- .../src/components/FavouriteEntity/FavouriteEntity.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 27793c81b1..b5afbcaa0b 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -127,7 +127,7 @@ export const CatalogTable = ({ const isStarred = isStarredEntity(rowData); return { cellStyle: { paddingLeft: '1em' }, - icon: favouriteEntityIcon(isStarred), + icon: () => favouriteEntityIcon(isStarred), tooltip: favouriteEntityTooltip(isStarred), onClick: () => toggleStarredEntity(rowData), }; diff --git a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx index 0f608836a9..bd2c71891d 100644 --- a/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx +++ b/plugins/catalog/src/components/FavouriteEntity/FavouriteEntity.tsx @@ -15,7 +15,7 @@ */ import React, { ComponentProps } from 'react'; -import { IconButton, Tooltip, withStyles, SvgIcon } from '@material-ui/core'; +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'; @@ -33,7 +33,7 @@ export const favouriteEntityTooltip = (isStarred: boolean) => isStarred ? 'Remove from favorites' : 'Add to favorites'; export const favouriteEntityIcon = (isStarred: boolean) => - isStarred ? YellowStar : StarBorder; + isStarred ? : ; /** * IconButton for showing if a current entity is starred and adding/removing it from the favourite entities @@ -49,7 +49,7 @@ export const FavouriteEntity: React.FC = props => { onClick={() => toggleStarredEntity(props.entity)} > - + {favouriteEntityIcon(isStarred)} );