fix: improve rendering of types

Author: RomanHotsiy

src/common-elements/fields.ts

@@ -18,7 +18,10 @@ export const TypePrefix = styled(FieldLabel)`
 `;
 
 export const TypeName = styled(FieldLabel)`
-  color: ${props => transparentizeHex(props.theme.colors.text, 0.4)};
+  color: ${props => transparentizeHex(props.theme.colors.text, 0.8)};
+`;
+export const TypeTitle = styled(FieldLabel)`
+  color: ${props => transparentizeHex(props.theme.colors.text, 0.5)};
 `;
 
 export const TypeFormat = TypeName;
@@ -29,7 +32,7 @@ export const RequiredLabel = styled(FieldLabel)`
   font-weight: bold;
 `;
 
-export const CircularLabel = styled(FieldLabel)`
+export const RecursiveLabel = styled(FieldLabel)`
   color: #dd9900;
   font-size: 13px;
 `;

src/components/Fields/FieldDetails.tsx

@@ -6,12 +6,13 @@ import { EnumValues } from './EnumValues';
 import { FieldDetail } from './FieldDetail';
 import { ConstraintsView } from './FieldContstraints';
 import {
-  CircularLabel,
+  RecursiveLabel,
   NullableLabel,
   PatternLabel,
   RequiredLabel,
   TypeFormat,
   TypeName,
+  TypeTitle,
   TypePrefix,
 } from '../../common-elements/fields';
 
@@ -34,11 +35,12 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
               {schema.format}>
             </TypeFormat>
           )}
+          {schema.title && <TypeTitle> ({schema.title}) </TypeTitle>}
           <ConstraintsView constraints={schema.constraints} />
           {schema.nullable && <NullableLabel> Nullable </NullableLabel>}
           {schema.pattern && <PatternLabel>{schema.pattern}</PatternLabel>}
           {required && <RequiredLabel> Required </RequiredLabel>}
-          {schema.isCircular && <CircularLabel> Circular </CircularLabel>}
+          {schema.isCircular && <RecursiveLabel> Recursive </RecursiveLabel>}
         </div>
         {deprecated && (
           <div>

src/components/Schema/Schema.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 
 import { FieldDetails } from '../Fields/FieldDetails';
-import { TypeName, CircularLabel } from '../../common-elements/fields';
+import { RecursiveLabel, TypeName, TypeTitle } from '../../common-elements/fields';
 
 import { SchemaModel } from '../../services/models';
 
@@ -28,7 +28,8 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
       return (
         <div>
           <TypeName>{schema.displayType}</TypeName>
-          <CircularLabel> Circular </CircularLabel>
+          {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
+          <RecursiveLabel> Recursive </RecursiveLabel>
         </div>
       );
     }

src/services/models/Schema.ts

@@ -100,7 +100,7 @@ export class SchemaModel {
     this.pattern = schema.pattern;
 
     this.constraints = humanizeConstraints(schema);
-    this.displayType = this.title === '' ? this.type : `${this.title} (${this.type})`;
+    this.displayType = this.type;
     this.isPrimitive = isPrimitiveType(schema);
     this.default = schema.default;
     this.readOnly = !!schema.readOnly;