feat: add essential Kafka client security config

library/src/containers/Servers/Server.tsx

@@ -66,16 +66,19 @@ export const Server: React.FunctionComponent<Props> = ({
             </div>
           )}
 
-          {serverRequirements && (
+          {
             <div
               id={`${CommonHelpers.getIdentifier(
                 `server-${serverName}-security`,
                 config,
               )}`}
             >
-              <ServerSecurity serverRequirements={serverRequirements} />
+              <ServerSecurity
+                protocol={server.protocol()}
+                serverRequirements={serverRequirements}
+              />
             </div>
-          )}
+          }
 
           {server.hasBindings() && (
             <div className="mt-2">

library/src/containers/Servers/ServerSecurity.tsx

@@ -8,82 +8,136 @@ import { ServerHelpers } from '../../helpers';
 
 interface Props {
   serverRequirements: ServerSecurityRequirement[];
+  protocol: string;
 }
 
 export const ServerSecurity: React.FunctionComponent<Props> = ({
   serverRequirements = [],
+  protocol = '',
 }) => {
   const asyncapi = useSpec();
   const securitySchemes =
     asyncapi.hasComponents() && asyncapi.components().securitySchemes();
 
+  let renderedServerSecurities;
   if (
+    !serverRequirements ||
     !serverRequirements.length ||
     !securitySchemes ||
     !Object.keys(securitySchemes).length
   ) {
-    return null;
+    if (protocol === 'kafka' || protocol === 'kafka-secure') {
+      renderedServerSecurities = (
+        <ServerSecurityItem protocol={protocol} securitySchema={null} />
+      );
+    }
+  } else {
+    const serverSecurities: React.ReactNodeArray = serverRequirements
+      .map(requirement => {
+        const def: SecurityScheme =
+          securitySchemes[Object.keys(requirement.json())[0]];
+
+        if (!def) {
+          return null;
+        }
+        return (
+          <ServerSecurityItem
+            protocol={protocol}
+            securitySchema={def}
+            key={def.type()}
+          />
+        );
+      })
+      .filter(Boolean);
+    renderedServerSecurities = (
+      <ul>
+        {serverSecurities.map((security, idx) => (
+          <li className="mt-2" key={idx}>
+            {security}
+          </li>
+        ))}
+      </ul>
+    );
   }
 
-  const serverSecurities: React.ReactNodeArray = serverRequirements
-    .map(requirement => {
-      const def: SecurityScheme =
-        securitySchemes[Object.keys(requirement.json())[0]];
-
-      if (!def) {
-        return null;
-      }
-      return <ServerSecurityItem securitySchema={def} key={def.type()} />;
-    })
-    .filter(Boolean);
-
-  if (!serverSecurities.length) {
+  if (!renderedServerSecurities) {
     return null;
   }
 
   return (
     <div className="text-sm mt-4">
       <h5 className="text-gray-700 text-base">Security:</h5>
-      <ul>
-        {serverSecurities.map((security, idx) => (
-          <li className="mt-2" key={idx}>
-            {security}
-          </li>
-        ))}
-      </ul>
+      {renderedServerSecurities}
     </div>
   );
 };
 
 interface ServerSecurityItemProps {
-  securitySchema: SecurityScheme;
+  securitySchema: SecurityScheme | null;
+  protocol: string;
 }
 
 const ServerSecurityItem: React.FunctionComponent<ServerSecurityItemProps> = ({
   securitySchema,
+  protocol,
 }) => {
   const schemas: React.ReactNodeArray = [];
-  if (securitySchema.name()) {
-    schemas.push(<span>Name: {securitySchema.name()}</span>);
-  }
-  if (securitySchema.in()) {
-    schemas.push(<span>In: {securitySchema.in()}</span>);
-  }
-  if (securitySchema.scheme()) {
-    schemas.push(<span>Scheme: {securitySchema.scheme()}</span>);
-  }
-  if (securitySchema.bearerFormat()) {
-    schemas.push(<span>Bearer format: {securitySchema.bearerFormat()}</span>);
+  if (securitySchema) {
+    if (securitySchema.name()) {
+      schemas.push(<span>Name: {securitySchema.name()}</span>);
+    }
+    if (securitySchema.in()) {
+      schemas.push(<span>In: {securitySchema.in()}</span>);
+    }
+    if (securitySchema.scheme()) {
+      schemas.push(<span>Scheme: {securitySchema.scheme()}</span>);
+    }
+    if (securitySchema.bearerFormat()) {
+      schemas.push(<span>Bearer format: {securitySchema.bearerFormat()}</span>);
+    }
+    if (securitySchema.openIdConnectUrl()) {
+      schemas.push(
+        <Href href={securitySchema.openIdConnectUrl()} className="underline">
+          Connect URL
+        </Href>,
+      );
+    }
   }
-  if (securitySchema.openIdConnectUrl()) {
-    schemas.push(
-      <Href href={securitySchema.openIdConnectUrl()} className="underline">
-        Connect URL
-      </Href>,
+
+  let renderedKafkaSecurity;
+  if (protocol === 'kafka' || protocol === 'kafka-secure') {
+    const { securityProtocol, saslMechanism } = ServerHelpers.getKafkaSecurity(
+      protocol,
+      securitySchema,
+    );
+
+    renderedKafkaSecurity = (
+      <div className="px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded">
+        {securityProtocol && (
+          <div className="mt-1">
+            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              security.protocol:
+            </span>
+            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+              {securityProtocol}
+            </span>
+          </div>
+        )}
+        {saslMechanism && (
+          <div className="mt-1">
+            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              sasl.mechanism:
+            </span>
+            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+              {saslMechanism}
+            </span>
+          </div>
+        )}
+      </div>
     );
   }
 
-  const flows = securitySchema.flows();
+  const flows = securitySchema && securitySchema.flows();
   const renderedFlows =
     flows &&
     Object.entries(flows).map(([flowName, flow]) => {
@@ -161,25 +215,27 @@ const ServerSecurityItem: React.FunctionComponent<ServerSecurityItemProps> = ({
 
   return (
     <div className="ai-security__security__security-schema">
-      <div>
-        <span>
-          {ServerHelpers.securityType(securitySchema.type())}
-          {schemas.length > 0 && (
-            <ul className="inline-block ml-2">
-              {schemas.map((schema, idx) => (
-                <li
-                  className="inline-block font-bold no-underline bg-blue-400 text-white text-xs uppercase rounded px-2 py-0 ml-1"
-                  key={idx}
-                >
-                  {schema}
-                </li>
-              ))}
-            </ul>
-          )}
-        </span>
-      </div>
+      {securitySchema && schemas && (
+        <div>
+          <span>
+            {ServerHelpers.securityType(securitySchema.type())}
+            {schemas.length > 0 && (
+              <ul className="inline-block ml-2">
+                {schemas.map((schema, idx) => (
+                  <li
+                    className="inline-block font-bold no-underline bg-blue-400 text-white text-xs uppercase rounded px-2 py-0 ml-1"
+                    key={idx}
+                  >
+                    {schema}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </span>
+        </div>
+      )}
 
-      {securitySchema.hasDescription() && (
+      {securitySchema && securitySchema.hasDescription() && (
         <div>
           <Markdown>{securitySchema.description()}</Markdown>
         </div>
@@ -190,6 +246,8 @@ const ServerSecurityItem: React.FunctionComponent<ServerSecurityItemProps> = ({
           <li>{renderedFlows}</li>
         </ul>
       )}
+
+      {renderedKafkaSecurity && <div>{renderedKafkaSecurity}</div>}
     </div>
   );
 };

library/src/helpers/server.ts

@@ -1,3 +1,5 @@
+import { SecurityScheme } from '@asyncapi/parser';
+
 export class ServerHelpers {
   static securityType(value: string) {
     switch (value) {
@@ -44,4 +46,49 @@ export class ServerHelpers {
         return 'Implicit';
     }
   }
+
+  static getKafkaSecurity(
+    protocol: string,
+    securitySchema: SecurityScheme | null,
+  ) {
+    let securityProtocol;
+    let saslMechanism;
+    if (protocol === 'kafka') {
+      if (securitySchema) {
+        securityProtocol = 'SASL_PLAINTEXT';
+      } else {
+        securityProtocol = 'PLAINTEXT';
+      }
+    } else {
+      if (securitySchema) {
+        securityProtocol = 'SASL_SSL';
+      } else {
+        securityProtocol = 'SSL';
+      }
+    }
+    if (securitySchema) {
+      switch (securitySchema.type()) {
+        case 'plain':
+          saslMechanism = 'PLAIN';
+          break;
+        case 'scramSha256':
+          saslMechanism = 'SCRAM-SHA-256';
+          break;
+        case 'scramSha512':
+          saslMechanism = 'SCRAM-SHA-512';
+          break;
+        case 'oauth2':
+          saslMechanism = 'OAUTHBEARER';
+          break;
+        case 'gssapi':
+          saslMechanism = 'GSSAPI';
+          break;
+        case 'X509':
+          securityProtocol = 'SSL';
+          break;
+      }
+    }
+
+    return { securityProtocol, saslMechanism };
+  }
 }