feat: add support hidePropertiesPrefix

Redocly · Jan 21, 2025 · 93d6b6c · 93d6b6c
1 parent 349a194
commit 93d6b6c
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 7 deletions.
diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
@@ -19,6 +19,8 @@ import { Schema } from '../Schema/Schema';
 
 import type { SchemaOptions } from '../Schema/Schema';
 import type { FieldModel } from '../../services/models';
+import { OptionsContext } from '../OptionsProvider';
+import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
 
 export interface FieldProps extends SchemaOptions {
   className?: string;
@@ -27,12 +29,15 @@ export interface FieldProps extends SchemaOptions {
 
   field: FieldModel;
   expandByDefault?: boolean;
-
+  fieldParentsName?: string[];
   renderDiscriminatorSwitch?: (opts: FieldProps) => JSX.Element;
 }
 
 @observer
 export class Field extends React.Component<FieldProps> {
+  static contextType = OptionsContext;
+  context: RedocNormalizedOptions;
+
   toggle = () => {
     if (this.props.field.expanded === undefined && this.props.expandByDefault) {
       this.props.field.collapse();
@@ -49,12 +54,12 @@ export class Field extends React.Component<FieldProps> {
   };
 
   render() {
-    const { className = '', field, isLast, expandByDefault } = this.props;
+    const { hidePropertiesPrefix } = this.context;
+    const { className = '', field, isLast, expandByDefault, fieldParentsName = [] } = this.props;
     const { name, deprecated, required, kind } = field;
     const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
 
     const expanded = field.expanded === undefined ? expandByDefault : field.expanded;
-
     const labels = (
       <>
         {kind === 'additionalProperties' && <PropertyLabel>additional property</PropertyLabel>}
@@ -75,6 +80,10 @@ export class Field extends React.Component<FieldProps> {
           onKeyPress={this.handleKeyPress}
           aria-label={`expand ${name}`}
         >
+          {!hidePropertiesPrefix &&
+            fieldParentsName.map(
+              name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+            )}
           <span className="property-name">{name}</span>
           <ShelfIcon direction={expanded ? 'down' : 'right'} />
         </button>
@@ -83,6 +92,10 @@ export class Field extends React.Component<FieldProps> {
     ) : (
       <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
         <PropertyBullet />
+        {!hidePropertiesPrefix &&
+          fieldParentsName.map(
+            name => name + '.\u200B', // zero-width space, a special character is used for correct line breaking
+          )}
         <span className="property-name">{name}</span>
         {labels}
       </PropertyNameCell>
@@ -102,6 +115,7 @@ export class Field extends React.Component<FieldProps> {
               <InnerPropertiesWrap>
                 <Schema
                   schema={field.schema}
+                  fieldParentsName={[...(fieldParentsName || []), field.name]}
                   skipReadOnly={this.props.skipReadOnly}
                   skipWriteOnly={this.props.skipWriteOnly}
                   showTitle={this.props.showTitle}

diff --git a/src/components/Schema/ArraySchema.tsx b/src/components/Schema/ArraySchema.tsx
@@ -16,14 +16,24 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
   render() {
     const schema = this.props.schema;
     const itemsSchema = schema.items;
+    const fieldParentsName = this.props.fieldParentsName;
 
     const minMaxItems =
       schema.minItems === undefined && schema.maxItems === undefined
         ? ''
         : `(${humanizeConstraints(schema)})`;
 
+    const updatedParentsArray = fieldParentsName
+      ? [...fieldParentsName.slice(0, -1), fieldParentsName[fieldParentsName.length - 1] + '[]']
+      : fieldParentsName;
     if (schema.fields) {
-      return <ObjectSchema {...(this.props as any)} level={this.props.level} />;
+      return (
+        <ObjectSchema
+          {...(this.props as any)}
+          level={this.props.level}
+          fieldParentsName={updatedParentsArray}
+        />
+      );
     }
     if (schema.displayType && !itemsSchema && !minMaxItems.length) {
       return (
@@ -37,7 +47,7 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
       <div>
         <ArrayOpenningLabel> Array {minMaxItems}</ArrayOpenningLabel>
         <PaddedSchema>
-          <Schema {...this.props} schema={itemsSchema} />
+          <Schema {...this.props} schema={itemsSchema} fieldParentsName={updatedParentsArray} />
         </PaddedSchema>
         <ArrayClosingLabel />
       </div>

diff --git a/src/components/Schema/ObjectSchema.tsx b/src/components/Schema/ObjectSchema.tsx
@@ -16,6 +16,7 @@ export interface ObjectSchemaProps extends SchemaProps {
     fieldName: string;
     parentSchema: SchemaModel;
   };
+  fieldParentsName?: string[];
 }
 
 export const ObjectSchema = observer(
@@ -26,6 +27,7 @@ export const ObjectSchema = observer(
     skipReadOnly,
     skipWriteOnly,
     level,
+    fieldParentsName,
   }: ObjectSchemaProps) => {
     const { expandSingleSchemaField, showObjectSchemaExamples, schemasExpansionLevel } =
       React.useContext(OptionsContext);
@@ -58,6 +60,7 @@ export const ObjectSchema = observer(
                 isLast={isLast}
                 field={field}
                 expandByDefault={expandByDefault}
+                fieldParentsName={Number(level) > 1 ? fieldParentsName : []}
                 renderDiscriminatorSwitch={
                   discriminator?.fieldName === field.name
                     ? () => (

diff --git a/src/components/Schema/Schema.tsx b/src/components/Schema/Schema.tsx
@@ -21,6 +21,7 @@ export interface SchemaOptions {
 
 export interface SchemaProps extends SchemaOptions {
   schema: SchemaModel;
+  fieldParentsName?: string[];
 }
 
 @observer

diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
@@ -88,6 +88,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "hideDownloadButtons": false,
                     "hideFab": false,
                     "hideHostname": false,
+                    "hidePropertiesPrefix": true,
                     "hideRequestPayloadSample": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -363,6 +364,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "hideDownloadButtons": false,
                     "hideFab": false,
                     "hideHostname": false,
+                    "hidePropertiesPrefix": true,
                     "hideRequestPayloadSample": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -625,6 +627,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "hideDownloadButtons": false,
               "hideFab": false,
               "hideHostname": false,
+              "hidePropertiesPrefix": true,
               "hideRequestPayloadSample": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -949,6 +952,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "hideDownloadButtons": false,
                     "hideFab": false,
                     "hideHostname": false,
+                    "hidePropertiesPrefix": true,
                     "hideRequestPayloadSample": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -1236,6 +1240,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                     "hideDownloadButtons": false,
                     "hideFab": false,
                     "hideHostname": false,
+                    "hidePropertiesPrefix": true,
                     "hideRequestPayloadSample": false,
                     "hideSchemaPattern": false,
                     "hideSchemaTitles": false,
@@ -1494,6 +1499,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "hideDownloadButtons": false,
               "hideFab": false,
               "hideHostname": false,
+              "hidePropertiesPrefix": true,
               "hideRequestPayloadSample": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -1777,6 +1783,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
           "hideDownloadButtons": false,
           "hideFab": false,
           "hideHostname": false,
+          "hidePropertiesPrefix": true,
           "hideRequestPayloadSample": false,
           "hideSchemaPattern": false,
           "hideSchemaTitles": false,
@@ -2090,6 +2097,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "hideDownloadButtons": false,
               "hideFab": false,
               "hideHostname": false,
+              "hidePropertiesPrefix": true,
               "hideRequestPayloadSample": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -2365,6 +2373,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "hideDownloadButtons": false,
               "hideFab": false,
               "hideHostname": false,
+              "hidePropertiesPrefix": true,
               "hideRequestPayloadSample": false,
               "hideSchemaPattern": false,
               "hideSchemaTitles": false,
@@ -2627,6 +2636,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
         "hideDownloadButtons": false,
         "hideFab": false,
         "hideHostname": false,
+        "hidePropertiesPrefix": true,
         "hideRequestPayloadSample": false,
         "hideSchemaPattern": false,
         "hideSchemaTitles": false,
@@ -2955,6 +2965,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
           },
         }
       }
+      fieldParentsName={[]}
       isLast={false}
       key="packSize"
       showExamples={false}
@@ -3029,6 +3040,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
           },
         }
       }
+      fieldParentsName={[]}
       isLast={true}
       key="type"
       renderDiscriminatorSwitch={[Function]}

diff --git a/src/services/MenuBuilder.ts b/src/services/MenuBuilder.ts
@@ -24,7 +24,7 @@ export class MenuBuilder {
     const hasAutogenerated = [...(spec.tags || [])].find(
       tag => tag?.name === schemaDefinitionsTagName,
     );
-    console.log('hasAutogenerated', hasAutogenerated, schemaDefinitionsTagName);
+
     if (!hasAutogenerated && schemaDefinitionsTagName) {
       tags.push({ name: schemaDefinitionsTagName });
     }
@@ -38,7 +38,7 @@ export class MenuBuilder {
     } else {
       items.push(...MenuBuilder.getTagsItems(parser, tagsMap, undefined, undefined, options));
     }
-    console.log('items', items);
+
     return items;
   }
 

diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts
@@ -70,6 +70,7 @@ export interface RedocRawOptions {
   hideFab?: boolean;
   minCharacterLengthToInitSearch?: number;
   showWebhookVerb?: boolean;
+  hidePropertiesPrefix?: boolean;
 }
 
 export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -273,6 +274,7 @@ export class RedocNormalizedOptions {
   hideFab: boolean;
   minCharacterLengthToInitSearch: number;
   showWebhookVerb: boolean;
+  hidePropertiesPrefix?: boolean;
 
   nonce?: string;
 
@@ -358,5 +360,6 @@ export class RedocNormalizedOptions {
     this.hideFab = argValueToBoolean(raw.hideFab);
     this.minCharacterLengthToInitSearch = argValueToNumber(raw.minCharacterLengthToInitSearch) || 3;
     this.showWebhookVerb = argValueToBoolean(raw.showWebhookVerb);
+    this.hidePropertiesPrefix = argValueToBoolean(raw.hidePropertiesPrefix, true);
   }
 }