Update models

Author: nolannbiron

packages/react-openapi/src/models/OpenAPIModels.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
 import { OpenAPIDisclosureGroup } from '../OpenAPIDisclosureGroup';
 import { OpenAPIRootSchema } from '../OpenAPISchema';
 import { Section, SectionBody } from '../StaticSection';
@@ -22,29 +23,64 @@ export function OpenAPIModels(props: {
         blockKey: context.blockKey,
     };
 
+    if (!models.length) {
+        return null;
+    }
+
     return (
         <div className={clsx('openapi-models', className)}>
-            {models.length ? (
-                <OpenAPIDisclosureGroup
-                    allowsMultipleExpanded
-                    icon={context.icons.chevronRight}
-                    groups={models.map(([name, schema]) => ({
-                        id: name,
-                        label: (
-                            <div className="openapi-response-tab-content" key={`model-${name}`}>
-                                <span className="openapi-response-statuscode">{name}</span>
-                            </div>
-                        ),
-                        body: (
-                            <Section className="openapi-section-models">
-                                <SectionBody>
-                                    <OpenAPIRootSchema schema={schema} context={clientContext} />
-                                </SectionBody>
-                            </Section>
-                        ),
-                    }))}
-                />
-            ) : null}
+            <OpenAPIRootModelsSchema models={models} context={clientContext} />
         </div>
     );
 }
+
+/**
+ * Root schema for OpenAPI models.
+ * It displays a single model or a disclosure group for multiple models.
+ */
+function OpenAPIRootModelsSchema(props: {
+    models: [string, OpenAPIV3.SchemaObject][];
+    context: OpenAPIClientContext;
+}) {
+    const { models, context } = props;
+
+    // If there is only one model, we show it directly.
+    if (models.length === 1) {
+        const schema = models?.[0]?.[1];
+
+        if (!schema) {
+            return null;
+        }
+
+        return (
+            <Section>
+                <SectionBody>
+                    <OpenAPIRootSchema schema={schema} context={context} />
+                </SectionBody>
+            </Section>
+        );
+    }
+
+    // If there are multiple models, we use a disclosure group to show them all.
+    return (
+        <OpenAPIDisclosureGroup
+            allowsMultipleExpanded
+            icon={context.icons.chevronRight}
+            groups={models.map(([name, schema]) => ({
+                id: name,
+                label: (
+                    <div className="openapi-response-tab-content" key={`model-${name}`}>
+                        <span className="openapi-response-statuscode">{name}</span>
+                    </div>
+                ),
+                body: (
+                    <Section className="openapi-section-models">
+                        <SectionBody>
+                            <OpenAPIRootSchema schema={schema} context={context} />
+                        </SectionBody>
+                    </Section>
+                ),
+            }))}
+        />
+    );
+}