From 602f2c543ce27444b47bb33f231a84943df8a206 Mon Sep 17 00:00:00 2001 From: Lykke Axlin Date: Tue, 11 Jan 2022 13:29:09 +0100 Subject: [PATCH] add Bazaar to marketplace and minor UI and API improvements Signed-off-by: Lykke Axlin --- microsite/data/plugins/bazaar.yaml | 8 +++ microsite/static/img/bazaar.svg | 1 + plugins/bazaar-backend/src/service/router.ts | 18 +++--- plugins/bazaar/src/api.ts | 56 ++++++++++++------- plugins/bazaar/src/components/About/About.tsx | 6 +- .../CardContentFields/CardContentFields.tsx | 6 +- .../EditProjectDialog/EditProjectDialog.tsx | 2 +- .../EntityBazaarInfoContent.tsx | 13 ++++- .../HomePageBazaarInfoCard.tsx | 23 +++++++- .../components/ProjectCard/ProjectCard.tsx | 18 +++++- .../src/components/SortView/SortView.tsx | 2 +- 11 files changed, 108 insertions(+), 45 deletions(-) create mode 100644 microsite/data/plugins/bazaar.yaml create mode 100644 microsite/static/img/bazaar.svg diff --git a/microsite/data/plugins/bazaar.yaml b/microsite/data/plugins/bazaar.yaml new file mode 100644 index 0000000000..a30580114b --- /dev/null +++ b/microsite/data/plugins/bazaar.yaml @@ -0,0 +1,8 @@ +title: Bazaar +author: Axis Communications AB +authorUrl: https://www.axis.com +category: Discovery +description: A marketplace where engineers can propose projects suitable for inner sourcing +documentation: https://github.com/backstage/backstage/blob/master/plugins/bazaar/README.md +iconUrl: img/bazaar.svg +npmPackageName: '@backstage/plugin-bazaar' \ No newline at end of file diff --git a/microsite/static/img/bazaar.svg b/microsite/static/img/bazaar.svg new file mode 100644 index 0000000000..64ba2a9025 --- /dev/null +++ b/microsite/static/img/bazaar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins/bazaar-backend/src/service/router.ts b/plugins/bazaar-backend/src/service/router.ts index 730d958fcd..3915c8c609 100644 --- a/plugins/bazaar-backend/src/service/router.ts +++ b/plugins/bazaar-backend/src/service/router.ts @@ -69,21 +69,19 @@ export async function createRouter( } }); - router.get('/projects/id/:id', async (request, response) => { - const id = decodeURIComponent(request.params.id); + router.get('/projects/:idOrRef', async (request, response) => { + const idOrRef = decodeURIComponent(request.params.idOrRef); + let data; - const data = await dbHandler.getMetadataById(parseInt(id, 10)); + if (/^-?\d+$/.test(idOrRef)) { + data = await dbHandler.getMetadataById(parseInt(idOrRef, 10)); + } else { + data = await dbHandler.getMetadataByRef(idOrRef); + } response.json({ status: 'ok', data: data }); }); - router.get('/projects/ref/:ref', async (request, response) => { - const ref = decodeURIComponent(request.params.ref); - - const data = await dbHandler.getMetadataByRef(ref); - response.json({ status: 'ok', data: data }); - }); - router.get('/projects', async (_, response) => { const data = await dbHandler.getProjects(); diff --git a/plugins/bazaar/src/api.ts b/plugins/bazaar/src/api.ts index 2faa233077..882ff3aef8 100644 --- a/plugins/bazaar/src/api.ts +++ b/plugins/bazaar/src/api.ts @@ -86,9 +86,12 @@ export class BazaarClient implements BazaarApi { async getProjectById(id: number): Promise { const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); - const response = await fetch(`${baseUrl}/projects/id/${id}`, { - method: 'GET', - }); + const response = await fetch( + `${baseUrl}/projects/${encodeURIComponent(id)}`, + { + method: 'GET', + }, + ); return response.ok ? response : null; } @@ -97,7 +100,7 @@ export class BazaarClient implements BazaarApi { const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); const response = await fetch( - `${baseUrl}/projects/ref/${encodeURIComponent(entityRef)}`, + `${baseUrl}/projects/${encodeURIComponent(entityRef)}`, { method: 'GET', }, @@ -109,32 +112,45 @@ export class BazaarClient implements BazaarApi { async getMembers(id: number): Promise { const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); - return await fetch(`${baseUrl}/projects/${id}/members`, { - method: 'GET', - }).then(resp => resp.json()); + return await fetch( + `${baseUrl}/projects/${encodeURIComponent(id)}/members`, + { + method: 'GET', + }, + ).then(resp => resp.json()); } async addMember(id: number, userId: string): Promise { const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); - await fetch(`${baseUrl}/projects/${id}/member/${userId}`, { - method: 'PUT', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', + await fetch( + `${baseUrl}/projects/${encodeURIComponent( + id, + )}/member/${encodeURIComponent(userId)}`, + { + method: 'PUT', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + picture: (await this.identityApi.getProfileInfo()).picture, + }), }, - body: JSON.stringify({ - picture: this.identityApi.getProfile()?.picture, - }), - }); + ); } async deleteMember(id: number, userId: string): Promise { const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); - await fetch(`${baseUrl}/projects/${id}/member/${userId}`, { - method: 'DELETE', - }); + await fetch( + `${baseUrl}/projects/${encodeURIComponent( + id, + )}/member/${encodeURIComponent(userId)}`, + { + method: 'DELETE', + }, + ); } async getProjects(): Promise { @@ -148,7 +164,7 @@ export class BazaarClient implements BazaarApi { async deleteProject(id: number): Promise { const baseUrl = await this.discoveryApi.getBaseUrl('bazaar'); - await fetch(`${baseUrl}/projects/${id}`, { + await fetch(`${baseUrl}/projects/${encodeURIComponent(id)}`, { method: 'DELETE', }); } diff --git a/plugins/bazaar/src/components/About/About.tsx b/plugins/bazaar/src/components/About/About.tsx index d9c529a209..68525ab642 100644 --- a/plugins/bazaar/src/components/About/About.tsx +++ b/plugins/bazaar/src/components/About/About.tsx @@ -15,8 +15,8 @@ */ import React from 'react'; -import { Grid, Typography, Link, makeStyles } from '@material-ui/core'; -import { InfoCard } from '@backstage/core-components'; +import { Grid, Typography, makeStyles } from '@material-ui/core'; +import { InfoCard, Link } from '@backstage/core-components'; const useStyles = makeStyles({ subheader: { @@ -39,7 +39,7 @@ export const About = () => { internal projects suitable for{' '} Inner Sourcing diff --git a/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx b/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx index 5145dc54b8..6c6ce1bb3e 100644 --- a/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx +++ b/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx @@ -21,10 +21,9 @@ import { Card, CardContent, Typography, - Link, GridSize, } from '@material-ui/core'; -import { Avatar } from '@backstage/core-components'; +import { Avatar, Link } from '@backstage/core-components'; import { AboutField } from '@backstage/plugin-catalog'; import { StatusTag } from '../StatusTag'; import { Member, BazaarProject } from '../../types'; @@ -32,6 +31,7 @@ import { Member, BazaarProject } from '../../types'; const useStyles = makeStyles({ break: { wordBreak: 'break-word', + textAlign: 'justify', }, }); @@ -111,7 +111,7 @@ export const CardContentFields = ({ /> {member?.userId} diff --git a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx index 0b2a8ef391..303379b09b 100644 --- a/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx +++ b/plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx @@ -101,7 +101,7 @@ export const EditProjectDialog = ({ handleClose={handleDeleteClose} message={[ 'Are you sure you want to delete ', - {bazaarProject.name}, + {bazaarProject.name}, ' from the Bazaar?', ]} type="delete" diff --git a/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx b/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx index f2c005abd1..430a19ce0c 100644 --- a/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx +++ b/plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx @@ -15,7 +15,7 @@ */ import React, { useState, useEffect } from 'react'; -import { CardHeader, Divider, IconButton } from '@material-ui/core'; +import { CardHeader, Divider, IconButton, makeStyles } from '@material-ui/core'; import { HeaderIconLinkRow, IconLinkVerticalProps, @@ -37,6 +37,14 @@ import { ConfirmationDialog } from '../ConfirmationDialog'; import { CardContentFields } from '../CardContentFields'; import { fetchProjectMembers } from '../../util/fetchMethods'; +const useStyles = makeStyles({ + title: { + wordBreak: 'break-all', + whiteSpace: 'normal', + margin: '-0.25rem 0', + }, +}); + type Props = { bazaarProject: BazaarProject | null | undefined; fetchBazaarProject: () => Promise; @@ -46,6 +54,7 @@ export const EntityBazaarInfoContent = ({ bazaarProject, fetchBazaarProject, }: Props) => { + const classes = useStyles(); const bazaarApi = useApi(bazaarApiRef); const identity = useApi(identityApiRef); const [openEdit, setOpenEdit] = useState(false); @@ -171,7 +180,7 @@ export const EntityBazaarInfoContent = ({ )} {bazaarProject?.name!}

} action={
void; @@ -70,6 +84,7 @@ export const HomePageBazaarInfoCard = ({ handleClose, initEntity, }: Props) => { + const classes = useStyles(); const catalogLink = useRouteRef(catalogRouteRef); const bazaarApi = useApi(bazaarApiRef); const identity = useApi(identityApiRef); @@ -242,7 +257,11 @@ export const HomePageBazaarInfoCard = ({ /> + {bazaarProject.value?.name || initProject.name} +

+ } action={
setOpenEdit(true)}> diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx index a558d347a5..3aeba305a9 100644 --- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx +++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx @@ -41,12 +41,19 @@ const useStyles = makeStyles({ WebkitLineClamp: 7, WebkitBoxOrient: 'vertical', overflow: 'hidden', - backgroundColor: '', + textAlign: 'justify', }, memberCount: { float: 'right', }, - content: { height: '13rem', marginBottom: '-0.5rem' }, + content: { + height: '13rem', + }, + header: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, }); type Props = { @@ -82,7 +89,12 @@ export const ProjectCard = ({ setOpenCard(true)}> + {name} + + } subtitle={`updated ${DateTime.fromISO( new Date(updatedAt!).toISOString(), ).toRelative({ diff --git a/plugins/bazaar/src/components/SortView/SortView.tsx b/plugins/bazaar/src/components/SortView/SortView.tsx index e42c51784b..15908c1c07 100644 --- a/plugins/bazaar/src/components/SortView/SortView.tsx +++ b/plugins/bazaar/src/components/SortView/SortView.tsx @@ -33,7 +33,7 @@ import { fetchCatalogItems } from '../../util/fetchMethods'; import { parseBazaarProject } from '../../util/parseMethods'; const useStyles = makeStyles({ - button: { width: '12rem' }, + button: { minWidth: '11rem' }, container: { marginTop: '2rem', },