diff --git a/plugins/bazaar/src/api.ts b/plugins/bazaar/src/api.ts index 29a635070d..b1d954fc7a 100644 --- a/plugins/bazaar/src/api.ts +++ b/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({ id: 'bazaar', description: 'Used to make requests towards the bazaar backend', @@ -41,7 +41,7 @@ export interface BazaarApi { getMemberCounts( bazaarProjects: BazaarProject[], baseUrl: string, - ): Promise>; + ): Promise>; getMembers(baseUrl: string, entity: Entity): Promise; @@ -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> { - const members = new Map(); + ): Promise> { + const members = new Map(); 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), }, }); } diff --git a/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx b/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx index 61f8025862..a90a56b9c7 100644 --- a/plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx +++ b/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, diff --git a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx b/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx index 2a5940a5fc..9caeb6ce0a 100644 --- a/plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx +++ b/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(), }; diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx index d7501c1501..b23f3d5d6f 100644 --- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx +++ b/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 ( - + { width: '100%', }} component={RouterLink} - to={`${catalogLink()}/${entityRef}`} + to={`${catalogLink()}/${namespace}/${kind}/${name}`} > number; - bazaarMembers: Map; + bazaarMembers: Map; }; const useStyles = makeStyles({ @@ -82,7 +83,12 @@ export const ProjectPreview = ({ const entityRef = bazaarProject.entityRef; return ( - + { const [openAdd, setOpenAdd] = useState(false); const [openNoProjects, setOpenNoProjects] = useState(false); const [catalogEntities, setCatalogEntities] = useState([]); - const [bazaarMembers, setBazaarMembers] = useState>( + const [bazaarMembers, setBazaarMembers] = useState>( new Map(), ); const [bazaarProjects, setBazaarProjects] = useState([]); diff --git a/plugins/bazaar/src/types.ts b/plugins/bazaar/src/types.ts index 9764a2f156..f9d53cc866 100644 --- a/plugins/bazaar/src/types.ts +++ b/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;