From 67cedfe42ee2d344db700159ed3c9ee3110330d3 Mon Sep 17 00:00:00 2001 From: Joe Patterson Date: Tue, 22 Nov 2022 20:24:46 +1000 Subject: [PATCH 1/5] add toggle to turn off links on user and group Signed-off-by: Joe Patterson --- .changeset/quick-horses-cry.md | 5 ++ .../Group/GroupProfile/GroupProfileCard.tsx | 55 +++++++++--------- .../UserProfileCard/UserProfileCard.test.tsx | 56 ++++++++++++++++++- .../User/UserProfileCard/UserProfileCard.tsx | 33 +++++------ 4 files changed, 105 insertions(+), 44 deletions(-) create mode 100644 .changeset/quick-horses-cry.md diff --git a/.changeset/quick-horses-cry.md b/.changeset/quick-horses-cry.md new file mode 100644 index 0000000000..58708d63b2 --- /dev/null +++ b/.changeset/quick-horses-cry.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Small change to allow disabling of links in the user and group profile cards diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index 3a6b7c238d..f7dd9d20d4 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -15,43 +15,44 @@ */ import { + ANNOTATION_EDIT_URL, + ANNOTATION_LOCATION, GroupEntity, RELATION_CHILD_OF, RELATION_PARENT_OF, - ANNOTATION_LOCATION, stringifyEntityRef, - ANNOTATION_EDIT_URL, } from '@backstage/catalog-model'; -import { - catalogApiRef, - EntityRefLinks, - getEntityRelations, - useEntity, -} from '@backstage/plugin-catalog-react'; -import { - Box, - Grid, - List, - ListItem, - 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 CachedIcon from '@material-ui/icons/Cached'; -import Alert from '@material-ui/lab/Alert'; -import React, { useCallback } from 'react'; import { Avatar, InfoCard, InfoCardVariants, Link, } from '@backstage/core-components'; +import { + Box, + Grid, + IconButton, + List, + ListItem, + ListItemIcon, + ListItemText, + Tooltip, +} from '@material-ui/core'; +import { + EntityRefLinks, + catalogApiRef, + getEntityRelations, + useEntity, +} from '@backstage/plugin-catalog-react'; +import React, { useCallback } from 'react'; import { alertApiRef, useApi } from '@backstage/core-plugin-api'; + +import AccountTreeIcon from '@material-ui/icons/AccountTree'; +import Alert from '@material-ui/lab/Alert'; +import CachedIcon from '@material-ui/icons/Cached'; +import EditIcon from '@material-ui/icons/Edit'; +import EmailIcon from '@material-ui/icons/Email'; +import GroupIcon from '@material-ui/icons/Group'; import { LinksGroup } from '../../Meta'; const CardTitle = (props: { title: string }) => ( @@ -62,7 +63,7 @@ const CardTitle = (props: { title: string }) => ( ); /** @public */ -export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => { +export const GroupProfileCard = (props: { variant?: InfoCardVariants, hideLinks?: boolean }) => { const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); const { entity: group } = useEntity(); @@ -191,7 +192,7 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => { secondary="Child Groups" /> - + {!props?.hideLinks && } 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 fb0df3d25f..449b66b96d 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx @@ -156,7 +156,7 @@ describe('Edit Button', () => { expect(rendered.getByRole('button')).toBeInTheDocument(); }); - it('Should show the extra fields if either links or extra profile are filled', async () => { + it('Should show the extra fields if either links', async () => { const annotations: Record = { 'backstage.io/edit-url': 'https://example.com/user.yaml', }; @@ -209,4 +209,58 @@ describe('Edit Button', () => { expect(rendered.getByText('Slack')).toBeInTheDocument(); expect(rendered.getByText('Google')).toBeInTheDocument(); }); + + it('Should hide the links if hidelinks', 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, + links: [ + { + url: 'slack://user?team=T00000000&id=U00000000', + title: 'Slack', + icon: 'message', + }, + { + url: 'https://www.google.com', + title: 'Google', + }, + ], + }, + 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.queryByText('Slack')).toBeNull(); + expect(rendered.queryByText('Google')).toBeNull(); + }); }); diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index a35c1c057b..7d5bb33a4e 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -15,15 +15,16 @@ */ import { + ANNOTATION_EDIT_URL, RELATION_MEMBER_OF, UserEntity, - ANNOTATION_EDIT_URL, } from '@backstage/catalog-model'; import { - EntityRefLinks, - getEntityRelations, - useEntity, -} from '@backstage/plugin-catalog-react'; + Avatar, + InfoCard, + InfoCardVariants, + Link, +} from '@backstage/core-components'; import { Box, Grid, @@ -34,19 +35,19 @@ import { ListItemText, Tooltip, } from '@material-ui/core'; +import { + EntityRefLinks, + getEntityRelations, + useEntity, +} from '@backstage/plugin-catalog-react'; + +import Alert from '@material-ui/lab/Alert'; 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'; -import Alert from '@material-ui/lab/Alert'; -import React from 'react'; -import { - Avatar, - InfoCard, - InfoCardVariants, - Link, -} from '@backstage/core-components'; import { LinksGroup } from '../../Meta'; +import PersonIcon from '@material-ui/icons/Person'; +import React from 'react'; const CardTitle = (props: { title?: string }) => props.title ? ( @@ -57,7 +58,7 @@ const CardTitle = (props: { title?: string }) => ) : null; /** @public */ -export const UserProfileCard = (props: { variant?: InfoCardVariants }) => { +export const UserProfileCard = (props: { variant?: InfoCardVariants, hideLinks?: boolean }) => { const { entity: user } = useEntity(); if (!user) { return User not found; @@ -130,7 +131,7 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => { - + {!props?.hideLinks && } From b580cb3bd2a4edac08035b1a081bb31aa9ec4998 Mon Sep 17 00:00:00 2001 From: Joe Patterson Date: Tue, 22 Nov 2022 20:50:50 +1000 Subject: [PATCH 2/5] update api report Signed-off-by: Joe Patterson --- plugins/org/api-report.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/org/api-report.md b/plugins/org/api-report.md index f8cf8afe22..67c5cd5e0a 100644 --- a/plugins/org/api-report.md +++ b/plugins/org/api-report.md @@ -13,6 +13,7 @@ import { InfoCardVariants } from '@backstage/core-components'; // @public (undocumented) export const EntityGroupProfileCard: (props: { variant?: InfoCardVariants | undefined; + hideLinks?: boolean | undefined; }) => JSX.Element; // @public (undocumented) @@ -32,11 +33,13 @@ export const EntityOwnershipCard: (props: { // @public (undocumented) export const EntityUserProfileCard: (props: { variant?: InfoCardVariants | undefined; + hideLinks?: boolean | undefined; }) => JSX.Element; // @public (undocumented) export const GroupProfileCard: (props: { variant?: InfoCardVariants; + hideLinks?: boolean; }) => JSX.Element; // @public (undocumented) @@ -75,5 +78,6 @@ export const OwnershipCard: (props: { // @public (undocumented) export const UserProfileCard: (props: { variant?: InfoCardVariants; + hideLinks?: boolean; }) => JSX.Element; ``` From c9b75f8c545b7385321db6e62f42ef8ea831cf32 Mon Sep 17 00:00:00 2001 From: Joe Patterson Date: Wed, 23 Nov 2022 11:20:14 +1000 Subject: [PATCH 3/5] run prettier Signed-off-by: Joe Patterson --- .../components/Cards/Group/GroupProfile/GroupProfileCard.tsx | 5 ++++- .../Cards/User/UserProfileCard/UserProfileCard.tsx | 5 ++++- 2 files changed, 8 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 f7dd9d20d4..c138c73735 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -63,7 +63,10 @@ const CardTitle = (props: { title: string }) => ( ); /** @public */ -export const GroupProfileCard = (props: { variant?: InfoCardVariants, hideLinks?: boolean }) => { +export const GroupProfileCard = (props: { + variant?: InfoCardVariants; + hideLinks?: boolean; +}) => { const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); const { entity: group } = useEntity(); diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index 7d5bb33a4e..2421d609d4 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -58,7 +58,10 @@ const CardTitle = (props: { title?: string }) => ) : null; /** @public */ -export const UserProfileCard = (props: { variant?: InfoCardVariants, hideLinks?: boolean }) => { +export const UserProfileCard = (props: { + variant?: InfoCardVariants; + hideLinks?: boolean; +}) => { const { entity: user } = useEntity(); if (!user) { return User not found; From ef26a5a6c2b4314937f4a349ef83db0927095ade Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Wed, 23 Nov 2022 15:33:13 +0100 Subject: [PATCH 4/5] org: Do not render links by default Signed-off-by: Johan Haals --- .changeset/quick-horses-cry.md | 2 +- .../Cards/Group/GroupProfile/GroupProfileCard.tsx | 4 ++-- .../User/UserProfileCard/UserProfileCard.test.tsx | 14 +++++++------- .../Cards/User/UserProfileCard/UserProfileCard.tsx | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/.changeset/quick-horses-cry.md b/.changeset/quick-horses-cry.md index 58708d63b2..8b40c92b41 100644 --- a/.changeset/quick-horses-cry.md +++ b/.changeset/quick-horses-cry.md @@ -2,4 +2,4 @@ '@backstage/plugin-org': patch --- -Small change to allow disabling of links in the user and group profile cards +Update `UserProfileCard` and `GroupProfileCard` to not render links unless the `showLinks` prop is set. The primary component for rendering links are the `EntityLinksCard` from plugin-catalog. diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx index c138c73735..5e795b2710 100644 --- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx +++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx @@ -65,7 +65,7 @@ const CardTitle = (props: { title: string }) => ( /** @public */ export const GroupProfileCard = (props: { variant?: InfoCardVariants; - hideLinks?: boolean; + showLinks?: boolean; }) => { const catalogApi = useApi(catalogApiRef); const alertApi = useApi(alertApiRef); @@ -195,7 +195,7 @@ export const GroupProfileCard = (props: { secondary="Child Groups" /> - {!props?.hideLinks && } + {props?.showLinks && } 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 449b66b96d..547c636d22 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx @@ -156,7 +156,7 @@ describe('Edit Button', () => { expect(rendered.getByRole('button')).toBeInTheDocument(); }); - it('Should show the extra fields if either links', async () => { + it('Should not show links by default', async () => { const annotations: Record = { 'backstage.io/edit-url': 'https://example.com/user.yaml', }; @@ -206,11 +206,11 @@ describe('Edit Button', () => { }, ), ); - expect(rendered.getByText('Slack')).toBeInTheDocument(); - expect(rendered.getByText('Google')).toBeInTheDocument(); + expect(rendered.queryByText('Slack')).toBeNull(); + expect(rendered.queryByText('Google')).toBeNull(); }); - it('Should hide the links if hidelinks', async () => { + it('Should show the links if showLinks is set', async () => { const annotations: Record = { 'backstage.io/edit-url': 'https://example.com/user.yaml', }; @@ -251,7 +251,7 @@ describe('Edit Button', () => { const rendered = await renderWithEffects( wrapInTestApp( - + , { mountedRoutes: { @@ -260,7 +260,7 @@ describe('Edit Button', () => { }, ), ); - expect(rendered.queryByText('Slack')).toBeNull(); - expect(rendered.queryByText('Google')).toBeNull(); + expect(rendered.getByText('Slack')).toBeInTheDocument(); + expect(rendered.getByText('Google')).toBeInTheDocument(); }); }); diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index 2421d609d4..a45658b3a6 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -60,7 +60,7 @@ const CardTitle = (props: { title?: string }) => /** @public */ export const UserProfileCard = (props: { variant?: InfoCardVariants; - hideLinks?: boolean; + showLinks?: boolean; }) => { const { entity: user } = useEntity(); if (!user) { @@ -134,7 +134,7 @@ export const UserProfileCard = (props: { - {!props?.hideLinks && } + {props?.showLinks && } From 41a747004c5c379f48e1b8b7b9942a2715a0a120 Mon Sep 17 00:00:00 2001 From: Johan Haals Date: Wed, 23 Nov 2022 15:39:51 +0100 Subject: [PATCH 5/5] update api report Signed-off-by: Johan Haals --- plugins/org/api-report.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/org/api-report.md b/plugins/org/api-report.md index 67c5cd5e0a..e950b1bc8b 100644 --- a/plugins/org/api-report.md +++ b/plugins/org/api-report.md @@ -13,7 +13,7 @@ import { InfoCardVariants } from '@backstage/core-components'; // @public (undocumented) export const EntityGroupProfileCard: (props: { variant?: InfoCardVariants | undefined; - hideLinks?: boolean | undefined; + showLinks?: boolean | undefined; }) => JSX.Element; // @public (undocumented) @@ -33,13 +33,13 @@ export const EntityOwnershipCard: (props: { // @public (undocumented) export const EntityUserProfileCard: (props: { variant?: InfoCardVariants | undefined; - hideLinks?: boolean | undefined; + showLinks?: boolean | undefined; }) => JSX.Element; // @public (undocumented) export const GroupProfileCard: (props: { variant?: InfoCardVariants; - hideLinks?: boolean; + showLinks?: boolean; }) => JSX.Element; // @public (undocumented) @@ -78,6 +78,6 @@ export const OwnershipCard: (props: { // @public (undocumented) export const UserProfileCard: (props: { variant?: InfoCardVariants; - hideLinks?: boolean; + showLinks?: boolean; }) => JSX.Element; ```