fix bullet points in GraphQL Changelog (#32310)

components/graphql/Changelog.tsx

@@ -17,51 +17,42 @@ export function Changelog({ changelogItems }: Props) {
     const slug = slugger.slug(heading)
 
     return (
-      <div className={cx(styles.markdownBody, styles.automatedPages)} key={item.date}>
+      <div key={item.date}>
         <h2 id={slug}>
           <LinkIconHeading slug={slug} />
           {heading}
         </h2>
-        {item.schemaChanges &&
-          item.schemaChanges.map((change, index) => (
-            <React.Fragment key={`${item.date}-schema-changes-${index}`}>
-              <p>{change.title}</p>
-              <ul>
-                {change.changes.map((change) => (
-                  <li key={`${item.date}-${change}`}>
-                    <span dangerouslySetInnerHTML={{ __html: change }} />
-                  </li>
-                ))}
-              </ul>
-            </React.Fragment>
-          ))}
-        {item.previewChanges &&
-          item.previewChanges.map((change, index) => (
-            <React.Fragment key={`${item.date}-preview-changes-${index}`}>
-              <p>{change.title}</p>
-              <ul>
-                {change.changes.map((change) => (
-                  <li key={`${item.date}-${change}`}>
-                    <span dangerouslySetInnerHTML={{ __html: change }} />
-                  </li>
-                ))}
-              </ul>
-            </React.Fragment>
-          ))}
-        {item.upcomingChanges &&
-          item.upcomingChanges.map((change, index) => (
-            <React.Fragment key={`${item.date}-upcoming-changes-${index}`}>
-              <p>{change.title}</p>
+        {(item.schemaChanges || []).map((change, index) => (
+          <React.Fragment key={index}>
+            <p>{change.title}</p>
+            <ul>
               {change.changes.map((change) => (
-                <li key={`${item.date}-${change}`}>
-                  <span dangerouslySetInnerHTML={{ __html: change }} />
-                </li>
+                <li key={change} dangerouslySetInnerHTML={{ __html: change }} />
               ))}
-            </React.Fragment>
-          ))}
+            </ul>
+          </React.Fragment>
+        ))}
+        {(item.previewChanges || []).map((change, index) => (
+          <React.Fragment key={index}>
+            <p>{change.title}</p>
+            <ul>
+              {change.changes.map((change) => (
+                <li key={change} dangerouslySetInnerHTML={{ __html: change }} />
+              ))}
+            </ul>
+          </React.Fragment>
+        ))}
+        {(item.upcomingChanges || []).map((change, index) => (
+          <React.Fragment key={index}>
+            <p>{change.title}</p>
+            {change.changes.map((change) => (
+              <li key={change} dangerouslySetInnerHTML={{ __html: change }} />
+            ))}
+          </React.Fragment>
+        ))}
       </div>
     )
   })
 
-  return <div>{changes}</div>
+  return <div className={cx(styles.markdownBody, styles.automatedPages)}>{changes}</div>
 }

pages/[versionId]/graphql/overview/changelog.tsx

@@ -44,6 +44,28 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
   // Update the existing context to include the miniTocItems from GraphQL
   automatedPageContext.miniTocItems.push(...changelogMiniTocItems)
 
+  // All groups in the schema have a change.changes array of strings that are
+  // all the HTML output from a Markdown conversion. E.g.
+  // `<p>Field filename was added to object type <code>IssueTemplate</code></p>`
+  // Change these to just be the inside of the <p> tag.
+  // `Field filename was added to object type <code>IssueTemplate</code>`
+  // This makes the serialized state data smaller and it makes it possible
+  // to render it as...
+  //
+  //    <li>Field filename was added to object type <code>IssueTemplate</code></li>
+  //
+  // ...without the additional <p>.
+  schema.forEach((item) => {
+    for (const group of [item.schemaChanges, item.previewChanges, item.upcomingChanges]) {
+      group.forEach((change) => {
+        change.changes = change.changes.map((html) => {
+          if (html.startsWith('<p>') && html.endsWith('</p>')) return html.slice(3, -4)
+          return html
+        })
+      })
+    }
+  })
+
   return {
     props: {
       mainContext: await getMainContext(req, res),