From 9cd98205ad1233f76e7261be291c4eaf1aa9583c Mon Sep 17 00:00:00 2001
From: KtorZ <matthias.benkort@gmail.com>
Date: Sun, 6 Aug 2023 17:04:43 +0200
Subject: [PATCH] Use schema's title when available in {one,any,all}Of
 applicators

  Applicators can be a little hard to navigate, especially on deeply nested schema. While the uid provides a nice middleground solution, it doesn't actually work when schemas are defined outside of the main specification and more importantly, it isn't necessarily meant to be human-readable. The 'title' property however is meant just for that.
---
 library/src/components/Schema.tsx    | 21 ++++++++++++++++++---
 library/src/helpers/schema.ts        | 14 ++++++++++++++
 playground/src/specs/streetlights.ts |  1 +
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
index 2a48f764..e677374a 100644
--- a/library/src/components/Schema.tsx
+++ b/library/src/components/Schema.tsx
@@ -280,7 +280,12 @@ export const Schema: React.FunctionComponent<Props> = ({
                   <Schema
                     key={idx}
                     schema={s}
-                    schemaName={idx === 0 ? 'Adheres to:' : 'Or to:'}
+                    schemaName={SchemaHelpers.applicatorSchemaName(
+                      idx,
+                      'Adheres to',
+                      'Or to',
+                      s.title(),
+                    )}
                   />
                 ))}
             {schema.anyOf() &&
@@ -290,7 +295,12 @@ export const Schema: React.FunctionComponent<Props> = ({
                   <Schema
                     key={idx}
                     schema={s}
-                    schemaName={idx === 0 ? 'Can adhere to:' : 'Or to:'}
+                    schemaName={SchemaHelpers.applicatorSchemaName(
+                      idx,
+                      'Can adhere to',
+                      'Or to',
+                      s.title(),
+                    )}
                   />
                 ))}
             {schema.allOf() &&
@@ -300,7 +310,12 @@ export const Schema: React.FunctionComponent<Props> = ({
                   <Schema
                     key={idx}
                     schema={s}
-                    schemaName={idx === 0 ? 'Consists of:' : 'And with:'}
+                    schemaName={SchemaHelpers.applicatorSchemaName(
+                      idx,
+                      'Consists of',
+                      'And of',
+                      s.title(),
+                    )}
                   />
                 ))}
             {schema.not() && (
diff --git a/library/src/helpers/schema.ts b/library/src/helpers/schema.ts
index efc39f1a..d0f08f7b 100644
--- a/library/src/helpers/schema.ts
+++ b/library/src/helpers/schema.ts
@@ -101,6 +101,20 @@ export class SchemaHelpers {
     return type;
   }
 
+  static applicatorSchemaName(
+    idx: number,
+    firstCase: string,
+    otherCases: string,
+    title?: string,
+  ) {
+    const suffix = (title !== null && ` ${title}:`) || `:`;
+    if (idx === 0) {
+      return `${firstCase}${suffix}`;
+    } else {
+      return `${otherCases}${suffix}`;
+    }
+  }
+
   static prettifyValue(value: any, strict = true): string {
     const typeOf = typeof value;
     if (typeOf === 'string') {
diff --git a/playground/src/specs/streetlights.ts b/playground/src/specs/streetlights.ts
index bc371e5e..519aa26d 100644
--- a/playground/src/specs/streetlights.ts
+++ b/playground/src/specs/streetlights.ts
@@ -400,6 +400,7 @@ components:
     union:
       type: [string, number]
     objectWithKey:
+      title: objectWithKey
       type: object
       propertyNames:
         format: email