Add Badge Tooltip (#293)

generator/templates/ApiTemplate.ts

@@ -4,7 +4,7 @@ export const title = '<%- tag %>'
 
 <% operations.forEach(function(operation){ %>
 
-## <%- operation.summary %> <% if(operation.deprecated) { %> <Badge status="warning" text="Deprecated" /> <% } %><% if(operation["x-cloud-only"]) { %> <Badge status="cloud-only" text="Cloud-Only" /> <% } %><% if(operation["x-experimental"]) { %> <Badge status="experimental" text="Experimental" /> <% } %> {{ tag: '<%- operation.operation.toUpperCase() %>' , label: '<%- operation.path %>' }}
+## <%- operation.summary %> <% if(operation.deprecated) { %> <Badge status="warning" text="Deprecated" /> <% } %><% if(operation["x-cloud-only"]) { %> <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> <% } %><% if(operation["x-experimental"]) { %> <Badge status="experimental" text="Experimental" hoverText="This feature is experimental. The endpoint will likely change and does not guarantee backwards compatibility." /> <% } %> {{ tag: '<%- operation.operation.toUpperCase() %>' , label: '<%- operation.path %>' }}
 
 <Row>
   <Col>

src/components/Badge.jsx

@@ -1,26 +1,81 @@
-export function Badge({ status, text }) {
+import { useState } from 'react';
+
+export function Badge({ status, text, hoverText }) {
+    const [isHovered, setIsHovered] = useState(false);
+
     const getStatusStyles = (status) => {
         switch (status) {
             case 'info':
-                // Never tested colors
+                return 'text-blue-400';
-                return 'bg-blue-300/30 text-blue-400 dark:bg-blue-400/10 dark:text-blue-400';
             case 'warning':
-                return 'bg-orange-300/30 text-orange-400 dark:bg-yellow-600/10 dark:text-yellow-600';
+                return 'text-yellow-600';
             case 'error':
-                // Never tested colors
+                return 'text-red-400';
-                return 'bg-red-300/30 text-red-400 dark:bg-red-400/10 dark:text-red-400';
             case 'cloud-only':
-                return 'bg-orange-200/50 text-orange-400 dark:bg-orange-600/20 dark:text-orange-400';
+                return 'text-orange-400';
             case 'experimental':
-                return 'bg-teal-200/50 text-teal-400 dark:bg-teal-500/15 dark:text-teal-400';
+                return 'text-teal-400';
             default:
-                return 'bg-gray-500/30 text-gray-600 dark:bg-gray-400/10 dark:text-gray-400';
+                return 'text-gray-400';
         }
     };
 
-    const baseStyle = 'rounded-md py-0.5 px-2 text-sm';
+    const getStatusBorder = (status) => {
+        switch (status) {
+            case 'info':
+                return 'border-blue-400';
+            case 'warning':
+                return 'border-yellow-600';
+            case 'error':
+                return 'border-red-400';
+            case 'cloud-only':
+                return 'border-orange-400';
+            case 'experimental':
+                return 'border-teal-400';
+            default:
+                return 'border-gray-400';
+        }
+    };
 
-    const statusStyle = getStatusStyles(status);
+    const getBadgeBg = (status) => {
+        switch (status) {
+            case 'info':
+                return 'bg-blue-300/30 dark:bg-blue-400/10';
+            case 'warning':
+                return 'bg-orange-300/30 dark:bg-yellow-600/10';
+            case 'error':
+                return 'bg-red-300/30 dark:bg-red-400/10';
+            case 'cloud-only':
+                return 'bg-orange-200/50 dark:bg-orange-600/20';
+            case 'experimental':
+                return 'bg-teal-200/50 dark:bg-teal-500/15';
+            default:
+                return 'bg-gray-500/30 dark:bg-gray-400/10';
+        }
+    };
 
-    return <span className={`${baseStyle} ${statusStyle}`}>{text}</span>;
+    const baseStyle = 'relative inline-block rounded-md py-0.5 px-2 text-sm';
-}
+    const textColor = getStatusStyles(status);
+    const bgColor = getBadgeBg(status);
+    const borderStyle = getStatusBorder(status);
+
+    return (
+        <span
+            className={`${baseStyle} ${bgColor} ${textColor}`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {text}
+            {hoverText && isHovered && (
+                <div className={`
+                    absolute z-10 left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs p-3
+                    rounded-md whitespace-pre-line
+                    dark:bg-zinc-900/5 bg-white-900/5 backdrop-blur-md border ${borderStyle}
+                    ${textColor} shadow-lg
+                `}>
+                    {hoverText}
+                </div>
+            )}
+        </span>
+    );
+}

src/pages/ipa/resources/events.mdx

@@ -211,7 +211,7 @@ echo $response;
 ---
 
 
-## List all Network Traffic Events  <Badge status="cloud-only" text="Cloud-Only" />  <Badge status="experimental" text="Experimental" />  {{ tag: 'GET' , label: '/api/events/network-traffic' }}
+## List all Network Traffic Events  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  <Badge status="experimental" text="Experimental" hoverText="This feature is experimental. The endpoint will likely change and does not guarantee backwards compatibility." />  {{ tag: 'GET' , label: '/api/events/network-traffic' }}
 
 <Row>
   <Col>

src/pages/ipa/resources/ingress-ports.mdx

@@ -2,7 +2,7 @@ export const title = 'Ingress Ports'
 
 
 
-## List all Port Allocations  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports' }}
+## List all Port Allocations  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports' }}
 
 <Row>
   <Col>
@@ -226,7 +226,7 @@ echo $response;
 ---
 
 
-## Create a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'POST' , label: '/api/peers/{peerId}/ingress/ports' }}
+## Create a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'POST' , label: '/api/peers/{peerId}/ingress/ports' }}
 
 <Row>
   <Col>
@@ -614,7 +614,7 @@ echo $response;
 ---
 
 
-## Retrieve a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
+## Retrieve a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
 
 <Row>
   <Col>
@@ -830,7 +830,7 @@ echo $response;
 ---
 
 
-## Update a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'PUT' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
+## Update a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'PUT' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
 
 <Row>
   <Col>
@@ -1222,7 +1222,7 @@ echo $response;
 ---
 
 
-## Delete a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'DELETE' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
+## Delete a Port Allocation  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'DELETE' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
 
 <Row>
   <Col>
@@ -1390,7 +1390,7 @@ echo $response;
 ---
 
 
-## List all Ingress Peers  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'GET' , label: '/api/ingress/peers' }}
+## List all Ingress Peers  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'GET' , label: '/api/ingress/peers' }}
 
 <Row>
   <Col>
@@ -1590,7 +1590,7 @@ echo $response;
 ---
 
 
-## Create a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'POST' , label: '/api/ingress/peers' }}
+## Create a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'POST' , label: '/api/ingress/peers' }}
 
 <Row>
   <Col>
@@ -1848,7 +1848,7 @@ echo $response;
 ---
 
 
-## Retrieve a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'GET' , label: '/api/ingress/peers/{ingressPeerId}' }}
+## Retrieve a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'GET' , label: '/api/ingress/peers/{ingressPeerId}' }}
 
 <Row>
   <Col>
@@ -2052,7 +2052,7 @@ echo $response;
 ---
 
 
-## Update a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'PUT' , label: '/api/ingress/peers/{ingressPeerId}' }}
+## Update a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'PUT' , label: '/api/ingress/peers/{ingressPeerId}' }}
 
 <Row>
   <Col>
@@ -2306,7 +2306,7 @@ echo $response;
 ---
 
 
-## Delete a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" />  {{ tag: 'DELETE' , label: '/api/ingress/peers/{ingressPeerId}' }}
+## Delete a Ingress Peer  <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." />  {{ tag: 'DELETE' , label: '/api/ingress/peers/{ingressPeerId}' }}
 
 <Row>
   <Col>