From af266b55becc2009a6964193357331fc734ea38a Mon Sep 17 00:00:00 2001 From: Niklas Aronsson Date: Wed, 19 Apr 2023 13:02:29 +0200 Subject: [PATCH 1/4] Bazaar: Fix stand alone devApp The Bazaar stand alone devApp can now be started and will list two projects with dummy data. Signed-off-by: Niklas Aronsson --- .../__fixtures__/get-projects-response.json | 35 +++++++++++++++++++ plugins/bazaar/dev/index.tsx | 20 +++++++++++ 2 files changed, 55 insertions(+) create mode 100644 plugins/bazaar/dev/__fixtures__/get-projects-response.json 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', From bdb5c1ede1f27e203303b1d526a88a9da7f04535 Mon Sep 17 00:00:00 2001 From: Niklas Aronsson Date: Wed, 19 Apr 2023 13:07:51 +0200 Subject: [PATCH 2/4] Bazaar: Remove h4 from ItemCardHeader title props Since the title will be wrapped by a h4 in the "ItemCardHeader" a h4 will have a h4 element as child. And the following warning is logged: warning: validateDOMNesting(...):

cannot appear as a child of

. Signed-off-by: Niklas Aronsson --- plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) 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({ From 1886befacffc8bff8e31e6a136cca0f4ab19db30 Mon Sep 17 00:00:00 2001 From: Niklas Aronsson Date: Fri, 21 Apr 2023 13:51:11 +0200 Subject: [PATCH 3/4] Bazaar: Set TablePagination as a div The default component is a "td" which will cause DOM validation warnings. Signed-off-by: Niklas Aronsson --- .../components/ProjectPreview/ProjectPreview.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) 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 && ( )} - + ); }; From 900880ab7c35bd100cc67462fe32abcb7e9d400a Mon Sep 17 00:00:00 2001 From: Niklas Aronsson Date: Thu, 4 May 2023 15:20:51 +0200 Subject: [PATCH 4/4] Added changeset Signed-off-by: Niklas Aronsson --- .changeset/calm-snails-trade.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/calm-snails-trade.md 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