Merge pull request #17649 from anicke/dom-warnings

Bazaar: Fixed validateDOMNesting warnings

.changeset/calm-snails-trade.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Fixed `validateDOMNesting` warnings

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"
+    }
+  ]
+}

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: <BazaarPage />,
     title: 'Root Page',

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

@@ -94,11 +94,7 @@ export const ProjectCard = ({
         <CardActionArea onClick={() => setOpenCard(true)}>
           <ItemCardHeader
             classes={{ root: classes.header }}
-            title={
-              <Typography noWrap variant="h6" component="h4">
-                {title}
-              </Typography>
-            }
+            title={title}
             subtitle={`updated ${DateTime.fromISO(
               new Date(updatedAt!).toISOString(),
             ).toRelative({

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 (
-    <Content className={classes.content} noPadding>
+    <Box className={classes.content}>
       <Grid wrap="wrap" container spacing={3}>
         {bazaarProjects
           .slice((page - 1) * rows, rows * page)
@@ -101,6 +106,7 @@ export const ProjectPreview = ({
 
       {useTablePagination && (
         <TablePagination
+          component="div"
           className={classes.pagination}
           rowsPerPageOptions={[12, 24, 48, 96]}
           count={bazaarProjects?.length}
@@ -114,6 +120,6 @@ export const ProjectPreview = ({
           }}
         />
       )}
-    </Content>
+    </Box>
   );
 };