Bazaar: Link to the member user catalog entity

If the optional user entity ref is available the link for a member will
point to the backstage catalog page for the user. Otherwise it will
default to the current "https://github.com/${displayName}".

Signed-off-by: Niklas Aronsson <niklasar@axis.com>

.changeset/large-jars-fry.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Link to the user catalog entity of a member

.changeset/tough-seahorses-learn.md

@@ -2,7 +2,7 @@
 '@backstage/plugin-bazaar-backend': minor
 ---
 
-**BREAKING** The bazaar-backend createRouter now requires that the `identityApi` is passed to the router.
+**BREAKING** The bazaar-backend `createRouter` now requires that the `identityApi` is passed to the router.
 
 These changes are **required** to `packages/backend/src/plugins/bazaar.ts`
 

plugins/bazaar-backend/api-report.md

@@ -5,6 +5,7 @@
 ```ts
 import { Config } from '@backstage/config';
 import express from 'express';
+import { IdentityApi } from '@backstage/plugin-auth-node';
 import { Logger } from 'winston';
 import { PluginDatabaseManager } from '@backstage/backend-common';
 
@@ -18,6 +19,8 @@ export interface RouterOptions {
   // (undocumented)
   database: PluginDatabaseManager;
   // (undocumented)
+  identity: IdentityApi;
+  // (undocumented)
   logger: Logger;
 }
 

plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx

@@ -23,8 +23,11 @@ import {
   Typography,
   GridSize,
 } from '@material-ui/core';
+import { parseEntityRef } from '@backstage/catalog-model';
 import { Avatar, Link } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
 import { AboutField } from '@backstage/plugin-catalog';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { StatusTag } from '../StatusTag';
 import { Member, BazaarProject } from '../../types';
 
@@ -49,6 +52,7 @@ export const CardContentFields = ({
   membersSize,
 }: Props) => {
   const classes = useStyles();
+  const catalogEntityRoute = useRouteRef(entityRouteRef);
 
   return (
     <div>
@@ -111,8 +115,14 @@ export const CardContentFields = ({
                         />
                         <Link
                           className={classes.break}
-                          to={`http://github.com/${member.userId}`}
                           target="_blank"
+                          to={
+                            member.userRef
+                              ? `${catalogEntityRoute(
+                                  parseEntityRef(member.userRef),
+                                )}`
+                              : `http://github.com/${member.userId}`
+                          }
                         >
                           {member?.userId}
                         </Link>

plugins/bazaar/src/types.ts

@@ -19,6 +19,7 @@ export type Member = {
   userId: string;
   joinDate?: string;
   picture?: string;
+  userRef?: string;
 };
 
 export type Status = 'ongoing' | 'proposed';

plugins/bazaar/src/util/parseMethods.ts

@@ -37,6 +37,7 @@ export const parseMember = (member: any): Member => {
   return {
     itemId: member.item_id,
     userId: member.user_id,
+    userRef: member.user_ref,
     joinDate: member.join_date,
     picture: member.picture,
   } as Member;

yarn.lock

@@ -4349,6 +4349,7 @@ __metadata:
     "@backstage/backend-test-utils": "workspace:^"
     "@backstage/cli": "workspace:^"
     "@backstage/config": "workspace:^"
+    "@backstage/plugin-auth-node": "workspace:^"
     "@types/express": ^4.17.6
     express: ^4.17.1
     express-promise-router: ^4.1.0