diff --git a/.changeset/six-birds-approve.md b/.changeset/six-birds-approve.md new file mode 100644 index 0000000000..ce666dd09c --- /dev/null +++ b/.changeset/six-birds-approve.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-org': patch +--- + +Add edit button to Group Profile Card diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx index 763038388b..cc15bbd9f4 100644 --- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx +++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx @@ -37,7 +37,6 @@ const useStyles = makeStyles(theme => ({ }, }, header: { - display: 'inline-block', padding: theme.spacing(2, 2, 2, 2.5), }, headerTitle: { @@ -121,6 +120,7 @@ type Props = { children?: ReactNode; headerStyle?: object; headerProps?: CardHeaderProps; + action?: ReactNode; actionsClassName?: string; actions?: ReactNode; cardClassName?: string; @@ -141,6 +141,7 @@ export const InfoCard = ({ children, headerStyle, headerProps, + action, actionsClassName, actions, cardClassName, @@ -190,6 +191,7 @@ export const InfoCard = ({ }} title={title} subheader={subheader} + action={action} style={{ ...headerStyle }} titleTypographyProps={titleTypographyProps} {...headerProps} diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index 853dbc53e8..b44fbe6c5c 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -23,23 +23,30 @@ import { EntityRefLinks, getEntityRelations, useEntity, + getEntityMetadataEditUrl, } from '@backstage/plugin-catalog-react'; import { Box, Grid, - Link, List, ListItem, ListItemIcon, ListItemText, Tooltip, + IconButton, } from '@material-ui/core'; import AccountTreeIcon from '@material-ui/icons/AccountTree'; import EmailIcon from '@material-ui/icons/Email'; import GroupIcon from '@material-ui/icons/Group'; +import EditIcon from '@material-ui/icons/Edit'; import Alert from '@material-ui/lab/Alert'; import React from 'react'; -import { Avatar, InfoCard, InfoCardVariants } from '@backstage/core-components'; +import { + Avatar, + InfoCard, + InfoCardVariants, + Link, +} from '@backstage/core-components'; const CardTitle = ({ title }: { title: string }) => ( @@ -72,14 +79,31 @@ export const GroupProfileCard = ({ kind: 'group', }); + const entityMetadataEditUrl = getEntityMetadataEditUrl(group); + const displayName = profile?.displayName ?? name; - const emailHref = profile?.email ? `mailto:${profile.email}` : undefined; + const emailHref = profile?.email ? `mailto:${profile.email}` : '#'; + const infoCardAction = entityMetadataEditUrl ? ( + + + + ) : ( + + + + ); return ( } subheader={description} variant={variant} + action={infoCardAction} > @@ -95,7 +119,7 @@ export const GroupProfileCard = ({ - {profile.email} + {profile.email} )}