Fix UI display

Author: gregberge

packages/react-openapi/src/OpenAPIResponseExample.tsx

@@ -132,8 +132,11 @@ function OpenAPIResponse(props: {
     });
 
     return (
-        <OpenAPITabs stateKey={createStateKey('media-type-examples')} items={tabs}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-example">
+        <OpenAPITabs stateKey={createStateKey('response-media-types')} items={tabs}>
+            <InteractiveSection
+                header={<OpenAPITabsList />}
+                className="openapi-response-media-types"
+            >
                 <OpenAPITabsPanels />
             </InteractiveSection>
         </OpenAPITabs>
@@ -155,20 +158,35 @@ function OpenAPIResponseMediaType(props: {
     }
 
     if (examples.length === 1) {
-        return <OpenAPIExample example={firstExample} context={props.context} syntax={syntax} />;
+        return (
+            <OpenAPIExample
+                example={firstExample.example}
+                context={props.context}
+                syntax={syntax}
+            />
+        );
     }
 
     const tabs = examples.map((example) => {
         return {
-            key: example.summary || 'Example',
-            label: example.summary || 'Example',
-            body: <OpenAPIExample example={firstExample} context={props.context} syntax={syntax} />,
+            key: example.key,
+            label: example.example.summary || example.key,
+            body: (
+                <OpenAPIExample
+                    example={firstExample.example}
+                    context={props.context}
+                    syntax={syntax}
+                />
+            ),
         };
     });
 
     return (
-        <OpenAPITabs stateKey={createStateKey('media-type-examples')} items={tabs}>
-            <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-example">
+        <OpenAPITabs stateKey={createStateKey('response-media-type-examples')} items={tabs}>
+            <InteractiveSection
+                header={<OpenAPITabsList />}
+                className="openapi-response-media-type-examples"
+            >
                 <OpenAPITabsPanels />
             </InteractiveSection>
         </OpenAPITabs>
@@ -232,27 +250,33 @@ function getSyntaxFromMediaType(mediaType: string): string {
 function getExamplesFromMediaTypeObject(args: {
     mediaType: string;
     mediaTypeObject: OpenAPIV3.MediaTypeObject;
-}): OpenAPIV3.ExampleObject[] {
+}): { key: string; example: OpenAPIV3.ExampleObject }[] {
     const { mediaTypeObject, mediaType } = args;
     if (mediaTypeObject.examples) {
-        return Object.values(mediaTypeObject.examples).map((example) => {
-            return checkIsReference(example) ? getExampleFromReference(example) : example;
+        return Object.entries(mediaTypeObject.examples).map(([key, example]) => {
+            return {
+                key,
+                example: checkIsReference(example) ? getExampleFromReference(example) : example,
+            };
         });
     }
 
     if (mediaTypeObject.example) {
-        return [{ value: mediaTypeObject.example }];
+        return [{ key: 'default', example: { value: mediaTypeObject.example } }];
     }
 
     if (mediaTypeObject.schema) {
         // @TODO normally we should use the name of the schema but we don't have it
         const root = mediaTypeObject.schema.xml?.name ?? 'object';
         return [
             {
-                value: {
-                    [root]: generateSchemaExample(mediaTypeObject.schema, {
-                        xml: mediaType === 'application/xml',
-                    }),
+                key: 'default',
+                example: {
+                    value: {
+                        [root]: generateSchemaExample(mediaTypeObject.schema, {
+                            xml: mediaType === 'application/xml',
+                        }),
+                    },
                 },
             },
         ];