added sdk logs downloader

src/renderer/products.ts

@@ -3,6 +3,8 @@ import ReplayTool from "./routes/automate/tools/replay-tool";
 import LatencyFinder from "./routes/automate/tools/latency-finder";
 import SessionComparison from "./routes/automate/tools/session-comparison";
 import AppAutomatePage from "./routes/app-automate";
+import TRAPage from "./routes/test-reporting-and-analytics";
+import SDKLogsDownloader from "./routes/test-reporting-and-analytics/tools/sdk-logs-downloader";
 
 const Products = [
   {
@@ -77,15 +79,15 @@ const Products = [
     ],
   },
   {
-    name: "Test Report & Analytics",
-    path: "/tra",
-    page: AutomatePage,
+    name: "Test Reporting & Analytics",
+    path: "/test-reporting-and-analytics",
+    page: TRAPage,
     tools: [
       {
         title: "SDK Logs Downloader",
         description: "Download SDK logs from Backend",
-        path: "/tra/download-logs",
-        component: null,
+        path: "/test-reporting-and-analytics/sdk-logs-downloader",
+        component: SDKLogsDownloader,
       },
     ],
   },

src/renderer/routes/test-reporting-and-analytics/index.tsx

@@ -0,0 +1,43 @@
+import { NavLink } from "react-router-dom"
+
+export default function TRAPage(props: ProductPageProps) {
+    const { tools } = props
+
+    return (
+        <div className="p-5">
+            <div className="grid grid-col-3 lg:grid-cols-4 gap-4">
+                {tools.map((tool) => {
+                    const isComingSoon = tool.component === null
+
+                    const Card = (
+                        <div className="card bg-base-100 w-full h-full shadow-sm border">
+                            <div className="card-body">
+                                <h2 className="card-title flex items-center gap-2">
+                                    {tool.title}
+                                </h2>
+                                <p>{tool.description}</p>
+                                <div>
+                                    {isComingSoon && (
+                                        <span className="badge badge-warning badge-sm">
+                                            Coming soon
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    )
+
+                    return isComingSoon ? (
+                        <div key={tool.path} className="cursor-not-allowed opacity-60">
+                            {Card}
+                        </div>
+                    ) : (
+                        <NavLink key={tool.path} to={tool.path}>
+                            {Card}
+                        </NavLink>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}

src/renderer/routes/test-reporting-and-analytics/tools/sdk-logs-downloader.tsx

@@ -0,0 +1 @@
+export { default } from './sdk-logs-downloader/index';

src/renderer/routes/test-reporting-and-analytics/tools/sdk-logs-downloader/index.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+export default function SDKLogsDownloader() {
+  const [buildId, setBuildId] = useState('');
+
+  const handleGetLogs = () => {
+    if (!buildId.trim()) {
+      alert('Please enter a TestHub build ID');
+      return;
+    }
+
+    const url = `https://www.browserstack.com/admin/testhub_sdk_logs?build_id=${buildId}`;
+    // Open in default browser using Electron API
+    window.electronAPI.openExternalUrl(url);
+  };
+
+  return (
+    <div className="p-5 space-y-4">
+      <h1 className="text-2xl font-bold mb-4">SDK Logs Downloader</h1>
+
+      <div className="flex gap-4 items-end">
+        <div>
+          <label className="block text-sm font-medium mb-2">TestHub Build ID</label>
+          <input
+            type="text"
+            value={buildId}
+            onChange={(e) => setBuildId(e.target.value)}
+            placeholder="Enter TestHub build ID"
+            className="input placeholder-gray-300 w-80"
+          />
+        </div>
+
+        <button
+          onClick={handleGetLogs}
+          className="btn btn-neutral"
+        >
+          Get SDK Logs
+          <svg
+            className="w-4 h-4 transform rotate-45"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 10l7-7m0 0l7 7m-7-7v18"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}