use entityRef from catalog-model

Signed-off-by: Klara <klarabroman@live.se>

Co-authored-by: lykkeaxlin <lykkeaxlin@hotmail.com>

plugins/bazaar/src/api.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { Entity } from '@backstage/catalog-model';
+import {
+  Entity,
+  EntityRef,
+  stringifyEntityRef,
+} from '@backstage/catalog-model';
 import { createApiRef, IdentityApi } from '@backstage/core-plugin-api';
 import { BazaarProject, Status } from './types';
 
-export const getEntityRef = (entity: Entity) => {
-  return `${entity.metadata.namespace}/${entity.kind}/${entity.metadata.name}`;
-};
-
 export const bazaarApiRef = createApiRef<BazaarApi>({
   id: 'bazaar',
   description: 'Used to make requests towards the bazaar backend',
@@ -41,7 +41,7 @@ export interface BazaarApi {
   getMemberCounts(
     bazaarProjects: BazaarProject[],
     baseUrl: string,
-  ): Promise<Map<string, number>>;
+  ): Promise<Map<EntityRef, number>>;
 
   getMembers(baseUrl: string, entity: Entity): Promise<any>;
 
@@ -73,7 +73,7 @@ export class BazaarClient implements BazaarApi {
     return await fetch(`${baseUrl}/api/bazaar/metadata`, {
       method: 'PUT',
       headers: {
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
@@ -89,7 +89,7 @@ export class BazaarClient implements BazaarApi {
     return await fetch(`${baseUrl}/api/bazaar/metadata`, {
       method: 'GET',
       headers: {
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     });
   }
@@ -97,13 +97,13 @@ export class BazaarClient implements BazaarApi {
   async getMemberCounts(
     bazaarProjects: BazaarProject[],
     baseUrl: string,
-  ): Promise<Map<string, number>> {
-    const members = new Map<string, number>();
+  ): Promise<Map<EntityRef, number>> {
+    const members = new Map<EntityRef, number>();
     for (const project of bazaarProjects) {
       const response = await fetch(`${baseUrl}/api/bazaar/members`, {
         method: 'GET',
         headers: {
-          entity_ref: project.entityRef,
+          entity_ref: project.entityRef as string,
         },
       });
 
@@ -118,7 +118,7 @@ export class BazaarClient implements BazaarApi {
     return await fetch(`${baseUrl}/api/bazaar/members`, {
       method: 'GET',
       headers: {
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     }).then(resp => resp.json());
   }
@@ -128,7 +128,7 @@ export class BazaarClient implements BazaarApi {
       method: 'PUT',
       headers: {
         user_id: this.identityApi.getUserId(),
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     });
   }
@@ -138,7 +138,7 @@ export class BazaarClient implements BazaarApi {
       method: 'DELETE',
       headers: {
         user_id: this.identityApi.getUserId(),
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     });
   }
@@ -147,7 +147,7 @@ export class BazaarClient implements BazaarApi {
     await fetch(`${baseUrl}/api/bazaar/members`, {
       method: 'DELETE',
       headers: {
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     });
   }
@@ -162,7 +162,7 @@ export class BazaarClient implements BazaarApi {
     await fetch(`${baseUrl}/api/bazaar/metadata`, {
       method: 'DELETE',
       headers: {
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     });
 
@@ -170,7 +170,7 @@ export class BazaarClient implements BazaarApi {
       method: 'DELETE',
       headers: {
         user_id: this.identityApi.getUserId(),
-        entity_ref: getEntityRef(entity),
+        entity_ref: stringifyEntityRef(entity),
       },
     });
   }

plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
-import { Entity } from '@backstage/catalog-model';
+import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import { SubmitHandler } from 'react-hook-form';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { ProjectDialog } from '../ProjectDialog';
@@ -67,9 +67,7 @@ export const AddProjectDialog = ({
     const formValues = getValues();
 
     const bazaarProject: BazaarProject = {
-      entityRef: `${selectedEntity!.metadata.namespace}/${
-        selectedEntity!.kind
-      }/${selectedEntity!.metadata.name}`,
+      entityRef: stringifyEntityRef(selectedEntity!),
       name: selectedEntity!.metadata.name,
       announcement: formValues.announcement,
       status: formValues.status,

plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx

@@ -54,7 +54,8 @@ import {
 } from '@backstage/core-plugin-api';
 import { useAsync } from 'react-use';
 import { Member, BazaarProject } from '../../types';
-import { bazaarApiRef, getEntityRef } from '../../api';
+import { bazaarApiRef } from '../../api';
+import { stringifyEntityRef } from '@backstage/catalog-model';
 
 const useStyles = makeStyles({
   description: {
@@ -170,7 +171,7 @@ export const EntityBazaarInfoCard = () => {
 
     const newMember: Member = {
       userId: identity.getUserId(),
-      entityRef: getEntityRef(entity),
+      entityRef: stringifyEntityRef(entity),
       joinDate: new Date().toISOString(),
     };
 

plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx

@@ -29,6 +29,7 @@ import moment from 'moment';
 import { catalogRouteRef } from '@backstage/plugin-catalog-react';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { BazaarProject } from '../../types';
+import { parseEntityName } from '@backstage/catalog-model';
 
 const useStyles = makeStyles({
   statusTag: {
@@ -57,9 +58,10 @@ export const ProjectCard = ({ bazaarProject, memberCount }: Props) => {
   const classes = useStyles();
   const { entityRef, name, status, updatedAt, announcement } = bazaarProject;
   const catalogLink = useRouteRef(catalogRouteRef);
+  const { namespace, kind } = parseEntityName(entityRef);
 
   return (
-    <Card key={entityRef}>
+    <Card key={entityRef as string}>
       <CardActionArea
         style={{
           height: '100%',
@@ -67,7 +69,7 @@ export const ProjectCard = ({ bazaarProject, memberCount }: Props) => {
           width: '100%',
         }}
         component={RouterLink}
-        to={`${catalogLink()}/${entityRef}`}
+        to={`${catalogLink()}/${namespace}/${kind}/${name}`}
       >
         <ItemCardHeader
           title={name}

plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx

@@ -20,11 +20,12 @@ import { ProjectCard } from '../ProjectCard/ProjectCard';
 import { makeStyles, Grid } from '@material-ui/core';
 import Pagination from '@material-ui/lab/Pagination';
 import { BazaarProject } from '../../types';
+import { EntityRef } from '@backstage/catalog-model';
 
 type Props = {
   bazaarProjects: BazaarProject[];
   sortingMethod: (arg0: BazaarProject, arg1: BazaarProject) => number;
-  bazaarMembers: Map<string, number>;
+  bazaarMembers: Map<EntityRef, number>;
 };
 
 const useStyles = makeStyles({
@@ -82,7 +83,12 @@ export const ProjectPreview = ({
             const entityRef = bazaarProject.entityRef;
 
             return (
-              <Grid key={entityRef || ''} className={classes.item} item xs={3}>
+              <Grid
+                key={(entityRef as string) || ''}
+                className={classes.item}
+                item
+                xs={3}
+              >
                 <ProjectCard
                   bazaarProject={bazaarProject}
                   key={Math.random()}

plugins/bazaar/src/components/SortView/SortView.tsx

@@ -26,7 +26,7 @@ import { AlertBanner } from '../AlertBanner';
 import { ProjectPreview } from '../ProjectPreview/ProjectPreview';
 import { Button, makeStyles, Link } from '@material-ui/core';
 import { useAsync } from 'react-use';
-import { Entity } from '@backstage/catalog-model';
+import { Entity, EntityRef } from '@backstage/catalog-model';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
@@ -46,7 +46,7 @@ export const SortView = () => {
   const [openAdd, setOpenAdd] = useState(false);
   const [openNoProjects, setOpenNoProjects] = useState(false);
   const [catalogEntities, setCatalogEntities] = useState<Entity[]>([]);
-  const [bazaarMembers, setBazaarMembers] = useState<Map<string, number>>(
+  const [bazaarMembers, setBazaarMembers] = useState<Map<EntityRef, number>>(
     new Map(),
   );
   const [bazaarProjects, setBazaarProjects] = useState<BazaarProject[]>([]);

plugins/bazaar/src/types.ts

@@ -13,8 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { EntityRef } from '@backstage/catalog-model';
+
 export type Member = {
-  entityRef: string;
+  entityRef: EntityRef;
   userId: string;
   joinDate: string;
 };
@@ -23,7 +26,7 @@ export type Status = 'ongoing' | 'proposed';
 
 export type BazaarProject = {
   name: string;
-  entityRef: string;
+  entityRef: EntityRef;
   status: Status;
   announcement: string;
   updatedAt: string;