@igstack/app-catalog-frontend-core 6.4.0 → 6.5.1

package/src/__tests__/modules/appCatalog/ui/catalog/RequestAppDialog.test.tsx

@@ -0,0 +1,113 @@
+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'
+
+const state = vi.hoisted(() => ({ sent: [] as unknown[] }))
+
+vi.mock('@tanstack/react-query', () => ({
+  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: {
+      add: { mutationOptions: (o: unknown) => o },
+      mine: { queryKey: () => ['feedback', 'mine'] },
+    },
+  })),
+}))
+
+const { RequestAppDialog } =
+  await import('~/modules/appCatalog/ui/catalog/RequestAppDialog')
+
+describe('RequestAppDialog', () => {
+  /**
+   * The grid is rendered bare in several tests with no TRPCProvider, so the closed
+   * dialog must not reach a tRPC hook. A hook cannot be called conditionally, which is
+   * why the gate is a component boundary — and why this test exists: inlining the body
+   * back into one component breaks six unrelated grid tests with
+   * "useTRPC() can only be used inside of a <TRPCProvider>".
+   */
+  it('mounts nothing at all while closed', () => {
+    const { container } = render(
+      <RequestAppDialog open={false} onOpenChange={() => {}} />,
+    )
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('pre-fills what the visitor searched for', () => {
+    render(
+      <RequestAppDialog
+        open
+        onOpenChange={() => {}}
+        initialSubject="hoppy budget tool"
+      />,
+    )
+    // They just typed it into the search box; asking again is a toll on the one
+    // person who already told us what is missing.
+    expect(screen.getByLabelText(/What are you looking for/)).toHaveValue(
+      'hoppy budget tool',
+    )
+  })
+
+  it('refuses to send with no name, then sends a catalog-level ask', async () => {
+    state.sent = []
+    render(<RequestAppDialog open onOpenChange={() => {}} initialSubject="" />)
+
+    const send = screen.getByRole('button', { name: /Send request/ })
+    expect(send).toBeDisabled()
+
+    await userEvent.type(
+      screen.getByLabelText(/What are you looking for/),
+      'Grafana',
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Send request/ }))
+
+    // No resourceSlug: that is what makes it a request for something absent rather
+    // than feedback on an existing entry. The server splits them the same way.
+    expect(state.sent).toEqual([{ subject: 'Grafana' }])
+  })
+
+  it('carries the optional detail when given, and omits it when blank', async () => {
+    state.sent = []
+    render(
+      <RequestAppDialog
+        open
+        onOpenChange={() => {}}
+        initialSubject="Grafana"
+      />,
+    )
+    await userEvent.type(
+      screen.getByLabelText(/Anything that would help/),
+      'the observability team runs it',
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Send request/ }))
+
+    expect(state.sent).toEqual([
+      { subject: 'Grafana', body: 'the observability team runs it' },
+    ])
+  })
+
+  it('confirms rather than leaving them wondering whether it sent', async () => {
+    state.sent = []
+    render(
+      <RequestAppDialog
+        open
+        onOpenChange={() => {}}
+        initialSubject="Grafana"
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Send request/ }))
+
+    // Reporting into silence is how a person learns not to bother.
+    expect(screen.getByText(/that is logged/i)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Send request/ })).toBeNull()
+  })
+})

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

@@ -102,6 +102,30 @@ describe('the tab strip', () => {
     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()} />)

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

@@ -13,6 +13,7 @@ import { useUiSettings } from '~/context/UiSettingsContext'
 import type { AreaIcon } from '~/types/uiSettings'
 import { AppCatalogContext } from '../../context/AppCatalogContext'
 import { areaLabel, groupByArea } from '../../utils/areaGrouping'
+import { RequestAppDialog } from './RequestAppDialog'
 
 /**
  * Adaptive-home discovery spine (issue #38, increment 1) — matches the
@@ -347,6 +348,9 @@ function SearchResultsList({
   const [expandedParents, setExpandedParents] = useState<Set<string>>(
     () => new Set(),
   )
+  // Asking for something absent. Local state rather than a url param: a half-typed
+  // request has no business in a shareable link.
+  const [requestOpen, setRequestOpen] = useState(false)
 
   const results = useMemo(
     () => searchResources(apps, searchValue),
@@ -483,6 +487,26 @@ function SearchResultsList({
           : `${matchCount} result${matchCount === 1 ? '' : 's'}`}
       </div>
 
+      {/* A zero-result search is the most informative moment in the catalog: someone
+          has said exactly what they expected to find. Showing only "No results"
+          throws that away and leaves them with nowhere to go. */}
+      {matchCount === 0 && !didDeprecatedFallback && (
+        <div className="mb-3 px-1">
+          <button
+            type="button"
+            onClick={() => setRequestOpen(true)}
+            className="text-sm underline decoration-dotted underline-offset-2 hover:text-foreground text-muted-foreground"
+          >
+            Not in the catalog? Ask for it to be added
+          </button>
+        </div>
+      )}
+      <RequestAppDialog
+        open={requestOpen}
+        onOpenChange={setRequestOpen}
+        initialSubject={searchValue}
+      />
+
       {/* #11: deprecated-only fallback notice */}
       {didDeprecatedFallback && (
         <div

package/src/modules/appCatalog/ui/catalog/RequestAppDialog.tsx

@@ -0,0 +1,169 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'
+import { cn } from '~/lib/utils'
+
+/**
+ * Asking for something that is not in the catalog yet.
+ *
+ * The search box is where people discover the gap — they type a tool's name, get
+ * nothing, and until now had nowhere to go. A zero-result search is the single most
+ * informative moment in the catalog: someone has told us exactly what they expected to
+ * find. Throwing that away and showing only "No results" wastes it.
+ *
+ * This is a catalog-level ask rather than feedback on an entry: `feedback.add` with a
+ * `subject` and NO `resourceSlug`. The server already distinguishes the two that way,
+ * and the tracker lists both.
+ */
+
+/** Same shape the input primitive uses, minus the fixed height. */
+const FIELD_CLASSES =
+  'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'
+
+const MAX_SUBJECT = 120
+
+interface RequestAppDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** What they searched for. Pre-fills the name, because they just typed it. */
+  initialSubject?: string
+}
+
+/**
+ * Mounts nothing until it is opened, which is what keeps `useTRPC()` out of the
+ * closed path. The catalog grid is rendered bare in several tests with no
+ * TRPCProvider, and a hook cannot be called conditionally — so the gate has to be a
+ * component boundary rather than an `if` inside one.
+ */
+export function RequestAppDialog(props: RequestAppDialogProps) {
+  if (!props.open) return null
+  return <RequestAppDialogBody {...props} />
+}
+
+function RequestAppDialogBody({
+  open,
+  onOpenChange,
+  initialSubject = '',
+}: RequestAppDialogProps) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const [subject, setSubject] = useState(initialSubject)
+  const [body, setBody] = useState('')
+  const [sent, setSent] = useState(false)
+
+  // Re-seed when opened for a different search. Keyed on the dialog opening rather
+  // than on every keystroke, so it never overwrites something half-typed.
+  useEffect(() => {
+    if (open) {
+      setSubject(initialSubject)
+      setBody('')
+      setSent(false)
+    }
+  }, [open, initialSubject])
+
+  const add = useMutation(
+    trpc.feedback.add.mutationOptions({
+      onSuccess: () => {
+        setSent(true)
+        // The tracker counts this, so its badge has to notice.
+        void queryClient.invalidateQueries({
+          queryKey: trpc.feedback.mine.queryKey(),
+        })
+      },
+    }),
+  )
+
+  const trimmed = subject.trim()
+  const send = () => {
+    if (!trimmed) return
+    add.mutate({
+      subject: trimmed.slice(0, MAX_SUBJECT),
+      ...(body.trim() ? { body: body.trim() } : {}),
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle>
+            {sent ? 'Thanks — that is logged' : 'Ask for an app to be added'}
+          </DialogTitle>
+        </DialogHeader>
+
+        {sent ? (
+          <div className="space-y-3">
+            <p className="text-muted-foreground text-sm">
+              A maintainer will look at it. You can see what happened to it
+              under your own requests.
+            </p>
+            <Button type="button" size="sm" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <label htmlFor="request-app-name" className="text-sm font-medium">
+                What are you looking for?
+              </label>
+              <input
+                id="request-app-name"
+                autoFocus
+                className={cn(FIELD_CLASSES)}
+                placeholder="Name of the tool, or what it does"
+                maxLength={MAX_SUBJECT}
+                value={subject}
+                onChange={(event) => setSubject(event.target.value)}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label
+                htmlFor="request-app-detail"
+                className="text-sm font-medium"
+              >
+                Anything that would help us find it{' '}
+                <span className="text-muted-foreground font-normal">
+                  (optional)
+                </span>
+              </label>
+              <textarea
+                id="request-app-detail"
+                rows={3}
+                className={cn(FIELD_CLASSES)}
+                placeholder="A link, the team that owns it, what you needed it for"
+                value={body}
+                onChange={(event) => setBody(event.target.value)}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center gap-3">
+              <Button
+                type="button"
+                size="sm"
+                disabled={!trimmed || add.isPending}
+                onClick={send}
+              >
+                {add.isPending ? 'Sending…' : 'Send request'}
+              </Button>
+              <span className="text-muted-foreground text-xs">
+                Sent under a nickname. No login needed.
+              </span>
+            </div>
+
+            {add.error && (
+              <p className="text-destructive text-xs">
+                {add.error instanceof Error
+                  ? add.error.message
+                  : 'Something went wrong'}
+              </p>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/appCatalog/ui/detail/DetailTabs.tsx

@@ -73,10 +73,17 @@ export function DetailTabs({
   /** Cancels the dialog's own padding so the tint reaches the card's edges. */
   bandClassName?: string
 }) {
+  /**
+   * The first tab is what the card opens on, so naming it in the URL says nothing.
+   * `encode` returning undefined drops the param, which keeps `?tab=` out of a link
+   * until someone has actually chosen something other than the default — and keeps a
+   * shared link honest about what the sender was looking at.
+   */
+  const defaultTabId = tabs[0]?.id
   const [urlTab, setUrlTab] = useUrlSyncedState<string>({
     key: 'tab',
     defaultValue: '',
-    encode: (value) => value || undefined,
+    encode: (value) => (value && value !== defaultTabId ? value : undefined),
   })
 
   const ids = tabs.map((t) => t.id)

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

@@ -121,6 +121,36 @@ export function AppCatalogPage({
   }
 
   // The app whose detail card is open over the catalog backdrop.
+  /**
+   * Strip the card's own params once no card is open.
+   *
+   * Clearing them inside the close handler does not hold: `useUrlSyncedState` only
+   * ever pushes its state OUT to the url, so the tab strip — still mounted for one
+   * more render — sees the url disagreeing with its own state and writes `tab` straight
+   * back. Two owners, and the one on its way out gets the last word. Measured on a
+   * live host: `?tab=notes` survived the close every time.
+   *
+   * Doing it here instead means one owner decides, and it decides AFTER the strip has
+   * gone, so there is nothing left to argue with. Only the card's params go; the
+   * catalog's own state (filters, recents, the deprecated toggle) outlives any card.
+   */
+  useEffect(() => {
+    if (selectedSlug || subPageSlug) return
+    const stale = ['tab', 'sub', 'qj'].filter(
+      (key) => (search as Record<string, unknown>)[key] !== undefined,
+    )
+    if (stale.length === 0) return
+    void navigate({
+      to: '/',
+      replace: true,
+      search: (prev) => {
+        const next = { ...(prev as Record<string, unknown>) }
+        for (const key of stale) delete next[key]
+        return next
+      },
+    })
+  }, [selectedSlug, subPageSlug, search, navigate])
+
   const selectedApp = useMemo(
     () =>
       selectedAppSlug