fix: display string pattern in array items (#2438)

Author: AlexVarchuk

src/components/Fields/ArrayItemDetails.tsx

@@ -10,15 +10,22 @@ export function ArrayItemDetails({ schema }: { schema: SchemaModel }) {
   const { hideSchemaPattern } = React.useContext(OptionsContext);
   if (
     !schema ||
-    (schema.type === 'string' && !schema.constraints.length) ||
     ((!schema?.pattern || hideSchemaPattern) &&
       !schema.items &&
       !schema.displayFormat &&
-      !schema.constraints.length) // return null for cases where all constraints are empty
+      !schema.constraints?.length) // return null for cases where all constraints are empty
   ) {
     return null;
   }
 
+  if (schema.type === 'string' && schema.pattern) {
+    return (
+      <Wrapper>
+        [<Pattern schema={schema} />]
+      </Wrapper>
+    );
+  }
+
   return (
     <Wrapper>
       [ items

src/components/__tests__/FieldDetails.test.tsx

@@ -76,4 +76,41 @@ describe('FieldDetailsComponent', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('renders correctly when field items have string type and pattern', () => {
+    const mockFieldProps = {
+      showExamples: true,
+      field: {
+        schema: {
+          type: 'array',
+          displayType: 'Array of strings',
+          title: 'test title',
+          externalDocs: undefined,
+          constraints: [''],
+          items: {
+            type: 'string',
+            pattern: '^see regex[0-9]$',
+            constraints: [''],
+            externalDocs: undefined,
+          },
+        } as any as SchemaModel,
+        example: 'example',
+        name: 'name',
+        expanded: false,
+        required: false,
+        kind: '',
+        deprecated: false,
+        collapse: jest.fn(),
+        toggle: jest.fn(),
+        explode: false,
+        expand: jest.fn(),
+        description: 'test description',
+        in: undefined,
+      },
+      renderDiscriminatorSwitch: jest.fn(),
+    };
+    const wrapper = shallow(withTheme(<FieldDetails {...mockFieldProps} />));
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

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

@@ -133,3 +133,67 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
   </div>
 </div>
 `;
+
+exports[`FieldDetailsComponent renders correctly when field items have string type and pattern 1`] = `
+<div>
+  <div>
+    <span
+      class="sc-kpDqfm sc-dAlyuH cGRfjn gHomYR"
+    />
+    <span
+      class="sc-kpDqfm sc-jlZhew cGRfjn dYtiIA"
+    >
+      Array of strings
+    </span>
+    <span
+      class="sc-kpDqfm sc-cwHptR cGRfjn gyVIPr"
+    >
+       (test title) 
+    </span>
+    <span>
+       
+      <span
+        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+      >
+          
+      </span>
+    </span>
+    <span
+      class="sc-kpDqfm sc-dAlyuH sc-dxcDKg cGRfjn gHomYR gXntsr"
+    >
+      [
+      <span
+        class="sc-kpDqfm sc-eDPEul cGRfjn erJHow"
+      >
+        ^see regex[0-9]$
+      </span>
+      ]
+    </span>
+  </div>
+   
+  <div>
+    <span
+      class="sc-kpDqfm cGRfjn"
+    >
+       Example: 
+    </span>
+     
+    <span
+      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn"
+    >
+      "example"
+    </span>
+  </div>
+  <div>
+    <div
+      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+    >
+      <p>
+        test description
+      </p>
+      
+
+    </div>
+  </div>
+</div>
+`;