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

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()
+  })
+})

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

@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+
+// Same stub shape as the empty-state test: only the list query matters here.
+const state = vi.hoisted(() => ({
+  items: [] as unknown[],
+  openCount: 0,
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+  useQuery: vi.fn(() => ({
+    data: { items: state.items, openCount: state.openCount },
+    isLoading: false,
+  })),
+  useMutation: vi.fn(() => ({ mutate: vi.fn(), 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')
+
+const base = {
+  id: 'c1',
+  authorName: 'Merry Mole',
+  body: 'This portal only covers one business unit.',
+  subject: null,
+  resourceSlug: 'example-app',
+  resourceName: 'Example App',
+  attachmentIds: [] as string[],
+  createdAt: new Date().toISOString(),
+  reviewedAt: null as string | null,
+  editedAt: null,
+  isMine: false,
+  canEditUntil: null,
+  status: null as string | null,
+  reviewerReply: null as string | null,
+}
+
+describe('FeedbackSection — review status', () => {
+  it('credits applied work with a short label, not a sentence', () => {
+    state.items = [{ ...base, status: 'applied' }]
+    state.openCount = 0
+    render(<FeedbackSection appSlug="example-app" />)
+
+    // Exactly one: the chip on the row. There is no legend restating it, and the
+    // gratitude lives in the reply prose rather than inside the pill.
+    expect(screen.getAllByText('Applied')).toHaveLength(1)
+    expect(screen.queryByText(/thank you!/)).toBeNull()
+    expect(screen.queryByText(/means the catalog now carries/)).toBeNull()
+  })
+
+  it('shows the quieter label for feedback that changed nothing', () => {
+    state.items = [{ ...base, status: 'acknowledged' }]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getAllByText('Seen')).toHaveLength(1)
+  })
+
+  it('renders the maintainer reply under the row', () => {
+    state.items = [
+      {
+        ...base,
+        status: 'applied',
+        reviewerReply: 'Folded into Background — thank you.',
+      },
+    ]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getByText('Catalog team')).toBeInTheDocument()
+    expect(
+      screen.getByText('Folded into Background — thank you.'),
+    ).toBeInTheDocument()
+  })
+
+  it('gives an unreviewed row no chip at all — absence is the signal', () => {
+    state.items = [base]
+    state.openCount = 1
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.queryByText('Applied')).toBeNull()
+    expect(screen.queryByText('Seen')).toBeNull()
+    expect(screen.queryByText('Open')).toBeNull()
+    expect(screen.queryByText('Catalog team')).toBeNull()
+  })
+
+  it('counts unreviewed items on the heading, and hides the count at zero', () => {
+    state.items = [base]
+    state.openCount = 2
+    const { unmount } = render(<FeedbackSection appSlug="example-app" />)
+    expect(screen.getByLabelText('2 awaiting review')).toHaveTextContent(
+      '2 open',
+    )
+    unmount()
+
+    state.openCount = 0
+    render(<FeedbackSection appSlug="example-app" />)
+    expect(screen.queryByText(/open$/)).toBeNull()
+  })
+
+  it('offers Dismiss on your own unreviewed row, and not once it is answered', () => {
+    state.items = [{ ...base, isMine: true }]
+    state.openCount = 1
+    const { unmount } = render(<FeedbackSection appSlug="example-app" />)
+    // No edit window left, but withdrawing is still allowed while nobody has acted.
+    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull()
+    unmount()
+
+    state.items = [{ ...base, isMine: true, status: 'applied' }]
+    render(<FeedbackSection appSlug="example-app" />)
+    expect(screen.queryByRole('button', { name: 'Dismiss' })).toBeNull()
+  })
+
+  it('says so when someone sent a bare flag with no words', () => {
+    state.items = [{ ...base, body: null }]
+    render(<FeedbackSection appSlug="example-app" />)
+
+    expect(screen.getByText(/no detail given/)).toBeInTheDocument()
+  })
+})