From 2414d8666862d00cbed6b6b4292d7e3a7e777d1e Mon Sep 17 00:00:00 2001
From: Seba <17096352+sebalaini@users.noreply.github.com>
Date: Wed, 10 Jul 2024 14:28:50 +0200
Subject: [PATCH] Kubernetes react -> Warning: validateDOMNesting(...): <ul>
 cannot appear as a descendant of <p> (#25559)

* fix html markup in FixDialog

Signed-off-by: sebalaini <sebastianolaini@gmail.com>

* Update .changeset/short-impalas-suffer.md

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Seba <17096352+sebalaini@users.noreply.github.com>

---------

Signed-off-by: sebalaini <sebastianolaini@gmail.com>
Signed-off-by: Seba <17096352+sebalaini@users.noreply.github.com>
Co-authored-by: Camila Belo <camilaibs@gmail.com>
---
 .changeset/short-impalas-suffer.md            |  5 +++++
 .../components/Pods/FixDialog/FixDialog.tsx   | 22 +++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/short-impalas-suffer.md

diff --git a/.changeset/short-impalas-suffer.md b/.changeset/short-impalas-suffer.md
new file mode 100644
index 0000000000..34bc31e85d
--- /dev/null
+++ b/.changeset/short-impalas-suffer.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes-react': patch
+---
+
+Fix the `HTML` markup of the `FixDialog` component, `ul` and `li` are not allowed inside a `p` tag.
diff --git a/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx b/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx
index fd7440870f..99386b3d40 100644
--- a/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx
+++ b/plugins/kubernetes-react/src/components/Pods/FixDialog/FixDialog.tsx
@@ -33,6 +33,8 @@ import { DetectedError } from '@backstage/plugin-kubernetes-common';
 import { PodLogs } from '../PodLogs';
 import { Events } from '../Events';
 import { LinkButton } from '@backstage/core-components';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -96,17 +98,15 @@ export const FixDialog: React.FC<FixDialogProps> = ({
         </Grid>
         <Grid item xs={12}>
           <Typography variant="h6">Fix:</Typography>
-          <Typography>
-            <ul>
-              {(error.proposedFix?.actions ?? []).map((fix, i) => {
-                return (
-                  <li key={`${pod.metadata?.name ?? 'unknown'}-pf-${i}`}>
-                    {fix}
-                  </li>
-                );
-              })}
-            </ul>
-          </Typography>
+          <List>
+            {(error.proposedFix?.actions ?? []).map((fix, i) => {
+              return (
+                <ListItem key={`${pod.metadata?.name ?? 'unknown'}-pf-${i}`}>
+                  {fix}
+                </ListItem>
+              );
+            })}
+          </List>
         </Grid>
 
         {pf && pf.type === 'logs' && (