Repository: Redocly/redoc
Pull request #2438 (2023-10-23 17:22:54)

fix: display string pattern in array items
## What/Why/How?
we do not display `pattern` in items with strings.

## Reference
fixes: https://github.com/Redocly/redoc/issues/2358
## Tests

## Screenshots (optional)
_Before_
<img width="552" alt="Screenshot 2023-10-23 at 20 22 36" src="https://github.com/Redocly/redoc/assets/14113673/68cc56f7-145f-4987-9a20-dcfd5108a0d4">

_After_
<img width="542" alt="Screenshot 2023-10-23 at 20 22 05" src="https://github.com/Redocly/redoc/assets/14113673/c38004fa-f875-43ca-9818-0bebefa56dba">

## Check yourself

- [x] Code is linted
- [x] Tested
- [ ] All new/updated code is covered with tests



Patch:
diff --git a/src/components/Fields/ArrayItemDetails.tsx b/src/components/Fields/ArrayItemDetails.tsx
index 163f8b38..bbae1991 100644
--- a/src/components/Fields/ArrayItemDetails.tsx
+++ b/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


Test patch:
diff --git a/src/components/__tests__/FieldDetails.test.tsx b/src/components/__tests__/FieldDetails.test.tsx
index 04982bb9..0d70fe55 100644
--- a/src/components/__tests__/FieldDetails.test.tsx
+++ b/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();
+  });
 });
diff --git a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap
index 801106e7..f98b667a 100644
--- a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap
+++ b/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>
+`;