From 1c69d4716ce228689145868351d93aa477c3f494 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Wed, 9 Dec 2020 01:47:07 -0500
Subject: [PATCH] fix(core): React descendant P tag warning (#3641)

* Fix descendant P tag warning

* Add changeset

* Remove whitespace on end of example
---
 .changeset/rare-cooks-tan.md                         |  5 +++++
 .../EmptyState/MissingAnnotationEmptyState.tsx       | 12 +++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/rare-cooks-tan.md

diff --git a/.changeset/rare-cooks-tan.md b/.changeset/rare-cooks-tan.md
new file mode 100644
index 0000000000000..790ab3503e7cd
--- /dev/null
+++ b/.changeset/rare-cooks-tan.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Fix React warning of descendant paragraph tag
diff --git a/packages/core/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core/src/components/EmptyState/MissingAnnotationEmptyState.tsx
index 1c27ba27d3bf5..377373a06d871 100644
--- a/packages/core/src/components/EmptyState/MissingAnnotationEmptyState.tsx
+++ b/packages/core/src/components/EmptyState/MissingAnnotationEmptyState.tsx
@@ -20,8 +20,7 @@ import { BackstageTheme } from '@backstage/theme';
 import { EmptyState } from './EmptyState';
 import { CodeSnippet } from '../CodeSnippet';
 
-const COMPONENT_YAML = `# Example
-apiVersion: backstage.io/v1alpha1
+const COMPONENT_YAML = `apiVersion: backstage.io/v1alpha1
 kind: Component
 metadata:
   name: example
@@ -31,8 +30,7 @@ metadata:
 spec:
   type: website
   lifecycle: production
-  owner: guest
-`;
+  owner: guest`;
 
 type Props = {
   annotation: string;
@@ -49,10 +47,10 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
 export const MissingAnnotationEmptyState = ({ annotation }: Props) => {
   const classes = useStyles();
   const description = (
-    <Typography>
+    <>
       The <code>{annotation}</code> annotation is missing. You need to add the
       annotation to your component if you want to enable this tool.
-    </Typography>
+    </>
   );
   return (
     <EmptyState
@@ -70,7 +68,7 @@ export const MissingAnnotationEmptyState = ({ annotation }: Props) => {
               text={COMPONENT_YAML.replace('ANNOTATION', annotation)}
               language="yaml"
               showLineNumbers
-              highlightedNumbers={[7, 8]}
+              highlightedNumbers={[6, 7]}
               customStyle={{ background: 'inherit', fontSize: '115%' }}
             />
           </div>