From 07dccc72e6ae26ecbae2c910826356498e4a2528 Mon Sep 17 00:00:00 2001 From: Ivan Schurawel Date: Tue, 24 Oct 2023 14:07:36 -0400 Subject: [PATCH 1/3] chore: put owner links inside p tag Signed-off-by: Ivan Schurawel --- .../layout/HeaderLabel/HeaderLabel.test.tsx | 25 +++++++++++++++ .../src/layout/HeaderLabel/HeaderLabel.tsx | 15 +++++++-- .../EntityLayout/EntityLayout.test.tsx | 31 +++++++++++++++++++ .../components/EntityLayout/EntityLayout.tsx | 1 + 4 files changed, 69 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx index 3dff1f51be..7f863d57fa 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.test.tsx @@ -51,4 +51,29 @@ describe('', () => { expect(rendered.getByText('Value')).toBeInTheDocument(); expect(anchor.href).toBe('http://localhost/test'); }); + + it('should use a `p` tag if the provided value is a string', async () => { + const rendered = await renderInTestApp( + , + ); + expect(rendered.getByText('Value').tagName).toBe('P'); + }); + + it('should use a `span` tag if the provided value is not a string', async () => { + const rendered = await renderInTestApp( + Value} />, + ); + expect(rendered.getByText('Value').tagName).toBe('SPAN'); + }); + + it('should use the correct custom typography root component', async () => { + const rendered = await renderInTestApp( + , + ); + expect(rendered.container.querySelector('tr')).toBeInTheDocument(); + }); }); diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index e6ca9b720e..fdd48a5d81 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -49,12 +49,19 @@ const useStyles = makeStyles( type HeaderLabelContentProps = PropsWithChildren<{ value: React.ReactNode; className: string; + typographyRootComponent?: keyof JSX.IntrinsicElements; }>; -const HeaderLabelContent = ({ value, className }: HeaderLabelContentProps) => { +const HeaderLabelContent = ({ + value, + className, + typographyRootComponent, +}: HeaderLabelContentProps) => { return ( {value} @@ -65,6 +72,7 @@ const HeaderLabelContent = ({ value, className }: HeaderLabelContentProps) => { type HeaderLabelProps = { label: string; value?: HeaderLabelContentProps['value']; + contentTypograpyRootComponent?: HeaderLabelContentProps['typographyRootComponent']; url?: string; }; @@ -75,12 +83,13 @@ type HeaderLabelProps = { * */ export function HeaderLabel(props: HeaderLabelProps) { - const { label, value, url } = props; + const { label, value, url, contentTypograpyRootComponent } = props; const classes = useStyles(); const content = ( '} + typographyRootComponent={contentTypograpyRootComponent} /> ); return ( diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx index 33414152be..b9d2d42a89 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx @@ -233,4 +233,35 @@ describe('EntityLayout', () => { expect(screen.queryByText('tabbed-test-title-2')).not.toBeInTheDocument(); expect(screen.getByText('tabbed-test-title-3')).toBeInTheDocument(); }); + + it('renders the owner links inside `p` tags', async () => { + const mockTargetRef = 'my:target/ref'; + const ownerEntity = { + ...mockEntity, + relations: [{ type: 'ownedBy', targetRef: mockTargetRef }], + }; + await renderInTestApp( + + + + +
tabbed-test-content
+ + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + const ownerLink = screen.getByText(mockTargetRef); + expect(ownerLink).toBeInTheDocument(); + expect(ownerLink.nodeName).toBe('A'); + const linkParent = ownerLink.parentElement; + expect(linkParent).toBeInTheDocument(); + expect(linkParent?.nodeName).toBe('P'); + }); }); diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index adad5d22af..fb6da04f1a 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -119,6 +119,7 @@ function EntityLabels(props: { entity: Entity }) { {ownedByRelations.length > 0 && ( Date: Tue, 24 Oct 2023 15:21:29 -0400 Subject: [PATCH 2/3] chore: update test after rebase Signed-off-by: Ivan Schurawel --- .../src/components/EntityLayout/EntityLayout.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx index b9d2d42a89..3634405af8 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx @@ -257,11 +257,11 @@ describe('EntityLayout', () => { }, ); - const ownerLink = screen.getByText(mockTargetRef); + const ownerLink = screen.getByText(mockTargetRef).closest('a'); expect(ownerLink).toBeInTheDocument(); - expect(ownerLink.nodeName).toBe('A'); - const linkParent = ownerLink.parentElement; + expect(ownerLink?.tagName).toBe('A'); + const linkParent = ownerLink?.parentElement; expect(linkParent).toBeInTheDocument(); - expect(linkParent?.nodeName).toBe('P'); + expect(linkParent?.tagName).toBe('P'); }); }); From eb817ee6d4720322773389dbe6ed20d6fc80a541 Mon Sep 17 00:00:00 2001 From: Ivan Schurawel Date: Mon, 6 Nov 2023 10:35:08 -0500 Subject: [PATCH 3/3] chore: add changeset Signed-off-by: Ivan Schurawel --- .changeset/famous-plums-sit.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/famous-plums-sit.md diff --git a/.changeset/famous-plums-sit.md b/.changeset/famous-plums-sit.md new file mode 100644 index 0000000000..b85e26b87e --- /dev/null +++ b/.changeset/famous-plums-sit.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog': patch +--- + +Fix spacing inconsistency with links and labels in headers