@igstack/app-catalog-frontend-core 0.5.0 → 0.6.1

package/src/__tests__/integration/harness/given.tsx

@@ -32,6 +32,7 @@ import { GalleryTools } from '../tools/GalleryTools'
 export interface GivenResult {
   ui: UiTools
   backend: MockBackendVerifier
+  router: ReturnType<typeof createAcRouter>
 }
 
 export interface UiTools {
@@ -57,7 +58,10 @@ export async function cleanupTestResources(): Promise<void> {
   }
 }
 
-export async function given(magazine: Magazine): Promise<GivenResult> {
+export async function given(
+  magazine: Magazine,
+  opts: { initialRoute?: string } = {},
+): Promise<GivenResult> {
   // Clean up any previous resources
   await cleanupTestResources()
   resetConfigurerCounter()
@@ -126,7 +130,7 @@ export async function given(magazine: Magazine): Promise<GivenResult> {
 
   const router = createAcRouter({
     history: createMemoryHistory({
-      initialEntries: ['/catalog/apps'],
+      initialEntries: [opts.initialRoute ?? '/catalog/apps'],
     }),
     context: {
       queryClient,
@@ -187,5 +191,5 @@ export async function given(magazine: Magazine): Promise<GivenResult> {
     globalError: () => getGlobalError(),
   }
 
-  return { ui, backend }
+  return { ui, backend, router }
 }

package/src/__tests__/modules/appCatalog/utils/mergeFrontendBuildId.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'
+
+describe('mergeFrontendBuildId', () => {
+  it('returns versions unchanged when no build id', () => {
+    const versions = { frontend: { displayName: '0.4.0', sha: 'abc1234' } }
+    expect(mergeFrontendBuildId(versions, undefined)).toEqual(versions)
+  })
+
+  it('shows local (dropping SHA) when build id is local', () => {
+    const versions = { frontend: { displayName: '0.4.0', sha: 'abc1234' } }
+    const out = mergeFrontendBuildId(versions, 'local')
+    expect(out.frontend).toEqual({ displayName: 'local' })
+  })
+
+  it('prepends pipeline id while preserving fe-core version + sha + url', () => {
+    const versions = {
+      frontend: {
+        displayName: '0.4.0-alpha-x',
+        sha: 'abc1234',
+        shaUrl: 'https://github.com/lislon/app-catalog/commit/abc1234',
+      },
+    }
+    const out = mergeFrontendBuildId(versions, '12345')
+    expect(out.frontend?.displayName).toBe('#12345 · 0.4.0-alpha-x')
+    expect(out.frontend?.sha).toBe('abc1234')
+    expect(out.frontend?.shaUrl).toBe(
+      'https://github.com/lislon/app-catalog/commit/abc1234',
+    )
+  })
+
+  it('shows only pipeline id when backend gave no frontend slot', () => {
+    const out = mergeFrontendBuildId({}, '12345')
+    expect(out.frontend).toEqual({ displayName: '#12345' })
+  })
+
+  it('does not mutate the input', () => {
+    const versions = { frontend: { displayName: '0.4.0' } }
+    mergeFrontendBuildId(versions, '99')
+    expect(versions.frontend.displayName).toBe('0.4.0')
+  })
+})

package/src/__tests__/ui/components/header/VersionDisplay.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+import { VersionDisplay } from '~/ui/components/header/Header'
+
+describe('VersionDisplay footer', () => {
+  it('renders the frontend-core version and its short SHA as a commit link', () => {
+    render(
+      <VersionDisplay
+        versions={{
+          backend: { displayName: '#12345 (deadbee)' },
+          coreVersion: { displayName: 'be 0.4.0 / fe 0.3.1' },
+          frontend: {
+            displayName: '#12345 · 0.3.1-alpha-x',
+            sha: 'abc1234',
+            shaUrl: 'https://github.com/lislon/app-catalog/commit/abc1234',
+          },
+        }}
+      />,
+    )
+    // FE line shows pipeline id + fe-core version
+    expect(screen.getByText(/0\.3\.1-alpha-x/)).toBeInTheDocument()
+    // SHA rendered and linked to the commit
+    const shaLink = screen.getByText('(abc1234)').closest('a')
+    expect(shaLink).toHaveAttribute(
+      'href',
+      'https://github.com/lislon/app-catalog/commit/abc1234',
+    )
+    // Backend line carries the natera SHA suffix
+    expect(screen.getByText(/#12345 \(deadbee\)/)).toBeInTheDocument()
+  })
+
+  it('shows plain "local" for local dev', () => {
+    render(<VersionDisplay versions={{ backend: { displayName: 'local' } }} />)
+    expect(screen.getByText('local')).toBeInTheDocument()
+  })
+})

package/src/modules/appCatalog/context/AppCatalogContext.tsx

@@ -11,6 +11,7 @@ import type { ReactNode } from 'react'
 import { createContext, use, useEffect, useMemo } from 'react'
 import { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'
 import { useUiSettings } from '~/context/UiSettingsContext'
+import { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'
 
 export interface AppCatalogContextIface {
   resources: Resource[]
@@ -44,17 +45,10 @@ export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
       approvalMethods: data?.approvalMethods ?? [],
       persons: data?.persons ?? [],
       groups: data?.groups ?? [],
-      versions: {
-        ...data?.versions,
-        ...(uiSettings.frontendBuildId && {
-          frontend: {
-            displayName:
-              uiSettings.frontendBuildId === 'local'
-                ? 'local'
-                : `#${uiSettings.frontendBuildId}`,
-          },
-        }),
-      },
+      versions: mergeFrontendBuildId(
+        data?.versions ?? {},
+        uiSettings.frontendBuildId,
+      ),
     }),
     [
       data?.approvalMethods,

package/src/modules/appCatalog/context/mergeFrontendBuildId.ts

@@ -0,0 +1,31 @@
+import type { AppVersionInfo } from '@igstack/app-catalog-backend-core'
+
+/**
+ * Merge the (natera-agnostic) frontend build id into the backend-provided
+ * version info's `frontend` slot.
+ *
+ * The build id is baked into the deployed JS bundle at build time (e.g. a CI
+ * pipeline id via a Vite env var). We PREPEND it to the resolved frontend-core
+ * npm version instead of replacing it, so the footer surfaces both:
+ *   `#<buildId> · <frontend-core version> (<sha>)`.
+ *
+ * - No build id → return versions unchanged.
+ * - build id === 'local' → show `local` (local dev, no meaningful SHA/version).
+ * - otherwise → prepend `#<buildId> · ` and preserve the version + sha + shaUrl.
+ */
+export function mergeFrontendBuildId(
+  versions: AppVersionInfo,
+  frontendBuildId: string | undefined,
+): AppVersionInfo {
+  if (!frontendBuildId) return versions
+  if (frontendBuildId === 'local') {
+    return { ...versions, frontend: { displayName: 'local' } }
+  }
+  const be = versions.frontend
+  return {
+    ...versions,
+    frontend: be
+      ? { ...be, displayName: `#${frontendBuildId} · ${be.displayName}` }
+      : { displayName: `#${frontendBuildId}` },
+  }
+}

package/src/modules/appCatalog/ui/grid/AppCatalogGrid.tsx

@@ -55,6 +55,8 @@ export interface AppCatalogGridProps {
   totalAppsCount?: number
   /** Callback to clear all filters and search */
   onClearFilters?: () => void
+  /** Called when the user closes the detail panel (Esc or X) — e.g. to navigate back to the catalog URL */
+  onClosePanel?: () => void
 }
 
 function getIconUrl(iconName: string): string {
@@ -697,6 +699,7 @@ export function AppCatalogGrid({
   searchQuery,
   totalAppsCount,
   onClearFilters,
+  onClosePanel,
 }: AppCatalogGridProps) {
   const selectedApp = selectedAppSlug
     ? apps.find((a) => a.slug === selectedAppSlug)
@@ -862,6 +865,7 @@ export function AppCatalogGrid({
 
   const handleClosePanel = () => {
     setHasUserClosed(true)
+    onClosePanel?.()
   }
 
   return (

package/src/modules/appCatalog/ui/pages/AppCatalogPage.tsx

@@ -1,4 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
+import { useNavigate } from '@tanstack/react-router'
 import { X } from 'lucide-react'
 import { useDeferredValue, useEffect, useMemo, useState } from 'react'
 import { Button } from '~/ui/button'
@@ -13,25 +14,22 @@ import {
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { useAppCounts } from '../../hooks/useAppCounts'
-import { useUrlSyncedState } from '../../hooks/useUrlSyncedState'
 import { searchResources } from '../../utils/searchApps'
 import { OnboardingCard } from '../components/OnboardingCard'
 import { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'
 import { FilterBar } from '../filters/FilterBar'
 import { AppCatalogGrid } from '../grid/AppCatalogGrid'
 
-export function AppCatalogPage() {
+export function AppCatalogPage({
+  selectedSlug,
+}: { selectedSlug?: string } = {}) {
   const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()
   const { state: filterState, actions } = useAppCatalogFilters()
   const { getTopApps } = useAppClickHistory()
+  const navigate = useNavigate()
 
-  // URL-synced state
-  const [selectedAppSlug, setSelectedAppSlug] = useUrlSyncedState<
-    string | undefined
-  >({
-    key: 'app',
-    defaultValue: undefined,
-  })
+  // Selected app comes from the route path (/app/<slug>); undefined = nothing open
+  const selectedAppSlug = selectedSlug
 
   // Search value from context (URL-synced in AppCatalogFiltersContext)
   const searchValue = filterState.searchValue
@@ -108,19 +106,23 @@ export function AppCatalogPage() {
 
   // Auto-open details when only 1 result
   useEffect(() => {
-    if (filteredApps.length === 1 && filteredApps[0]) {
-      setSelectedAppSlug(filteredApps[0].slug)
+    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {
+      void navigate({
+        to: '/app/$slug',
+        params: { slug: filteredApps[0].slug },
+        replace: true,
+      })
     }
-  }, [filteredApps, setSelectedAppSlug])
+  }, [filteredApps, selectedAppSlug, navigate])
 
   const handleAppClick = (app: Resource) => {
-    setSelectedAppSlug(app.slug)
+    void navigate({ to: '/app/$slug', params: { slug: app.slug } })
   }
 
   const handleClearFilters = () => {
     setSearchValue('')
     actions.clearAllFilters()
-    setSelectedAppSlug(undefined)
+    void navigate({ to: '/' })
   }
 
   // Calculate total apps count (respecting showDeprecated setting)
@@ -174,7 +176,7 @@ export function AppCatalogPage() {
                   variant="outline"
                   onClick={() => {
                     setSearchValue('')
-                    setSelectedAppSlug(undefined)
+                    void navigate({ to: '/' })
                   }}
                   className="gap-2"
                 >
@@ -190,6 +192,7 @@ export function AppCatalogPage() {
             selectedAppSlug={selectedAppSlug}
             groupingDefinition={groupingDefinition}
             onAppClick={handleAppClick}
+            onClosePanel={() => void navigate({ to: '/' })}
             hasSearch={!!deferredSearchValue}
             searchQuery={deferredSearchValue}
             totalAppsCount={totalAppsCount}

package/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login'
+import { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'
 import { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'
 
 const LayoutRoute = LayoutRouteImport.update({
@@ -34,6 +35,11 @@ const LayoutLoginRoute = LayoutLoginRouteImport.update({
   path: '/login',
   getParentRoute: () => LayoutRoute,
 } as any)
+const LayoutAppSlugRoute = LayoutAppSlugRouteImport.update({
+  id: '/app/$slug',
+  path: '/app/$slug',
+  getParentRoute: () => LayoutRoute,
+} as any)
 const LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({
   id: '/catalog/apps/',
   path: '/catalog/apps/',
@@ -44,12 +50,14 @@ export interface FileRoutesByFullPath {
   '/': typeof LayoutIndexRoute
   '/login': typeof LayoutLoginRoute
   '/auth/callback': typeof AuthCallbackRoute
+  '/app/$slug': typeof LayoutAppSlugRoute
   '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LayoutLoginRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/': typeof LayoutIndexRoute
+  '/app/$slug': typeof LayoutAppSlugRoute
   '/catalog/apps': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRoutesById {
@@ -58,19 +66,21 @@ export interface FileRoutesById {
   '/_layout/login': typeof LayoutLoginRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/_layout/': typeof LayoutIndexRoute
+  '/_layout/app/$slug': typeof LayoutAppSlugRoute
   '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/auth/callback' | '/catalog/apps/'
+  fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/auth/callback' | '/' | '/catalog/apps'
+  to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps'
   id:
     | '__root__'
     | '/_layout'
     | '/_layout/login'
     | '/auth/callback'
     | '/_layout/'
+    | '/_layout/app/$slug'
     | '/_layout/catalog/apps/'
   fileRoutesById: FileRoutesById
 }
@@ -109,6 +119,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutLoginRouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/_layout/app/$slug': {
+      id: '/_layout/app/$slug'
+      path: '/app/$slug'
+      fullPath: '/app/$slug'
+      preLoaderRoute: typeof LayoutAppSlugRouteImport
+      parentRoute: typeof LayoutRoute
+    }
     '/_layout/catalog/apps/': {
       id: '/_layout/catalog/apps/'
       path: '/catalog/apps'
@@ -122,12 +139,14 @@ declare module '@tanstack/react-router' {
 interface LayoutRouteChildren {
   LayoutLoginRoute: typeof LayoutLoginRoute
   LayoutIndexRoute: typeof LayoutIndexRoute
+  LayoutAppSlugRoute: typeof LayoutAppSlugRoute
   LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute
 }
 
 const LayoutRouteChildren: LayoutRouteChildren = {
   LayoutLoginRoute: LayoutLoginRoute,
   LayoutIndexRoute: LayoutIndexRoute,
+  LayoutAppSlugRoute: LayoutAppSlugRoute,
   LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,
 }
 

package/src/routes/_layout/app.$slug.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'
+import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
+import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
+
+export const Route = createFileRoute('/_layout/app/$slug')({
+  component: RouteComponent,
+  async loader() {
+    const appCatalogLoader = await appCatalogRouteLoader()
+    return { appCatalogLoader }
+  },
+})
+
+function RouteComponent() {
+  const { queryClient, trpcClient } = Route.useRouteContext()
+  const { slug } = Route.useParams()
+
+  return (
+    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>
+      <AppCatalogPage selectedSlug={slug} />
+    </AppCatalogLayout>
+  )
+}

package/src/routes/_layout/index.tsx

@@ -5,7 +5,6 @@ import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayou
 import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 
 const searchSchema = z.object({
-  app: z.string().optional(),
   filterTag: z.string().optional(),
 })
 

package/src/ui/components/header/Header.tsx

@@ -27,6 +27,27 @@ import {
 } from '~/ui/dropdown-menu'
 import { Skeleton } from '~/ui/skeleton'
 
+function ShaSuffix({ version }: { version: VersionInfo }) {
+  if (!version.sha) return null
+  if (version.shaUrl) {
+    return (
+      <>
+        {' '}
+        <a
+          href={version.shaUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-muted-foreground hover:text-primary"
+          onClick={(e) => e.stopPropagation()}
+        >
+          ({version.sha})
+        </a>
+      </>
+    )
+  }
+  return <span className="text-muted-foreground"> ({version.sha})</span>
+}
+
 function VersionItem({
   label,
   version,
@@ -34,28 +55,30 @@ function VersionItem({
   label: string
   version: VersionInfo
 }) {
-  if (version.url) {
-    return (
-      <a
-        href={version.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-xs text-primary hover:text-primary/80 transition-colors font-medium"
-        onClick={(e) => e.stopPropagation()}
-        title={label}
-      >
-        {label}: {version.displayName}
-      </a>
-    )
-  }
+  // Outer element is a <span> (not <a>) so the optional SHA link can be a
+  // sibling anchor without producing invalid nested <a> markup.
   return (
     <span className="text-xs text-muted-foreground" title={label}>
-      {label}: {version.displayName}
+      {label}:{' '}
+      {version.url ? (
+        <a
+          href={version.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary hover:text-primary/80 transition-colors font-medium"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {version.displayName}
+        </a>
+      ) : (
+        version.displayName
+      )}
+      <ShaSuffix version={version} />
     </span>
   )
 }
 
-function VersionDisplay({ versions }: { versions: AppVersionInfo }) {
+export function VersionDisplay({ versions }: { versions: AppVersionInfo }) {
   const isLocal =
     versions.backend?.displayName === 'local' && !versions.coreVersion