fix: displaying nested items with type string (#2634)

Author: AlexVarchuk

src/components/Fields/ArrayItemDetails.tsx

@@ -18,14 +18,6 @@ export function ArrayItemDetails({ schema }: { schema: SchemaModel }) {
     return null;
   }
 
-  if (schema.type === 'string' && schema.pattern) {
-    return (
-      <Wrapper>
-        [<Pattern schema={schema} />]
-      </Wrapper>
-    );
-  }
-
   return (
     <Wrapper>
       [ items

src/components/Fields/FieldDetails.tsx

@@ -8,7 +8,7 @@ import {
   TypePrefix,
   TypeTitle,
 } from '../../common-elements/fields';
-import { getSerializedValue, isObject } from '../../utils';
+import { getSerializedValue, isArray, isObject } from '../../utils';
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
 import { Markdown } from '../Markdown/Markdown';
 import { EnumValues } from './EnumValues';
@@ -30,7 +30,8 @@ export const FieldDetailsComponent = observer((props: FieldProps) => {
 
   const { showExamples, field, renderDiscriminatorSwitch } = props;
   const { schema, description, deprecated, extensions, in: _in, const: _const } = field;
-  const isArrayType = schema.type === 'array';
+  const isArrayType =
+    schema.type === 'array' || (isArray(schema.type) && schema.type.includes('array'));
 
   const rawDefault = enumSkipQuotes || _in === 'header'; // having quotes around header field default values is confusing and inappropriate
 

src/components/__tests__/FieldDetails.test.tsx

@@ -90,7 +90,7 @@ describe('FieldDetailsComponent', () => {
           items: {
             type: 'string',
             pattern: '^see regex[0-9]$',
-            constraints: [''],
+            constraints: ['<= 128 characters'],
             externalDocs: undefined,
           },
         } as any as SchemaModel,

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

@@ -161,13 +161,21 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty
     <span
       class="sc-kpDqfm sc-dAlyuH sc-dxcDKg cGRfjn gHomYR gXntsr"
     >
-      [
+      [ items
+      <span>
+         
+        <span
+          class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+        >
+           &lt;= 128 characters 
+        </span>
+      </span>
       <span
         class="sc-kpDqfm sc-eDPEul cGRfjn cCKYVD"
       >
         ^see regex[0-9]$
       </span>
-      ]
+       ]
     </span>
   </div>