From ab6650ede9ef7438af09e99209a37e7eb19900d8 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:27:21 -0500
Subject: [PATCH] Added edit button to UserProfileCard

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
 .changeset/lucky-points-wash.md               |  5 ++
 .../UserProfileCard/UserProfileCard.test.tsx  | 83 +++++++++++++++++++
 .../User/UserProfileCard/UserProfileCard.tsx  | 27 +++++-
 3 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lucky-points-wash.md

diff --git a/.changeset/lucky-points-wash.md b/.changeset/lucky-points-wash.md
new file mode 100644
index 0000000000..961c354574
--- /dev/null
+++ b/.changeset/lucky-points-wash.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Added an edit button to the `UserProfileCard` that is enabled when the `backstage.io/edit-url` is present, this matches how the `GroupProfileCard` works
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
index 68e9715b06..acbd13703b 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
@@ -73,3 +73,86 @@ describe('UserSummary Test', () => {
     expect(rendered.getByText('Super awesome human')).toBeInTheDocument();
   });
 });
+
+describe('Edit Button', () => {
+  it('Should default to disabled', async () => {
+    const userEntity: UserEntity = {
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'User',
+      metadata: {
+        name: 'calum.leavy',
+        description: 'Super awesome human',
+      },
+      spec: {
+        profile: {
+          displayName: 'Calum Leavy',
+          email: 'calum-leavy@example.com',
+        },
+        memberOf: ['ExampleGroup'],
+      },
+      relations: [
+        {
+          type: 'memberOf',
+          targetRef: 'group:default/examplegroup',
+        },
+      ],
+    };
+
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <EntityProvider entity={userEntity}>
+          <UserProfileCard variant="gridItem" />
+        </EntityProvider>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
+      ),
+    );
+
+    expect(rendered.getByRole('button')).toBeDisabled();
+  });
+
+  it('Should be enabled when edit URL annotation is present', async () => {
+    const annotations: Record<string, string> = {
+      'backstage.io/edit-url': 'https://example.com/user.yaml',
+    };
+    const userEntity: UserEntity = {
+      apiVersion: 'backstage.io/v1alpha1',
+      kind: 'User',
+      metadata: {
+        name: 'calum.leavy',
+        description: 'Super awesome human',
+        annotations,
+      },
+      spec: {
+        profile: {
+          displayName: 'Calum Leavy',
+          email: 'calum-leavy@example.com',
+        },
+        memberOf: ['ExampleGroup'],
+      },
+      relations: [
+        {
+          type: 'memberOf',
+          targetRef: 'group:default/examplegroup',
+        },
+      ],
+    };
+
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <EntityProvider entity={userEntity}>
+          <UserProfileCard variant="gridItem" />
+        </EntityProvider>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
+      ),
+    );
+    expect(rendered.getByRole('button')).toBeEnabled();
+  });
+});
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
index 148fb03d19..39565d99d5 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { RELATION_MEMBER_OF, UserEntity } from '@backstage/catalog-model';
+import {
+  RELATION_MEMBER_OF,
+  UserEntity,
+  ANNOTATION_EDIT_URL,
+} from '@backstage/catalog-model';
 import {
   EntityRefLinks,
   getEntityRelations,
@@ -23,12 +27,14 @@ import {
 import {
   Box,
   Grid,
+  IconButton,
   List,
   ListItem,
   ListItemIcon,
   ListItemText,
   Tooltip,
 } from '@material-ui/core';
+import EditIcon from '@material-ui/icons/Edit';
 import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';
 import PersonIcon from '@material-ui/icons/Person';
@@ -56,6 +62,9 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
     return <Alert severity="error">User not found</Alert>;
   }
 
+  const entityMetadataEditUrl =
+    user.metadata.annotations?.[ANNOTATION_EDIT_URL];
+
   const {
     metadata: { name: metaName, description },
     spec: { profile },
@@ -66,11 +75,27 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
     kind: 'Group',
   });
 
+  const infoCardAction = entityMetadataEditUrl ? (
+    <IconButton
+      aria-label="Edit"
+      title="Edit Metadata"
+      component={Link}
+      to={entityMetadataEditUrl}
+    >
+      <EditIcon />
+    </IconButton>
+  ) : (
+    <IconButton aria-label="Edit" disabled title="Edit Metadata">
+      <EditIcon />
+    </IconButton>
+  );
+
   return (
     <InfoCard
       title={<CardTitle title={displayName} />}
       subheader={description}
       variant={props.variant}
+      action={infoCardAction}
     >
       <Grid container spacing={3} alignItems="flex-start">
         <Grid item xs={12} sm={2} xl={1}>