Merge pull request #14771 from jrwpatterson/add-links-toggle

add toggle to turn off links on user and group

.changeset/quick-horses-cry.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+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.

plugins/org/api-report.md

@@ -13,6 +13,7 @@ import { InfoCardVariants } from '@backstage/core-components';
 // @public (undocumented)
 export const EntityGroupProfileCard: (props: {
   variant?: InfoCardVariants | undefined;
+  showLinks?: boolean | undefined;
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -32,11 +33,13 @@ export const EntityOwnershipCard: (props: {
 // @public (undocumented)
 export const EntityUserProfileCard: (props: {
   variant?: InfoCardVariants | undefined;
+  showLinks?: boolean | undefined;
 }) => JSX.Element;
 
 // @public (undocumented)
 export const GroupProfileCard: (props: {
   variant?: InfoCardVariants;
+  showLinks?: boolean;
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -75,5 +78,6 @@ export const OwnershipCard: (props: {
 // @public (undocumented)
 export const UserProfileCard: (props: {
   variant?: InfoCardVariants;
+  showLinks?: boolean;
 }) => JSX.Element;
 ```

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,10 @@ const CardTitle = (props: { title: string }) => (
 );
 
 /** @public */
-export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
+export const GroupProfileCard = (props: {
+  variant?: InfoCardVariants;
+  showLinks?: boolean;
+}) => {
   const catalogApi = useApi(catalogApiRef);
   const alertApi = useApi(alertApiRef);
   const { entity: group } = useEntity<GroupEntity>();
@@ -191,7 +195,7 @@ export const GroupProfileCard = (props: { variant?: InfoCardVariants }) => {
                 secondary="Child Groups"
               />
             </ListItem>
-            <LinksGroup links={links} />
+            {props?.showLinks && <LinksGroup links={links} />}
           </List>
         </Grid>
       </Grid>

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 not show links by default', async () => {
     const annotations: Record<string, string> = {
       'backstage.io/edit-url': 'https://example.com/user.yaml',
     };
@@ -206,6 +206,60 @@ describe('Edit Button', () => {
         },
       ),
     );
+    expect(rendered.queryByText('Slack')).toBeNull();
+    expect(rendered.queryByText('Google')).toBeNull();
+  });
+
+  it('Should show the links if showLinks is set', 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,
+        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(
+        <EntityProvider entity={userEntity}>
+          <UserProfileCard showLinks variant="gridItem" />
+        </EntityProvider>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
+      ),
+    );
     expect(rendered.getByText('Slack')).toBeInTheDocument();
     expect(rendered.getByText('Google')).toBeInTheDocument();
   });

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,10 @@ const CardTitle = (props: { title?: string }) =>
   ) : null;
 
 /** @public */
-export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
+export const UserProfileCard = (props: {
+  variant?: InfoCardVariants;
+  showLinks?: boolean;
+}) => {
   const { entity: user } = useEntity<UserEntity>();
   if (!user) {
     return <Alert severity="error">User not found</Alert>;
@@ -130,7 +134,7 @@ export const UserProfileCard = (props: { variant?: InfoCardVariants }) => {
               </ListItemText>
             </ListItem>
 
-            <LinksGroup links={links} />
+            {props?.showLinks && <LinksGroup links={links} />}
           </List>
         </Grid>
       </Grid>