fix(api-reference): add failsafe types for schema (#6405)

* feat: add failsafe types for schema

* fix: ordering

* docs(changeset): fix: show anyOf schema when only one item with no type

* fix: without brekaing anything else

* chore: update the tests

Author: amritk

.changeset/gold-boxes-help.md

@@ -0,0 +1,5 @@
+---
+'@scalar/api-reference': patch
+---
+
+fix: show anyOf schema when only one item with no type

packages/api-reference/src/components/Content/Schema/SchemaHeading.vue

@@ -1,14 +1,37 @@
 <script lang="ts" setup>
 import type { OpenAPIV3_1 } from '@scalar/openapi-types'
+import { computed } from 'vue'
 
-defineProps<{
+const { value } = defineProps<{
   value:
     | OpenAPIV3_1.SchemaObject
     | OpenAPIV3_1.ArraySchemaObject
     | OpenAPIV3_1.NonArraySchemaObject
   name?: string
 }>()
+
+/** Generate a failsafe type from the properties when we don't have one */
+const failsafeType = computed(() => {
+  if (value.type) {
+    return value.type
+  }
+
+  if (value.enum) {
+    return 'enum'
+  }
+
+  if ('items' in value && value.items === 'object') {
+    return 'array'
+  }
+
+  if (value.properties || value.additionalProperties) {
+    return 'object'
+  }
+
+  return 'unknown'
+})
 </script>
+
 <template>
   <span
     v-if="typeof value === 'object'"
@@ -30,7 +53,7 @@ defineProps<{
       {{ name }}
     </template>
     <template v-else>
-      {{ value.type }}
+      {{ failsafeType }}
     </template>
   </span>
 </template>

packages/api-reference/src/components/Content/Schema/SchemaProperty.test.ts

@@ -424,6 +424,64 @@ describe('SchemaProperty', () => {
       })
     })
 
+    describe('object compositions', () => {
+      // TODO: remove the skip when we expand the object by default
+      it.skip('renders object compositions with allOf with all properties showing', async () => {
+        const wrapper = mount(SchemaProperty, {
+          props: {
+            value: {
+              allOf: [
+                {
+                  properties: {
+                    testStr: { type: 'string', description: 'This is a test string' },
+                    testBool: { type: 'boolean', description: 'This is a test boolean' },
+                  },
+                  required: ['testStr'],
+                },
+              ],
+            },
+          },
+        })
+
+        // For allOf compositions, properties should be displayed directly without expansion
+        const html = wrapper.html()
+
+        // Check that both properties are rendered with their descriptions
+        expect(html).toContain('testStr')
+        expect(html).toContain('This is a test string')
+        expect(html).toContain('testBool')
+        expect(html).toContain('This is a test boolean')
+
+        // Check that the required property is marked as required
+        expect(html).toContain('required')
+      })
+
+      it('renders object compositions with allOf with an object button', async () => {
+        const wrapper = mount(SchemaProperty, {
+          props: {
+            value: {
+              allOf: [
+                {
+                  properties: {
+                    testStr: { type: 'string', description: 'This is a test string' },
+                    testBool: { type: 'boolean', description: 'This is a test boolean' },
+                  },
+                  required: ['testStr'],
+                },
+              ],
+            },
+          },
+        })
+
+        // For allOf compositions, properties should be displayed directly without expansion
+        const html = wrapper.html()
+
+        // Check that both properties are rendered with their descriptions
+        expect(html).toContain('button')
+        expect(html).toContain('object')
+      })
+    })
+
     describe('nested compositions', () => {
       it('renders nested composition selectors with correct titles', async () => {
         const wrapper = mount(SchemaProperty, {

packages/api-reference/src/components/Content/Schema/SchemaProperty.vue

@@ -2,6 +2,7 @@
 import { ScalarMarkdown } from '@scalar/components'
 import { computed, inject, type Component } from 'vue'
 
+import { isTypeObject } from '@/components/Content/Schema/helpers/is-type-object'
 import type { Schemas } from '@/features/Operation/types/schemas'
 import { SpecificationExtension } from '@/features/specification-extension'
 import { DISCRIMINATOR_CONTEXT } from '@/hooks/useDiscriminator'
@@ -213,9 +214,7 @@ const shouldRenderObjectProperties = computed(() => {
   }
 
   const value = optimizedValue.value
-  const isObjectType =
-    value.type === 'object' ||
-    (Array.isArray(value.type) && value.type.includes('object'))
+  const isObjectType = isTypeObject(value)
 
   const hasPropertiesToRender = value.properties || value.additionalProperties