diff --git a/.changeset/calm-snails-trade.md b/.changeset/calm-snails-trade.md
new file mode 100644
index 0000000000..0738b5aa37
--- /dev/null
+++ b/.changeset/calm-snails-trade.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Fixed `validateDOMNesting` warnings
diff --git a/plugins/bazaar/dev/__fixtures__/get-projects-response.json b/plugins/bazaar/dev/__fixtures__/get-projects-response.json
new file mode 100644
index 0000000000..7aee019a6e
--- /dev/null
+++ b/plugins/bazaar/dev/__fixtures__/get-projects-response.json
@@ -0,0 +1,35 @@
+{
+ "status": "ok",
+ "data": [
+ {
+ "id": 10,
+ "entity_ref": null,
+ "title": "Lorem ipsum 1",
+ "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+ "status": "proposed",
+ "updated_at": "2023-03-10T12:41:41.941Z",
+ "community": "",
+ "size": "medium",
+ "start_date": null,
+ "end_date": null,
+ "responsible": "Responsible Adult 1",
+ "docs": null,
+ "members_count": "3"
+ },
+ {
+ "id": 11,
+ "entity_ref": null,
+ "title": "Lorem ipsum 2",
+ "description": "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud",
+ "status": "proposed",
+ "updated_at": "2023-03-09T12:41:41.941Z",
+ "community": "",
+ "size": "medium",
+ "start_date": null,
+ "end_date": null,
+ "responsible": "Responsible Adult 2",
+ "docs": null,
+ "members_count": "5"
+ }
+ ]
+}
diff --git a/plugins/bazaar/dev/index.tsx b/plugins/bazaar/dev/index.tsx
index a4509bc1fc..f2c40df8e1 100644
--- a/plugins/bazaar/dev/index.tsx
+++ b/plugins/bazaar/dev/index.tsx
@@ -16,10 +16,30 @@
import React from 'react';
import { createDevApp } from '@backstage/dev-utils';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { bazaarPlugin, BazaarPage } from '../src/plugin';
+import { bazaarApiRef } from '../src/api';
+
+import getProjectsData from './__fixtures__/get-projects-response.json';
createDevApp()
.registerPlugin(bazaarPlugin)
+ .registerApi({
+ api: bazaarApiRef,
+ deps: {},
+ factory: () =>
+ ({
+ getProjects: async () => getProjectsData,
+ } as any),
+ })
+ .registerApi({
+ api: catalogApiRef,
+ deps: {},
+ factory: () =>
+ ({
+ getEntities: () => ({}),
+ } as CatalogApi),
+ })
.addPage({
element: ,
title: 'Root Page',
diff --git a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx
index 97b247e289..61d1dfebb9 100644
--- a/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx
+++ b/plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx
@@ -94,11 +94,7 @@ export const ProjectCard = ({
setOpenCard(true)}>
- {title}
-
- }
+ title={title}
subtitle={`updated ${DateTime.fromISO(
new Date(updatedAt!).toISOString(),
).toRelative({
diff --git a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx
index 8f7160600a..39319b6353 100644
--- a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx
+++ b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx
@@ -15,9 +15,14 @@
*/
import React, { ChangeEvent, useState } from 'react';
-import { Content } from '@backstage/core-components';
import { ProjectCard } from '../ProjectCard/ProjectCard';
-import { makeStyles, Grid, TablePagination, GridSize } from '@material-ui/core';
+import {
+ Box,
+ makeStyles,
+ Grid,
+ TablePagination,
+ GridSize,
+} from '@material-ui/core';
import { BazaarProject } from '../../types';
import { Entity } from '@backstage/catalog-model';
@@ -80,7 +85,7 @@ export const ProjectPreview = ({
}
return (
-
+
{bazaarProjects
.slice((page - 1) * rows, rows * page)
@@ -101,6 +106,7 @@ export const ProjectPreview = ({
{useTablePagination && (
)}
-
+
);
};