Merge pull request #11974 from RoadieHQ/add-user-settings-identity-card

add UserSettingsIdentityCard

.changeset/early-hats-rest.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Added new `<UserSettingsIdentityCard />` to show the result of the `identityApi.getBackstageIdentity()` call to help debug ownership issues. The new card has been added to the user settings page.

plugins/user-settings/api-report.md

@@ -7,6 +7,7 @@
 
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { BackstageUserIdentity } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { ProfileInfo } from '@backstage/core-plugin-api';
 import { PropsWithChildren } from 'react';
@@ -70,6 +71,11 @@ export const UserSettingsFeatureFlags: () => JSX.Element;
 // @public (undocumented)
 export const UserSettingsGeneral: () => JSX.Element;
 
+// Warning: (ae-missing-release-tag) "UserSettingsIdentityCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const UserSettingsIdentityCard: () => JSX.Element;
+
 // Warning: (ae-missing-release-tag) "UserSettingsMenu" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -129,9 +135,17 @@ export const UserSettingsThemeToggle: () => JSX.Element;
 // Warning: (ae-missing-release-tag) "useUserProfile" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const useUserProfile: () => {
-  profile: ProfileInfo;
-  displayName: string;
-  loading: boolean;
-};
+export const useUserProfile: () =>
+  | {
+      profile: ProfileInfo;
+      displayName: string;
+      loading: boolean;
+      backstageIdentity?: undefined;
+    }
+  | {
+      profile: ProfileInfo;
+      backstageIdentity: BackstageUserIdentity;
+      displayName: string;
+      loading: false;
+    };
 ```

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

@@ -17,6 +17,7 @@ import { Grid } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
+import { UserSettingsIdentityCard } from './UserSettingsIdentityCard';
 
 export const UserSettingsGeneral = () => {
   return (
@@ -27,6 +28,9 @@ export const UserSettingsGeneral = () => {
       <Grid item xs={12} md={6}>
         <UserSettingsAppearanceCard />
       </Grid>
+      <Grid item xs={12} md={6}>
+        <UserSettingsIdentityCard />
+      </Grid>
     </Grid>
   );
 };

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  renderWithEffects,
+  wrapInTestApp,
+  TestApiRegistry,
+} from '@backstage/test-utils';
+import { screen } from '@testing-library/react';
+import React from 'react';
+import { UserSettingsIdentityCard } from './UserSettingsIdentityCard';
+import { ApiProvider } from '@backstage/core-app-api';
+import { identityApiRef } from '@backstage/core-plugin-api';
+
+const apiRegistry = TestApiRegistry.from([
+  identityApiRef,
+  {
+    getProfileInfo: jest.fn(async () => ({})),
+    getBackstageIdentity: jest.fn(async () => ({
+      type: 'user' as const,
+      userEntityRef: 'foo:bar/foobar',
+      ownershipEntityRefs: ['test-ownership'],
+    })),
+  },
+]);
+
+describe('<UserSettingsIdentityCard />', () => {
+  it('displays an identity card', async () => {
+    await renderWithEffects(
+      wrapInTestApp(
+        <ApiProvider apis={apiRegistry}>
+          <UserSettingsIdentityCard />
+        </ApiProvider>,
+      ),
+    );
+
+    expect(screen.getByText('test-ownership')).toBeInTheDocument();
+    expect(screen.getByText('foo:bar/foobar')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { InfoCard } from '@backstage/core-components';
+import React from 'react';
+import { useUserProfile } from '../useUserProfileInfo';
+import Chip from '@material-ui/core/Chip';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+export const UserSettingsIdentityCard = () => {
+  const { backstageIdentity } = useUserProfile();
+
+  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>
+    </InfoCard>
+  );
+};

plugins/user-settings/src/components/General/index.ts

@@ -21,3 +21,4 @@ export { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 export { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 export { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 export { UserSettingsPinToggle } from './UserSettingsPinToggle';
+export { UserSettingsIdentityCard } from './UserSettingsIdentityCard';

plugins/user-settings/src/components/useUserProfileInfo.ts

@@ -53,6 +53,7 @@ export const useUserProfile = () => {
 
   return {
     profile: value!.profile,
+    backstageIdentity: value!.identity,
     displayName: value!.profile.displayName ?? value!.identity.userEntityRef,
     loading,
   };