Add a redirect and fix sidebar when going to connections

Signed-off-by: Ravjot Brar <Ravjot.Brar@VAN-FM2FQ6NHXT.local>

Author: Ravjot Brar

apps/frontend/src/components/ui/app-sidebar.tsx

@@ -45,11 +45,11 @@ export function AppSidebar() {
         <div className="mt-10 flex flex-col items-stretch w-full">
           <ul className="space-y-2">
             {[
-              // Always show connect
-              { to: "/connect", title: "Connections", icon: HousePlug },
-              // Rest of the menu items only if connected
               ...(isConnected
                 ? [
+                  { to: (clusterId ? `/${clusterId}/${id}/connect` : `${id}/connect`), 
+                    title: "Connections", 
+                    icon: HousePlug },
                   {
                     to: (clusterId ? `/${clusterId}/${id}/dashboard` : `${id}/dashboard`),
                     title: "Dashboard",
@@ -75,7 +75,7 @@ export function AppSidebar() {
                     : []),
 
                 ]
-                : []),
+                : [{ to: "/connect", title: "Connections", icon: HousePlug }]),
             ].map(({ to, title, icon: Icon }) => (
               <li key={to}>
                 <Link

apps/frontend/src/main.tsx

@@ -40,6 +40,7 @@ const AppWithHistory = () => {
 
         {/* Routes with clusterId */}
         <Route element={<RequireConnection />}>
+          <Route element={<Connection />} path="/:clusterId/:id/connect" />
           <Route element={<Dashboard />} path="/:clusterId/:id/dashboard" />
           <Route element={<SendCommand />} path="/:clusterId/:id/sendcommand" />
           <Route element={<KeyBrowser />} path="/:clusterId/:id/browse" />
@@ -49,6 +50,7 @@ const AppWithHistory = () => {
         {/* Routes without clusterId */}
         <Route element={<RequireConnection />}>
           <Route element={<ValkeyReconnect />} path="/:id/valkey-reconnect" />
+          <Route element={<Connection />} path="/:id/connect" />
           <Route element={<Dashboard />} path="/:id/dashboard" />
           <Route element={<SendCommand />} path="/:id/sendcommand" />
           <Route element={<KeyBrowser />} path="/:id/browse" />

apps/frontend/src/state/epics/valkeyEpics.ts

@@ -11,6 +11,7 @@ import { setData } from "../valkey-features/info/infoSlice"
 import { action$, select } from "../middleware/rxjsMiddleware/rxjsMiddlware"
 import { setClusterData } from "../valkey-features/cluster/clusterSlice"
 import { connectFulfilled as wsConnectFulfilled } from "../wsconnection/wsConnectionSlice"
+import history from "../../history.ts"
 import type { Store } from "@reduxjs/toolkit"
 import { atId } from "@/state/valkey-features/connection/connectionSelectors.ts"
 
@@ -190,7 +191,14 @@ export const setDataEpic = () =>
     tap((action) => {
       const socket = getSocket()
       const { clusterId, connectionId } = action.payload
-      if (clusterId) socket.next({ type: setClusterData.type, payload: { clusterId, connectionId } })
+      if (clusterId) {
+        socket.next({ type: setClusterData.type, payload: { clusterId, connectionId } })
+      }
       socket.next({ type: setData.type, payload: { connectionId } })
+      const dashboardPath = clusterId
+        ? `/${clusterId}/${connectionId}/dashboard`
+        : `/${connectionId}/dashboard`
+
+      history.navigate(dashboardPath)
     }),
   )