feat: add req metadata

yasumu-org · Jul 17, 2024 · 0cad9af · 0cad9af
1 parent f473982
commit 0cad9af
Show file tree

Hide file tree

Showing 13 changed files with 966 additions and 52 deletions.
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -30,3 +30,4 @@ tauri-plugin-http = { version = "2.0.0-beta.9", features = [
 tauri-plugin-websocket = "2.0.0-beta.9"
 tauri-plugin-fs = "2.0.0-beta.11"
 tauri-plugin-store = "2.0.0-beta.10"
+local-ip-address = "0.6.1"
diff --git a/src-tauri/src/commands/mod.rs b/src-tauri/src/commands/mod.rs
@@ -0,0 +1 @@
+pub mod network;
diff --git a/src-tauri/src/commands/network.rs b/src-tauri/src/commands/network.rs
@@ -0,0 +1,12 @@
+use local_ip_address::local_ip;
+
+#[tauri::command]
+pub fn get_local_address() -> String {
+    let ip = local_ip();
+
+    if let Ok(ip) = ip {
+        ip.to_string()
+    } else {
+        "N/A".to_owned()
+    }
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
@@ -1,10 +1,6 @@
 use tauri::Manager;
 
-// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
-}
+mod commands;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
@@ -21,7 +17,9 @@ pub fn run() {
 
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler![
+            commands::network::get_local_address,
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
diff --git a/src/app/api-testing/(components)/request/request-headers.tsx b/src/app/api-testing/(components)/request/request-headers.tsx
@@ -2,7 +2,13 @@
 
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
 import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import {
   Table,
@@ -12,11 +18,12 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { getHeaderDetails } from '@/lib/header-info';
 import { cn } from '@/lib/utils';
 import { useRequestConfig } from '@/stores/api-testing/request-config.store';
 import { useLayoutStore } from '@/stores/application/layout.store';
-import { Trash } from 'lucide-react';
-import { useCallback, useState } from 'react';
+import { Info, Trash } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
 
 interface IHeader {
   key: string;
@@ -106,6 +113,7 @@ function RequestHeader({ data, onDelete, onEdit }: IRequestHeaderProps) {
         onChange={(key) => {
           onEdit(key, data.value, data.enabled);
         }}
+        info
       />
       <RequestHeaderInput
         value={data.value}
@@ -138,20 +146,41 @@ function RequestHeaderInput({
   onChange,
   value,
   placeholder,
+  info,
 }: {
   value: string;
   placeholder: string;
+  info?: boolean;
   onChange: (value: string) => void;
 }) {
+  const details = useMemo(() => {
+    if (!info || !value) return;
+    return getHeaderDetails(value);
+  }, [value, info]);
+
   return (
     <TableCell className="font-medium">
-      <Input
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
-      />
+      <div className="flex items-center gap-2">
+        <Input
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+        />
+        {details && (
+          <HoverCard openDelay={100} closeDelay={100}>
+            <HoverCardTrigger>
+              <Info className="h-4 w-4 cursor-pointer" />
+            </HoverCardTrigger>
+            <HoverCardContent className="w-fit">
+              <h1 className="font-bold text-sm">{details.name}</h1>
+              <Separator orientation="horizontal" />
+              <p>{details.description}</p>
+            </HoverCardContent>
+          </HoverCard>
+        )}
+      </div>
     </TableCell>
   );
 }
diff --git a/src/app/api-testing/(components)/request/request-input.tsx b/src/app/api-testing/(components)/request/request-input.tsx
@@ -100,7 +100,7 @@ export default function RequestInput() {
       const str = new TextDecoder().decode(value);
 
       responseStore.setBody(str);
-      responseStore.setResponseSize(str.length);
+      responseStore.setResponseSize(value.byteLength);
     } catch (e) {
       console.error(e);
       responseStore.setBody(String(e));

diff --git a/src/app/api-testing/(components)/response/response-headers.tsx b/src/app/api-testing/(components)/response/response-headers.tsx
@@ -1,3 +1,11 @@
+'use client';
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
+import { Separator } from '@/components/ui/separator';
 import {
   Table,
   TableBody,
@@ -6,6 +14,9 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { getHeaderDetails } from '@/lib/header-info';
+import { Info } from 'lucide-react';
+import { useMemo } from 'react';
 
 interface IHeader {
   key: string;
@@ -27,7 +38,9 @@ export function ResponseHeaders({ headers }: { headers: IHeader[] }) {
             {headers.map((header, index) => {
               return (
                 <TableRow key={`${header.key}-${index}`}>
-                  <TableCell className="font-medium">{header.key}</TableCell>
+                  <TableCell className="font-medium">
+                    <HeaderKey name={header.key} />
+                  </TableCell>
                   <TableCell className="font-medium">{header.value}</TableCell>
                 </TableRow>
               );
@@ -38,3 +51,28 @@ export function ResponseHeaders({ headers }: { headers: IHeader[] }) {
     </>
   );
 }
+
+function HeaderKey({ name }: { name: string }) {
+  const details = useMemo(() => {
+    if (!name) return;
+    return getHeaderDetails(name);
+  }, [name]);
+
+  return (
+    <div className="flex items-center gap-2">
+      <h1>{name}</h1>
+      {details && (
+        <HoverCard openDelay={100} closeDelay={100}>
+          <HoverCardTrigger>
+            <Info className="h-4 w-4 cursor-pointer" />
+          </HoverCardTrigger>
+          <HoverCardContent className="w-[400px]">
+            <h1 className="font-bold text-sm">{details.name}</h1>
+            <Separator orientation="horizontal" />
+            <p>{details.description}</p>
+          </HoverCardContent>
+        </HoverCard>
+      )}
+    </div>
+  );
+}