Add set metadata badge (#5)

dobrac · Apr 22, 2024 · f458758 · f458758
1 parent 9d56b3a
commit f458758
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/web/__tests__/components/parts/method/__snapshots__/Method.test.tsx.snap b/web/__tests__/components/parts/method/__snapshots__/Method.test.tsx.snap
@@ -40,21 +40,35 @@ exports[`Method renders - execution 1`] = `
       </code>
     </pre>
   </div>
-  <pre
-    class="bg-body text-dark rounded-1 m-0 py-1 px-2 text-break "
-    data-testid="json-block"
-    style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(248, 248, 255);"
+  <div
+    class="d-grid"
   >
-    <code
-      class="language-json"
-      style="white-space: pre-wrap;"
+    <div
+      class="bg-body text-dark rounded-1 m-0 py-1 px-2 text-break rounded-bottom-0"
+      data-testid="react-block"
     >
-      <span>
+      <span
+        class="small"
+      >
+        Request data
+      </span>
+    </div>
+    <pre
+      class="bg-body text-dark rounded-1 m-0 py-1 px-2 text-break "
+      data-testid="json-block"
+      style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(248, 248, 255);"
+    >
+      <code
+        class="language-json"
+        style="white-space: pre-wrap;"
+      >
         <span>
-          {}
+          <span>
+            {}
+          </span>
         </span>
-      </span>
-    </code>
-  </pre>
+      </code>
+    </pre>
+  </div>
 </div>
 `;
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
@@ -1,10 +1,11 @@
 "use client";
-import { Button, Form } from "react-bootstrap";
+import { Badge, Button, Form } from "react-bootstrap";
 import { useSourceContext } from "../contexts/SourceContext";
 import dynamic from "next/dynamic";
 import { Suspense, useState } from "react";
 import MetadataModal from "../components/metadata/MetadataModal";
 import HandleUrlHostnameParam from "@/components/HandleUrlHostnameParam";
+import { useMetadataContext } from "@/contexts/MetadataContext";
 
 const Endpoints = dynamic(() => import("../components/Endpoints"), {
   ssr: false,
@@ -17,6 +18,7 @@ export default function Home() {
     "This is a tool to help you interact with gRPC services. You can use it to explore the service's endpoints and make requests to them, browse types and enums, and preview options.";
 
   const [showMetadataModal, setShowMetadataModal] = useState(false);
+  const { metadata } = useMetadataContext();
 
   return (
     <main>
@@ -61,6 +63,11 @@ export default function Home() {
             onClick={() => setShowMetadataModal(true)}
             data-testid="metadata-button"
           >
+            {metadata && Object.keys(metadata).length > 0 && (
+              <Badge bg="dark" className="me-2">
+                {Object.keys(metadata).length}
+              </Badge>
+            )}
             Metadata & Authorization
           </Button>
           <MetadataModal

diff --git a/web/src/components/parts/method/Method.tsx b/web/src/components/parts/method/Method.tsx
@@ -174,9 +174,14 @@ export default function Method({
                         {JSON.stringify(request.metadata, null, 2)}
                       </JSONBlock>
                     </div>
-                    <JSONBlock dark={false}>
-                      {JSON.stringify(request.message, null, 2)}
-                    </JSONBlock>
+                    <div className="d-grid">
+                      <JSONBlock dark={false} className="rounded-bottom-0">
+                        <span className="small">Request data</span>
+                      </JSONBlock>
+                      <JSONBlock dark={false}>
+                        {JSON.stringify(request.message, null, 2)}
+                      </JSONBlock>
+                    </div>
                   </div>
                   <div
                     className="d-grid gap-2"