Merge branch 'backstage:master' into cloudbuild_retry_post

.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/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.test.tsx

@@ -28,7 +28,6 @@ import {
   TestApiProvider,
 } from '@backstage/test-utils';
 import { setupServer } from 'msw/node';
-import { DateTime } from 'luxon';
 import { siteMock } from '../../mocks/mocks';
 import { AzureSitesOverviewTable } from './AzureSitesOverviewTable';
 import { azureSiteApiRef } from '../../api';
@@ -72,15 +71,19 @@ describe('AzureSitesOverviewWidget', () => {
       </TestApiProvider>,
     );
 
-    expect(await rendered.findByText(siteMock.name)).toBeInTheDocument();
-    expect(await rendered.findByText(siteMock.location)).toBeInTheDocument();
-    expect(await rendered.findByText(siteMock.state)).toBeInTheDocument();
-    expect(
-      await rendered.findByText(
-        DateTime.fromISO(siteMock.lastModifiedDate).toLocaleString(
-          DateTime.DATETIME_MED,
-        ),
-      ),
-    ).toBeInTheDocument();
+    await expect(
+      rendered.findByText(siteMock.name),
+    ).resolves.toBeInTheDocument();
+    expect(rendered.getByText(siteMock.location)).toBeInTheDocument();
+    expect(rendered.getByText(siteMock.state)).toBeInTheDocument();
+    // TODO(Rugvip): This check is disabled, because in Node.js 18.13 an unexpected
+    //               invisible whitespace character is present in the formatted time.
+    // expect(
+    //   rendered.getByText(
+    //     DateTime.fromISO(siteMock.lastModifiedDate).toLocaleString(
+    //       DateTime.DATETIME_MED,
+    //     ),
+    //   ),
+    // ).toBeInTheDocument();
   });
 });

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

@@ -8451,6 +8451,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:^"