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

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

@@ -0,0 +1,212 @@
+import type {
+  AppAccessRequest,
+  AppApprovalMethod,
+  AppTierVariant,
+} from '@igstack/app-catalog-backend-core'
+import { Bot, ExternalLinkIcon, Settings, Users } from 'lucide-react'
+import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Badge } from '~/ui/badge'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+import { useAppCatalogContext } from '~/modules/appCatalog'
+import { PersonBadge } from './PersonBadge'
+
+interface TierVariantsSectionProps {
+  tiers: AppTierVariant[]
+}
+
+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
+}
+
+function getAccessIcon(type: string): React.ReactNode {
+  switch (type) {
+    case 'service':
+      return <Bot className="size-4 text-primary shrink-0" />
+    case 'personTeam':
+      return <Users className="size-4 text-primary shrink-0" />
+    default:
+      return <Settings className="size-4 text-primary shrink-0" />
+  }
+}
+
+/** Compact inline access detail for a tier row */
+function TierAccessDetail({
+  accessRequest,
+  methods,
+}: {
+  accessRequest: AppAccessRequest
+  methods: AppApprovalMethod[]
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const method = methods.find(
+    (m) => m.slug === accessRequest.approvalMethodSlug,
+  )
+
+  const hasExtra =
+    accessRequest.comments ||
+    accessRequest.urls?.length ||
+    accessRequest.approverPersonSlugs?.length ||
+    accessRequest.postApprovalInstructions
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-1.5">
+        {method && getAccessIcon(method.type)}
+        {method?.type === 'service' && method.config.url ? (
+          <a
+            href={method.config.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-primary hover:underline inline-flex items-center gap-1"
+          >
+            {method.displayName}
+            <ExternalLinkIcon className="size-3" />
+          </a>
+        ) : (
+          <span className="text-sm">
+            {method?.displayName ?? accessRequest.approvalMethodSlug}
+          </span>
+        )}
+        {hasExtra && (
+          <button
+            type="button"
+            onClick={() => setExpanded(!expanded)}
+            className="text-xs text-muted-foreground hover:text-primary ml-1"
+          >
+            {expanded ? 'less' : 'more...'}
+          </button>
+        )}
+      </div>
+      {expanded && (
+        <div className="pl-5 space-y-1.5 text-xs">
+          {accessRequest.comments && (
+            <div className="text-muted-foreground prose prose-xs max-w-none">
+              <ReactMarkdown>{accessRequest.comments}</ReactMarkdown>
+            </div>
+          )}
+          {accessRequest.urls && accessRequest.urls.length > 0 && (
+            <div className="flex flex-col gap-0.5">
+              {accessRequest.urls.map((urlObj, idx) => (
+                <a
+                  key={`${urlObj.url}-${idx}`}
+                  href={urlObj.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline inline-flex items-center gap-1"
+                >
+                  {urlObj.label || urlObj.url.replace(/^https?:\/\//, '')}
+                  <ExternalLinkIcon className="size-3" />
+                </a>
+              ))}
+            </div>
+          )}
+          {accessRequest.approverPersonSlugs &&
+            accessRequest.approverPersonSlugs.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {accessRequest.approverPersonSlugs.map((slug) => (
+                  <PersonBadge key={slug} slug={slug} />
+                ))}
+              </div>
+            )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function TierVariantsSection({ tiers }: TierVariantsSectionProps) {
+  const { approvalMethods } = useAppCatalogContext()
+
+  if (tiers.length === 0) return null
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm font-medium">Environment Tiers</div>
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Tier</TableHead>
+              <TableHead>Name</TableHead>
+              <TableHead>URL</TableHead>
+              <TableHead>Access</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tiers.map((tier) => (
+              <TableRow key={tier.tierSlug}>
+                <TableCell>
+                  <Badge
+                    variant={getTierBadgeVariant(tier.tierSlug)}
+                    className={getTierBadgeClassName(tier.tierSlug)}
+                  >
+                    {getTierDisplayLabel(tier.tierSlug)}
+                  </Badge>
+                </TableCell>
+                <TableCell className="font-medium">
+                  {tier.displayName ?? tier.tierSlug}
+                </TableCell>
+                <TableCell>
+                  {tier.appUrl ? (
+                    <a
+                      href={tier.appUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-primary hover:underline inline-flex items-center gap-1"
+                    >
+                      {tier.appUrl.replace(/^https?:\/\//, '')}
+                      <ExternalLinkIcon className="size-3" />
+                    </a>
+                  ) : (
+                    <span className="text-muted-foreground">-</span>
+                  )}
+                </TableCell>
+                <TableCell>
+                  {tier.accessRequest ? (
+                    <TierAccessDetail
+                      accessRequest={tier.accessRequest}
+                      methods={approvalMethods}
+                    />
+                  ) : (
+                    <span className="text-muted-foreground">Same as app</span>
+                  )}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

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

@@ -37,6 +37,9 @@ import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation'
 import { highlightText } from '../../utils/searchApps'
+import { TierVariantsSection } from '../components/TierVariantsSection'
+import { SubResourcesSection } from '../components/SubResourcesSection'
+import { getSubResourcesForApp } from '../../utils/resolveHelpers'
 
 export interface AppCatalogGridProps {
   apps: AppForCatalog[]
@@ -169,6 +172,29 @@ function AppScreenshot({ app }: { app: AppForCatalog }) {
   )
 }
 
+function TiersAndSubResourcesPanel({ app }: { app: AppForCatalog }) {
+  const { subResources } = useAppCatalogContext()
+  const appSubResources = React.useMemo(
+    () => getSubResourcesForApp(subResources ?? [], app.slug),
+    [subResources, app.slug],
+  )
+
+  return (
+    <>
+      {app.tiers && app.tiers.length > 0 && (
+        <div className="mt-6">
+          <TierVariantsSection tiers={app.tiers} />
+        </div>
+      )}
+      {appSubResources.length > 0 && (
+        <div className="mt-6">
+          <SubResourcesSection subResources={appSubResources} />
+        </div>
+      )}
+    </>
+  )
+}
+
 function AppDetails({
   app,
   onAppClick,
@@ -405,6 +431,9 @@ function AppDetails({
         {/* Access Request Section */}
         <AccessRequestSection app={app} approvalMethods={approvalMethods} />
 
+        {/* Tier Variants and Sub-Resources */}
+        <TiersAndSubResourcesPanel app={app} />
+
         {/* Links */}
         {app.links && app.links.length > 0 && (
           <div className="mt-4">
@@ -691,6 +720,33 @@ export function AppCatalogGrid({
     onAppClick,
   })
 
+  // Build a map of appSlug -> matched sub-resource displayName for search annotation
+  const { subResources: allSubResources } = useAppCatalogContext()
+  const matchedSubResourceMap = React.useMemo(() => {
+    const map = new Map<string, string>()
+    if (!searchQuery?.trim() || !allSubResources?.length) return map
+    const queryTerms = searchQuery
+      .trim()
+      .toLowerCase()
+      .split(/\s+/)
+      .filter(Boolean)
+    const allTermsMatch = (text: string): boolean =>
+      queryTerms.every((term) => text.includes(term))
+
+    for (const sr of allSubResources) {
+      if (map.has(sr.appSlug)) continue
+      const nameMatch = allTermsMatch(sr.displayName.toLowerCase())
+      const aliasMatch = sr.aliases.some((a) => allTermsMatch(a.toLowerCase()))
+      const descMatch = sr.description
+        ? allTermsMatch(sr.description.toLowerCase())
+        : false
+      if (nameMatch || aliasMatch || descMatch) {
+        map.set(sr.appSlug, sr.displayName)
+      }
+    }
+    return map
+  }, [searchQuery, allSubResources])
+
   // Define columns
   const columns = React.useMemo<ColumnDef<AppForCatalog>[]>(
     () => [
@@ -746,16 +802,24 @@ export function AppCatalogGrid({
         id: 'description',
         header: 'Description',
         cell: ({ row }) => (
-          <span className="text-sm text-muted-foreground line-clamp-2">
-            <HighlightedText
-              text={row.original.description || '—'}
-              searchQuery={searchQuery}
-            />
-          </span>
+          <div>
+            <span className="text-sm text-muted-foreground line-clamp-2">
+              <HighlightedText
+                text={row.original.description || '—'}
+                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>
+            )}
+          </div>
         ),
       },
     ],
-    [searchQuery],
+    [searchQuery, matchedSubResourceMap],
   )
 
   // Create a single table instance with all apps

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

@@ -21,7 +21,8 @@ import { FilterBar } from '../filters/FilterBar'
 import { AppCatalogGrid } from '../grid/AppCatalogGrid'
 
 export function AppCatalogPage() {
-  const { apps, isLoadingApps, tagsDefinitions } = useAppCatalogContext()
+  const { apps, isLoadingApps, tagsDefinitions, subResources } =
+    useAppCatalogContext()
   const { state: filterState, actions } = useAppCatalogFilters()
   const { getTopApps } = useAppClickHistory()
 
@@ -75,7 +76,7 @@ export function AppCatalogPage() {
     }
 
     // Step 3: Apply search (using deferred value)
-    result = searchApps(result, deferredSearchValue)
+    result = searchApps(result, deferredSearchValue, subResources)
 
     return result
   }, [
@@ -85,6 +86,7 @@ export function AppCatalogPage() {
     filterState.tagFilters,
     filterState.showDeprecated,
     topAppSlugs,
+    subResources,
   ])
 
   // Calculate counts for FilterBar

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

@@ -0,0 +1,26 @@
+import type {
+  Group,
+  Person,
+  SubResource,
+} from '@igstack/app-catalog-backend-core'
+
+export function getPersonBySlug(
+  persons: Person[],
+  slug: string,
+): Person | undefined {
+  return persons.find((p) => p.slug === slug)
+}
+
+export function getGroupBySlug(
+  groups: Group[],
+  slug: string,
+): Group | undefined {
+  return groups.find((g) => g.slug === slug)
+}
+
+export function getSubResourcesForApp(
+  subResources: SubResource[],
+  appSlug: string,
+): SubResource[] {
+  return subResources.filter((sr) => sr.appSlug === appSlug)
+}

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

@@ -1,4 +1,7 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type {
+  AppForCatalog,
+  SubResource,
+} from '@igstack/app-catalog-backend-core'
 
 export interface SearchMatch {
   /** Field where the match occurred */
@@ -10,6 +13,7 @@ export interface SearchMatch {
     | 'tags'
     | 'teams'
     | 'description'
+    | 'subResource'
   /** Type of match */
   type: 'exact' | 'prefix' | 'contains'
 }
@@ -44,6 +48,7 @@ export interface SearchResult {
 export function searchApps(
   apps: AppForCatalog[],
   searchQuery: string,
+  subResources?: SubResource[],
 ): AppForCatalog[] {
   const normalizedQuery = searchQuery.trim().toLowerCase()
 
@@ -51,6 +56,23 @@ export function searchApps(
     return apps
   }
 
+  // Split query into terms for multi-word matching (AND logic)
+  const queryTerms = normalizedQuery.split(/\s+/).filter(Boolean)
+
+  // Helper: all terms appear in the text (order-independent)
+  const allTermsMatch = (text: string): boolean =>
+    queryTerms.every((term) => text.includes(term))
+
+  // Build sub-resource lookup: appSlug -> SubResource[]
+  const subResourcesByApp = new Map<string, SubResource[]>()
+  if (subResources) {
+    for (const sr of subResources) {
+      const list = subResourcesByApp.get(sr.appSlug) ?? []
+      list.push(sr)
+      subResourcesByApp.set(sr.appSlug, list)
+    }
+  }
+
   // Filter and score apps
   const scoredApps = apps
     .map((app): SearchResult | null => {
@@ -111,16 +133,32 @@ export function searchApps(
         return { app, match: { field: 'tags', type: 'contains' } }
       }
 
-      // Check teams
-      if (teams.includes(normalizedQuery)) {
+      // Check teams (multi-word)
+      if (allTermsMatch(teams)) {
         return { app, match: { field: 'teams', type: 'contains' } }
       }
 
-      // Check description
-      if (description.includes(normalizedQuery)) {
+      // Check description (multi-word)
+      if (allTermsMatch(description)) {
         return { app, match: { field: 'description', type: 'contains' } }
       }
 
+      // Check sub-resources (name, aliases, description) — supports multi-word queries
+      const appSubResources = subResourcesByApp.get(app.slug)
+      if (appSubResources) {
+        const subMatch = appSubResources.some(
+          (sr) =>
+            allTermsMatch(sr.displayName.toLowerCase()) ||
+            sr.aliases.some((a) => allTermsMatch(a.toLowerCase())) ||
+            (sr.description
+              ? allTermsMatch(sr.description.toLowerCase())
+              : false),
+        )
+        if (subMatch) {
+          return { app, match: { field: 'subResource', type: 'contains' } }
+        }
+      }
+
       // No match found
       return null
     })
@@ -154,7 +192,8 @@ export function searchApps(
       else if (match.field === 'nicknames') score = 10
       else if (match.field === 'tags') score = 11
       else if (match.field === 'teams') score = 12
-      else score = 13 // description
+      else if (match.field === 'subResource') score = 13
+      else score = 14 // description
     }
 
     scoreMap.set(app.id, score)