From b7cd1f31516662f28ae7f642985d8a0ebff4085a Mon Sep 17 00:00:00 2001 From: "roylisto.pradana" Date: Wed, 30 Jun 2021 13:55:53 +0700 Subject: [PATCH 1/5] Add edit button to Group Profile card Signed-off-by: roylisto.pradana --- .../src/layout/InfoCard/InfoCard.tsx | 4 +++- .../Cards/Group/GroupProfile/GroupProfileCard.tsx | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) 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..a96c53da6e 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -33,10 +33,12 @@ import { 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'; @@ -80,6 +82,18 @@ export const GroupProfileCard = ({ title={} subheader={description} variant={variant} + action={ + { + // window.open(entityMetadataEditUrl ?? '#', '_blank'); + }} + > + + + } > From 5a80de8ff602b185575bdcbcb9daa891aaeb659d Mon Sep 17 00:00:00 2001 From: "roylisto.pradana" Date: Wed, 30 Jun 2021 14:14:48 +0700 Subject: [PATCH 2/5] get metadata edit url Signed-off-by: roylisto.pradana --- .../Cards/Group/GroupProfile/GroupProfileCard.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index a96c53da6e..8d44e9157a 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -23,6 +23,7 @@ import { EntityRefLinks, getEntityRelations, useEntity, + getEntityMetadataEditUrl, } from '@backstage/plugin-catalog-react'; import { Box, @@ -74,6 +75,8 @@ export const GroupProfileCard = ({ kind: 'group', }); + const entityMetadataEditUrl = getEntityMetadataEditUrl(group); + const displayName = profile?.displayName ?? name; const emailHref = profile?.email ? `mailto:${profile.email}` : undefined; @@ -85,10 +88,10 @@ export const GroupProfileCard = ({ action={ { - // window.open(entityMetadataEditUrl ?? '#', '_blank'); + window.open(entityMetadataEditUrl ?? '#', '_blank'); }} > From 34352a79c4f2c397e7d21f2aab916ae99da698c9 Mon Sep 17 00:00:00 2001 From: "roylisto.pradana" Date: Wed, 30 Jun 2021 14:33:00 +0700 Subject: [PATCH 3/5] add changeset Signed-off-by: roylisto.pradana --- .changeset/six-birds-approve.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/six-birds-approve.md 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 From a6b4aebbd214a0409ae78f7fd9ff230f8a765bc0 Mon Sep 17 00:00:00 2001 From: roylisto Date: Mon, 5 Jul 2021 16:20:45 +0700 Subject: [PATCH 4/5] Use Link from @backstage/core-components Signed-off-by: roylisto --- .../Group/GroupProfile/GroupProfileCard.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index 8d44e9157a..637a7279f6 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -28,7 +28,6 @@ import { import { Box, Grid, - Link, List, ListItem, ListItemIcon, @@ -42,7 +41,12 @@ 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 }) => ( @@ -75,10 +79,10 @@ export const GroupProfileCard = ({ kind: 'group', }); - const entityMetadataEditUrl = getEntityMetadataEditUrl(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}` : '#'; return ( { - window.open(entityMetadataEditUrl ?? '#', '_blank'); - }} + component={Link} + target="_blank" + to={entityMetadataEditUrl} > @@ -112,7 +116,7 @@ export const GroupProfileCard = ({ - {profile.email} + {profile.email} )} From 3e3227afc06aabb3c35e8f6cf4567edc59d287bc Mon Sep 17 00:00:00 2001 From: roylisto Date: Tue, 6 Jul 2021 10:27:56 +0700 Subject: [PATCH 5/5] Add infoCardAction Signed-off-by: roylisto --- .../Group/GroupProfile/GroupProfileCard.tsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index 637a7279f6..b44fbe6c5c 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -79,28 +79,31 @@ export const GroupProfileCard = ({ kind: 'group', }); - const entityMetadataEditUrl = getEntityMetadataEditUrl(group) ?? '#'; + const entityMetadataEditUrl = getEntityMetadataEditUrl(group); const displayName = profile?.displayName ?? name; const emailHref = profile?.email ? `mailto:${profile.email}` : '#'; + const infoCardAction = entityMetadataEditUrl ? ( + + + + ) : ( + + + + ); return ( } subheader={description} variant={variant} - action={ - - - - } + action={infoCardAction} >