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

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

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+import type {
+  AppForCatalog,
+  SubResource,
+} from '@igstack/app-catalog-backend-core'
+import { searchApps } from '~/modules/appCatalog/utils/searchApps'
+
+function makeApp(
+  overrides: Partial<AppForCatalog> & { slug: string },
+): AppForCatalog {
+  return {
+    id: overrides.slug,
+    displayName: overrides.slug,
+    ...overrides,
+  }
+}
+
+function makeSubResource(
+  overrides: Partial<SubResource> & { slug: string; appSlug: string },
+): SubResource {
+  return {
+    displayName: overrides.slug,
+    aliases: [],
+    accessMaintainerGroupSlugs: [],
+    ...overrides,
+  }
+}
+
+describe('searchApps', () => {
+  const apps: AppForCatalog[] = [
+    makeApp({
+      slug: 'jira',
+      displayName: 'Jira',
+      description: 'Issue tracker',
+    }),
+    makeApp({
+      slug: 'aws-console',
+      displayName: 'AWS Console',
+      description: 'Cloud management',
+    }),
+    makeApp({ slug: 'slack', displayName: 'Slack', description: 'Messaging' }),
+  ]
+
+  it('returns all apps when query is empty', () => {
+    expect(searchApps(apps, '')).toHaveLength(3)
+  })
+
+  it('finds app by displayName', () => {
+    const results = searchApps(apps, 'jira')
+    expect(results).toHaveLength(1)
+    expect(results[0]!.slug).toBe('jira')
+  })
+
+  describe('sub-resource search', () => {
+    const subResources: SubResource[] = [
+      makeSubResource({
+        slug: 'aws-natera-pipelines-dev',
+        displayName: 'natera-pipelines-biomarkers-ici-dev',
+        appSlug: 'aws-console',
+        aliases: ['043902793406'],
+      }),
+      makeSubResource({
+        slug: 'aws-natera-infosec-dev',
+        displayName: 'natera-infosec-dev',
+        appSlug: 'aws-console',
+        aliases: [],
+      }),
+    ]
+
+    it('finds app by sub-resource displayName', () => {
+      const results = searchApps(apps, 'pipelines biomarkers', subResources)
+      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)
+      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')
+      expect(results).toHaveLength(0)
+    })
+
+    it('direct app match ranks higher than sub-resource match', () => {
+      const results = searchApps(apps, 'aws', subResources)
+      // '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

@@ -17,6 +17,9 @@ const minimalContext: AppCatalogContextIface = {
   isLoadingApps: false,
   tagsDefinitions: [],
   approvalMethods: [],
+  persons: [],
+  groups: [],
+  subResources: [],
 }
 
 function makeApp(): AppForCatalog {

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

@@ -2,7 +2,10 @@ import type {
   AppApprovalMethod,
   AppForCatalog,
   AppVersionInfo,
+  Group,
   GroupingTagDefinition,
+  Person,
+  SubResource,
 } from '@igstack/app-catalog-backend-core'
 import { useQuery } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
@@ -15,6 +18,9 @@ export interface AppCatalogContextIface {
   isLoadingApps: boolean
   tagsDefinitions: GroupingTagDefinition[]
   approvalMethods: AppApprovalMethod[]
+  persons: Person[]
+  groups: Group[]
+  subResources?: SubResource[]
   versions?: AppVersionInfo
 }
 
@@ -38,6 +44,9 @@ export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
       isLoadingApps,
       tagsDefinitions: data?.tagsDefinitions ?? [],
       approvalMethods: data?.approvalMethods ?? [],
+      persons: data?.persons ?? [],
+      groups: data?.groups ?? [],
+      subResources: data?.subResources ?? [],
       versions: {
         ...data?.versions,
         ...(uiSettings.frontendBuildId && {
@@ -54,6 +63,9 @@ export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
       data?.approvalMethods,
       data?.apps,
       data?.tagsDefinitions,
+      data?.persons,
+      data?.groups,
+      data?.subResources,
       data?.versions,
       uiSettings.frontendBuildId,
       isLoadingApps,

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

@@ -5,7 +5,6 @@ import type {
 import { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Badge } from '~/ui/badge'
 import { Button } from '~/ui/button'
 import {
   Accordion,
@@ -21,6 +20,7 @@ import {
   TableHeader,
   TableRow,
 } from '~/ui/table'
+import { PersonBadge } from './PersonBadge'
 
 // Constants
 const COPY_FEEDBACK_DURATION = 2000
@@ -49,13 +49,17 @@ const MarkdownLink = ({
 )
 
 // Helper function for approval method icons
-function getApprovalMethodIcon(type: 'service' | 'personTeam' | 'custom') {
+function getApprovalMethodIcon(
+  type: 'service' | 'personTeam' | 'custom' | 'noAccessRequired' | 'unknown',
+) {
   switch (type) {
     case 'service':
       return <Bot className="size-5 text-primary" />
     case 'personTeam':
       return <Users className="size-5 text-primary" />
     case 'custom':
+    case 'noAccessRequired':
+    case 'unknown':
       return <Settings className="size-5 text-primary" />
   }
 }
@@ -154,7 +158,7 @@ export function AccessRequestSection({
   const { copiedId, copyToClipboard } = useCopyToClipboard()
   const accessRequest = app.accessRequest
   const approvalMethod = approvalMethods.find(
-    (m) => m.slug === accessRequest?.approvalMethodId,
+    (m) => m.slug === accessRequest?.approvalMethodSlug,
   )
 
   const handleCopyPrompt = useCallback(() => {
@@ -163,13 +167,6 @@ export function AccessRequestSection({
     }
   }, [accessRequest?.requestPrompt, copyToClipboard])
 
-  const handleCopyApproverEmail = useCallback(
-    (email: string, index: number) => {
-      copyToClipboard(email, `approver-${index}`)
-    },
-    [copyToClipboard],
-  )
-
   // Early return if no access request
   if (!accessRequest) return null
 
@@ -273,59 +270,17 @@ export function AccessRequestSection({
       )}
 
       {/* Approvers */}
-      {accessRequest.approvers && accessRequest.approvers.length > 0 && (
-        <div>
-          <h4 className="mb-2 text-sm font-medium">Approvers</h4>
-          <div className="flex flex-wrap gap-2">
-            {accessRequest.approvers.map((approver, idx) => {
-              const approverId = `approver-${idx}`
-              const isCopied = copiedId === approverId
-
-              return (
-                <Badge
-                  key={`${approver.displayName}-${idx}`}
-                  variant="outline"
-                  className="font-normal inline-flex items-center gap-1"
-                >
-                  {approver.displayName}
-                  {approver.contact && (
-                    <>
-                      <span className="text-xs opacity-70">
-                        ({approver.contact})
-                      </span>
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          handleCopyApproverEmail(approver.contact!, idx)
-                        }}
-                        className="inline-flex items-center justify-center hover:bg-accent rounded p-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1"
-                        aria-label={`Copy ${approver.displayName}'s email`}
-                        title={isCopied ? 'Copied!' : 'Copy email'}
-                      >
-                        {isCopied ? (
-                          <>
-                            <Check className="h-3 w-3 text-green-600" />
-                            <span
-                              className="sr-only"
-                              role="status"
-                              aria-live="polite"
-                            >
-                              Email copied to clipboard
-                            </span>
-                          </>
-                        ) : (
-                          <Copy className="h-3 w-3 opacity-50 hover:opacity-100" />
-                        )}
-                      </button>
-                    </>
-                  )}
-                </Badge>
-              )
-            })}
+      {accessRequest.approverPersonSlugs &&
+        accessRequest.approverPersonSlugs.length > 0 && (
+          <div>
+            <h4 className="mb-2 text-sm font-medium">Approvers</h4>
+            <div className="flex flex-wrap gap-2">
+              {accessRequest.approverPersonSlugs.map((slug) => (
+                <PersonBadge key={slug} slug={slug} />
+              ))}
+            </div>
           </div>
-        </div>
-      )}
+        )}
 
       {/* Documentation URLs */}
       {accessRequest.urls && accessRequest.urls.length > 0 && (

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

@@ -1,6 +1,6 @@
 import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
 import { AppWindowIcon, ExternalLinkIcon, XIcon } from 'lucide-react'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Badge } from '~/ui/badge'
 import { Button } from '~/ui/button'
 import { ScrollArea } from '~/ui/scroll-area'
@@ -17,6 +17,9 @@ import {
   TableRow,
 } from '~/ui/table'
 import { ScreenshotGallery } from './ScreenshotGallery'
+import { TierVariantsSection } from './TierVariantsSection'
+import { SubResourcesSection } from './SubResourcesSection'
+import { getSubResourcesForApp } from '~/modules/appCatalog/utils/resolveHelpers'
 
 export interface AppDetailModalProps {
   app: AppForCatalog
@@ -129,7 +132,7 @@ function AccessSection({ app }: { app: AppForCatalog }) {
   }
 
   const approvalMethod = approvalMethods.find(
-    (m) => accessRequest.approvalMethodId === m.slug,
+    (m) => accessRequest.approvalMethodSlug === m.slug,
   )
   if (approvalMethod?.type !== 'service') {
     return 'not service'
@@ -183,6 +186,25 @@ function AccessSection({ app }: { app: AppForCatalog }) {
   )
 }
 
+function TiersAndSubResources({ app }: { app: AppForCatalog }) {
+  const { subResources } = useAppCatalogContext()
+  const appSubResources = useMemo(
+    () => getSubResourcesForApp(subResources ?? [], app.slug),
+    [subResources, app.slug],
+  )
+
+  return (
+    <>
+      {app.tiers && app.tiers.length > 0 && (
+        <TierVariantsSection tiers={app.tiers} />
+      )}
+      {appSubResources.length > 0 && (
+        <SubResourcesSection subResources={appSubResources} />
+      )}
+    </>
+  )
+}
+
 export function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps) {
   // Close on Escape key — but only if no inner layer (gallery) is handling it
   useEffect(() => {
@@ -271,8 +293,8 @@ export function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps) {
               {/* Access Section */}
               <AccessSection app={app} />
 
-              {/* Approval Details Section - TODO: Update to use new approval system */}
-              {/* {app.accessRequest && <AccessRequestSection accessRequest={app.accessRequest} />} */}
+              {/* Tier Variants and Sub-Resources */}
+              <TiersAndSubResources app={app} />
 
               {/* Tags */}
               {app.tags && app.tags.length > 0 && (

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

@@ -0,0 +1,69 @@
+import { Check, Copy, User } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Badge } from '~/ui/badge'
+import { useAppCatalogContext } from '~/modules/appCatalog'
+import { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'
+
+interface PersonBadgeProps {
+  slug: string
+}
+
+export function PersonBadge({ slug }: PersonBadgeProps) {
+  const { persons } = useAppCatalogContext()
+  const person = getPersonBySlug(persons, slug)
+
+  const displayName = person
+    ? `${person.firstName} ${person.lastName}`.trim() || slug
+    : slug
+
+  const email = person?.email
+
+  return (
+    <Badge
+      variant="outline"
+      className="font-normal inline-flex items-center gap-1"
+      title={email ? `${displayName} (${email})` : displayName}
+    >
+      <User className="size-3" />
+      {displayName}
+      {email && <CopyEmailButton email={email} />}
+    </Badge>
+  )
+}
+
+function CopyEmailButton({ email }: { email: string }) {
+  const [copied, setCopied] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  const handleCopy = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      navigator.clipboard.writeText(email)
+      setCopied(true)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = setTimeout(() => setCopied(false), 2000)
+    },
+    [email],
+  )
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="ml-0.5 hover:text-primary transition-colors"
+      title={copied ? 'Copied!' : `Copy ${email}`}
+      type="button"
+    >
+      {copied ? (
+        <Check className="size-3 text-green-600" />
+      ) : (
+        <Copy className="size-3" />
+      )}
+    </button>
+  )
+}

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

@@ -0,0 +1,214 @@
+import type { SubResource } from '@igstack/app-catalog-backend-core'
+import { Search } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { Badge } from '~/ui/badge'
+import { Input } from '~/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+import { PersonBadge } from './PersonBadge'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/ui/select'
+import { useAppCatalogContext } from '~/modules/appCatalog'
+import { getGroupBySlug } from '~/modules/appCatalog/utils/resolveHelpers'
+
+interface SubResourcesSectionProps {
+  subResources: SubResource[]
+}
+
+function getTierBadgeVariant(
+  tierSlug: string,
+): 'default' | 'secondary' | 'destructive' | 'outline' {
+  if (tierSlug === 'prod' || tierSlug === 'production') return 'destructive'
+  if (tierSlug === 'dev' || tierSlug === 'staging') return 'secondary'
+  if (tierSlug === 'preprod') return 'outline'
+  if (tierSlug === 'sandbox') return 'outline'
+  return 'outline'
+}
+
+function getTierBadgeClassName(tierSlug: string): string {
+  if (tierSlug === 'preprod')
+    return 'border-amber-400 bg-amber-100 text-amber-800 hover:bg-amber-200'
+  if (tierSlug === 'sandbox')
+    return 'border-gray-400 bg-gray-100 text-gray-700 hover:bg-gray-200'
+  return ''
+}
+
+function getTierDisplayLabel(tierSlug: string): string {
+  if (tierSlug === 'preprod') return 'Pre-Prod'
+  if (tierSlug === 'sandbox') return 'Sandbox'
+  if (tierSlug === 'prod' || tierSlug === 'production') return 'Prod'
+  if (tierSlug === 'dev') return 'Dev'
+  if (tierSlug === 'staging') return 'Staging'
+  return tierSlug
+}
+
+export function SubResourcesSection({
+  subResources,
+}: SubResourcesSectionProps) {
+  const { groups } = useAppCatalogContext()
+  const [search, setSearch] = useState('')
+  const [tierFilter, setTierFilter] = useState<string>('all')
+
+  const uniqueTiers = useMemo(() => {
+    const tiers = new Set<string>()
+    for (const sr of subResources) {
+      if (sr.tierSlug) tiers.add(sr.tierSlug)
+    }
+    return [...tiers].sort()
+  }, [subResources])
+
+  const filtered = useMemo(() => {
+    let result = subResources
+
+    if (tierFilter !== 'all') {
+      result = result.filter((sr) => sr.tierSlug === tierFilter)
+    }
+
+    if (search.trim()) {
+      const q = search.trim().toLowerCase()
+      result = result.filter(
+        (sr) =>
+          sr.displayName.toLowerCase().includes(q) ||
+          sr.aliases.some((a) => a.toLowerCase().includes(q)) ||
+          (sr.description?.toLowerCase().includes(q) ?? false),
+      )
+    }
+
+    return result
+  }, [subResources, search, tierFilter])
+
+  if (subResources.length === 0) return null
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="text-sm font-medium">
+          Sub-Resources ({filtered.length} of {subResources.length})
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+          <Input
+            placeholder="Search resources by name or alias..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+        {uniqueTiers.length > 1 && (
+          <Select value={tierFilter} onValueChange={setTierFilter}>
+            <SelectTrigger className="w-[130px] h-9">
+              <SelectValue placeholder="All tiers" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All tiers</SelectItem>
+              {uniqueTiers.map((tier) => (
+                <SelectItem key={tier} value={tier}>
+                  {tier}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="rounded-lg border max-h-[400px] overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead className="w-[80px]">Tier</TableHead>
+              <TableHead>Owner</TableHead>
+              <TableHead>Access Contacts</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filtered.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="text-center text-muted-foreground py-8"
+                >
+                  No resources match your filters
+                </TableCell>
+              </TableRow>
+            ) : (
+              filtered.map((sr) => {
+                // Resolve maintainer group members
+                const maintainerMembers = sr.accessMaintainerGroupSlugs.flatMap(
+                  (groupSlug) => {
+                    const group = getGroupBySlug(groups, groupSlug)
+                    return group?.memberSlugs ?? []
+                  },
+                )
+                // Deduplicate
+                const uniqueMaintainers = [...new Set(maintainerMembers)]
+
+                return (
+                  <TableRow key={sr.slug}>
+                    <TableCell>
+                      <div className="font-medium text-sm">
+                        {sr.displayName}
+                      </div>
+                      {sr.aliases.length > 0 && (
+                        <div className="text-xs text-muted-foreground mt-0.5">
+                          {sr.aliases.join(', ')}
+                        </div>
+                      )}
+                      {sr.description && (
+                        <div className="text-xs text-muted-foreground mt-0.5">
+                          {sr.description}
+                        </div>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {sr.tierSlug && (
+                        <Badge
+                          variant={getTierBadgeVariant(sr.tierSlug)}
+                          className={`text-xs ${getTierBadgeClassName(sr.tierSlug)}`}
+                        >
+                          {getTierDisplayLabel(sr.tierSlug)}
+                        </Badge>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {sr.ownerPersonSlug && (
+                        <PersonBadge slug={sr.ownerPersonSlug} />
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {uniqueMaintainers.length > 0 ? (
+                        <div className="flex flex-wrap gap-1">
+                          {uniqueMaintainers.map((personSlug) => (
+                            <PersonBadge key={personSlug} slug={personSlug} />
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground">-</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}