fix: not show scopes if keys empty or not exist (#1975)

Redocly · May 3, 2022 · 4e793f0 · 4e793f0
1 parent 0fa08fa
commit 4e793f0
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
@@ -23,6 +23,7 @@ export interface OAuthFlowProps {
 export class OAuthFlow extends React.PureComponent<OAuthFlowProps> {
   render() {
     const { type, flow } = this.props;
+    const scopesNames = Object.keys(flow?.scopes || {});
     return (
       <tr>
         <th> {type} OAuth Flow </th>
@@ -45,16 +46,21 @@ export class OAuthFlow extends React.PureComponent<OAuthFlowProps> {
               {flow!.refreshUrl}
             </div>
           )}
-          <div>
-            <strong> Scopes: </strong>
-          </div>
-          <ul>
-            {Object.keys(flow!.scopes || {}).map(scope => (
-              <li key={scope}>
-                <code>{scope}</code> - <Markdown inline={true} source={flow!.scopes[scope] || ''} />
-              </li>
-            ))}
-          </ul>
+          {!!scopesNames.length && (
+            <>
+              <div>
+                <strong> Scopes: </strong>
+              </div>
+              <ul>
+                {scopesNames.map(scope => (
+                  <li key={scope}>
+                    <code>{scope}</code> -{' '}
+                    <Markdown inline={true} source={flow!.scopes[scope] || ''} />
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
         </td>
       </tr>
     );