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>

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;