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 1/2] 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( + + + , + { + 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 = { + '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( + + + , + { + 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 User not found; } + 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 ? ( + + + + ) : ( + + + + ); + return ( } subheader={description} variant={props.variant} + action={infoCardAction} > From 8d8bde24f6afe9c74cba5e355435aea994da7dd3 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Wed, 17 Aug 2022 12:54:02 -0500 Subject: [PATCH 2/2] Change so edit icon is not visible by default Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .../UserProfileCard/UserProfileCard.test.tsx | 8 ++--- .../User/UserProfileCard/UserProfileCard.tsx | 30 +++++++++---------- 2 files changed, 18 insertions(+), 20 deletions(-) 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 acbd13703b..f339a5828c 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx @@ -75,7 +75,7 @@ describe('UserSummary Test', () => { }); describe('Edit Button', () => { - it('Should default to disabled', async () => { + it('Should not be present by default', async () => { const userEntity: UserEntity = { apiVersion: 'backstage.io/v1alpha1', kind: 'User', @@ -111,10 +111,10 @@ describe('Edit Button', () => { ), ); - expect(rendered.getByRole('button')).toBeDisabled(); + expect(rendered.queryByTitle('Edit Metadata')).not.toBeInTheDocument(); }); - it('Should be enabled when edit URL annotation is present', async () => { + it('Should be visible when edit URL annotation is present', async () => { const annotations: Record = { 'backstage.io/edit-url': 'https://example.com/user.yaml', }; @@ -153,6 +153,6 @@ describe('Edit Button', () => { }, ), ); - expect(rendered.getByRole('button')).toBeEnabled(); + expect(rendered.getByRole('button')).toBeInTheDocument(); }); }); diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index 39565d99d5..dd75578687 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -75,27 +75,25 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => { kind: 'Group', }); - const infoCardAction = entityMetadataEditUrl ? ( - - - - ) : ( - - - - ); - return ( } subheader={description} variant={props.variant} - action={infoCardAction} + action={ + <> + {entityMetadataEditUrl && ( + + + + )} + + } >