clickable links in UserSettingsIdentityCard

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/large-tools-collect.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Minor update to the `UserSettingsIdentityCard` to have clickable entity refs

plugins/user-settings/package.json

@@ -36,6 +36,7 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/errors": "workspace:^",
+    "@backstage/plugin-catalog-react": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@backstage/types": "workspace:^",
     "@material-ui/core": "^4.12.2",

plugins/user-settings/src/components/General/UserSettingsIdentityCard.test.tsx

@@ -24,6 +24,7 @@ import React from 'react';
 import { UserSettingsIdentityCard } from './UserSettingsIdentityCard';
 import { ApiProvider } from '@backstage/core-app-api';
 import { identityApiRef } from '@backstage/core-plugin-api';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 
 const apiRegistry = TestApiRegistry.from([
   identityApiRef,
@@ -32,7 +33,7 @@ const apiRegistry = TestApiRegistry.from([
     getBackstageIdentity: jest.fn(async () => ({
       type: 'user' as const,
       userEntityRef: 'foo:bar/foobar',
-      ownershipEntityRefs: ['test-ownership'],
+      ownershipEntityRefs: ['user:default/test-ownership'],
     })),
   },
 ]);
@@ -44,10 +45,13 @@ describe('<UserSettingsIdentityCard />', () => {
         <ApiProvider apis={apiRegistry}>
           <UserSettingsIdentityCard />
         </ApiProvider>,
+        {
+          mountedRoutes: { '/catalog/:namespace/:kind/:name': entityRouteRef },
+        },
       ),
     );
 
-    expect(screen.getByText('test-ownership')).toBeInTheDocument();
+    expect(screen.getByText('user:default/test-ownership')).toBeInTheDocument();
     expect(screen.getByText('foo:bar/foobar')).toBeInTheDocument();
   });
 });

plugins/user-settings/src/components/General/UserSettingsIdentityCard.tsx

@@ -15,40 +15,46 @@
  */
 
 import { InfoCard } from '@backstage/core-components';
-import React from 'react';
-import { useUserProfile } from '../useUserProfileInfo';
-import Chip from '@material-ui/core/Chip';
+import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
+import React from 'react';
+import { useUserProfile } from '../useUserProfileInfo';
 
-/** @public */
-export const UserSettingsIdentityCard = () => {
+const Contents = () => {
   const { backstageIdentity } = useUserProfile();
 
+  if (!backstageIdentity) {
+    return <Typography>No Backstage Identity</Typography>;
+  }
+
   return (
-    <InfoCard title="Backstage Identity">
-      <Grid container spacing={6}>
-        <Grid item xs={12} sm container>
-          <Grid item xs container direction="column" spacing={2}>
-            <Grid item xs>
-              <Typography variant="subtitle1" gutterBottom>
-                User Entity:{' '}
-                <Chip
-                  label={backstageIdentity?.userEntityRef}
-                  variant="outlined"
-                  size="small"
-                />
-              </Typography>
-              <Typography variant="subtitle1">
-                Ownership Entities:{' '}
-                {backstageIdentity?.ownershipEntityRefs.map(it => (
-                  <Chip label={it} variant="outlined" size="small" />
-                ))}
-              </Typography>
-            </Grid>
-          </Grid>
-        </Grid>
+    <Grid container spacing={1}>
+      <Grid item xs={12}>
+        <Typography variant="subtitle1" gutterBottom>
+          User Entity:{' '}
+          <EntityRefLinks
+            entityRefs={[backstageIdentity.userEntityRef]}
+            getTitle={ref => ref}
+          />
+        </Typography>
       </Grid>
-    </InfoCard>
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">
+          Ownership Entities:{' '}
+          <EntityRefLinks
+            entityRefs={backstageIdentity.ownershipEntityRefs}
+            getTitle={ref => ref}
+          />
+        </Typography>
+      </Grid>
+    </Grid>
   );
 };
+
+/** @public */
+export const UserSettingsIdentityCard = () => (
+  <InfoCard title="Backstage Identity">
+    <Contents />
+  </InfoCard>
+);

yarn.lock

@@ -8424,6 +8424,7 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/errors": "workspace:^"
+    "@backstage/plugin-catalog-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/theme": "workspace:^"
     "@backstage/types": "workspace:^"