add comming soon banners

Author: Rushabhshroff

src/global.d.ts

@@ -45,6 +45,7 @@ declare global {
             title: string
             description: string,
             path: string
+            component: React.ReactNode | null
         }[]
     }
 

src/renderer/components/sidebar.tsx

@@ -7,24 +7,6 @@ const TopMenu = [
     path: "/",
   },
 ];
-const ProductsMenu = [
-  {
-    title: "Automate",
-    path: "/automate",
-  },
-  {
-    title: "App Automate",
-    path: "/app-automate",
-  },
-  {
-    title: "Percy",
-    path: "/percy",
-  },
-  {
-    title: "Accessibility",
-    path: "/accessibility",
-  },
-];
 
 export default function Sidebar() {
   const location = useLocation();

src/renderer/products.ts

@@ -30,6 +30,77 @@ const Products = [
       }
     ],
   },
+  {
+    name: "App Automate",
+    path: "/app-automate",
+    page: AutomatePage,
+    tools: [
+      {
+        title: "Replay Toolkit",
+        description: "Replays the sessions on BrowserStack by parsing Raw Logs",
+        path: "/automate/replay-toolkit",
+        component: null,
+      },
+      {
+        title: "Latency Analyser",
+        description:
+          "Analyses time spend on different actions. Helpful to identify inside/outside time for a customer session.",
+        path: "/automate/latency-analyser",
+        component: null,
+      },
+      {
+        title: "Session Comparison",
+        description: "Compares logs across sessions and highlights differences",
+        path: '/automate/session-comparison',
+        component: null
+      }
+    ],
+  },
+  {
+    name: "Percy",
+    path: "/percy",
+    page: AutomatePage,
+    tools: [
+      {
+        title: "Snapshot Replay",
+        description: "Replay snapshots",
+        path: "/percy/snapshot-replay",
+        component: null,
+      },
+      {
+        title: "CLI Logs Downloader",
+        description: "Download CLI logs using hash ID displayed in Customer's console",
+        path: "/percy/cli-log-downloader",
+        component: null,
+      },
+    ],
+  },
+  {
+    name: "Test Report & Analytics",
+    path: "/tra",
+    page: AutomatePage,
+    tools: [
+      {
+        title: "SDK Logs Downloader",
+        description: "Download SDK logs from Backend",
+        path: "/tra/download-logs",
+        component: null,
+      },
+    ],
+  },
+  {
+    name: "Web Accessibility",
+    path: "/web-accessibility",
+    page: AutomatePage,
+    tools: [
+      {
+        title: "Automate Session Finder",
+        description: "Find associated automate session for accessibility scanner run",
+        path: "/web-a11y/session-finder",
+        component: null,
+      },
+    ],
+  },
 ];
 
 export default Products;

src/renderer/routes/automate/index.tsx

@@ -2,22 +2,42 @@ import { NavLink } from "react-router-dom"
 
 export default function AutomatePage(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) => {
-                    return (
-                        <NavLink key={tool.path} to={tool.path} >
-                            <div className="card bg-base-100 w-full h-full shadow-sm border">
-                                <div className="card-body">
-                                    <h2 className="card-title">{tool.title}</h2>
-                                    <p>{tool.description}</p>
+                    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>
     )
-}
+}