From 24a8dfd540efc010c4f137e9f56ee70ff59ca127 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 10 Mar 2025 12:23:33 -0700
Subject: [PATCH] ui fix linting errors

---
 .../src/components/transform_request.tsx      |  2 +-
 .../src/components/view_logs/columns.tsx      | 70 ++++++++++---------
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/transform_request.tsx b/ui/litellm-dashboard/src/components/transform_request.tsx
index 5d405df78f..2b7eea65c9 100644
--- a/ui/litellm-dashboard/src/components/transform_request.tsx
+++ b/ui/litellm-dashboard/src/components/transform_request.tsx
@@ -156,7 +156,7 @@ ${formattedBody}
       }}>
         <div style={{ marginBottom: '24px' }}>
           <h2 style={{ fontSize: '24px', fontWeight: 'bold', margin: '0 0 4px 0' }}>Original Request</h2>
-          <p style={{ color: '#666', margin: 0 }}>The request you would send to LiteLLM's /chat/completions endpoint.</p>
+          <p style={{ color: '#666', margin: 0 }}>The request you would send to LiteLLM /chat/completions endpoint.</p>
         </div>
         
         <textarea 
diff --git a/ui/litellm-dashboard/src/components/view_logs/columns.tsx b/ui/litellm-dashboard/src/components/view_logs/columns.tsx
index a4004da2e9..980124ff3b 100644
--- a/ui/litellm-dashboard/src/components/view_logs/columns.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/columns.tsx
@@ -37,41 +37,47 @@ export const columns: ColumnDef<LogEntry>[] = [
     id: "expander",
     header: () => null,
     cell: ({ row }) => {
-      const [localExpanded, setLocalExpanded] = React.useState(row.getIsExpanded());
+      // Convert the cell function to a React component to properly use hooks
+      const ExpanderCell = () => {
+        const [localExpanded, setLocalExpanded] = React.useState(row.getIsExpanded());
 
-      // Memoize the toggle handler to prevent unnecessary re-renders
-      const toggleHandler = React.useCallback(() => {
-        setLocalExpanded((prev) => !prev);
-        row.getToggleExpandedHandler()();
-      }, [row]);
+        // Memoize the toggle handler to prevent unnecessary re-renders
+        const toggleHandler = React.useCallback(() => {
+          setLocalExpanded((prev) => !prev);
+          row.getToggleExpandedHandler()();
+        }, [row]);
 
-      return row.getCanExpand() ? (
-        <button
-          onClick={toggleHandler}
-          style={{ cursor: "pointer" }}
-          aria-label={localExpanded ? "Collapse row" : "Expand row"}
-          className="w-6 h-6 flex items-center justify-center focus:outline-none"
-        >
-          <svg
-            className={`w-4 h-4 transform transition-transform duration-75 ${
-              localExpanded ? 'rotate-90' : ''
-            }`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+        return row.getCanExpand() ? (
+          <button
+            onClick={toggleHandler}
+            style={{ cursor: "pointer" }}
+            aria-label={localExpanded ? "Collapse row" : "Expand row"}
+            className="w-6 h-6 flex items-center justify-center focus:outline-none"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        </button>
-      ) : (
-        <span className="w-6 h-6 flex items-center justify-center">●</span>
-      );
+            <svg
+              className={`w-4 h-4 transform transition-transform duration-75 ${
+                localExpanded ? 'rotate-90' : ''
+              }`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        ) : (
+          <span className="w-6 h-6 flex items-center justify-center">●</span>
+        );
+      };
+
+      // Return the component
+      return <ExpanderCell />;
     },
   },
   {