@igstack/app-catalog-frontend-core 0.17.0 → 0.17.1-alpha-20260821043201

package/src/modules/appCatalog/ui/components/SubResourceDetailPanel.tsx

@@ -0,0 +1,124 @@
+import type {
+  AppApprovalMethod,
+  Resource,
+} from '@igstack/app-catalog-backend-core'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from '~/ui/button'
+import { Badge } from '~/ui/badge'
+import { AccessRequestSection } from './AccessRequestSection'
+
+interface SubResourceDetailPanelProps {
+  subResource: Resource
+  parent: Resource
+  approvalMethods: AppApprovalMethod[]
+  onBack: () => void
+}
+
+function StepBadge({ step }: { step: number }) {
+  return (
+    <span className="inline-flex items-center justify-center size-6 rounded-full bg-primary text-primary-foreground text-xs font-semibold shrink-0">
+      {step}
+    </span>
+  )
+}
+
+export function SubResourceDetailPanel({
+  subResource,
+  parent,
+  approvalMethods,
+  onBack,
+}: SubResourceDetailPanelProps) {
+  const hasParentAccess = !!parent.accessRequest
+  const hasSubAccess = !!subResource.accessRequest
+  const hasTwoStepAccess = hasParentAccess && hasSubAccess
+  const hasAnyAccess = hasParentAccess || hasSubAccess
+
+  return (
+    <div className="flex h-full flex-col p-6">
+      {/* Back navigation */}
+      <div className="mb-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onBack}
+          className="gap-1.5 text-muted-foreground hover:text-foreground -ml-2"
+          aria-label={`Back to ${parent.displayName}`}
+        >
+          <ArrowLeft className="size-4" />
+          <span>{parent.displayName}</span>
+        </Button>
+      </div>
+
+      {/* Sub-resource title */}
+      <div className="border-b pb-4">
+        <div className="flex items-center gap-2 flex-wrap">
+          <h2 className="text-xl font-semibold">{subResource.displayName}</h2>
+          {subResource.tier && (
+            <Badge variant="outline" className="text-xs">
+              {subResource.tier}
+            </Badge>
+          )}
+        </div>
+        {subResource.description && (
+          <p className="text-sm text-muted-foreground mt-1">
+            {subResource.description}
+          </p>
+        )}
+        {(subResource.aliases ?? []).length > 0 && (
+          <p className="text-xs text-muted-foreground mt-1">
+            Also known as: {(subResource.aliases ?? []).join(', ')}
+          </p>
+        )}
+      </div>
+
+      {/* Two-step access section */}
+      {hasAnyAccess && (
+        <div className="mt-6 space-y-6">
+          <h3 className="text-sm font-medium">How to get access</h3>
+
+          {hasTwoStepAccess ? (
+            <>
+              {/* Step 1: Parent access */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <StepBadge step={1} />
+                  <span className="text-sm font-medium text-muted-foreground">
+                    {parent.displayName}
+                  </span>
+                </div>
+                <div className="pl-8">
+                  <AccessRequestSection
+                    app={parent}
+                    approvalMethods={approvalMethods}
+                  />
+                </div>
+              </div>
+
+              {/* Step 2: Sub-resource access */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <StepBadge step={2} />
+                  <span className="text-sm font-medium text-muted-foreground">
+                    {subResource.displayName}
+                  </span>
+                </div>
+                <div className="pl-8">
+                  <AccessRequestSection
+                    app={subResource}
+                    approvalMethods={approvalMethods}
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            /* Single-step: only one of them has access info */
+            <AccessRequestSection
+              app={hasParentAccess ? parent : subResource}
+              approvalMethods={approvalMethods}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/modules/appCatalog/ui/components/SubResourcesSection.tsx

@@ -29,7 +29,7 @@ interface SubResourcesSectionProps {
    * Initial filter text (#38 item C). When the user reached this app by
    * searching a term that matched a sub-resource, seed the sub-resource filter
    * with that term so the matched child is revealed instead of buried in a
-   * long list (e.g. searching "biom" → open AWS Console → the biomarker
+   * long list (e.g. searching "data" → open Cloud Console → the matching
    * account is pre-filtered). Only applied when it actually matches a child.
    */
   initialSearch?: string

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

@@ -53,6 +53,7 @@ import { markdownToPlainText } from '../../utils/markdownToPlainText'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { TierVariantsSection } from '../components/TierVariantsSection'
 import { SubResourcesSection } from '../components/SubResourcesSection'
+import { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'
 import { getChildResources } from '../../utils/resolveHelpers'
 
 export interface AppCatalogGridProps {
@@ -70,6 +71,12 @@ export interface AppCatalogGridProps {
   onClearFilters?: () => void
   /** Called when the user closes the detail panel (Esc or X) — e.g. to navigate back to the catalog URL */
   onClosePanel?: () => void
+  /** Currently selected subresource slug */
+  selectedSubSlug?: string
+  /** Called when user clicks a sub-row */
+  onSubClick?: (parentSlug: string, subSlug: string) => void
+  /** Called when user clicks Back in sub detail */
+  onBackToParent?: () => void
 }
 
 function getIconUrl(iconName: string): string {
@@ -783,16 +790,21 @@ export function AppCatalogGrid({
   totalAppsCount,
   onClearFilters,
   onClosePanel,
+  selectedSubSlug,
+  onSubClick,
+  onBackToParent,
 }: AppCatalogGridProps) {
   // Full, unfiltered resource set — the detail panel must resolve the open app
   // from this, not only from the filtered `apps`. Navigating to /app/<slug>
   // (e.g. a deprecated app's "View replacement" link, or any deep link) should
   // render that app like typing the URL in the browser, regardless of the
-  // active search/filters (#12).
-  const { resources: allResourcesForDetail } = useAppCatalogContext()
+  // active search/filters (#12). Also provides approvalMethods for sub-resource panel.
+  const { resources: allResources2, approvalMethods } = useAppCatalogContext()
+
   const selectedApp = selectedAppSlug
     ? (apps.find((a) => a.slug === selectedAppSlug) ??
-      allResourcesForDetail.find((a) => a.slug === selectedAppSlug))
+      allResources2.find((a) => a.slug === selectedAppSlug && !a.parentSlug) ??
+      null)
     : null
 
   const groupedApps = groupApps(apps, groupingDefinition, hasSearch)
@@ -813,10 +825,8 @@ export function AppCatalogGrid({
   // Launch history for the secondary "open in new tab" action on each row.
   const { recordClick: recordLaunch } = useAppClickHistory()
 
-  // Build a map of parentSlug -> matched child resource displayName for search annotation
-  const { resources: allResources2 } = useAppCatalogContext()
-  const matchedSubResourceMap = React.useMemo(() => {
-    const map = new Map<string, string>()
+  const matchedSubResourcesMap = React.useMemo(() => {
+    const map = new Map<string, Resource[]>()
     if (!searchQuery?.trim() || allResources2.length === 0) return map
     const queryTerms = searchQuery
       .trim()
@@ -828,7 +838,6 @@ export function AppCatalogGrid({
 
     for (const r of allResources2) {
       if (!r.parentSlug) continue
-      if (map.has(r.parentSlug)) continue
       const nameMatch = allTermsMatch(r.displayName.toLowerCase())
       const aliasMatch = (r.aliases ?? []).some((a) =>
         allTermsMatch(a.toLowerCase()),
@@ -837,12 +846,23 @@ export function AppCatalogGrid({
         ? allTermsMatch(r.description.toLowerCase())
         : false
       if (nameMatch || aliasMatch || descMatch) {
-        map.set(r.parentSlug, r.displayName)
+        if (!map.has(r.parentSlug)) {
+          map.set(r.parentSlug, [])
+        }
+        map.get(r.parentSlug)!.push(r)
       }
     }
     return map
   }, [searchQuery, allResources2])
 
+  // Track expanded parent slugs for sub-resource rows; reset when search changes
+  const [expandedParentSlugs, setExpandedParentSlugs] = React.useState<
+    Set<string>
+  >(() => new Set())
+  React.useEffect(() => {
+    setExpandedParentSlugs(new Set())
+  }, [searchQuery])
+
   // Define columns
   const columns = React.useMemo<ColumnDef<Resource>[]>(
     () => [
@@ -909,12 +929,55 @@ export function AppCatalogGrid({
                 searchQuery={searchQuery}
               />
             </span>
-            {matchedSubResourceMap.get(row.original.slug) && (
-              <div className="text-xs text-primary mt-0.5">
-                Matched sub-resource:{' '}
-                {matchedSubResourceMap.get(row.original.slug)}
-              </div>
-            )}
+            {/* matched subs: expandable indented rows */}
+            {(matchedSubResourcesMap.get(row.original.slug)?.length ?? 0) > 0 &&
+              (() => {
+                const matchedSubs = matchedSubResourcesMap.get(
+                  row.original.slug,
+                )!
+                const COLLAPSED_LIMIT = 5
+                const isExpanded = expandedParentSlugs.has(row.original.slug)
+                const visibleSubs = isExpanded
+                  ? matchedSubs
+                  : matchedSubs.slice(0, COLLAPSED_LIMIT)
+                const hiddenCount = matchedSubs.length - COLLAPSED_LIMIT
+                return (
+                  <div className="mt-1 space-y-0.5">
+                    {visibleSubs.map((sub) => (
+                      <button
+                        key={sub.slug}
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onSubClick?.(row.original.slug, sub.slug)
+                        }}
+                        className={cn(
+                          'flex items-center gap-1.5 text-xs pl-3 border-l-2 w-full text-left py-0.5 rounded-sm hover:bg-accent/50 transition-colors',
+                          selectedSubSlug === sub.slug
+                            ? 'border-primary text-primary font-medium'
+                            : 'border-muted-foreground/30 text-muted-foreground hover:text-foreground',
+                        )}
+                      >
+                        <span>{sub.displayName}</span>
+                      </button>
+                    ))}
+                    {!isExpanded && hiddenCount > 0 && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setExpandedParentSlugs(
+                            (prev) => new Set([...prev, row.original.slug]),
+                          )
+                        }}
+                        className="text-xs pl-3 border-l-2 border-muted-foreground/30 text-muted-foreground hover:text-primary w-full text-left py-0.5"
+                      >
+                        ... {hiddenCount} more
+                      </button>
+                    )}
+                  </div>
+                )
+              })()}
           </div>
         ),
       },
@@ -947,7 +1010,15 @@ export function AppCatalogGrid({
         },
       },
     ],
-    [searchQuery, matchedSubResourceMap, recordLaunch],
+    [
+      searchQuery,
+      matchedSubResourcesMap,
+      expandedParentSlugs,
+      selectedSubSlug,
+      onSubClick,
+      setExpandedParentSlugs,
+      recordLaunch,
+    ],
   )
 
   // Create a single table instance with all apps
@@ -1123,24 +1194,47 @@ export function AppCatalogGrid({
             className="overflow-hidden"
           >
             <div className="h-full overflow-y-auto border-l bg-background pl-4">
-              {selectedApp ? (
-                <div className="relative">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="absolute top-4 right-4 z-10 hover:bg-accent"
-                    onClick={handleClosePanel}
-                    aria-label="Close details panel"
-                  >
-                    <X className="h-5 w-5" />
-                  </Button>
-                  <AppDetails
-                    app={selectedApp}
-                    onAppClick={onAppClick}
-                    onClosePanel={handleClosePanel}
-                  />
-                </div>
-              ) : null}
+              {/* selectedApp is non-null here; isPanelOpen guards this block */}
+              <div className="relative">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute top-4 right-4 z-10 hover:bg-accent"
+                  onClick={handleClosePanel}
+                  aria-label="Close details panel"
+                >
+                  <X className="h-5 w-5" />
+                </Button>
+                {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+                {selectedApp &&
+                  (() => {
+                    const app = selectedApp
+                    const selectedSub = selectedSubSlug
+                      ? allResources2.find(
+                          (r) =>
+                            r.slug === selectedSubSlug &&
+                            r.parentSlug === app.slug,
+                        )
+                      : null
+                    if (selectedSub != null) {
+                      return (
+                        <SubResourceDetailPanel
+                          subResource={selectedSub}
+                          parent={app}
+                          approvalMethods={approvalMethods}
+                          onBack={onBackToParent ?? (() => undefined)}
+                        />
+                      )
+                    }
+                    return (
+                      <AppDetails
+                        app={selectedApp}
+                        onAppClick={onAppClick}
+                        onClosePanel={handleClosePanel}
+                      />
+                    )
+                  })()}
+              </div>
             </div>
           </ResizablePanel>
         </>

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

@@ -1,7 +1,13 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { useNavigate } from '@tanstack/react-router'
+import { useNavigate, useSearch } from '@tanstack/react-router'
 import { X } from 'lucide-react'
-import { useDeferredValue, useEffect, useMemo, useState } from 'react'
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import { Button } from '~/ui/button'
 import {
   Empty,
@@ -34,6 +40,35 @@ export function AppCatalogPage({
   const selectedAppSlug = selectedSlug
 
   // Search value from context (URL-synced in AppCatalogFiltersContext)
+  const search = useSearch({ strict: false })
+  const selectedSubSlug = search.sub
+
+  const handleSubClick = useCallback(
+    (parentSlug: string, subSlug: string) => {
+      void navigate({
+        to: '/app/$slug',
+        params: { slug: parentSlug },
+        search: (prev) => ({ ...prev, sub: subSlug }),
+      })
+    },
+    [navigate],
+  )
+
+  const handleBackToParent = useCallback(() => {
+    // Return to parent app detail, clearing the sub-resource selection.
+    // selectedAppSlug is the parent slug (set by the /app/$slug route).
+    if (selectedAppSlug) {
+      void navigate({
+        to: '/app/$slug',
+        params: { slug: selectedAppSlug },
+        search: (prev) => {
+          const { sub: _sub, ...rest } = prev as Record<string, string>
+          return rest
+        },
+      })
+    }
+  }, [navigate, selectedAppSlug])
+
   const searchValue = filterState.searchValue
   const setSearchValue = actions.setSearchValue
 
@@ -214,12 +249,15 @@ export function AppCatalogPage({
   }
 
   // Adaptive-home launcher (#38): shown whenever no structural filter
-  // (recentMode / tagFilters) is active. A selected app no longer forces the
-  // old grid — instead the launcher stays as the backdrop and the app detail
-  // renders in a slide-over panel (#38 item B). The legacy grid+split-pane is
-  // reserved for the recent/tag filter views.
+  // (recentMode / tagFilters / active search) is active. A selected app no longer
+  // forces the old grid — instead the launcher stays as the backdrop and the app
+  // detail renders in a slide-over panel (#38 item B). The legacy grid+split-pane
+  // is used for recent/tag filter views AND for active search (so expandable
+  // sub-resource rows and query highlighting in AppCatalogGrid are visible).
   const showLauncherHome =
-    !filterState.recentMode && Object.keys(filterState.tagFilters).length === 0
+    !filterState.recentMode &&
+    Object.keys(filterState.tagFilters).length === 0 &&
+    !deferredSearchValue.trim()
 
   // The app whose detail slide-over is open over the launcher backdrop.
   const launcherSelectedApp = useMemo(
@@ -346,11 +384,14 @@ export function AppCatalogPage({
           <AppCatalogGrid
             apps={filteredApps}
             selectedAppSlug={selectedAppSlug}
+            selectedSubSlug={selectedSubSlug}
             groupingDefinition={groupingDefinition}
             onAppClick={handleAppClick}
             onClosePanel={() => void navigate({ to: '/' })}
+            onSubClick={handleSubClick}
+            onBackToParent={handleBackToParent}
             hasSearch={!!deferredSearchValue}
-            searchQuery={deferredSearchValue}
+            searchQuery={searchValue}
             totalAppsCount={totalAppsCount}
             onClearFilters={handleClearFilters}
           />

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

@@ -62,31 +62,59 @@ export function ServiceDesksPage() {
                 const url = desk.config.url
                 const description = desk.config.description
                 return (
-                  <TableRow key={desk.slug}>
+                  <TableRow
+                    key={desk.slug}
+                    className={
+                      url ? 'cursor-pointer hover:bg-muted/50' : undefined
+                    }
+                    onClick={
+                      url
+                        ? () =>
+                            window.open(url, '_blank', 'noopener,noreferrer')
+                        : undefined
+                    }
+                  >
                     <TableCell className="font-medium align-top">
-                      <span data-testid="service-desk-name">
-                        {desk.displayName}
-                      </span>
+                      {url ? (
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:text-primary hover:underline"
+                          data-testid="service-desk-name"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {desk.displayName}
+                        </a>
+                      ) : (
+                        <span data-testid="service-desk-name">
+                          {desk.displayName}
+                        </span>
+                      )}
                       {description && (
                         <span className="block text-xs font-normal text-muted-foreground">
                           {description}
                         </span>
                       )}
-                    </TableCell>
-                    <TableCell>
-                      {url ? (
+                      {url && (
                         <a
                           href={url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 text-primary hover:underline break-all"
+                          className="mt-0.5 inline-flex items-center gap-1 text-xs text-primary/70 hover:text-primary hover:underline"
                           title={url}
+                          onClick={(e) => e.stopPropagation()}
                         >
                           {url.replace(/^https?:\/\//, '')}
                           <ExternalLink className="size-3 shrink-0" />
                         </a>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground text-xs">
+                      {url ? (
+                        <ExternalLink className="size-4 text-primary/50" />
                       ) : (
-                        <span className="text-muted-foreground">—</span>
+                        <span>—</span>
                       )}
                     </TableCell>
                   </TableRow>

package/src/modules/appCatalog/utils/markdownToPlainText.ts

@@ -2,7 +2,7 @@
  * Reduce a short markdown string to its visible plain text.
  *
  * Descriptions may contain markdown — notably cross-reference links like
- * `[Signatera Portal](/app/signatera-portal)` (#25). The detail panel renders
+ * `[Team Chat](/app/team-chat)` (#25). The detail panel renders
  * those as interactive links via {@link MarkdownText}, but in compact / clamped
  * surfaces (grid list preview, table row, filter combobox, sub-resources) an
  * interactive link would break `line-clamp` and can't be reliably highlighted

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

@@ -15,6 +15,7 @@ const searchSchema = z.object({
   filters: z.string().optional(),
   deprecated: z.string().optional(),
   q: z.string().optional(),
+  sub: z.string().optional(),
 })
 
 export const Route = createFileRoute('/_layout/app/$slug')({

package/src/routes/_layout/catalog.apps.index.tsx

@@ -9,6 +9,7 @@ import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 const searchSchema = z.object({
   app: z.string().optional(),
   q: z.string().optional(),
+  sub: z.string().optional(),
 })
 
 export const Route = createFileRoute('/_layout/catalog/apps/')({