From b7cd1f31516662f28ae7f642985d8a0ebff4085a Mon Sep 17 00:00:00 2001
From: "roylisto.pradana" <roylisto.pradana@grabtaxi.com>
Date: Wed, 30 Jun 2021 13:55:53 +0700
Subject: [PATCH] Add edit button to Group Profile card

Signed-off-by: roylisto.pradana <roylisto.pradana@grabtaxi.com>
---
 .../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={<CardTitle title={displayName} />}
       subheader={description}
       variant={variant}
+      action={
+        <IconButton
+          aria-label="Edit"
+          // disabled={!entityMetadataEditUrl}
+          title="Edit Metadata"
+          onClick={() => {
+            // window.open(entityMetadataEditUrl ?? '#', '_blank');
+          }}
+        >
+          <EditIcon />
+        </IconButton>
+      }
     >
       <Grid container spacing={3}>
         <Grid item xs={12} sm={2} xl={1}>