feat: show sets of required scopes correctly

It is possible to define alternative required scopes for an operation
and in the security header of the operation it is rendered correctly.
However, in the "Required scopes" part it looks like that all these scopes are required.
With these changes, the "Required scopes" part shows the required scopes per set.

See: OAI/OpenAPI-Specification#3001 (comment)

Author: adamsosterics

src/components/SecurityRequirement/RequiredScopesRow.tsx

@@ -1,15 +1,22 @@
 import * as React from 'react';
 
-export const RequiredScopesRow = ({ scopes }: { scopes: string[] }): JSX.Element | null => {
-  if (!scopes.length) return null;
+export const RequiredScopesRow = ({ scopeSets }: { scopeSets: string[][] }): JSX.Element | null => {
+  if (!scopeSets.length) return null;
 
   return (
     <div>
       <b>Required scopes: </b>
-      {scopes.map((scope, idx) => {
+      {scopeSets.map((scopeSet, ssIdx) => {
         return (
-          <React.Fragment key={idx}>
-            <code>{scope}</code>{' '}
+          <React.Fragment key={ssIdx}>
+            {scopeSet.map((scope, idx) => {
+              return (
+                <React.Fragment key={idx}>
+                  <code>{scope}</code>{' '}
+                </React.Fragment>
+              );
+            })}
+            {ssIdx + 1 < scopeSets.length && ' OR '}
           </React.Fragment>
         );
       })}

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -65,7 +65,7 @@ export function SecurityRequirements(props: SecurityRequirementsProps) {
               key={scheme.id}
               scheme={scheme}
               RequiredScopes={
-                <RequiredScopesRow scopes={getRequiredScopes(scheme.id, securities)} />
+                <RequiredScopesRow scopeSets={getRequiredScopeSets(scheme.id, securities)} />
               }
             />
           </SecurityDetailsStyle>
@@ -83,17 +83,17 @@ const LockIcon = () => (
   </svg>
 );
 
-function getRequiredScopes(id: string, securities: SecurityRequirementModel[]): string[] {
-  const allScopes: string[] = [];
+function getRequiredScopeSets(id: string, securities: SecurityRequirementModel[]): string[][] {
+  const allScopes: string[][] = [];
   let securitiesLength = securities.length;
 
   while (securitiesLength--) {
     const security = securities[securitiesLength];
     let schemesLength = security.schemes.length;
     while (schemesLength--) {
       const scheme = security.schemes[schemesLength];
-      if (scheme.id === id && Array.isArray(scheme.scopes)) {
-        allScopes.push(...scheme.scopes);
+      if (scheme.id === id && Array.isArray(scheme.scopes) && scheme.scopes.length) {
+        allScopes.push(scheme.scopes);
       }
     }
   }