fix: wrong display when combining multiple auth requirements

fies #577

Author: RomanHotsiy

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -24,36 +24,61 @@ const ScopeName = styled.code`
   }
 `;
 
-const SecurityRequirementWrap = styled.span`
+const SecurityRequirementAndWrap = styled.span`
   &:after {
-    content: ' OR ';
+    content: ' AND ';
     font-weight: bold;
   }
+
   &:last-child:after {
     content: none;
   }
 
   ${linksCss};
 `;
 
+const SecurityRequirementOrWrap = styled.span`
+  &:before {
+    content: '( ';
+    font-weight: bold;
+  }
+  &:after {
+    content: ' ) OR ';
+    font-weight: bold;
+  }
+  &:last-child:after {
+    content: ' )';
+  }
+
+  &:only-child:before,
+  &:only-child:after {
+    content: none;
+  }
+
+  ${linksCss};
+`;
+
 export interface SecurityRequirementProps {
   security: SecurityRequirementModel;
 }
 
 export class SecurityRequirement extends React.PureComponent<SecurityRequirementProps> {
   render() {
     const security = this.props.security;
-    return security.schemes.map((scheme, idx) => {
-      return (
-        <SecurityRequirementWrap key={scheme.id}>
-          <a href={'#' + scheme.sectionId}>{scheme.id}</a>
-          {scheme.scopes.length > 0 && ' ('}
-          {scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
-          {scheme.scopes.length > 0 && ') '}
-          {idx < security.schemes.length - 1 && ' & '}
-        </SecurityRequirementWrap>
-      );
-    });
+    return (
+      <SecurityRequirementOrWrap>
+        {security.schemes.map(scheme => {
+          return (
+            <SecurityRequirementAndWrap key={scheme.id}>
+              <a href={'#' + scheme.sectionId}>{scheme.id}</a>
+              {scheme.scopes.length > 0 && ' ('}
+              {scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
+              {scheme.scopes.length > 0 && ') '}
+            </SecurityRequirementAndWrap>
+          );
+        })}
+      </SecurityRequirementOrWrap>
+    );
   }
 }