From a31e55ed5939588c413c9d9c76f2ebf378dcdbc7 Mon Sep 17 00:00:00 2001
From: Alex Varchuk <olexandr.varchuk@gmail.com>
Date: Fri, 29 Apr 2022 14:18:23 +0300
Subject: [PATCH] fix: not show scopes if keys empty or not exist

---
 .../SecuritySchemes/SecuritySchemes.tsx       | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/SecuritySchemes/SecuritySchemes.tsx b/src/components/SecuritySchemes/SecuritySchemes.tsx
index f23264bdf3..817b0666a0 100644
--- 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>
     );