@igstack/app-catalog-frontend-core 0.3.1-alpha-20260405015231 → 0.3.1-alpha-20260724172703

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

@@ -1,13 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import type {
-  AppForCatalog,
-  SubResource,
-} from '@igstack/app-catalog-backend-core'
-import { searchApps } from '~/modules/appCatalog/utils/searchApps'
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import { searchResources } from '~/modules/appCatalog/utils/searchApps'
 
-function makeApp(
-  overrides: Partial<AppForCatalog> & { slug: string },
-): AppForCatalog {
+function makeApp(overrides: Partial<Resource> & { slug: string }): Resource {
   return {
     id: overrides.slug,
     displayName: overrides.slug,
@@ -15,10 +10,11 @@ function makeApp(
   }
 }
 
-function makeSubResource(
-  overrides: Partial<SubResource> & { slug: string; appSlug: string },
-): SubResource {
+function makeChildResource(
+  overrides: Partial<Resource> & { slug: string; parentSlug: string },
+): Resource {
   return {
+    id: overrides.slug,
     displayName: overrides.slug,
     aliases: [],
     accessMaintainerGroupSlugs: [],
@@ -26,8 +22,8 @@ function makeSubResource(
   }
 }
 
-describe('searchApps', () => {
-  const apps: AppForCatalog[] = [
+describe('searchResources', () => {
+  const apps: Resource[] = [
     makeApp({
       slug: 'jira',
       displayName: 'Jira',
@@ -41,51 +37,53 @@ describe('searchApps', () => {
     makeApp({ slug: 'slack', displayName: 'Slack', description: 'Messaging' }),
   ]
 
-  it('returns all apps when query is empty', () => {
-    expect(searchApps(apps, '')).toHaveLength(3)
+  it('returns all root apps when query is empty', () => {
+    expect(searchResources(apps, '')).toHaveLength(3)
   })
 
   it('finds app by displayName', () => {
-    const results = searchApps(apps, 'jira')
+    const results = searchResources(apps, 'jira')
     expect(results).toHaveLength(1)
     expect(results[0]!.slug).toBe('jira')
   })
 
-  describe('sub-resource search', () => {
-    const subResources: SubResource[] = [
-      makeSubResource({
+  describe('child resource search', () => {
+    const childResources: Resource[] = [
+      makeChildResource({
         slug: 'aws-natera-pipelines-dev',
         displayName: 'natera-pipelines-biomarkers-ici-dev',
-        appSlug: 'aws-console',
+        parentSlug: 'aws-console',
         aliases: ['043902793406'],
       }),
-      makeSubResource({
+      makeChildResource({
         slug: 'aws-natera-infosec-dev',
         displayName: 'natera-infosec-dev',
-        appSlug: 'aws-console',
+        parentSlug: 'aws-console',
         aliases: [],
       }),
     ]
 
-    it('finds app by sub-resource displayName', () => {
-      const results = searchApps(apps, 'pipelines biomarkers', subResources)
+    const allResources = [...apps, ...childResources]
+
+    it('finds app by child resource displayName', () => {
+      const results = searchResources(allResources, 'pipelines biomarkers')
       expect(results).toHaveLength(1)
       expect(results[0]!.slug).toBe('aws-console')
     })
 
-    it('finds app by sub-resource alias (account ID)', () => {
-      const results = searchApps(apps, '043902793406', subResources)
+    it('finds app by child resource alias (account ID)', () => {
+      const results = searchResources(allResources, '043902793406')
       expect(results).toHaveLength(1)
       expect(results[0]!.slug).toBe('aws-console')
     })
 
-    it('does not match sub-resources when no subResources provided', () => {
-      const results = searchApps(apps, '043902793406')
+    it('does not match child resources when none provided', () => {
+      const results = searchResources(apps, '043902793406')
       expect(results).toHaveLength(0)
     })
 
-    it('direct app match ranks higher than sub-resource match', () => {
-      const results = searchApps(apps, 'aws', subResources)
+    it('direct app match ranks higher than child resource match', () => {
+      const results = searchResources(allResources, 'aws')
       // 'aws-console' matches by displayName, should appear
       expect(results.length).toBeGreaterThanOrEqual(1)
       expect(results[0]!.slug).toBe('aws-console')

package/src/__tests__/modules/gallery/EscapeDismissal.integration.test.tsx

@@ -2,7 +2,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import { AppDetailModal } from '~/modules/appCatalog/ui/components/AppDetailModal'
 import { AppCatalogContext } from '~/modules/appCatalog/context/AppCatalogContext'
 import type { AppCatalogContextIface } from '~/modules/appCatalog/context/AppCatalogContext'
@@ -13,16 +13,15 @@ import type { AppCatalogContextIface } from '~/modules/appCatalog/context/AppCat
 // Each Escape press dismisses only the innermost active layer.
 
 const minimalContext: AppCatalogContextIface = {
-  apps: [],
+  resources: [],
   isLoadingApps: false,
   tagsDefinitions: [],
   approvalMethods: [],
   persons: [],
   groups: [],
-  subResources: [],
 }
 
-function makeApp(): AppForCatalog {
+function makeApp(): Resource {
   return {
     id: 'app-1',
     slug: 'test-app',

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

@@ -1,11 +1,10 @@
 import type {
   AppApprovalMethod,
-  AppForCatalog,
   AppVersionInfo,
   Group,
   GroupingTagDefinition,
   Person,
-  SubResource,
+  Resource,
 } from '@igstack/app-catalog-backend-core'
 import { useQuery } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
@@ -14,13 +13,12 @@ import { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'
 import { useUiSettings } from '~/context/UiSettingsContext'
 
 export interface AppCatalogContextIface {
-  apps: AppForCatalog[]
+  resources: Resource[]
   isLoadingApps: boolean
   tagsDefinitions: GroupingTagDefinition[]
   approvalMethods: AppApprovalMethod[]
   persons: Person[]
   groups: Group[]
-  subResources?: SubResource[]
   versions?: AppVersionInfo
 }
 
@@ -40,13 +38,12 @@ export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
 
   const contextValue = useMemo<AppCatalogContextIface>(
     () => ({
-      apps: data?.apps ?? [],
+      resources: data?.resources ?? [],
       isLoadingApps,
       tagsDefinitions: data?.tagsDefinitions ?? [],
       approvalMethods: data?.approvalMethods ?? [],
       persons: data?.persons ?? [],
       groups: data?.groups ?? [],
-      subResources: data?.subResources ?? [],
       versions: {
         ...data?.versions,
         ...(uiSettings.frontendBuildId && {
@@ -61,11 +58,10 @@ export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
     }),
     [
       data?.approvalMethods,
-      data?.apps,
+      data?.resources,
       data?.tagsDefinitions,
       data?.persons,
       data?.groups,
-      data?.subResources,
       data?.versions,
       uiSettings.frontendBuildId,
       isLoadingApps,

package/src/modules/appCatalog/hooks/useAppCounts.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react'
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
-import { searchApps } from '../utils/searchApps'
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import { searchResources } from '../utils/searchApps'
 import { useAppCatalogFilters } from '../ui/context/AppCatalogFiltersContext'
 
 interface UseAppCountsOptions {
-  apps: AppForCatalog[]
+  apps: Resource[]
   topAppSlugs: string[]
   searchValue: string
 }
@@ -31,7 +31,7 @@ export function useAppCounts({
     if (!filterState.showDeprecated) {
       recentApps = recentApps.filter((app) => !app.deprecated)
     }
-    return searchApps(recentApps, searchValue).length
+    return searchResources(recentApps, searchValue).length
   }, [apps, topAppSlugs, searchValue, filterState.showDeprecated])
 
   // Count for "Show All" (respects showDeprecated, tag filters, and search)
@@ -57,7 +57,7 @@ export function useAppCounts({
       })
     }
 
-    return searchApps(result, searchValue).length
+    return searchResources(result, searchValue).length
   }, [apps, filterState.tagFilters, filterState.showDeprecated, searchValue])
 
   return { recentCount, allCount, deprecatedCount }

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

@@ -1,6 +1,6 @@
 import type {
   AppApprovalMethod,
-  AppForCatalog,
+  Resource,
 } from '@igstack/app-catalog-backend-core'
 import { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -20,34 +20,17 @@ import {
   TableHeader,
   TableRow,
 } from '~/ui/table'
+import { MarkdownLink } from './MarkdownText'
 import { PersonBadge } from './PersonBadge'
 
 // Constants
 const COPY_FEEDBACK_DURATION = 2000
 
 interface AccessRequestSectionProps {
-  app: AppForCatalog
+  app: Resource
   approvalMethods: AppApprovalMethod[]
 }
 
-// Component for rendering markdown links with security attributes
-const MarkdownLink = ({
-  href,
-  children,
-}: {
-  href?: string
-  children?: React.ReactNode
-}) => (
-  <a
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-    className="text-primary hover:underline"
-  >
-    {children}
-  </a>
-)
-
 // Helper function for approval method icons
 function getApprovalMethodIcon(
   type: 'service' | 'personTeam' | 'custom' | 'noAccessRequired' | 'unknown',

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

@@ -1,4 +1,4 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import { AppWindowIcon, ExternalLinkIcon, XIcon } from 'lucide-react'
 import React, { useEffect, useMemo, useState } from 'react'
 import { Badge } from '~/ui/badge'
@@ -16,13 +16,14 @@ import {
   TableHeader,
   TableRow,
 } from '~/ui/table'
+import { MarkdownText } from './MarkdownText'
 import { ScreenshotGallery } from './ScreenshotGallery'
 import { TierVariantsSection } from './TierVariantsSection'
 import { SubResourcesSection } from './SubResourcesSection'
-import { getSubResourcesForApp } from '~/modules/appCatalog/utils/resolveHelpers'
+import { getChildResources } from '~/modules/appCatalog/utils/resolveHelpers'
 
 export interface AppDetailModalProps {
-  app: AppForCatalog
+  app: Resource
   isOpen: boolean
   onClose: () => void
 }
@@ -31,7 +32,7 @@ function getIconUrl(iconName: string): string {
   return `/api/icons/${iconName}`
 }
 
-function AppIcon({ app }: { app: AppForCatalog }) {
+function AppIcon({ app }: { app: Resource }) {
   const [imageError, setImageError] = React.useState(false)
 
   if (app.iconName && !imageError) {
@@ -52,7 +53,7 @@ function AppIcon({ app }: { app: AppForCatalog }) {
   )
 }
 
-function ScreenshotPreview({ app }: { app: AppForCatalog }) {
+function ScreenshotPreview({ app }: { app: Resource }) {
   const [imageErrors, setImageErrors] = useState<Set<string>>(() => new Set())
   const [galleryOpen, setGalleryOpen] = useState(false)
   const [initialIndex, setInitialIndex] = useState(0)
@@ -124,7 +125,7 @@ function ScreenshotPreview({ app }: { app: AppForCatalog }) {
   )
 }
 
-function AccessSection({ app }: { app: AppForCatalog }) {
+function AccessSection({ app }: { app: Resource }) {
   const { approvalMethods } = useAppCatalogContext()
   const { accessRequest } = app
   if (!accessRequest) {
@@ -186,11 +187,11 @@ function AccessSection({ app }: { app: AppForCatalog }) {
   )
 }
 
-function TiersAndSubResources({ app }: { app: AppForCatalog }) {
-  const { subResources } = useAppCatalogContext()
+function TiersAndSubResources({ app }: { app: Resource }) {
+  const { resources } = useAppCatalogContext()
   const appSubResources = useMemo(
-    () => getSubResourcesForApp(subResources ?? [], app.slug),
-    [subResources, app.slug],
+    () => getChildResources(resources, app.slug),
+    [resources, app.slug],
   )
 
   return (
@@ -286,7 +287,9 @@ export function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps) {
               {app.description && (
                 <div className="space-y-2">
                   <div className="text-sm font-medium">Description</div>
-                  <p className="text-muted-foreground">{app.description}</p>
+                  <MarkdownText className="prose prose-sm max-w-none text-muted-foreground [&_p]:m-0">
+                    {app.description}
+                  </MarkdownText>
                 </div>
               )}
 

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

@@ -0,0 +1,42 @@
+import type React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+/**
+ * Renders a markdown link with security attributes (opens in a new tab,
+ * no referrer/opener leakage). Shared so all catalog text fields render
+ * links identically.
+ */
+export const MarkdownLink = ({
+  href,
+  children,
+}: {
+  href?: string
+  children?: React.ReactNode
+}) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="text-primary hover:underline"
+  >
+    {children}
+  </a>
+)
+
+/**
+ * Renders user-facing catalog text (descriptions, comments, prompts) as
+ * markdown so links become clickable. Links use {@link MarkdownLink}.
+ */
+export function MarkdownText({
+  children,
+  className,
+}: {
+  children: string
+  className?: string
+}) {
+  return (
+    <span className={className}>
+      <ReactMarkdown components={{ a: MarkdownLink }}>{children}</ReactMarkdown>
+    </span>
+  )
+}

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

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react'
 
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 
 import { Gallery } from '~/modules/gallery/Gallery'
 import type { GalleryImage } from '~/modules/gallery/Gallery'
@@ -8,7 +8,7 @@ import { Dialog, DialogContent, DialogTitle } from '~/ui/dialog'
 import { VisuallyHidden } from '~/ui/visually-hidden'
 
 export interface ScreenshotGalleryProps {
-  app: AppForCatalog
+  app: Resource
   screenshotIds: string[]
   initialIndex?: number
   open: boolean

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

@@ -1,4 +1,4 @@
-import { useDeferredValue, useEffect, useState } from 'react'
+import { useDeferredValue, useEffect, useMemo, useState } from 'react'
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { useAppCounts } from '../../hooks/useAppCounts'
@@ -11,7 +11,11 @@ import { FilterBar } from '../filters/FilterBar'
  * Uses deferred search value to avoid blocking the input.
  */
 export function SearchAndFilterHeader() {
-  const { apps } = useAppCatalogContext()
+  const { resources } = useAppCatalogContext()
+  const apps = useMemo(
+    () => resources.filter((r) => !r.parentSlug),
+    [resources],
+  )
   const { getTopApps } = useAppClickHistory()
   const { state } = useAppCatalogFilters()
 

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

@@ -1,4 +1,4 @@
-import type { SubResource } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import { Search } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { Badge } from '~/ui/badge'
@@ -23,7 +23,7 @@ import { useAppCatalogContext } from '~/modules/appCatalog'
 import { getGroupBySlug } from '~/modules/appCatalog/utils/resolveHelpers'
 
 interface SubResourcesSectionProps {
-  subResources: SubResource[]
+  subResources: Resource[]
 }
 
 function getTierBadgeVariant(
@@ -63,7 +63,7 @@ export function SubResourcesSection({
   const uniqueTiers = useMemo(() => {
     const tiers = new Set<string>()
     for (const sr of subResources) {
-      if (sr.tierSlug) tiers.add(sr.tierSlug)
+      if (sr.tier) tiers.add(sr.tier)
     }
     return [...tiers].sort()
   }, [subResources])
@@ -72,7 +72,7 @@ export function SubResourcesSection({
     let result = subResources
 
     if (tierFilter !== 'all') {
-      result = result.filter((sr) => sr.tierSlug === tierFilter)
+      result = result.filter((sr) => sr.tier === tierFilter)
     }
 
     if (search.trim()) {
@@ -80,7 +80,7 @@ export function SubResourcesSection({
       result = result.filter(
         (sr) =>
           sr.displayName.toLowerCase().includes(q) ||
-          sr.aliases.some((a) => a.toLowerCase().includes(q)) ||
+          (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)) ||
           (sr.description?.toLowerCase().includes(q) ?? false),
       )
     }
@@ -150,12 +150,12 @@ export function SubResourcesSection({
             ) : (
               filtered.map((sr) => {
                 // Resolve maintainer group members
-                const maintainerMembers = sr.accessMaintainerGroupSlugs.flatMap(
-                  (groupSlug) => {
-                    const group = getGroupBySlug(groups, groupSlug)
-                    return group?.memberSlugs ?? []
-                  },
-                )
+                const maintainerMembers = (
+                  sr.accessMaintainerGroupSlugs ?? []
+                ).flatMap((groupSlug) => {
+                  const group = getGroupBySlug(groups, groupSlug)
+                  return group?.memberSlugs ?? []
+                })
                 // Deduplicate
                 const uniqueMaintainers = [...new Set(maintainerMembers)]
 
@@ -165,9 +165,9 @@ export function SubResourcesSection({
                       <div className="font-medium text-sm">
                         {sr.displayName}
                       </div>
-                      {sr.aliases.length > 0 && (
+                      {(sr.aliases ?? []).length > 0 && (
                         <div className="text-xs text-muted-foreground mt-0.5">
-                          {sr.aliases.join(', ')}
+                          {(sr.aliases ?? []).join(', ')}
                         </div>
                       )}
                       {sr.description && (
@@ -177,12 +177,12 @@ export function SubResourcesSection({
                       )}
                     </TableCell>
                     <TableCell>
-                      {sr.tierSlug && (
+                      {sr.tier && (
                         <Badge
-                          variant={getTierBadgeVariant(sr.tierSlug)}
-                          className={`text-xs ${getTierBadgeClassName(sr.tierSlug)}`}
+                          variant={getTierBadgeVariant(sr.tier)}
+                          className={`text-xs ${getTierBadgeClassName(sr.tier)}`}
                         >
-                          {getTierDisplayLabel(sr.tierSlug)}
+                          {getTierDisplayLabel(sr.tier)}
                         </Badge>
                       )}
                     </TableCell>

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

@@ -1,7 +1,7 @@
 import type {
   AppAccessRequest,
   AppApprovalMethod,
-  AppTierVariant,
+  TierVariant,
 } from '@igstack/app-catalog-backend-core'
 import { Bot, ExternalLinkIcon, Settings, Users } from 'lucide-react'
 import { useState } from 'react'
@@ -19,7 +19,7 @@ import { useAppCatalogContext } from '~/modules/appCatalog'
 import { PersonBadge } from './PersonBadge'
 
 interface TierVariantsSectionProps {
-  tiers: AppTierVariant[]
+  tiers: TierVariant[]
 }
 
 function getTierBadgeVariant(

package/src/modules/appCatalog/ui/filters/FilterBar.tsx

@@ -1,4 +1,4 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import { X } from 'lucide-react'
 import { useMemo } from 'react'
 import { Button } from '~/ui/button'
@@ -21,7 +21,7 @@ interface FilterBarProps {
   /** Number of deprecated apps (total) */
   deprecatedCount: number
   /** All apps for counting filter options */
-  apps: AppForCatalog[]
+  apps: Resource[]
 }
 
 /**