fix(api-docs): Corrected styling of nested objects in AsyncAPI to avoid inappropriate uppercasing of nested objects

Fixes #16848

Signed-off-by: Justin Edelson <jedelson@pagerduty.com>

.changeset/curly-boats-trade.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Corrected styling of nested objects in AsyncAPI to avoid inappropriate uppercase text transformation of nested objects.

plugins/api-docs/dev/asyncapi-example-api.yaml

@@ -133,6 +133,8 @@ spec:
               description: Light intensity measured in lumens.
             sentAt:
               $ref: "#/components/schemas/sentAt"
+            sentBy:
+              $ref: "#/components/schemas/sentBy"
         turnOnOffPayload:
           type: object
           properties:
@@ -144,6 +146,8 @@ spec:
               description: Whether to turn on or off the light.
             sentAt:
               $ref: "#/components/schemas/sentAt"
+            sentBy:
+              $ref: "#/components/schemas/sentBy"
         dimLightPayload:
           type: object
           properties:
@@ -154,10 +158,25 @@ spec:
               maximum: 100
             sentAt:
               $ref: "#/components/schemas/sentAt"
+            sentBy:
+              $ref: "#/components/schemas/sentBy"
         sentAt:
           type: string
           format: date-time
           description: Date and time when the message was sent.
+        sentBy:
+          type: object
+          description: Description of the message sender.
+          properties:
+            name:
+              type: string
+              description: Name of the sender.
+            type:
+              type: string
+              description: Type of the sender.
+              enum:
+              - user
+              - machine
 
       securitySchemes:
         apiKey:

plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx

@@ -76,6 +76,8 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
       ...theme.typography.button,
       borderRadius: theme.shape.borderRadius,
       color: theme.palette.primary.main,
+      // override whatever may be in the theme's typography to ensure consistency with asyncapi
+      textTransform: 'inherit',
     },
     '& a': {
       color: theme.palette.link,