Merge pull request #5 from bitloops/cli-1331-add-query-explorer-mode-toggle-in-dashboard

CLI-1331: Add query explorer mode to dashboard sidebar

Author: danias

package.json

@@ -1,7 +1,7 @@
 {
   "name": "local-dashboard",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "open-api-codegen": "curl -o ./swagger.json http://127.0.0.1:5667/api/openapi.json && npx openapi-typescript-codegen --input ./swagger.json --output ./src/api/types/schema --name BitloopsCli --useOptions",

src/App.tsx

@@ -6,13 +6,15 @@ import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
 import { AppSidebar } from '@/components/layout/app-sidebar'
 import { SkipToMain } from '@/components/skip-to-main'
 import { Dashboard } from '@/features/dashboard'
+import { QueryExplorer } from '@/features/query-explorer'
 import { SettingsPage } from '@/features/settings/page'
 import { ComingSoon } from '@/components/coming-soon'
 
 function PageRouter() {
   const { pathname } = useLocation()
 
   if (pathname === '/' || pathname === '') return <Dashboard />
+  if (pathname === '/explorer') return <QueryExplorer />
   if (pathname.startsWith('/settings')) return <SettingsPage />
   if (pathname === '/help-center') return <ComingSoon />
 

src/components/layout/data/sidebar-data.ts

@@ -1,4 +1,10 @@
-import { LayoutDashboard, Settings, HelpCircle, Command } from 'lucide-react'
+import {
+  LayoutDashboard,
+  Search,
+  Settings,
+  HelpCircle,
+  Command,
+} from 'lucide-react'
 import { type SidebarData } from '../types'
 
 export const sidebarData: SidebarData = {
@@ -18,6 +24,11 @@ export const sidebarData: SidebarData = {
           url: '/',
           icon: LayoutDashboard,
         },
+        {
+          title: 'Query Explorer',
+          url: '/explorer',
+          icon: Search,
+        },
       ],
     },
     {

src/features/query-explorer/index.tsx

@@ -0,0 +1,26 @@
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { ThemeSwitch } from '@/components/theme-switch'
+
+export function QueryExplorer() {
+  return (
+    <>
+      <Header className='pe-8'>
+        <div className='ms-auto flex items-center space-x-4'>
+          <ThemeSwitch />
+        </div>
+      </Header>
+      <Main>
+        <div className='mb-4'>
+          <h1 className='text-2xl font-bold tracking-tight'>Query Explorer</h1>
+          <p className='mt-1 text-sm text-muted-foreground'>
+            Query and explore your code intelligence data.
+          </p>
+        </div>
+        <div className='rounded-lg border border-dashed bg-muted/20 px-4 py-8 text-center text-sm text-muted-foreground'>
+          Query Explorer UI.
+        </div>
+      </Main>
+    </>
+  )
+}

src/features/query-explorer/query-explorer.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SidebarProvider } from '@/components/ui/sidebar'
+import { QueryExplorer } from './index'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <SidebarProvider>{children}</SidebarProvider>
+}
+
+describe('QueryExplorer', () => {
+  it('renders Query Explorer heading', () => {
+    render(<QueryExplorer />, { wrapper: Wrapper })
+    expect(
+      screen.getByRole('heading', { name: 'Query Explorer' }),
+    ).toBeInTheDocument()
+  })
+
+  it('renders tagline about schema-driven queries', () => {
+    render(<QueryExplorer />, { wrapper: Wrapper })
+    expect(
+      screen.getByText('Query and explore your code intelligence data.'),
+    ).toBeInTheDocument()
+  })
+
+  it('renders placeholder for Query Explorer UI', () => {
+    render(<QueryExplorer />, { wrapper: Wrapper })
+    expect(screen.getByText('Query Explorer UI.')).toBeInTheDocument()
+  })
+})

tests/integration/app-routing.test.tsx

@@ -58,4 +58,34 @@ describe('App routing integration', () => {
       screen.getByRole('heading', { name: 'Dashboard' }),
     ).toBeInTheDocument()
   })
+
+  it('renders Query Explorer link in sidebar', () => {
+    renderApp()
+    expect(
+      screen.getByRole('link', { name: /Query Explorer/i }),
+    ).toBeInTheDocument()
+  })
+
+  it('navigates to Query Explorer when Query Explorer link is clicked', async () => {
+    renderApp()
+    await userEvent.click(screen.getByRole('link', { name: /Query Explorer/i }))
+    expect(
+      screen.getByRole('heading', { name: 'Query Explorer' }),
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('Query and explore your code intelligence data.'),
+    ).toBeInTheDocument()
+  })
+
+  it('navigates back to Dashboard from Query Explorer when Dashboard link is clicked', async () => {
+    renderApp()
+    await userEvent.click(screen.getByRole('link', { name: /Query Explorer/i }))
+    expect(
+      screen.getByRole('heading', { name: 'Query Explorer' }),
+    ).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('link', { name: /Dashboard/i }))
+    expect(
+      screen.getByRole('heading', { name: 'Dashboard' }),
+    ).toBeInTheDocument()
+  })
 })