Changed style of BazaarOverviewCard

Change-Id: I3e4e62c35015a7f0c39c521e985652a44e4b9047
Signed-off-by: Frida Jacobsson <fridaja@axis.com>

.changeset/sixty-singers-push.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': minor
+---
+
+The limit prop of BazaarOverviewCard has been removed entirely, and instead replaced with a new optional boolean prop `fullWidth`. The BazaarOverviewCard now always use full height without fixed width. Also fixed problem with link to Bazaar.

plugins/bazaar/README.md

@@ -76,17 +76,17 @@ export const homePage = (
        <Grid container spacing={3}>
 
 +       <Grid item xs={12} md={6}>
-+         <BazaarOverviewCard variant={'latest'} limit={4} />
++         <BazaarOverviewCard order='latest'/>
 +       </Grid>
 
-+       <Grid item xs={12} md={6}>
-+         <BazaarOverviewCard variant={'random'} limit={4} />
++       <Grid item xs={12} >
++         <BazaarOverviewCard order='random' fullWidth />
 +       </Grid>
 
         {/* ...other homepage items */}
 ```
 
-Specify how many projects you want through the "limit" props. In the example above 4 cards is specified.
+The property `fullWidth` is optional and can be used to adjust the card to fit a grid with column width 12.
 
 ## How does the Bazaar work?
 

plugins/bazaar/api-report.md

@@ -16,7 +16,7 @@ export const BazaarOverviewCard: (
 // @public (undocumented)
 export type BazaarOverviewCardProps = {
   order: 'latest' | 'random';
-  limit: number;
+  fullWidth?: boolean;
 };
 
 // @public (undocumented)

plugins/bazaar/src/components/BazaarOverviewCard/BazaarOverviewCard.tsx

@@ -30,7 +30,7 @@ import { bazaarPlugin } from '../../plugin';
 /** @public */
 export type BazaarOverviewCardProps = {
   order: 'latest' | 'random';
-  limit: number;
+  fullWidth?: boolean;
 };
 
 const getUnlinkedCatalogEntities = (
@@ -48,14 +48,14 @@ const getUnlinkedCatalogEntities = (
 
 /** @public */
 export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => {
-  const { order, limit } = props;
+  const { order, fullWidth = false } = props;
   const bazaarApi = useApi(bazaarApiRef);
   const catalogApi = useApi(catalogApiRef);
   const root = useRouteRef(bazaarPlugin.routes.root);
 
   const bazaarLink = {
     title: 'Go to Bazaar',
-    link: root.toString(),
+    link: `${root()}`,
   };
 
   const [unlinkedCatalogEntities, setUnlinkedCatalogEntities] =
@@ -66,6 +66,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => {
   });
 
   const [bazaarProjects, fetchBazaarProjects] = useAsyncFn(async () => {
+    const limit = fullWidth ? 6 : 3;
     const response = await bazaarApi.getProjects(limit, order);
     return response.data.map(parseBazaarProject) as BazaarProject[];
   });
@@ -133,8 +134,7 @@ export const BazaarOverviewCard = (props: BazaarOverviewCardProps) => {
         fetchBazaarProjects={fetchBazaarProjects}
         catalogEntities={unlinkedCatalogEntities || []}
         useTablePagination={false}
-        fullHeight={false}
-        fixedWidth
+        gridSize={fullWidth ? 2 : 4}
       />
     </InfoCard>
   );

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

@@ -54,7 +54,7 @@ const useStyles = makeStyles({
     float: 'right',
   },
   content: {
-    overflow: 'scroll',
+    height: '13rem',
   },
   header: {
     whiteSpace: 'nowrap',
@@ -67,7 +67,6 @@ export const ProjectCard = ({
   project,
   fetchBazaarProjects,
   catalogEntities,
-  fullHeight,
 }: Props) => {
   const classes = useStyles();
   const [openCard, setOpenCard] = useState(false);
@@ -103,10 +102,7 @@ export const ProjectCard = ({
               base: DateTime.now(),
             })}`}
           />
-          <CardContent
-            className={classes.content}
-            style={{ height: fullHeight ? '13rem' : '7rem' }}
-          >
+          <CardContent className={classes.content}>
             <StatusTag styles={classes.statusTag} status={status} />
             <Typography variant="body2" className={classes.memberCount}>
               {Number(membersCount) === Number(1)

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

@@ -17,7 +17,7 @@
 import React, { ChangeEvent, useState } from 'react';
 import { Content } from '@backstage/core-components';
 import { ProjectCard } from '../ProjectCard/ProjectCard';
-import { makeStyles, Grid, TablePagination } from '@material-ui/core';
+import { makeStyles, Grid, TablePagination, GridSize } from '@material-ui/core';
 import { BazaarProject } from '../../types';
 import { Entity } from '@backstage/catalog-model';
 
@@ -26,8 +26,7 @@ type Props = {
   fetchBazaarProjects: () => Promise<BazaarProject[]>;
   catalogEntities: Entity[];
   useTablePagination?: boolean;
-  fullHeight?: boolean;
-  fixedWidth?: boolean;
+  gridSize?: GridSize;
 };
 
 const useStyles = makeStyles({
@@ -55,8 +54,7 @@ export const ProjectPreview = ({
   fetchBazaarProjects,
   catalogEntities,
   useTablePagination = true,
-  fullHeight = true,
-  fixedWidth = false,
+  gridSize = 2,
 }: Props) => {
   const classes = useStyles();
   const [page, setPage] = useState(1);
@@ -86,18 +84,12 @@ export const ProjectPreview = ({
           .slice((page - 1) * rows, rows * page)
           .map((bazaarProject: BazaarProject, i: number) => {
             return (
-              <Grid
-                key={i}
-                item
-                xs={fixedWidth ? false : 2}
-                style={{ width: '16rem' }}
-              >
+              <Grid key={i} item xs={gridSize}>
                 <ProjectCard
                   project={bazaarProject}
                   key={i}
                   fetchBazaarProjects={fetchBazaarProjects}
                   catalogEntities={catalogEntities}
-                  fullHeight={fullHeight}
                 />
               </Grid>
             );