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

package/src/__tests__/integration/mock-backend/magazines.ts

@@ -32,19 +32,19 @@ function fullMagazine(
     const { backendCfg, browserStateCfg } = ctx
 
     // Approval methods — all 3 types
-    const helpdesk = backendCfg.withApprovalMethod({
-      slug: 'it-helpdesk',
+    const supportPortal = backendCfg.withApprovalMethod({
+      slug: 'it-support',
       type: 'service',
-      displayName: 'IT Help Desk',
+      displayName: 'Support Portal',
       config: {
-        url: 'https://helpdesk.example.com',
-        description: 'IT Infrastructure support desk',
+        url: 'https://support.example.com',
+        description: 'General IT support desk',
       },
     })
     backendCfg.withApprovalMethod({
-      slug: 'ops-helpdesk',
+      slug: 'ops-support',
       type: 'service',
-      displayName: 'Ops Helpdesk',
+      displayName: 'Ops Portal',
       config: { url: 'https://opsdesk.example.com' },
     })
     const managerApproval = backendCfg.withApprovalMethod({
@@ -91,25 +91,25 @@ function fullMagazine(
 
     // Apps
     backendCfg.withApp({
-      slug: 'jira',
-      displayName: 'Jira',
+      slug: 'taskflow',
+      displayName: 'TaskFlow',
       description: 'Project tracking and issue management',
       tags: ['category:project-management', 'team:engineering'],
-      screenshotIds: ['ss-jira-1', 'ss-jira-2', 'ss-jira-3'],
-      appUrl: 'https://jira.example.com',
+      screenshotIds: ['ss-taskflow-1', 'ss-taskflow-2', 'ss-taskflow-3'],
+      appUrl: 'https://taskflow.example.com',
       accessRequest: {
-        approvalMethodSlug: helpdesk.slug,
+        approvalMethodSlug: supportPortal.slug,
         comments: 'Submit a ticket',
       },
     })
 
     backendCfg.withApp({
-      slug: 'slack',
-      displayName: 'Slack',
+      slug: 'teamchat',
+      displayName: 'TeamChat',
       description: 'Team messaging and collaboration',
       tags: ['category:communication', 'team:platform'],
-      screenshotIds: ['ss-slack-1'],
-      appUrl: 'https://slack.example.com',
+      screenshotIds: ['ss-teamchat-1'],
+      appUrl: 'https://teamchat.example.com',
     })
 
     const newTool = backendCfg.withApp({
@@ -183,10 +183,10 @@ function singleMagazine(postConfigure?: Magazine): Magazine {
     const { backendCfg } = ctx
 
     const method = backendCfg.withApprovalMethod({
-      slug: 'it-helpdesk',
+      slug: 'it-support',
       type: 'service',
-      displayName: 'IT Help Desk',
-      config: { url: 'https://helpdesk.example.com' },
+      displayName: 'Support Portal',
+      config: { url: 'https://support.example.com' },
     })
 
     backendCfg.withTag({
@@ -203,12 +203,12 @@ function singleMagazine(postConfigure?: Magazine): Magazine {
     })
 
     backendCfg.withApp({
-      slug: 'jira',
-      displayName: 'Jira',
+      slug: 'taskflow',
+      displayName: 'TaskFlow',
       description: 'Project tracking and issue management',
       tags: ['category:project-management'],
-      screenshotIds: ['screenshot-jira-1', 'screenshot-jira-2'],
-      appUrl: 'https://jira.example.com',
+      screenshotIds: ['screenshot-taskflow-1', 'screenshot-taskflow-2'],
+      appUrl: 'https://taskflow.example.com',
       accessRequest: {
         approvalMethodSlug: method.slug,
         comments: 'Submit a ticket to IT',
@@ -227,7 +227,7 @@ export const magazine = {
   /** No apps, no tags, no approval methods */
   empty: (() => {}) satisfies Magazine,
 
-  /** 1 app (Jira), 1 tag, 1 approval method — accepts optional post-configurer */
+  /** 1 app (TaskFlow), 1 tag, 1 approval method — accepts optional post-configurer */
   single: (postConfigure?: Magazine) => singleMagazine(postConfigure),
 
   /** Full catalog, first-time user — accepts optional post-configurer */

package/src/__tests__/integration/replacementLink.integration.test.ts

@@ -44,13 +44,13 @@ describe('Deprecated app "View replacement" link (#12)', () => {
     // Hard navigation: /app/<slug> should render the app regardless of a
     // non-matching active search (browser-URL-like behavior).
     const { ui } = await given(magazine.full(), {
-      initialRoute: '/app/jira',
+      initialRoute: '/app/taskflow',
       seedSearch: 'zzz-no-match-zzz',
     })
 
     await waitFor(() => {
       expect(ui.catalog.isDetailPanelOpen()).toBe(true)
     })
-    expect(ui.app.getOpenTitle()).toContain('Jira')
+    expect(ui.app.getOpenTitle()).toContain('TaskFlow')
   })
 })

package/src/__tests__/integration/searchDeprecatedFallback.integration.test.ts

@@ -31,12 +31,12 @@ describe('Search fallback to deprecated apps (#11)', () => {
   it('does not show the fallback notice when the query has an active match', async () => {
     const { ui } = await given(magazine.full(), {
       initialRoute: '/',
-      seedSearch: 'Jira',
+      seedSearch: 'TaskFlow',
     })
 
     await waitFor(() => {
       const names = ui.catalog.getTableData().map((r) => r.name)
-      expect(names).toContain('Jira')
+      expect(names).toContain('TaskFlow')
     })
     // Active match exists → no deprecated-fallback notice.
     expect(ui.catalog.hasDeprecatedFallbackNotice()).toBe(false)

package/src/__tests__/integration/serviceDesks.integration.test.ts

@@ -8,7 +8,7 @@ import { magazine } from './mock-backend/magazines'
 
 // #9: a header toggle (Apps | Service Desks) + a /service-desks route showing a
 // searchable table of all type:'service' approval methods with open links.
-// magazine.full() seeds two service desks (IT Help Desk, Ops Helpdesk) and
+// magazine.full() seeds two service desks (Support Portal, Ops Portal) and
 // two custom methods (Manager Approval, Self-Service) which must NOT appear.
 
 function serviceDeskTable(): HTMLElement {
@@ -37,23 +37,29 @@ describe('Service Desks view (#9)', () => {
     })
 
     const names = deskNames()
-    expect(names).toContain('IT Help Desk')
-    expect(names).toContain('Ops Helpdesk')
+    expect(names).toContain('Support Portal')
+    expect(names).toContain('Ops Portal')
     // custom-type methods are not service desks
     expect(names).not.toContain('Manager Approval')
     expect(names).not.toContain('Self-Service')
 
-    // Each service desk row has a link to its portal opening in a new tab.
+    // Each service desk row has links to its portal opening in a new tab.
+    // The name itself is now also a link, plus the URL is shown under the name.
     const itRow = within(serviceDeskTable())
       .getAllByRole('row')
-      .find((r) => r.textContent.includes('IT Help Desk'))!
-    const link = within(itRow).getByRole('link')
-    expect(link).toHaveAttribute('href', 'https://helpdesk.example.com')
-    expect(link).toHaveAttribute('target', '_blank')
-    // The link shows the full URL without the scheme, not generic "Open" text.
-    expect(link).toHaveTextContent('helpdesk.example.com')
-    expect(link).not.toHaveTextContent('Open')
-    expect(link).not.toHaveTextContent('https://')
+      .find((r) => r.textContent.includes('Support Portal'))!
+    const links = within(itRow).getAllByRole('link')
+    // All links in the row point to the same portal URL
+    for (const link of links) {
+      expect(link).toHaveAttribute('href', 'https://support.example.com')
+      expect(link).toHaveAttribute('target', '_blank')
+    }
+    // At least one link shows the URL without the scheme
+    const urlLink = links.find((l) =>
+      String(l.textContent).includes('support.example.com'),
+    )
+    expect(urlLink).toBeTruthy()
+    expect(urlLink).not.toHaveTextContent('https://')
   })
 
   it('shows the service desk description as subtext when present', async () => {
@@ -65,19 +71,20 @@ describe('Service Desks view (#9)', () => {
       expect(screen.getByLabelText('Search service desks')).toBeInTheDocument()
     })
 
-    // IT Help Desk has a description; it renders in the same name cell as subtext.
+    // Support Portal has a description; it renders in the same name cell as subtext.
     const itRow = within(serviceDeskTable())
       .getAllByRole('row')
-      .find((r) => r.textContent.includes('IT Help Desk'))!
+      .find((r) => r.textContent.includes('Support Portal'))!
     const nameCell = within(itRow).getAllByRole('cell')[0]
-    expect(nameCell).toHaveTextContent('IT Infrastructure support desk')
+    expect(nameCell).toHaveTextContent('General IT support desk')
 
-    // Ops Helpdesk has no description — its name cell shows only the name.
+    // Ops Portal has no description — its name element shows only the name
+    // (the cell also contains the URL link now, so check the name element).
     const uxRow = within(serviceDeskTable())
       .getAllByRole('row')
-      .find((r) => r.textContent.includes('Ops Helpdesk'))!
-    const uxNameCell = within(uxRow).getAllByRole('cell')[0]!
-    expect(uxNameCell.textContent.trim()).toBe('Ops Helpdesk')
+      .find((r) => r.textContent.includes('Ops Portal'))!
+    const uxNameEl = within(uxRow).getByTestId('service-desk-name')
+    expect(uxNameEl.textContent.trim()).toBe('Ops Portal')
   })
 
   it('filters the desks by search', async () => {
@@ -86,14 +93,14 @@ describe('Service Desks view (#9)', () => {
       initialRoute: '/service-desks',
     })
 
-    await waitFor(() => expect(deskNames()).toContain('Ops Helpdesk'))
+    await waitFor(() => expect(deskNames()).toContain('Ops Portal'))
 
     await user.type(screen.getByLabelText('Search service desks'), 'Ops')
 
     await waitFor(() => {
       const names = deskNames()
-      expect(names).toContain('Ops Helpdesk')
-      expect(names).not.toContain('IT Help Desk')
+      expect(names).toContain('Ops Portal')
+      expect(names).not.toContain('Support Portal')
     })
   })
 
@@ -126,14 +133,14 @@ describe('Service Desks view (#9)', () => {
 
 // #23: the header "Apps" tab must stay active while viewing an app-detail route
 // (/app/<slug>) — the detail panel is part of the Apps view. Previously the Apps
-// link was active only on the exact "/" route, so /app/quicksight highlighted
+// link was active only on the exact "/" route, so /app/taskflow highlighted
 // neither tab.
 describe('ViewToggle active tab (#23)', () => {
   const appsTab = () => screen.getByRole('link', { name: 'Apps' })
   const deskTab = () => screen.getByRole('link', { name: 'Service Desks' })
 
   it('activates the Apps tab on an app-detail route (/app/$slug)', async () => {
-    await given(magazine.full(), { initialRoute: '/app/jira' })
+    await given(magazine.full(), { initialRoute: '/app/taskflow' })
 
     await waitFor(() =>
       expect(appsTab()).toHaveAttribute('aria-current', 'page'),

package/src/__tests__/integration/tools/AppDetailTools.ts

@@ -152,6 +152,63 @@ export class AppDetailTools {
     return panel.querySelector('.text-2xl')?.textContent.trim() ?? ''
   }
 
+  /**
+   * The prominent primary "Open" button in the app detail card.
+   * Returns the anchor element when the app has an appUrl, null otherwise.
+   */
+  getOpenButton(): HTMLAnchorElement | null {
+    const panel = this.getPanel()
+    return (
+      panel.querySelector<HTMLAnchorElement>('[aria-label^="Open "]') ?? null
+    )
+  }
+
+  /**
+   * Get sub-resource detail panel data when a sub-resource is selected.
+   * Returns null if the sub-resource detail panel is not shown.
+   */
+  getSubResourceDetail(): {
+    subResourceName: string
+    hasStep1: boolean
+    hasStep2: boolean
+    backButtonLabel: string | null
+  } | null {
+    const panel = document.querySelector<HTMLElement>(
+      '[aria-label^="Back to "]',
+    )
+    if (!panel) return null
+
+    const backButtonEl = document.querySelector<HTMLElement>(
+      '[aria-label^="Back to "]',
+    )
+    const backButtonLabel = backButtonEl?.getAttribute('aria-label') ?? null
+
+    // Sub-resource name: h2 in the detail panel area
+    const h2 = document.querySelector('h2.text-xl')
+    const subResourceName = (h2?.textContent ?? '').trim()
+
+    // Step badges: circles with "1" and "2" text
+    const stepBadges = Array.from(
+      document.querySelectorAll<HTMLElement>('span.rounded-full'),
+    )
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const getText = (el: HTMLElement) => (el.textContent ?? '').trim()
+    const hasStep1 = stepBadges.some((el) => getText(el) === '1')
+    const hasStep2 = stepBadges.some((el) => getText(el) === '2')
+
+    return { subResourceName, hasStep1, hasStep2, backButtonLabel }
+  }
+
+  async clickBackToParent(): Promise<void> {
+    const backButton = document.querySelector<HTMLButtonElement>(
+      '[aria-label^="Back to "]',
+    )
+    if (!backButton) {
+      throw new Error('Back-to-parent button not found in detail panel')
+    }
+    await this.user.click(backButton)
+  }
+
   private getPanel(): HTMLElement {
     const closeButton = screen.queryByLabelText('Close details panel')
     if (!closeButton) {

package/src/__tests__/integration/tools/CatalogTools.ts

@@ -1,4 +1,4 @@
-import { screen, within } from '@testing-library/react'
+import { fireEvent, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 export interface TableRow {
@@ -45,9 +45,8 @@ export class CatalogTools {
    * Type into the search input.
    */
   async search(text: string): Promise<void> {
-    const input = this.getSearchInput()
-    await this.user.clear(input)
-    await this.user.type(input, text)
+    const input = screen.getByLabelText('Search apps')
+    fireEvent.change(input, { target: { value: text } })
   }
 
   /** The catalog search input. */
@@ -170,6 +169,80 @@ export class CatalogTools {
     return result
   }
 
+  /**
+   * Get expandable subresource rows shown under parents in search results.
+   * Returns null if no sub-rows are visible.
+   */
+  getSubResourceRows(): {
+    visible: number
+    total: number
+    hasExpandRow: boolean
+    names: string[]
+  } | null {
+    const subButtons = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        'button[class*="border-l-2"]',
+      ),
+    )
+    if (subButtons.length === 0) return null
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const getText = (el: HTMLButtonElement) => (el.textContent ?? '').trim()
+    const isExpandRow = (el: HTMLButtonElement) => getText(el).startsWith('...')
+
+    const expandButton = subButtons.find(isExpandRow)
+    const hasExpandRow = !!expandButton
+
+    let hiddenCount = 0
+    if (expandButton) {
+      const match = /\d+/.exec(getText(expandButton))
+      hiddenCount = match?.[0] ? parseInt(match[0], 10) : 0
+    }
+
+    const visibleSubs = subButtons.filter((b) => !isExpandRow(b))
+
+    return {
+      visible: visibleSubs.length,
+      total: visibleSubs.length + hiddenCount,
+      hasExpandRow,
+      names: visibleSubs.map((b) => getText(b)),
+    }
+  }
+
+  async clickSubResource(displayName: string): Promise<void> {
+    const subButtons = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        'button[class*="border-l-2"]',
+      ),
+    )
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const getText = (el: HTMLButtonElement) => (el.textContent ?? '').trim()
+    const target = subButtons.find(
+      (b) =>
+        getText(b) === displayName && !getText(b).trimStart().startsWith('...'),
+    )
+    if (!target) {
+      throw new Error(
+        `Sub-resource "${displayName}" not found in search result rows`,
+      )
+    }
+    await this.user.click(target)
+  }
+
+  async expandSubResources(): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const getText = (el: HTMLButtonElement) => (el.textContent ?? '').trim()
+    const expandButtons = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(
+        'button[class*="border-l-2"]',
+      ),
+    ).filter((b) => getText(b).trimStart().startsWith('...'))
+    if (expandButtons.length === 0) {
+      throw new Error('No expand ("...N more") button found')
+    }
+    await this.user.click(expandButtons[0]!)
+  }
+
   /**
    * Get the main catalog table (first table on page, skipping sub-resource tables in detail panel).
    */

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

@@ -3,14 +3,14 @@ import { markdownToPlainText } from '~/modules/appCatalog/utils/markdownToPlainT
 
 // #25 regression: markdown-bearing text fields (descriptions) are rendered raw
 // in compact/clamped surfaces (grid list preview, table row, filter combobox,
-// sub-resources). Link syntax like `[Signatera Portal](/app/signatera-portal)`
+// sub-resources). Link syntax like `[Team Chat](/app/team-chat)`
 // leaked as literal text. In clamped previews we strip markdown to its visible
 // text so nothing leaks and `line-clamp` / search highlighting keep working.
 describe('markdownToPlainText', () => {
   it('reduces an internal link to just its text', () => {
-    expect(
-      markdownToPlainText('See [Signatera Portal](/app/signatera-portal) too'),
-    ).toBe('See Signatera Portal too')
+    expect(markdownToPlainText('See [Team Chat](/app/team-chat) too')).toBe(
+      'See Team Chat too',
+    )
   })
 
   it('reduces an external link to just its text', () => {
@@ -22,9 +22,9 @@ describe('markdownToPlainText', () => {
   it('handles multiple links in one string', () => {
     expect(
       markdownToPlainText(
-        '[Signatera Portal](/app/signatera-portal) and [Prospera Portal](/app/prospera-portal)',
+        '[Team Chat](/app/team-chat) and [Data Hub](/app/data-hub)',
       ),
-    ).toBe('Signatera Portal and Prospera Portal')
+    ).toBe('Team Chat and Data Hub')
   })
 
   it('strips image syntax to its alt text', () => {

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

@@ -39,7 +39,7 @@ describe('getAccessPrerequisiteChain (#38 two-step access)', () => {
   it('returns the access-bearing parent for a nested resource', () => {
     const parent = r({
       slug: 'aws-console',
-      accessRequest: { approvalMethodSlug: 'it-helpdesk' },
+      accessRequest: { approvalMethodSlug: 'it-support' },
     })
     const child = r({ slug: 'acct-prod', parentSlug: 'aws-console' })
     const chain = getAccessPrerequisiteChain([parent, child], child)

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

@@ -25,8 +25,8 @@ function makeChildResource(
 describe('searchResources', () => {
   const apps: Resource[] = [
     makeApp({
-      slug: 'jira',
-      displayName: 'Jira',
+      slug: 'taskflow',
+      displayName: 'TaskFlow',
       description: 'Issue tracker',
     }),
     makeApp({
@@ -34,7 +34,11 @@ describe('searchResources', () => {
       displayName: 'AWS Console',
       description: 'Cloud management',
     }),
-    makeApp({ slug: 'slack', displayName: 'Slack', description: 'Messaging' }),
+    makeApp({
+      slug: 'teamchat',
+      displayName: 'TeamChat',
+      description: 'Messaging',
+    }),
   ]
 
   it('returns all root apps when query is empty', () => {
@@ -42,16 +46,16 @@ describe('searchResources', () => {
   })
 
   it('finds app by displayName', () => {
-    const results = searchResources(apps, 'jira')
+    const results = searchResources(apps, 'taskflow')
     expect(results).toHaveLength(1)
-    expect(results[0]!.slug).toBe('jira')
+    expect(results[0]!.slug).toBe('taskflow')
   })
 
   describe('child resource search', () => {
     const childResources: Resource[] = [
       makeChildResource({
         slug: 'aws-acme-pipelines-dev',
-        displayName: 'acme-pipelines-biomarkers-ici-dev',
+        displayName: 'acme-pipelines-data-analytics-dev',
         parentSlug: 'aws-console',
         aliases: ['000000000001'],
       }),
@@ -66,7 +70,7 @@ describe('searchResources', () => {
     const allResources = [...apps, ...childResources]
 
     it('finds app by child resource displayName', () => {
-      const results = searchResources(allResources, 'pipelines biomarkers')
+      const results = searchResources(allResources, 'pipelines data-analytics')
       expect(results).toHaveLength(1)
       expect(results[0]!.slug).toBe('aws-console')
     })

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

@@ -9,7 +9,7 @@ import { getAccessPrerequisiteChain } from '../../utils/resolveHelpers'
  * the user must obtain the parent's access FIRST. That chain is invisible
  * otherwise, so surface it explicitly as ordered steps:
  *
- *   Step 1 — get access to <parent> (e.g. AWS Console via IT Helpdesk)
+ *   Step 1 — get access to <parent> (e.g. AWS Console via Support Portal)
  *   Step 2 — get access to THIS resource (contact its owner / access contacts)
  *
  * Renders nothing for root resources or children with no access-bearing parent.

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