fix: render specs that contain oauth2 password flow only

library/src/__tests__/docs/v3/streetlights-mqtt-oauth2password.json

@@ -0,0 +1,303 @@
+{
+  "asyncapi": "3.0.0",
+  "info": {
+    "title": "Streetlights MQTT API",
+    "version": "1.0.0",
+    "description": "The Smartylighting Streetlights API allows you to remotely manage the city lights.\n\n### Check out its awesome features:\n\n* Turn a specific streetlight on/off 🌃\n* Dim a specific streetlight 😎\n* Receive real-time information about environmental lighting conditions 📈\n",
+    "license": {
+      "name": "Apache 2.0",
+      "url": "https://www.apache.org/licenses/LICENSE-2.0"
+    }
+  },
+  "defaultContentType": "application/json",
+  "servers": {
+    "production": {
+      "host": "test.mosquitto.org:{port}",
+      "protocol": "mqtt",
+      "description": "Test broker",
+      "variables": {
+        "port": {
+          "description": "Secure connection (TLS) is available through port 8883.",
+          "default": "1883",
+          "enum": ["1883", "8883"]
+        }
+      },
+      "security": [
+        {
+          "$ref": "#/components/securitySchemes/oauth2Password"
+        }
+      ],
+      "tags": [
+        {
+          "name": "env:production",
+          "description": "This environment is meant for production use case"
+        },
+        {
+          "name": "kind:remote",
+          "description": "This server is a remote server. Not exposed by the application"
+        },
+        {
+          "name": "visibility:public",
+          "description": "This resource is public and available to everyone"
+        }
+      ]
+    }
+  },
+  "channels": {
+    "smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured": {
+      "address": "smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured",
+      "messages": {
+        "receiveLightMeasurement.message": {
+          "$ref": "#/components/messages/lightMeasured"
+        }
+      },
+      "description": "The topic on which measured values may be produced and consumed.",
+      "parameters": {
+        "streetlightId": {
+          "$ref": "#/components/parameters/streetlightId"
+        }
+      }
+    },
+    "smartylighting/streetlights/1/0/action/{streetlightId}/turn/on": {
+      "address": "smartylighting/streetlights/1/0/action/{streetlightId}/turn/on",
+      "messages": {
+        "turnOn.message": {
+          "$ref": "#/components/messages/turnOnOff"
+        }
+      },
+      "parameters": {
+        "streetlightId": {
+          "$ref": "#/components/parameters/streetlightId"
+        }
+      }
+    },
+    "smartylighting/streetlights/1/0/action/{streetlightId}/turn/off": {
+      "address": "smartylighting/streetlights/1/0/action/{streetlightId}/turn/off",
+      "messages": {
+        "turnOff.message": {
+          "$ref": "#/components/messages/turnOnOff"
+        }
+      },
+      "parameters": {
+        "streetlightId": {
+          "$ref": "#/components/parameters/streetlightId"
+        }
+      }
+    },
+    "smartylighting/streetlights/1/0/action/{streetlightId}/dim": {
+      "address": "smartylighting/streetlights/1/0/action/{streetlightId}/dim",
+      "messages": {
+        "dimLight.message": {
+          "$ref": "#/components/messages/dimLight"
+        }
+      },
+      "parameters": {
+        "streetlightId": {
+          "$ref": "#/components/parameters/streetlightId"
+        }
+      }
+    }
+  },
+  "operations": {
+    "receiveLightMeasurement": {
+      "action": "receive",
+      "channel": {
+        "$ref": "#/channels/smartylighting~1streetlights~11~10~1event~1{streetlightId}~1lighting~1measured"
+      },
+      "summary": "Inform about environmental lighting conditions of a particular streetlight.",
+      "traits": [
+        {
+          "$ref": "#/components/operationTraits/mqtt"
+        }
+      ],
+      "messages": [
+        {
+          "$ref": "#/components/messages/lightMeasured"
+        }
+      ]
+    },
+    "turnOn": {
+      "action": "send",
+      "channel": {
+        "$ref": "#/channels/smartylighting~1streetlights~11~10~1action~1{streetlightId}~1turn~1on"
+      },
+      "traits": [
+        {
+          "$ref": "#/components/operationTraits/mqtt"
+        }
+      ],
+      "messages": [
+        {
+          "$ref": "#/components/messages/turnOnOff"
+        }
+      ]
+    },
+    "turnOff": {
+      "action": "send",
+      "channel": {
+        "$ref": "#/channels/smartylighting~1streetlights~11~10~1action~1{streetlightId}~1turn~1off"
+      },
+      "traits": [
+        {
+          "$ref": "#/components/operationTraits/mqtt"
+        }
+      ],
+      "messages": [
+        {
+          "$ref": "#/components/messages/turnOnOff"
+        }
+      ]
+    },
+    "dimLight": {
+      "action": "send",
+      "channel": {
+        "$ref": "#/channels/smartylighting~1streetlights~11~10~1action~1{streetlightId}~1dim"
+      },
+      "traits": [
+        {
+          "$ref": "#/components/operationTraits/mqtt"
+        }
+      ],
+      "messages": [
+        {
+          "$ref": "#/components/messages/dimLight"
+        }
+      ]
+    }
+  },
+  "components": {
+    "messages": {
+      "lightMeasured": {
+        "name": "lightMeasured",
+        "title": "Light measured",
+        "summary": "Inform about environmental lighting conditions of a particular streetlight.",
+        "contentType": "application/json",
+        "traits": [
+          {
+            "$ref": "#/components/messageTraits/commonHeaders"
+          }
+        ],
+        "payload": {
+          "$ref": "#/components/schemas/lightMeasuredPayload"
+        }
+      },
+      "turnOnOff": {
+        "name": "turnOnOff",
+        "title": "Turn on/off",
+        "summary": "Command a particular streetlight to turn the lights on or off.",
+        "traits": [
+          {
+            "$ref": "#/components/messageTraits/commonHeaders"
+          }
+        ],
+        "payload": {
+          "$ref": "#/components/schemas/turnOnOffPayload"
+        }
+      },
+      "dimLight": {
+        "name": "dimLight",
+        "title": "Dim light",
+        "summary": "Command a particular streetlight to dim the lights.",
+        "traits": [
+          {
+            "$ref": "#/components/messageTraits/commonHeaders"
+          }
+        ],
+        "payload": {
+          "$ref": "#/components/schemas/dimLightPayload"
+        }
+      }
+    },
+    "schemas": {
+      "lightMeasuredPayload": {
+        "type": "object",
+        "properties": {
+          "lumens": {
+            "type": "integer",
+            "minimum": 0,
+            "description": "Light intensity measured in lumens."
+          },
+          "sentAt": {
+            "$ref": "#/components/schemas/sentAt"
+          }
+        }
+      },
+      "turnOnOffPayload": {
+        "type": "object",
+        "properties": {
+          "command": {
+            "type": "string",
+            "enum": ["on", "off"],
+            "description": "Whether to turn on or off the light."
+          },
+          "sentAt": {
+            "$ref": "#/components/schemas/sentAt"
+          }
+        }
+      },
+      "dimLightPayload": {
+        "type": "object",
+        "properties": {
+          "percentage": {
+            "type": "integer",
+            "description": "Percentage to which the light should be dimmed to.",
+            "minimum": 0,
+            "maximum": 100
+          },
+          "sentAt": {
+            "$ref": "#/components/schemas/sentAt"
+          }
+        }
+      },
+      "sentAt": {
+        "type": "string",
+        "format": "date-time",
+        "description": "Date and time when the message was sent."
+      }
+    },
+    "securitySchemes": {
+      "oauth2Password": {
+        "type": "oauth2",
+        "description": "Flows to support OAuth 2.0",
+        "flows": {
+          "password": {
+            "tokenUrl": "https://authserver.example/token",
+            "availableScopes": {
+              "streetlights:on": "Ability to switch lights on",
+              "streetlights:off": "Ability to switch lights off",
+              "streetlights:dim": "Ability to dim the lights"
+            }
+          }
+        }
+      }
+    },
+    "parameters": {
+      "streetlightId": {
+        "description": "The ID of the streetlight."
+      }
+    },
+    "messageTraits": {
+      "commonHeaders": {
+        "headers": {
+          "type": "object",
+          "properties": {
+            "my-app-header": {
+              "type": "integer",
+              "minimum": 0,
+              "maximum": 100
+            }
+          }
+        }
+      }
+    },
+    "operationTraits": {
+      "mqtt": {
+        "bindings": {
+          "mqtt": {
+            "qos": 1
+          }
+        }
+      }
+    }
+  }
+}

library/src/__tests__/index.test.tsx

@@ -13,6 +13,7 @@ import krakenMultipleChannels from './docs/v3/kraken-websocket-request-reply-mul
 import streetlightsKafka from './docs/v3/streetlights-kafka.json';
 import streetlightsMqtt from './docs/v3/streetlights-mqtt.json';
 import websocketGemini from './docs/v3/websocket-gemini.json';
+import streetlightsMqttOAuth2PasswordOnly from './docs/v3/streetlights-mqtt-oauth2password.json';
 
 jest.mock('use-resize-observer', () => ({
   __esModule: true,
@@ -96,6 +97,15 @@ describe('AsyncAPI component', () => {
         expect(result.container.querySelector('#introduction')).toBeDefined(),
       );
     });
+
+    test('and oauth2 password flow example', async () => {
+      const schema = streetlightsMqttOAuth2PasswordOnly;
+      const result = render(<AsyncApiComponent schema={schema} />);
+
+      await waitFor(() =>
+        expect(result.container.querySelector('#introduction')).toBeDefined(),
+      );
+    });
   });
   test('should work with simple v2', async () => {
     const schema = {

library/src/containers/Servers/Security.tsx

@@ -164,7 +164,7 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
     unwrappedFlows.clientCredentials = flows.clientCredentials()!;
   }
   if (flows?.hasPassword()) {
-    unwrappedFlows.password = flows.implicit()!;
+    unwrappedFlows.password = flows.password()!;
   }
   const renderedFlows = Object.entries(unwrappedFlows).map(
     ([flowName, flow]) => {