add Bazaar to marketplace and minor UI and API improvements

Signed-off-by: Lykke Axlin <lykkeaxlin@hotmail.com>
2022-01-11 13:29:09 +01:00
parent 675578a4b3
commit 602f2c543c
11 changed files with 108 additions and 45 deletions
@@ -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();

@@ -86,9 +86,12 @@ export class BazaarClient implements BazaarApi {
  async getProjectById(id: number): Promise<any> {
    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<any> {
    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<void> {
    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<void> {
    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<any> {
@@ -148,7 +164,7 @@ export class BazaarClient implements BazaarApi {
  async deleteProject(id: number): Promise<void> {
    const baseUrl = await this.discoveryApi.getBaseUrl('bazaar');

-    await fetch(`${baseUrl}/projects/${id}`, {
+    await fetch(`${baseUrl}/projects/${encodeURIComponent(id)}`, {
      method: 'DELETE',
    });
  }
@@ -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{' '}
            <Link
              target="_blank"
-              href="https://en.wikipedia.org/wiki/Inner_source"
+              to="https://en.wikipedia.org/wiki/Inner_source"
            >
              Inner Sourcing
            </Link>
@@ -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 = ({
                        />
                        <Link
                          className={classes.break}
-                          href={`http://github.com/${member.userId}`}
+                          to={`http://github.com/${member.userId}`}
                          target="_blank"
                        >
                          {member?.userId}
@@ -101,7 +101,7 @@ export const EditProjectDialog = ({
        handleClose={handleDeleteClose}
        message={[
          'Are you sure you want to delete ',
-          <b>{bazaarProject.name}</b>,
+          <b key={bazaarProject.name}>{bazaarProject.name}</b>,
          ' from the Bazaar?',
        ]}
        type="delete"
@@ -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<BazaarProject | null>;
@@ -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 = ({
        )}

        <CardHeader
-          title={bazaarProject?.name!}
+          title={<p className={classes.title}>{bazaarProject?.name!}</p>}
          action={
            <div>
              <IconButton
@@ -15,7 +15,13 @@
 */

 import React, { useState, useEffect } from 'react';
-import { Card, CardHeader, Divider, IconButton } from '@material-ui/core';
+import {
+  Card,
+  CardHeader,
+  Divider,
+  IconButton,
+  makeStyles,
+} from '@material-ui/core';
 import {
  HeaderIconLinkRow,
  IconLinkVerticalProps,
@@ -59,6 +65,14 @@ import {
 } from '../../util/fetchMethods';
 import { parseBazaarResponse } from '../../util/parseMethods';

+const useStyles = makeStyles({
+  title: {
+    wordBreak: 'break-all',
+    whiteSpace: 'normal',
+    margin: '-0.25rem 0',
+  },
+});
+
 type Props = {
  initProject: BazaarProject;
  handleClose: () => 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 = ({
        />

        <CardHeader
-          title={bazaarProject.value?.name || initProject.name}
+          title={
+            <p className={classes.title}>
+              {bazaarProject.value?.name || initProject.name}
+            </p>
+          }
          action={
            <div>
              <IconButton onClick={() => setOpenEdit(true)}>
@@ -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 = ({
      <Card key={id}>
        <CardActionArea onClick={() => setOpenCard(true)}>
          <ItemCardHeader
-            title={name}
+            classes={{ root: classes.header }}
+            title={
+              <Typography noWrap variant="h6" component="h4">
+                {name}
+              </Typography>
+            }
            subtitle={`updated ${DateTime.fromISO(
              new Date(updatedAt!).toISOString(),
            ).toRelative({
@@ -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',
  },