Merge pull request #13162 from awanlin/topic/user-profile-edit

Added edit button to UserProfileCard

.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

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 not be present by default', 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.queryByTitle('Edit Metadata')).not.toBeInTheDocument();
+  });
+
+  it('Should be visible 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')).toBeInTheDocument();
+  });
+});

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 },
@@ -71,6 +80,20 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
       title={<CardTitle title={displayName} />}
       subheader={description}
       variant={props.variant}
+      action={
+        <>
+          {entityMetadataEditUrl && (
+            <IconButton
+              aria-label="Edit"
+              title="Edit Metadata"
+              component={Link}
+              to={entityMetadataEditUrl}
+            >
+              <EditIcon />
+            </IconButton>
+          )}
+        </>
+      }
     >
       <Grid container spacing={3} alignItems="flex-start">
         <Grid item xs={12} sm={2} xl={1}>