@igstack/app-catalog-frontend-core 6.3.1-alpha-20261003051755 → 6.5.0

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.doorAndTabs.test.tsx

@@ -0,0 +1,193 @@
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// `navigate` is captured rather than ignored. A stub that swallows the call
+// makes the url-writing side of the tabs unreachable from a test, which is how
+// a feature ends up claimed and unguarded — `?tab=` deep-linking is the whole
+// reason the active tab lives in the url, so it gets asserted here.
+const navigate = vi.fn()
+const search: Record<string, unknown> = {}
+
+vi.mock('@tanstack/react-router', () => ({
+  useSearch: vi.fn(() => search),
+  useNavigate: vi.fn(() => navigate),
+  useRouter: vi.fn(() => ({
+    state: { location: { pathname: '/app/thing', search } },
+  })),
+  Link: ({ children, ...rest }: { children?: React.ReactNode }) => (
+    <a {...rest}>{children}</a>
+  ),
+}))
+vi.mock('~/modules/appCatalog/context/AppCatalogContext', () => ({
+  useAppCatalogContext: vi.fn(() => ({ approvalMethods: [], resources: [] })),
+}))
+vi.mock('~/modules/appCatalog/hooks/useAppClickHistory', () => ({
+  useAppClickHistory: vi.fn(() => ({ recordClick: vi.fn() })),
+}))
+vi.mock('~/modules/appCatalog/hooks/useUpdateApp', () => ({
+  useUpdateApp: vi.fn(() => ({ mutate: vi.fn() })),
+}))
+vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
+  useAppCatalogFilters: vi.fn(() => ({
+    state: { searchValue: '' },
+    actions: {},
+  })),
+}))
+vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
+}))
+
+const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')
+
+const withUrl = {
+  id: 'thing',
+  slug: 'thing',
+  displayName: 'Thing',
+  description: 'Does a thing.',
+  appUrl: 'https://thing.example.com/portal',
+} as Resource
+
+const withoutUrl = {
+  id: 'quiet',
+  slug: 'quiet',
+  displayName: 'Quiet Thing',
+  description: 'Has no address on file.',
+} as Resource
+
+beforeEach(() => {
+  navigate.mockClear()
+  for (const key of Object.keys(search)) delete search[key]
+})
+
+// A third of the catalog has no `appUrl`. The header used to render a bare em
+// dash there, which reads as "the card failed" rather than "there is no
+// address" — and a surface that looks pressable but is not would be worse.
+describe('the door', () => {
+  it('is a link to the app when there is an address', () => {
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    const door = screen.getByRole('link', { name: /^Open Thing in a new tab/ })
+    expect(door).toHaveAttribute('href', 'https://thing.example.com/portal')
+    expect(door).toHaveAttribute('target', '_blank')
+    // The name and the address are INSIDE the one control, which is the whole
+    // point — the largest thing on the card is the thing you press.
+    expect(door).toHaveTextContent('Thing')
+    expect(door).toHaveTextContent('thing.example.com/portal')
+  })
+
+  it('says so plainly when the entry has no address, and offers nothing to press', () => {
+    render(<AppDetails app={withoutUrl} onClosePanel={vi.fn()} />)
+
+    expect(screen.getByText('No URL for this app.')).toBeVisible()
+    expect(screen.queryByRole('link', { name: /in a new tab/ })).toBeNull()
+  })
+})
+
+describe('the tab strip', () => {
+  // The reason the active tab lives in the url at all: a card is linkable
+  // mid-conversation, and a maintainer's reply on the notes tab is addressable.
+  it('writes the selected tab to the url', () => {
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('tab', { name: /^access/i }))
+
+    expect(navigate).toHaveBeenCalled()
+    const wroteTab = navigate.mock.calls.some(
+      ([arg]) =>
+        (arg as { search?: Record<string, unknown> }).search?.tab === 'access',
+    )
+    expect(wroteTab).toBe(true)
+  })
+
+  /**
+   * The card opens on the first tab, so naming it in `?tab=` says nothing — and it
+   * made every shared link carry a param the sender never chose. Only a tab that is
+   * NOT the default belongs in the url.
+   */
+  it('keeps the default tab out of the url', () => {
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    // Go somewhere else, then come back to the first tab.
+    fireEvent.click(screen.getByRole('tab', { name: /^access/i }))
+    navigate.mockClear()
+    fireEvent.click(screen.getByRole('tab', { name: /^overview/i }))
+
+    const wroteDefault = navigate.mock.calls.some(
+      ([arg]) =>
+        (arg as { search?: Record<string, unknown> }).search?.tab ===
+        'overview',
+    )
+    expect(
+      wroteDefault,
+      'returning to the default tab must clear ?tab=, not set it',
+    ).toBe(false)
+  })
+
+  it('opens on the tab named in the url', () => {
+    search.tab = 'documentation'
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    expect(screen.getByRole('tab', { name: 'Documentation' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+  })
+
+  // Tab ids travel in links people have already shared, so retiring one has to
+  // keep resolving rather than dropping the reader on the first tab.
+  it('still honours a retired tab id from an older link', () => {
+    search.tab = 'metadata'
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    expect(screen.getByRole('tab', { name: 'Documentation' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+  })
+
+  // A stale link, or an entry that lost its children. Falling back beats
+  // rendering a card with no panel at all.
+  it('falls back to the first tab when the url names one this entry lacks', () => {
+    search.tab = 'resources'
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    expect(screen.queryByRole('tab', { name: /resources/i })).toBeNull()
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+    expect(screen.getByRole('heading', { name: 'Description' })).toBeVisible()
+  })
+
+  // Per the tablist pattern: one stop in the tab order, arrows move within.
+  it('moves between tabs with the arrow keys', () => {
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    const overview = screen.getByRole('tab', { name: 'Overview' })
+    expect(overview).toHaveAttribute('tabindex', '0')
+
+    fireEvent.keyDown(overview, { key: 'ArrowRight' })
+
+    expect(screen.getByRole('tab', { name: /^access/i })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+    // Only the selected tab stays reachable by Tab.
+    expect(overview).toHaveAttribute('tabindex', '-1')
+  })
+
+  it('wraps from the first tab to the last', () => {
+    render(<AppDetails app={withUrl} onClosePanel={vi.fn()} />)
+
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Overview' }), {
+      key: 'ArrowLeft',
+    })
+
+    expect(
+      screen.getByRole('tab', { name: 'Notes & requests' }),
+    ).toHaveAttribute('aria-selected', 'true')
+  })
+})

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.escape.test.tsx

@@ -28,8 +28,8 @@ vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
   useAppCatalogFilters: vi.fn(() => ({ selectedTags: [], toggleTag: vi.fn() })),
 }))
 vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
-vi.mock('~/modules/appCatalog/ui/detail/CommentsSection', () => ({
-  CommentsSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
 }))
 
 const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.sectionOrder.test.tsx

@@ -1,5 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 
@@ -30,8 +30,8 @@ vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
   useAppCatalogFilters: vi.fn(() => ({ selectedTags: [], toggleTag: vi.fn() })),
 }))
 vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
-vi.mock('~/modules/appCatalog/ui/detail/CommentsSection', () => ({
-  CommentsSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
 }))
 
 const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')
@@ -47,16 +47,39 @@ const app = {
 // The description says what the app is; "How to get access" only matters once
 // you have decided you want it. Access used to render above the description, so
 // the panel opened on paperwork.
+//
+// That ordering is now a tab order rather than a DOM order — the two are never
+// mounted together — so these assert the same guarantee in the new shape: the
+// card opens on what the app IS, and the paperwork is one deliberate click
+// away. Checking that the access panel is absent until asked for is the part
+// that would have silently regressed if this test had simply been deleted.
 describe('AppDetails — section order', () => {
-  it('renders Description before the access instructions', () => {
+  it('opens on the description, with the access instructions not yet mounted', () => {
     render(<AppDetails app={app} onClosePanel={vi.fn()} />)
 
-    const description = screen.getByRole('heading', { name: 'Description' })
-    const access = screen.getByRole('heading', { name: /how to get access/i })
+    expect(screen.getByRole('heading', { name: 'Description' })).toBeVisible()
+    expect(
+      screen.queryByRole('heading', { name: /how to get access/i }),
+    ).toBeNull()
+  })
+
+  it('reaches the access instructions from its own tab', () => {
+    render(<AppDetails app={app} onClosePanel={vi.fn()} />)
+
+    fireEvent.click(screen.getByRole('tab', { name: /^access/i }))
+
+    expect(screen.getByRole('tab', { name: /^access/i })).toBeVisible()
+    expect(screen.queryByRole('heading', { name: 'Description' })).toBeNull()
+  })
+
+  // The tab has to say what the route is before it is opened. With no matching
+  // approval method registered there is nothing to name, and claiming a route
+  // we cannot describe is the failure the label exists to prevent.
+  it('names the access route in the tab', () => {
+    render(<AppDetails app={app} onClosePanel={vi.fn()} />)
 
     expect(
-      description.compareDocumentPosition(access) &
-        Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy()
+      screen.getByRole('tab', { name: /access — not documented/i }),
+    ).toBeVisible()
   })
 })

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.subResourceTab.test.tsx

@@ -0,0 +1,125 @@
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// `?sub=` is read by AppDetails (to pick the tab) AND by SubResourcesSection
+// (to single out the row), so it is set on the shared router mock rather than
+// passed in. Everything else in the data layer is stubbed; the chain under test
+// is AppDetails -> DetailTabs -> SubResourcesSection.
+const search = { sub: 'parent-two', tab: undefined as string | undefined }
+
+vi.mock('@tanstack/react-router', () => ({
+  useSearch: vi.fn(() => search),
+  useNavigate: vi.fn(() => vi.fn()),
+  useRouter: vi.fn(() => ({
+    state: { location: { pathname: '/', search: {} } },
+  })),
+  Link: ({ children, ...rest }: { children?: React.ReactNode }) => (
+    <a {...rest}>{children}</a>
+  ),
+}))
+
+const parent = {
+  id: 'parent',
+  slug: 'parent',
+  displayName: 'Parent',
+  description: 'A resource with children.',
+  childrenLabel: 'Accounts',
+} as Resource
+
+const children: Resource[] = [
+  {
+    id: 'parent-one',
+    slug: 'parent-one',
+    displayName: 'first-child',
+    parentSlug: 'parent',
+  },
+  {
+    id: 'parent-two',
+    slug: 'parent-two',
+    displayName: 'second-child',
+    parentSlug: 'parent',
+  },
+]
+
+vi.mock('~/modules/appCatalog/context/AppCatalogContext', () => ({
+  useAppCatalogContext: vi.fn(() => ({
+    approvalMethods: [],
+    resources: [parent, ...children],
+  })),
+}))
+vi.mock('~/modules/appCatalog/hooks/useAppClickHistory', () => ({
+  useAppClickHistory: vi.fn(() => ({ recordClick: vi.fn() })),
+}))
+vi.mock('~/modules/appCatalog/hooks/useUpdateApp', () => ({
+  useUpdateApp: vi.fn(() => ({ mutate: vi.fn() })),
+}))
+vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
+  useAppCatalogFilters: vi.fn(() => ({
+    state: { searchValue: '' },
+    actions: {},
+  })),
+}))
+vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
+}))
+
+const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')
+
+// Searching the catalog can match a CHILD — an account id, an alias — and
+// clicking that result opens the parent's card with `?sub=<child>`. Landing on
+// Overview and leaving the visitor to find the right tab would waste the one
+// piece of information their click carried.
+describe('AppDetails — arriving with ?sub=', () => {
+  it('opens on the children tab, not on Overview', () => {
+    render(<AppDetails app={parent} onClosePanel={vi.fn()} />)
+
+    expect(screen.getByRole('tab', { name: /accounts/i })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute(
+      'aria-selected',
+      'false',
+    )
+  })
+
+  it('singles out the matched child rather than listing its siblings', () => {
+    render(<AppDetails app={parent} onClosePanel={vi.fn()} />)
+
+    expect(screen.getByText(/Showing: second-child/)).toBeInTheDocument()
+    expect(screen.queryByText('first-child')).toBeNull()
+  })
+
+  // A link carrying both must not show one thing and claim another. `?sub=`
+  // names a specific child, which is the more specific intent, so it wins.
+  it('wins over a ?tab= that disagrees', () => {
+    search.tab = 'metadata'
+    try {
+      render(<AppDetails app={parent} onClosePanel={vi.fn()} />)
+      expect(screen.getByRole('tab', { name: /accounts/i })).toHaveAttribute(
+        'aria-selected',
+        'true',
+      )
+    } finally {
+      search.tab = undefined
+    }
+  })
+
+  it('names the tab from childrenLabel and counts the children', () => {
+    render(<AppDetails app={parent} onClosePanel={vi.fn()} />)
+
+    const tab = screen.getByRole('tab', { name: /accounts/i })
+    expect(tab).toHaveTextContent('Accounts')
+    expect(tab).toHaveTextContent('2')
+  })
+
+  it('falls back to a generic label when the parent does not name its children', () => {
+    const { childrenLabel: _omitted, ...unnamed } = parent
+    render(<AppDetails app={unnamed as Resource} onClosePanel={vi.fn()} />)
+
+    expect(screen.getByRole('tab', { name: /resources/i })).toBeVisible()
+  })
+})

package/src/__tests__/modules/appCatalog/ui/detail/AppDetails.tags.test.tsx

@@ -28,8 +28,8 @@ vi.mock('~/modules/appCatalog/ui/context/AppCatalogFiltersContext', () => ({
   useAppCatalogFilters: vi.fn(() => ({ selectedTags: [], toggleTag: vi.fn() })),
 }))
 vi.mock('~/modules/auth', () => ({ useUser: vi.fn(() => null) }))
-vi.mock('~/modules/appCatalog/ui/detail/CommentsSection', () => ({
-  CommentsSection: () => <div />,
+vi.mock('~/modules/appCatalog/ui/detail/FeedbackSection', () => ({
+  FeedbackSection: () => <div />,
 }))
 
 const { AppDetails } = await import('~/modules/appCatalog/ui/detail/AppDetails')

package/src/__tests__/modules/appCatalog/ui/detail/FeedbackSection.emptyState.test.tsx

@@ -0,0 +1,181 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// The section only needs the list query here; the whole tRPC/react-query stack is
+// stubbed down to that so the composer's own behaviour is the only thing under test.
+const state = vi.hoisted(() => ({
+  items: [] as unknown[],
+  sent: [] as unknown[],
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(() => ({
+    data: { items: state.items, openCount: 0 },
+    isLoading: false,
+  })),
+  // `mutate` runs the success callback, so the stub can represent a completed send
+  // and not just an attempted one. Without that, anything the component does on
+  // success — clearing the stored draft, closing the composer — is unreachable from
+  // a test, and a fixture that cannot express success quietly stops guarding it.
+  useMutation: vi.fn((options?: { onSuccess?: () => void }) => ({
+    mutate: (vars: unknown) => {
+      state.sent.push(vars)
+      options?.onSuccess?.()
+    },
+    isPending: false,
+  })),
+  useQueryClient: vi.fn(() => ({ invalidateQueries: vi.fn() })),
+}))
+vi.mock('~/api/infra/trpc', () => ({
+  useTRPC: vi.fn(() => ({
+    feedback: {
+      list: { queryOptions: () => ({ queryKey: ['feedback'] }) },
+      add: { mutationOptions: (o: unknown) => o },
+      edit: { mutationOptions: (o: unknown) => o },
+      dismiss: { mutationOptions: (o: unknown) => o },
+    },
+  })),
+}))
+
+const { FeedbackSection } =
+  await import('~/modules/appCatalog/ui/detail/FeedbackSection')
+
+describe('FeedbackSection — composer', () => {
+  it('stays closed until something asks for it', () => {
+    state.items = []
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getByText(/Nothing here yet/)).toBeInTheDocument()
+    expect(screen.queryByPlaceholderText('What should change?')).toBeNull()
+    // The affordance lives in the card's band now, not in this panel — down here
+    // it was below the fold of a tab, which is why it moved.
+    expect(
+      screen.queryByRole('button', { name: /Suggest a change/ }),
+    ).toBeNull()
+  })
+
+  it('opens and takes the caret when the band asks', () => {
+    state.items = []
+    render(<FeedbackSection appSlug="example-app" openComposer={1} />)
+
+    const field = screen.getByPlaceholderText('What should change?')
+    expect(field).toBeInTheDocument()
+    expect(field).toHaveFocus()
+  })
+
+  it('does not auto-open just because feedback exists', () => {
+    state.items = [
+      {
+        id: 'c1',
+        authorName: 'Curious Ferret',
+        body: 'Useful.',
+        subject: null,
+        resourceSlug: 'example-app',
+        resourceName: 'Example App',
+        attachmentIds: [],
+        createdAt: new Date().toISOString(),
+        reviewedAt: null,
+        editedAt: null,
+        isMine: false,
+        canEditUntil: null,
+        status: null,
+        reviewerReply: null,
+      },
+    ]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.queryByPlaceholderText('What should change?')).toBeNull()
+  })
+
+  it('sends with nothing typed — a bare flag is a valid signal', async () => {
+    state.items = []
+    state.sent = []
+    render(<FeedbackSection appSlug="example-app" openComposer={1} />)
+
+    const send = screen.getByRole('button', { name: 'Send' })
+    // The whole point: no words, no image, still submittable.
+    expect(send).toBeEnabled()
+
+    await userEvent.click(send)
+    expect(state.sent).toEqual([{ resourceSlug: 'example-app', body: '' }])
+  })
+
+  /**
+   * The detail card mounts this inside a tab panel, and a panel is unmounted while
+   * its tab is inactive — so an unmount is a routine event here, not an edge case.
+   * Component state alone would drop whatever someone had typed.
+   */
+  it('keeps a half-typed draft across an unmount, and reopens the composer for it', async () => {
+    sessionStorage.clear()
+    state.items = []
+    const first = render(
+      <FeedbackSection appSlug="example-app" openComposer={1} />,
+    )
+
+    await userEvent.type(
+      screen.getByPlaceholderText('What should change?'),
+      'half a thought',
+    )
+
+    // Leaving the tab unmounts the panel.
+    first.unmount()
+    render(<FeedbackSection appSlug="example-app" />)
+
+    const recovered = screen.getByPlaceholderText('What should change?')
+    expect(recovered).toHaveValue('half a thought')
+  })
+
+  /**
+   * The composer closes itself on send, so the band has to be able to say "again".
+   * It used to pass a boolean, which cannot: the second click left the prop at
+   * `true`, the effect did not re-run, and the button was dead for the rest of the
+   * card's life — you could file one correction per entry and no more. Caught by
+   * sending twice in a real browser, which is the only place it showed.
+   */
+  it('reopens for a second request after the first one was sent', async () => {
+    sessionStorage.clear()
+    state.items = []
+    state.sent = []
+    const view = render(
+      <FeedbackSection appSlug="example-app" openComposer={1} />,
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    expect(screen.queryByPlaceholderText('What should change?')).toBeNull()
+
+    // The band asking a second time — a new count, same requested tab.
+    view.rerender(<FeedbackSection appSlug="example-app" openComposer={2} />)
+    expect(
+      screen.getByPlaceholderText('What should change?'),
+    ).toBeInTheDocument()
+  })
+
+  it('does not leak a draft between entries, and clears it once sent', async () => {
+    sessionStorage.clear()
+    state.items = []
+    state.sent = []
+    const first = render(
+      <FeedbackSection appSlug="example-app" openComposer={1} />,
+    )
+    await userEvent.type(
+      screen.getByPlaceholderText('What should change?'),
+      'about this one',
+    )
+    first.unmount()
+
+    // A different entry starts clean rather than inheriting the neighbour's draft.
+    const other = render(<FeedbackSection appSlug="other-app" />)
+    expect(screen.queryByPlaceholderText('What should change?')).toBeNull()
+    other.unmount()
+
+    // Back on the original, send it, and the stored draft goes with it.
+    render(<FeedbackSection appSlug="example-app" />)
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    expect(state.sent).toEqual([
+      { resourceSlug: 'example-app', body: 'about this one' },
+    ])
+    expect(sessionStorage.getItem('ac.feedback.draft.example-app')).toBeNull()
+  })
+})