@startsimpli/ui 0.4.109 → 0.4.111

package/src/components/scope/ScopeSwitcher.tsx

@@ -0,0 +1,548 @@
+'use client'
+
+/**
+ * `<ScopeSwitcher/>` — pick a client or a project, hierarchically, and stay there
+ * (bd startsim-6fceh, epic startsim-ux39t).
+ *
+ * WHAT IT IS MADE OF, AND WHAT IT DELIBERATELY IS NOT. The tree underneath is
+ * `@startsimpli/ui/facet-tree`, which is data-agnostic and paged one level per
+ * request; this file adds the switcher shell — a trigger, a popover, a search
+ * box and an "All scopes" root — and the URL binding. It is NOT a third
+ * hierarchical picker: `FolderTree` in `@startsimpli/integrations` is the same
+ * engine over documents and is meant to converge onto `facet-tree` (the node and
+ * query types here are field-identical to its own so that convergence is a
+ * rename), and `EntitySwitcher` in `../navigation` is the FLAT, in-memory
+ * searchable switcher this one could not reuse: its contract is an array of
+ * every item, which a lazily-paged tree of unbounded depth cannot produce.
+ *
+ * THE ROOT ROW CLEARS THE BOUND, IT DOES NOT SELECT `/`. The facet read skips
+ * rows whose attribute is null, so a scope-less record — and every record is
+ * scope-less until a tenant declares its scopes — is invisible to the tree by
+ * construction. Had "All scopes" narrowed to a synthetic root, the entire
+ * unassigned corpus would have vanished from the screen of whoever selected it.
+ * That is not hypothetical: it is the case that nearly shipped in the Library,
+ * where a member with 51 documents and zero folders would have lost all of them.
+ *
+ * TWO READS, NOT ONE. Browsing pages the facet tree; SEARCHING is a row read
+ * across the whole type, because "find the scope called Weekly" is a question
+ * about the tree the reader has not expanded. Where the deployment cannot answer
+ * the second, the box filters what is already loaded and SAYS SO — a search
+ * control that quietly answers about a fraction of the tree is worse than one
+ * that admits its bound.
+ *
+ * NEVER OFFERS A SCOPE THE VIEWER CANNOT READ. Both reads are gated server-side
+ * out of `EntityViewSet.get_queryset()`; this component renders exactly what came
+ * back for the request it made and composes nothing across responses. It also
+ * assumes it cannot list everything: the trigger label for a scope that is not in
+ * any loaded response is derived from the URL the viewer is already holding, not
+ * from a lookup this component is not entitled to make.
+ */
+
+import * as React from 'react'
+import { ChevronsUpDown } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Input } from '../ui/input'
+import { FacetTree } from '../facet-tree/FacetTree'
+import { FACET_ROOT, facetName, facetTrail } from '../facet-tree/path'
+import { useFacetLevels } from '../facet-tree/useFacetLevels'
+import { useScopeParam } from './useScopeParam'
+import type { UseScopeParamOptions } from './useScopeParam'
+import type { ScopeClient, ScopeMatch } from './types'
+
+export interface ScopeSwitcherLabels {
+  /** The row that clears the bound. */
+  root?: string
+  /** Names the control itself — "Scope", "Client", "Workspace". */
+  control?: string
+  /** Search input placeholder. */
+  searchPlaceholder?: string
+  /** Accessible name for the search input. */
+  searchLabel?: string
+  /** Shown when a search matches nothing. */
+  empty?: string
+  /** Shown when the tree comes back with nothing at all. */
+  emptyTree?: string
+  /** The noun in a row's accessible name — "record", "topic", "draft". */
+  countNoun?: string
+  /** The noun in "Show N more …". */
+  nodeNoun?: string
+  /** Said when search can only see what is loaded. */
+  localSearchNotice?: string
+}
+
+const DEFAULT_LABELS: Required<ScopeSwitcherLabels> = {
+  root: 'All scopes',
+  control: 'Scope',
+  searchPlaceholder: 'Search scopes…',
+  searchLabel: 'Search scopes',
+  empty: 'No matching scopes',
+  emptyTree: 'No scopes yet',
+  countNoun: 'record',
+  nodeNoun: 'scope',
+  localSearchNotice: 'Searching the scopes loaded so far.',
+}
+
+export interface ScopeSwitcherBaseProps {
+  /**
+   * The injected reads. MEMOIZE IT: its identity is the reset key, so an object
+   * literal rebuilt every render would re-fetch the tree forever.
+   */
+  client: ScopeClient
+  labels?: ScopeSwitcherLabels
+  /** Scopes per request, per level. */
+  pageSize?: number
+  /** Told once when this deployment cannot enumerate scopes at all. */
+  onUnavailable?: () => void
+  disabled?: boolean
+  className?: string
+  triggerClassName?: string
+  contentClassName?: string
+}
+
+export interface ScopeSwitcherControlledProps extends ScopeSwitcherBaseProps {
+  /** The full path in scope, or `null` for no bound. */
+  value: string | null
+  /** Handed a full path the server returned, or `null` to clear the bound. */
+  onChange: (next: string | null) => void
+}
+
+/**
+ * The URL-bound switcher, and the export every app should reach for. It takes NO
+ * `value` — the scope is read from the query string on every render, which is
+ * what makes the stale-layout reading in `./useScopeParam` unreachable for a
+ * consumer rather than merely documented.
+ */
+export interface ScopeSwitcherProps extends ScopeSwitcherBaseProps, UseScopeParamOptions {}
+
+export function ScopeSwitcher({
+  param,
+  remember,
+  rememberKey,
+  history,
+  ...rest
+}: ScopeSwitcherProps) {
+  // `useSearchParams()` opts a statically-rendered page into client rendering
+  // unless it sits under a Suspense boundary, and a consumer should not have to
+  // know that. The fallback is the same trigger, inert, so the rail does not
+  // jump. Only the trigger's own props are forwarded to it — spreading the rest
+  // would put a client object on a DOM node.
+  const fallback = (
+    <ScopeTrigger
+      disabled
+      value={null}
+      label={rest.labels?.control ?? DEFAULT_LABELS.control}
+      rootLabel={rest.labels?.root ?? DEFAULT_LABELS.root}
+      className={rest.className}
+      triggerClassName={rest.triggerClassName}
+    />
+  )
+
+  return (
+    <React.Suspense fallback={fallback}>
+      <UrlBoundScopeSwitcher
+        param={param}
+        remember={remember}
+        rememberKey={rememberKey}
+        history={history}
+        {...rest}
+      />
+    </React.Suspense>
+  )
+}
+
+function UrlBoundScopeSwitcher({
+  param,
+  remember,
+  rememberKey,
+  history,
+  ...rest
+}: ScopeSwitcherProps) {
+  const { scope, setScope } = useScopeParam({ param, remember, rememberKey, history })
+  return <ScopeSwitcherControlled value={scope} onChange={setScope} {...rest} />
+}
+
+// ---------------------------------------------------------------------------
+
+/**
+ * The switcher with its selection supplied. Exported for a host that is not
+ * Next.js and for tests; an app inside Next should use `ScopeSwitcher`, whose
+ * selection cannot go stale.
+ */
+export function ScopeSwitcherControlled({
+  client,
+  value,
+  onChange,
+  labels,
+  pageSize = 100,
+  onUnavailable,
+  disabled,
+  className,
+  triggerClassName,
+  contentClassName,
+}: ScopeSwitcherControlledProps) {
+  const text = { ...DEFAULT_LABELS, ...labels }
+  const baseId = React.useId()
+  const searchId = `${baseId}-search`
+
+  const [open, setOpen] = React.useState(false)
+  // Once opened, the tree stays loaded — but a switcher nobody has opened costs
+  // no round trip, and its label never needed one.
+  const [everOpened, setEverOpened] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+
+  const load = React.useCallback(
+    (levelQuery: Parameters<ScopeClient['listScopeChildren']>[0]) =>
+      client.listScopeChildren(levelQuery),
+    [client],
+  )
+
+  const tree = useFacetLevels({
+    load,
+    pageSize,
+    root: FACET_ROOT,
+    enabled: everOpened,
+    onUnavailable,
+  })
+
+  const search = useScopeSearch(client, query, tree.levels)
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (next) {
+      setEverOpened(true)
+      setQuery('')
+    }
+  }
+
+  const choose = (next: string | null) => {
+    onChange(next)
+    setOpen(false)
+  }
+
+  const rootLevel = tree.levelOf(FACET_ROOT)
+  const treeIsEmpty =
+    !tree.unavailable &&
+    !rootLevel.loading &&
+    !rootLevel.error &&
+    rootLevel.page > 0 &&
+    rootLevel.rows.length === 0
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <ScopeTrigger
+          value={value}
+          label={text.control}
+          rootLabel={text.root}
+          open={open}
+          disabled={disabled}
+          className={className}
+          triggerClassName={triggerClassName}
+        />
+      </PopoverTrigger>
+
+      <PopoverContent align="start" className={cn('w-72 p-0', contentClassName)}>
+        <div className="border-b p-2">
+          <label className="sr-only" htmlFor={searchId}>
+            {text.searchLabel}
+          </label>
+          <Input
+            id={searchId}
+            type="text"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={text.searchPlaceholder}
+            autoComplete="off"
+            className="h-8"
+          />
+        </div>
+
+        <div className="max-h-72 overflow-y-auto p-1">
+          {query.trim() ? (
+            <ScopeSearchResults
+              state={search}
+              selected={value}
+              onSelect={choose}
+              emptyLabel={text.empty}
+              localNotice={text.localSearchNotice}
+              countNoun={text.countNoun}
+            />
+          ) : (
+            <>
+              <button
+                type="button"
+                className={cn(
+                  'flex w-full items-center rounded-md px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-foreground',
+                  value === null && 'bg-accent font-medium text-accent-foreground',
+                )}
+                aria-current={value === null ? 'true' : undefined}
+                // NULL, not `FACET_ROOT`. See the file header: selecting this row
+                // must remove the bound entirely, or every record that carries no
+                // scope becomes unreachable from the one control meant to reach
+                // everything. (In the URL that `null` is SPELLED `?scope=all`, so
+                // "everything" is a link somebody can send — see `useScopeParam`.
+                // The bound is still gone; only the spelling is explicit.)
+                onClick={() => choose(null)}
+              >
+                {text.root}
+              </button>
+              <FacetTree
+                levels={tree.levels}
+                expanded={tree.expanded}
+                selected={value}
+                onSelect={choose}
+                onToggle={tree.toggle}
+                onMore={tree.loadMore}
+                root={FACET_ROOT}
+                countNoun={text.countNoun}
+                nodeNoun={text.nodeNoun}
+              />
+              {treeIsEmpty ? (
+                <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+                  {text.emptyTree}
+                </p>
+              ) : null}
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+// ---------------------------------------------------------------------------
+
+interface ScopeTriggerProps {
+  value?: string | null
+  label: string
+  rootLabel?: string
+  open?: boolean
+  disabled?: boolean
+  className?: string
+  triggerClassName?: string
+}
+
+/**
+ * The trigger, whose label is derived from the SELECTED PATH and never from a
+ * lookup.
+ *
+ * The path is a string the viewer is already holding — it is in their address
+ * bar. Resolving it to a prettier name would mean a read this component is not
+ * entitled to make on behalf of somebody who followed a link to a scope they
+ * cannot see, and the honest answer there is the path itself.
+ */
+const ScopeTrigger = React.forwardRef<HTMLButtonElement, ScopeTriggerProps>(
+  function ScopeTrigger(
+    { value, label, rootLabel = DEFAULT_LABELS.root, open, disabled, className, triggerClassName, ...rest },
+    ref,
+  ) {
+    const trail = value ? facetTrail(value) : []
+    const name = value ? facetName(value) : rootLabel
+    // The ancestors, so two projects both called "Weekly" are told apart without
+    // opening the control.
+    const context = trail.length > 1 ? trail.slice(0, -1).map((step) => step.name).join(' / ') : ''
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={open}
+        // The visible label is a leaf name; the accessible one says what the leaf
+        // IS, because "GCC Weekly" on its own does not tell a screen-reader user
+        // that this control changes the scope.
+        aria-label={`${label}: ${value ? value : rootLabel}`}
+        title={value ?? rootLabel}
+        disabled={disabled}
+        className={cn(
+          'flex w-full items-center justify-between gap-2 rounded-md border border-white/15 bg-white/5 px-3 py-2',
+          'text-left text-sm font-medium text-inherit transition-colors',
+          'hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+          triggerClassName,
+        )}
+        {...rest}
+      >
+        <span className="min-w-0 flex-1">
+          <span className="block truncate">{name}</span>
+          {context ? <span className="block truncate text-xs opacity-60">{context}</span> : null}
+        </span>
+        <ChevronsUpDown className="h-4 w-4 flex-shrink-0 opacity-60" aria-hidden="true" />
+      </button>
+    )
+  },
+)
+
+// ---------------------------------------------------------------------------
+
+interface ScopeSearchState {
+  rows: ScopeMatch[]
+  loading: boolean
+  error: string
+  /** True when the answer came from the levels already loaded, not the server. */
+  local: boolean
+  active: boolean
+}
+
+const SEARCH_DEBOUNCE_MS = 200
+
+/**
+ * SEARCH IS A SERVER READ, and falls back to a LOCAL one only when the server
+ * cannot answer.
+ *
+ * The local fallback flattens `levels` — which is safe, and is not the flat set
+ * `useFacetLevels` refuses to keep. Every row in that map was returned to THIS
+ * reader for the exact container it is filed under; showing a subset of them
+ * puts nothing new on screen. What it cannot do is see a subtree nobody has
+ * expanded, which is precisely why the caller labels it.
+ */
+function useScopeSearch(
+  client: ScopeClient,
+  query: string,
+  levels: Record<string, { rows: ScopeMatch[] }>,
+): ScopeSearchState {
+  const term = query.trim()
+  const [state, setState] = React.useState<{ rows: ScopeMatch[]; loading: boolean; error: string }>({
+    rows: [],
+    loading: false,
+    error: '',
+  })
+  // Sticky: once a deployment has said it cannot search, every later keystroke
+  // goes straight to the local filter instead of re-asking and re-failing.
+  const [serverCanSearch, setServerCanSearch] = React.useState(true)
+
+  React.useEffect(() => {
+    setServerCanSearch(true)
+  }, [client])
+
+  const canAskServer = Boolean(client.searchScopes) && serverCanSearch
+
+  React.useEffect(() => {
+    if (!term || !canAskServer) {
+      setState({ rows: [], loading: false, error: '' })
+      return
+    }
+    let cancelled = false
+    setState((prev) => ({ ...prev, loading: true, error: '' }))
+    const timer = setTimeout(() => {
+      client
+        .searchScopes?.({ search: term, pageSize: 50 })
+        .then((page) => {
+          if (cancelled) return
+          setState({ rows: page.results, loading: false, error: '' })
+        })
+        .catch((err: unknown) => {
+          if (cancelled) return
+          const status = (err as { status?: number })?.status
+          if (status === 404 || status === 400 || status === 501) {
+            setServerCanSearch(false)
+            setState({ rows: [], loading: false, error: '' })
+            return
+          }
+          setState({
+            rows: [],
+            loading: false,
+            error: (err as { message?: string })?.message || 'Could not search scopes.',
+          })
+        })
+    }, SEARCH_DEBOUNCE_MS)
+    return () => {
+      cancelled = true
+      clearTimeout(timer)
+    }
+  }, [client, term, canAskServer])
+
+  const local = React.useMemo(() => {
+    if (!term || canAskServer) return []
+    const needle = term.toLowerCase()
+    const seen = new Set<string>()
+    const out: ScopeMatch[] = []
+    for (const level of Object.values(levels)) {
+      for (const row of level.rows) {
+        if (seen.has(row.path)) continue
+        seen.add(row.path)
+        if (row.name.toLowerCase().includes(needle) || row.path.toLowerCase().includes(needle)) {
+          out.push(row)
+        }
+      }
+    }
+    return out.sort((a, b) => a.path.localeCompare(b.path))
+  }, [term, canAskServer, levels])
+
+  if (!canAskServer) {
+    return { rows: local, loading: false, error: '', local: true, active: Boolean(term) }
+  }
+  return { ...state, local: false, active: Boolean(term) }
+}
+
+function ScopeSearchResults({
+  state,
+  selected,
+  onSelect,
+  emptyLabel,
+  localNotice,
+  countNoun,
+}: {
+  state: ScopeSearchState
+  selected: string | null
+  onSelect: (path: string) => void
+  emptyLabel: string
+  localNotice: string
+  countNoun: string
+}) {
+  if (state.loading) {
+    return <p className="px-2 py-3 text-center text-xs text-muted-foreground">Searching…</p>
+  }
+  if (state.error) {
+    return (
+      <p className="px-2 py-3 text-xs text-destructive" role="alert">
+        {state.error}
+      </p>
+    )
+  }
+  return (
+    <>
+      {state.local ? (
+        <p className="px-2 pb-1 pt-0.5 text-[11px] text-muted-foreground">{localNotice}</p>
+      ) : null}
+      {state.rows.length === 0 ? (
+        <p className="px-2 py-3 text-center text-xs text-muted-foreground">{emptyLabel}</p>
+      ) : (
+        <ul className="space-y-0.5">
+          {state.rows.map((row) => (
+            <li key={row.path}>
+              <button
+                type="button"
+                className={cn(
+                  'flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-foreground',
+                  selected === row.path && 'bg-accent font-medium text-accent-foreground',
+                )}
+                aria-current={selected === row.path ? 'true' : undefined}
+                // The FULL path in the accessible name, because a flat result
+                // list is exactly where two scopes with the same leaf name meet.
+                aria-label={
+                  typeof row.count === 'number'
+                    ? `${row.path}, ${row.count.toLocaleString()} ${countNoun}${row.count === 1 ? '' : 's'} inside`
+                    : row.path
+                }
+                title={row.path}
+                onClick={() => onSelect(row.path)}
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{row.name}</span>
+                  <span className="block truncate text-xs opacity-60">{row.path}</span>
+                </span>
+                {typeof row.count === 'number' ? (
+                  <span className="shrink-0 text-xs tabular-nums opacity-60" aria-hidden="true">
+                    {row.count.toLocaleString()}
+                  </span>
+                ) : null}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  )
+}

package/src/components/scope/__tests__/scope-client.test.ts

@@ -0,0 +1,131 @@
+/**
+ * The adapter over the tenant's generic entity endpoints (bd startsim-6fceh).
+ *
+ * The parameter builders are the point. The facets action SCREENS its query
+ * parameters against its own vocabulary before any handler runs, so what this
+ * sends is a compatibility contract and not a detail — and browsing and
+ * searching are two different endpoints, which is the whole reason there are two
+ * builders here rather than one shared with a list.
+ */
+import { createScopeClient } from '../client'
+
+function httpStub(response: unknown) {
+  const get = jest.fn(async () => response)
+  return { get: get as unknown as <T>(p: string, c?: unknown) => Promise<T>, calls: get }
+}
+
+describe('createScopeClient — the tree read', () => {
+  it('sends exactly type, attr, under and the page', async () => {
+    const http = httpStub({ count: 0, results: [] })
+    const client = createScopeClient({ http })
+
+    await client.listScopeChildren({ under: '/Clients', page: 2, pageSize: 25 })
+
+    expect(http.calls).toHaveBeenCalledWith('api/v1/entities/facets', {
+      params: { type: 'scope', attr: 'path', under: '/Clients', page: 2, page_size: 25 },
+    })
+  })
+
+  it('defaults `under` to the root, which means every scope', async () => {
+    const http = httpStub({ count: 0, results: [] })
+    await createScopeClient({ http }).listScopeChildren({ under: '' })
+    expect(http.calls).toHaveBeenCalledWith(
+      'api/v1/entities/facets',
+      expect.objectContaining({ params: expect.objectContaining({ under: '/' }) }),
+    )
+  })
+
+  it('caps page_size at the tenant’s own maximum', async () => {
+    const http = httpStub({ count: 0, results: [] })
+    await createScopeClient({ http }).listScopeChildren({ under: '/', pageSize: 5000 })
+    expect(http.calls).toHaveBeenCalledWith(
+      'api/v1/entities/facets',
+      expect.objectContaining({ params: expect.objectContaining({ page_size: 200 }) }),
+    )
+  })
+
+  it('maps a facet row to a node, in either key dialect', async () => {
+    const http = httpStub({
+      count: 2,
+      next: 'p2',
+      previous: null,
+      results: [
+        // raw wire
+        { value: '/Clients/Acme', count: 900, has_children: true },
+        // camelCased by a house API client
+        { value: '/Clients/Globex', count: 300, hasChildren: false },
+      ],
+    })
+
+    const result = await createScopeClient({ http }).listScopeChildren({ under: '/Clients' })
+
+    expect(result).toEqual({
+      count: 2,
+      next: 'p2',
+      previous: null,
+      results: [
+        { path: '/Clients/Acme', name: 'Acme', count: 900, hasChildren: true },
+        { path: '/Clients/Globex', name: 'Globex', count: 300, hasChildren: false },
+      ],
+    })
+  })
+
+  it('takes the type and attribute names from the tenant, not from a constant', async () => {
+    const http = httpStub({ count: 0, results: [] })
+    await createScopeClient({ http, type: 'client', attr: 'tree_path' }).listScopeChildren({
+      under: '/',
+    })
+    expect(http.calls).toHaveBeenCalledWith(
+      'api/v1/entities/facets',
+      expect.objectContaining({
+        params: expect.objectContaining({ type: 'client', attr: 'tree_path' }),
+      }),
+    )
+  })
+})
+
+describe('createScopeClient — the search read', () => {
+  it('is a ROW read on the collection, not a facet read', async () => {
+    const http = httpStub({ count: 0, results: [] })
+    await createScopeClient({ http }).searchScopes?.({ search: 'weekly', pageSize: 50 })
+
+    expect(http.calls).toHaveBeenCalledWith('api/v1/entities', {
+      params: { type: 'scope', search: 'weekly', page: 1, page_size: 50 },
+    })
+  })
+
+  it('reads the path off the record and prefers the record’s own name', async () => {
+    const http = httpStub({
+      count: 1,
+      results: [{ name: 'GCC Weekly', data: { path: '/Clients/Acme/gcc-weekly' } }],
+    })
+    const result = await createScopeClient({ http }).searchScopes?.({ search: 'gcc' })
+    expect(result?.results).toEqual([{ path: '/Clients/Acme/gcc-weekly', name: 'GCC Weekly' }])
+  })
+
+  it('falls back to the last path segment when a record has no name', async () => {
+    const http = httpStub({ count: 1, results: [{ data: { path: '/Clients/Acme' } }] })
+    const result = await createScopeClient({ http }).searchScopes?.({ search: 'a' })
+    expect(result?.results[0].name).toBe('Acme')
+  })
+
+  it('drops a scope with no path but keeps the server’s own count', async () => {
+    // A record with no path cannot be selected — a selection carries the path
+    // and nothing else — so it is dropped rather than shown as a dead row. The
+    // count stays the SERVER's, or "show more" would stop early.
+    const http = httpStub({
+      count: 2,
+      results: [{ name: 'Unfiled', data: {} }, { name: 'Acme', data: { path: '/Clients/Acme' } }],
+    })
+    const result = await createScopeClient({ http }).searchScopes?.({ search: 'a' })
+    expect(result?.results).toHaveLength(1)
+    expect(result?.count).toBe(2)
+  })
+
+  it('bounds the search term, because the server bounds text filters', async () => {
+    const http = httpStub({ count: 0, results: [] })
+    await createScopeClient({ http }).searchScopes?.({ search: 'x'.repeat(900) })
+    const params = (http.calls.mock.calls[0][1] as { params: { search: string } }).params
+    expect(params.search).toHaveLength(500)
+  })
+})