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 && (