feat(hub): paginate and filter prototype gallery

hub/app/controllers/prototype_authors_controller.rb

@@ -0,0 +1,27 @@
+# Offers bounded registration-author choices only within an authorized repository.
+class PrototypeAuthorsController < ApplicationController
+  include HasRepositoryWorkspace
+
+  rescue_from GithubClient::Error, with: -> { head :service_unavailable }
+
+  # @route GET /repositories/:repository_github_id/prototype_authors (repository_prototype_authors)
+  def index
+    load_repository_workspace
+    return if performed?
+
+    page = @repository.prototype_listing.authors \
+      user: Current.user,
+      query: params[:q],
+      cursor: params[:cursor]
+    response.headers["Cache-Control"] = "private, no-store"
+    render \
+      json: {
+        authors: page.fetch(:authors).map do |author|
+          { id: author.id.to_s, login: author.login, name: author.name, avatarUrl: author.avatar_url }
+        end,
+        nextCursor: page.fetch(:next_cursor)
+      }
+  rescue Repository::PrototypeListing::InvalidQuery
+    head :bad_request
+  end
+end

hub/app/controllers/repositories_controller.rb

@@ -23,8 +23,13 @@ def show
     load_repository_workspace
     return if performed?
 
-    @prototypes = @repository.reviewable_prototypes.active.registered
-      .includes(:author, :current_build).order(registered_at: :desc, id: :desc)
+    @listing = @repository.prototype_listing.page \
+      user: Current.user,
+      query: params[:q],
+      author: params[:author],
+      page: params[:page]
+    @prototypes = @listing.prototypes
+    ActiveRecord::Associations::Preloader.new(records: @prototypes, associations: [ :author, :current_build ]).call
     prototype_ids = @prototypes.map(&:id)
     @latest_builds = @prototypes.filter_map(&:current_build).index_by(&:prototype_id)
     missing_prototype_ids = prototype_ids - @latest_builds.keys
@@ -47,6 +52,8 @@ def show
         @candidate_check_failed = true
       end
     end
+  rescue Repository::PrototypeListing::InvalidQuery
+    head :bad_request
   end
 
   # @route POST /repositories/:github_id/poll (poll_repository)

hub/app/javascript/application/repositories-show-view/index.test.tsx

@@ -16,6 +16,9 @@ const state = vi.hoisted(() => ({
 vi.mock("@hooks/use-page-data", () => ({
   usePageData: () => state.data,
 }))
+vi.mock("@hooks/use-prototype-listing", () => ({
+  usePrototypeListing: () => ({}),
+}))
 vi.mock("@pages/repositories-show-page", () => ({
   RepositoriesShowPage: ({ managingPrototypes }: { managingPrototypes: boolean }) => (
     <output>{managingPrototypes ? "Managing prototypes" : "Idle"}</output>

hub/app/javascript/features/prototype-author-filter/index.test.tsx

@@ -0,0 +1,116 @@
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { prototypeListing } from "@/storybook/fixtures/prototype-listing"
+import type { PrototypeListingControls } from "@utils/prototype-listing/types"
+
+import { PrototypeAuthorFilter } from "."
+
+describe("PrototypeAuthorFilter()", () => {
+  it("pins Me first and supports selecting and clearing an author with the keyboard", () => {
+    const onChange = vi.fn()
+    const onSearch = vi.fn(() => Promise.resolve({ authors: [], nextCursor: null }))
+    const { rerender } = render(
+      <PrototypeAuthorFilter listing={prototypeListing} onChange={onChange} onSearch={onSearch} />,
+    )
+    const trigger = screen.getByRole("button", { name: "Author: All authors" })
+    fireEvent.click(trigger)
+    const menu = screen.getByRole("menu", { name: "Author" })
+    expect(within(menu).getAllByRole("menuitemradio")[0]).toHaveTextContent("Me")
+    expect(within(menu).getByRole("searchbox")).toHaveFocus()
+    expect(
+      within(menu).getByRole("menuitemradio", { name: "All authors", checked: true }),
+    ).toBeInTheDocument()
+    fireEvent.keyDown(within(menu).getByRole("searchbox"), { key: "ArrowDown" })
+    const me = within(menu).getByRole("menuitemradio", { name: "Me" })
+    expect(me).toHaveFocus()
+    fireEvent.keyDown(me, { key: " " })
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("me")
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+    rerender(
+      <PrototypeAuthorFilter
+        listing={{ ...prototypeListing, author: "me", authorLabel: "Me" }}
+        onChange={onChange}
+        onSearch={onSearch}
+      />,
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Author: Me" }))
+    const all = screen.getByRole("menuitemradio", { name: "All authors", checked: false })
+    all.focus()
+    fireEvent.keyDown(all, { key: "Enter" })
+    expect(onChange).toHaveBeenCalledTimes(2)
+    expect(onChange).toHaveBeenLastCalledWith("")
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+  })
+
+  it("replaces author pages and ignores stale results after the search changes", async () => {
+    let finishOldSearch!: (
+      results: Awaited<ReturnType<PrototypeListingControls["loadAuthors"]>>,
+    ) => void
+    const oldSearch = new Promise<Awaited<ReturnType<PrototypeListingControls["loadAuthors"]>>>(
+      (resolve) => {
+        finishOldSearch = resolve
+      },
+    )
+    const onSearch = vi
+      .fn<PrototypeListingControls["loadAuthors"]>(() =>
+        Promise.resolve({
+          authors: [{ id: "2", login: "mona", name: null, avatarUrl: null }],
+          nextCursor: "next",
+        }),
+      )
+      .mockResolvedValueOnce({
+        authors: [{ id: "1", login: "octocat", name: null, avatarUrl: null }],
+        nextCursor: "next",
+      })
+    render(
+      <PrototypeAuthorFilter listing={prototypeListing} onChange={vi.fn()} onSearch={onSearch} />,
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Author: All authors" }))
+    expect(await screen.findByRole("menuitemradio", { name: "@octocat" })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole("button", { name: "More" }))
+    expect(await screen.findByRole("menuitemradio", { name: "@mona" })).toBeInTheDocument()
+    expect(screen.queryByRole("menuitemradio", { name: "@octocat" })).not.toBeInTheDocument()
+    onSearch.mockReturnValueOnce(oldSearch)
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "old" } })
+    await waitFor(() =>
+      expect(onSearch).toHaveBeenLastCalledWith("old", null, expect.any(AbortSignal)),
+    )
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "mona" } })
+    await waitFor(() =>
+      expect(onSearch).toHaveBeenLastCalledWith("mona", null, expect.any(AbortSignal)),
+    )
+    expect(await screen.findByRole("menuitemradio", { name: "@mona" })).toBeInTheDocument()
+    await act(async () => {
+      finishOldSearch({
+        authors: [{ id: "3", login: "outdated", name: null, avatarUrl: null }],
+        nextCursor: null,
+      })
+      await oldSearch
+    })
+    expect(screen.queryByRole("menuitemradio", { name: "@outdated" })).not.toBeInTheDocument()
+    expect(screen.getByRole("menuitemradio", { name: "@mona" })).toBeInTheDocument()
+    fireEvent.keyDown(screen.getByRole("searchbox"), { key: "Escape" })
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument()
+  })
+
+  it("reports lookup failures and retries without losing the pinned Me option", async () => {
+    const onSearch = vi
+      .fn(() => Promise.resolve({ authors: [], nextCursor: null }))
+      .mockRejectedValueOnce(new Error("Unavailable"))
+    render(
+      <PrototypeAuthorFilter listing={prototypeListing} onChange={vi.fn()} onSearch={onSearch} />,
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Author: All authors" }))
+    expect(await screen.findByRole("alert")).toHaveTextContent(prototypeListing.copy.authorsFailed)
+    expect(screen.getByRole("menuitemradio", { name: "Me" })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole("button", { name: "Retry" }))
+    expect(await screen.findByRole("status")).toHaveTextContent(prototypeListing.copy.loading)
+    await waitFor(() => expect(screen.queryByRole("status")).not.toBeInTheDocument())
+    expect(screen.getByRole("menuitemradio", { name: "Me" })).toBeInTheDocument()
+    fireEvent.change(screen.getByRole("searchbox"), { target: { value: "missing" } })
+    await waitFor(() => expect(screen.getByRole("status")).toHaveTextContent("No matching authors"))
+  })
+})

hub/app/javascript/features/prototype-author-filter/index.tsx

@@ -0,0 +1,39 @@
+import { ActionMenu } from "@primer/react-brand"
+
+import type { PrototypeAuthorResults, PrototypeListing } from "@utils/prototype-listing/types"
+
+import { PrototypeAuthorOptions } from "./options"
+
+import "./styles.css"
+
+/** Offers a searchable, single-selection menu of saved registration authors. */
+export function PrototypeAuthorFilter({
+  listing,
+  onChange,
+  onSearch,
+}: {
+  listing: PrototypeListing
+  onChange: (author: string) => void
+  onSearch: (
+    query: string,
+    cursor: string | null,
+    signal: AbortSignal,
+  ) => Promise<PrototypeAuthorResults>
+}) {
+  const label = `${listing.copy.author}: ${listing.authorLabel}`
+
+  return (
+    <div className="prototype-author-filter">
+      <ActionMenu size="small" selectionVariant="single" menuAlignment="start" onSelect={onChange}>
+        <ActionMenu.Button aria-label={label} variant="secondary">
+          <span className="prototype-author-filter__label" title={label}>
+            {label}
+          </span>
+        </ActionMenu.Button>
+        <ActionMenu.Overlay aria-label={listing.copy.author}>
+          <PrototypeAuthorOptions listing={listing} onSearch={onSearch} />
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </div>
+  )
+}