fix: change look of additionalProperties

Author: RomanHotsiy

src/common-elements/fields-layout.ts

@@ -1,5 +1,5 @@
 import { transparentize } from 'polished';
-import styled from '../styled-components';
+import styled, { withProps } from '../styled-components';
 import { deprecatedCss } from './mixins';
 
 export const PropertiesTableCaption = styled.caption`
@@ -57,7 +57,7 @@ export const PropertyCellWithInner = PropertyCell.extend`
   padding: 0;
 `;
 
-export const PropertyNameCell = PropertyCell.extend`
+export const PropertyNameCell = withProps<{ kind?: string }>(PropertyCell.extend)`
   vertical-align: top;
   line-height: 20px;
   white-space: nowrap;
@@ -68,6 +68,8 @@ export const PropertyNameCell = PropertyCell.extend`
   &.deprecated {
     ${deprecatedCss};
   }
+
+  ${({ kind }) => (kind !== 'field' ? 'font-style: italic' : '')};
 `;
 
 export const PropertyDetailsCell = styled.td`

src/components/Fields/Field.tsx

@@ -32,23 +32,29 @@ export class Field extends React.PureComponent<FieldProps> {
   };
   render() {
     const { className, field, isLast } = this.props;
-    const { name, expanded, deprecated, required } = field;
+    const { name, expanded, deprecated, required, kind } = field;
     const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
 
     const paramName = withSubSchema ? (
-      <ClickablePropertyNameCell onClick={this.toggle} className={deprecated ? 'deprecated' : ''}>
+      <ClickablePropertyNameCell
+        onClick={this.toggle}
+        className={deprecated ? 'deprecated' : ''}
+        kind={kind}
+        title="Test"
+      >
         <PropertyBullet />
         {name}
         <ShelfIcon size={'1.2em'} direction={expanded ? 'down' : 'right'} />
         {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (
-      <PropertyNameCell className={deprecated ? 'deprecated' : undefined}>
+      <PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title="oops">
         <PropertyBullet />
         {name}
         {required && <RequiredLabel> required </RequiredLabel>}
       </PropertyNameCell>
     );
+
     return (
       <>
         <tr className={isLast ? 'last ' + className : className}>

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
           "example": undefined,
           "expanded": false,
           "in": undefined,
+          "kind": "field",
           "name": "packSize",
           "required": false,
           "schema": SchemaModel {
@@ -57,6 +58,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
           "example": undefined,
           "expanded": false,
           "in": undefined,
+          "kind": "field",
           "name": "type",
           "required": true,
           "schema": SchemaModel {

src/services/models/Field.ts

@@ -19,14 +19,16 @@ export class FieldModel {
   example?: string;
   deprecated: boolean;
   in?: string;
+  kind: string;
 
   constructor(
     parser: OpenAPIParser,
-    infoOrRef: Referenced<OpenAPIParameter> & { name?: string },
+    infoOrRef: Referenced<OpenAPIParameter> & { name?: string; kind?: string },
     pointer: string,
     options: RedocNormalizedOptions,
   ) {
     const info = parser.deref<OpenAPIParameter>(infoOrRef);
+    this.kind = infoOrRef.kind || 'field';
     this.name = infoOrRef.name || info.name;
     this.in = info.in;
     this.required = !!info.required;

src/services/models/Schema.ts

@@ -244,9 +244,10 @@ function buildFields(
       new FieldModel(
         parser,
         {
-          name: '[property name] *',
+          name: 'property name *',
           required: false,
           schema: additionalProps,
+          kind: 'additionalProperties',
         },
         $ref + '/additionalProperties',
         options,