create-feedbax 0.2.0 → 0.2.2

package/template/src/my-feedback-page.test.tsx

@@ -0,0 +1,152 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from "vitest";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConnectedIdentityProvider } from "./components/connected-identity-provider";
+import { MyFeedbackPage } from "./my-feedback-page";
+vi.mock("./feedbax", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./feedbax")>();
+  return {
+    default: {
+      ...actual.default,
+      connected: {
+        issuer: "https://app.example",
+        loginUrl: "https://app.example/login",
+      },
+    },
+  };
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  localStorage.clear();
+  sessionStorage.clear();
+});
+it("switches private filters with accessible tabs and edits an eligible draft without browser-held authority", async () => {
+  const user = userEvent.setup();
+  let title = "My pending feedback";
+  let edited: unknown;
+  const post = () => ({
+    id: "post-1",
+    slug: "my-pending-feedback",
+    title,
+    description: "A private pending description",
+    type: "Feature Request",
+    status: "New",
+    published: false,
+    editable: true,
+    createdAt: "2026-10-15T12:00:00Z",
+    updatedAt: "2026-10-15T12:00:00Z",
+  });
+  vi.stubGlobal(
+    "fetch",
+    vi.fn<typeof fetch>().mockImplementation(async (input, init) => {
+      const path = String(input);
+      if (path === "/internal/identity/session")
+        return Response.json({
+          participant: { displayName: "Alice", sessionKey: "alice-session" },
+        });
+      if (path.startsWith("/internal/my-feedback?"))
+        return Response.json({
+          items: path.includes("filter=submitted")
+            ? [post()]
+            : [
+                {
+                  slug: "supported",
+                  title: "Supported public feedback",
+                  published: true,
+                  editable: false,
+                },
+              ],
+        });
+      if (path === "/internal/my-feedback/post") {
+        const body = JSON.parse(String(init?.body));
+        if (body.action === "edit") {
+          edited = body;
+          title = body.title;
+        }
+        return Response.json(post());
+      }
+      throw new Error("Unexpected browser request");
+    }),
+  );
+  render(
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      <ConnectedIdentityProvider>
+        <MyFeedbackPage />
+      </ConnectedIdentityProvider>
+    </QueryClientProvider>,
+  );
+  expect(await screen.findByText("My pending feedback")).toBeTruthy();
+  await user.click(screen.getByRole("tab", { name: "Supported" }));
+  expect(await screen.findByText("Supported public feedback")).toBeTruthy();
+  await user.click(screen.getByRole("tab", { name: "Submitted" }));
+  await user.click(await screen.findByRole("button", { name: "Edit draft" }));
+  const field = screen.getByLabelText("Title");
+  await user.clear(field);
+  await user.type(field, "Updated on this device");
+  await user.click(screen.getByRole("button", { name: "Save changes" }));
+  await waitFor(() =>
+    expect(edited).toMatchObject({
+      id: "post-1",
+      title: "Updated on this device",
+      action: "edit",
+    }),
+  );
+  expect(JSON.stringify(edited)).not.toContain("browserCapability");
+  expect(JSON.stringify(edited)).not.toContain("subject");
+  expect(await screen.findByText("Updated on this device")).toBeTruthy();
+});
+
+it("discards private lists and open editors when a refreshed session changes even with the same display name", async () => {
+  const user = userEvent.setup();
+  let current = "alice";
+  vi.stubGlobal(
+    "fetch",
+    vi.fn<typeof fetch>().mockImplementation(async (input) => {
+      if (String(input) === "/internal/identity/session")
+        return Response.json({
+          participant: { displayName: "Shared name", sessionKey: current },
+        });
+      const post = {
+        id: `${current}-post`,
+        slug: `${current}-post`,
+        title: `${current} private draft`,
+        description: "Private details",
+        type: "General Feedback",
+        status: "New",
+        published: false,
+        editable: true,
+      };
+      if (String(input).startsWith("/internal/my-feedback?"))
+        return Response.json({ items: [post] });
+      if (String(input) === "/internal/my-feedback/post")
+        return Response.json(post);
+      throw Error("Unexpected request");
+    }),
+  );
+  render(
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      <ConnectedIdentityProvider>
+        <MyFeedbackPage />
+      </ConnectedIdentityProvider>
+    </QueryClientProvider>,
+  );
+  expect(await screen.findByText("alice private draft")).toBeTruthy();
+  await user.click(screen.getByRole("button", { name: "Edit draft" }));
+  expect(await screen.findByLabelText("Title")).toBeTruthy();
+  current = "bob";
+  window.dispatchEvent(new Event("focus"));
+  expect(await screen.findByText("bob private draft")).toBeTruthy();
+  expect(screen.queryByText("alice private draft")).toBeNull();
+  expect(screen.queryByRole("dialog")).toBeNull();
+});

package/template/src/my-feedback-page.tsx

@@ -0,0 +1,398 @@
+import feedbax from "./feedbax";
+import { useState, type FormEvent } from "react";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  MyFeedbackFilter,
+  MyFeedbackPage as FeedbackPage,
+  ParticipantPost,
+} from "@feedbax/feedback";
+import { Button } from "@feedbax/ui/components/button";
+import { Input } from "@feedbax/ui/components/input";
+import { Textarea } from "@feedbax/ui/components/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@feedbax/ui/components/dialog";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@feedbax/ui/components/tabs";
+import { useConnectedIdentity } from "./components/connected-identity-provider";
+import { useAuthorizedDraftPosts } from "./draft-post-list";
+import { readCapabilities } from "./browser-post-state";
+
+async function action<T>(input: Record<string, unknown>): Promise<T> {
+  const response = await fetch("/internal/my-feedback/post", {
+    method: "POST",
+    credentials: "same-origin",
+    cache: "no-store",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(input),
+  });
+  if (!response.ok)
+    throw new Error(
+      "This submission could not be changed. Refresh and try again.",
+    );
+  return response.json();
+}
+export function MyFeedbackPage() {
+  const identity = useConnectedIdentity();
+  if (!identity.ready)
+    return (
+      <main className="feedback-index">
+        <p role="status">Loading your account…</p>
+      </main>
+    );
+  if (!identity.displayName)
+    return (
+      <main className="feedback-index">
+        <h1 className="text-3xl font-semibold">My feedback</h1>
+        <p className="my-4">
+          Sign in through the product to find your submissions, supported Posts,
+          and Follows across devices.
+        </p>
+        <Button
+          nativeButton={false}
+          render={<a href="/internal/identity/start" />}
+        >
+          Sign in
+        </Button>
+      </main>
+    );
+  return <PrivateMyFeedbackPage key={identity.sessionKey} />;
+}
+function PrivateMyFeedbackPage() {
+  const identity = useConnectedIdentity();
+  const client = useQueryClient();
+  const [filter, setFilter] = useState<MyFeedbackFilter>("submitted");
+  const [editing, setEditing] = useState<ParticipantPost>();
+  const [message, setMessage] = useState<string>();
+  const query = useInfiniteQuery({
+    queryKey: ["my-feedback", identity.sessionKey, filter],
+    enabled: identity.ready && Boolean(identity.displayName),
+    gcTime: 0,
+    staleTime: 0,
+    initialPageParam: undefined as string | undefined,
+    queryFn: async ({ pageParam, signal }): Promise<FeedbackPage> => {
+      const params = new URLSearchParams({ filter });
+      if (pageParam) params.set("cursor", pageParam);
+      const response = await fetch(`/internal/my-feedback?${params}`, {
+        cache: "no-store",
+        credentials: "same-origin",
+        signal,
+      });
+      if (!response.ok) throw new Error("Your feedback could not be loaded.");
+      return response.json();
+    },
+    getNextPageParam: (last) => last.nextCursor,
+  });
+  const reload = () => client.invalidateQueries({ queryKey: ["my-feedback"] });
+  async function edit(id: string) {
+    setMessage(undefined);
+    try {
+      const post = await action<ParticipantPost>({ action: "read", id });
+      if (!post.editable) throw new Error();
+      setEditing(post);
+    } catch {
+      setMessage(
+        "This draft is no longer available to edit. Refresh the list.",
+      );
+    }
+  }
+  const items = query.data?.pages.flatMap((page) => page.items) ?? [];
+  return (
+    <main className="feedback-index mx-auto w-full max-w-4xl px-4 py-8">
+      <header className="mb-7">
+        <p className="feedback-eyebrow">Your participation</p>
+        <h1 className="text-3xl font-semibold">My feedback</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Only you can see this page. Pending submissions appear here before the
+          Product Team publishes them in the portal.
+        </p>
+      </header>
+      <Tabs
+        value={filter}
+        onValueChange={(value) => {
+          if (
+            value === "submitted" ||
+            value === "supported" ||
+            value === "following"
+          )
+            setFilter(value);
+        }}
+      >
+        <TabsList aria-label="My feedback views">
+          <TabsTrigger value="submitted">Submitted</TabsTrigger>
+          <TabsTrigger value="supported">Supported</TabsTrigger>
+          <TabsTrigger value="following">Following</TabsTrigger>
+        </TabsList>
+        <TabsContent value={filter} className="mt-5">
+          {query.isPending ? (
+            <p role="status">Loading your feedback…</p>
+          ) : query.isError ? (
+            <div role="alert">
+              <p>We couldn’t load your feedback.</p>
+              <Button variant="outline" onClick={() => void query.refetch()}>
+                Try again
+              </Button>
+            </div>
+          ) : items.length ? (
+            <ul className="divide-y divide-border">
+              {items.map((post) => (
+                <li
+                  key={post.id ?? post.slug}
+                  className="flex flex-wrap items-start justify-between gap-4 py-5"
+                >
+                  <div className="min-w-0 flex-1">
+                    <h2 className="break-words text-base font-medium">
+                      {post.published ? (
+                        <a
+                          href={`/p/${encodeURIComponent(post.slug)}`}
+                          className="hover:underline"
+                        >
+                          {post.title}
+                        </a>
+                      ) : (
+                        post.title
+                      )}
+                    </h2>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {post.withdrawn
+                        ? "Withdrawn"
+                        : post.unavailable
+                          ? "Currently unavailable"
+                          : post.published
+                            ? post.status
+                            : `${post.status ?? "New"} · Pending moderation`}
+                    </p>
+                  </div>
+                  {post.editable && post.id ? (
+                    <Button
+                      variant="outline"
+                      onClick={() => void edit(post.id!)}
+                    >
+                      Edit draft
+                    </Button>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="py-8 text-sm text-muted-foreground">
+              {filter === "submitted"
+                ? "Your submissions will appear here."
+                : filter === "supported"
+                  ? "Posts you support will appear here."
+                  : "Posts you follow will appear here."}
+            </p>
+          )}
+          {query.hasNextPage ? (
+            <Button
+              className="mt-4"
+              variant="outline"
+              disabled={query.isFetchingNextPage}
+              onClick={() => void query.fetchNextPage()}
+            >
+              {query.isFetchingNextPage ? "Loading…" : "Load more"}
+            </Button>
+          ) : null}
+        </TabsContent>
+      </Tabs>
+      {filter === "submitted" ? <BrowserDraftClaims onLinked={reload} /> : null}
+      {message ? (
+        <p role="alert" className="mt-4 text-sm">
+          {message}
+        </p>
+      ) : null}
+      <Dialog
+        open={Boolean(editing)}
+        onOpenChange={(open) => {
+          if (!open) setEditing(undefined);
+        }}
+      >
+        <DialogContent className="max-h-[calc(100dvh-2rem)] overflow-y-auto">
+          {editing ? (
+            <OwnerDraftEditor
+              key={editing.id}
+              post={editing}
+              onSaved={async () => {
+                setEditing(undefined);
+                await reload();
+              }}
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </main>
+  );
+}
+function OwnerDraftEditor({
+  post,
+  onSaved,
+}: {
+  post: ParticipantPost;
+  onSaved(): Promise<void>;
+}) {
+  const [title, setTitle] = useState(post.title);
+  const [description, setDescription] = useState(post.description);
+  const [type, setType] = useState(post.type);
+  const [pending, setPending] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [error, setError] = useState<string>();
+  async function mutate(withdraw = false) {
+    setPending(true);
+    setError(undefined);
+    try {
+      await action({
+        action: withdraw ? "withdraw" : "edit",
+        id: post.id,
+        ...(withdraw ? {} : { title, description, type }),
+      });
+      await onSaved();
+    } catch {
+      setError(
+        "The draft could not be changed. It may have been published or moved beyond New.",
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+  return (
+    <>
+      <DialogTitle>Edit your draft</DialogTitle>
+      <DialogDescription>
+        You can change this submission while it is New and unpublished.
+      </DialogDescription>
+      <form
+        className="grid gap-4"
+        onSubmit={(event: FormEvent) => {
+          event.preventDefault();
+          void mutate();
+        }}
+      >
+        <label className="grid gap-2 text-sm">
+          Title
+          <Input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            maxLength={feedbax.submissions.maxTitleLength}
+            required
+            disabled={pending}
+          />
+        </label>
+        <label className="grid gap-2 text-sm">
+          Description
+          <Textarea
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            maxLength={feedbax.submissions.maxDescriptionLength}
+            required
+            disabled={pending}
+            rows={6}
+          />
+        </label>
+        <label className="grid gap-2 text-sm">
+          Type
+          <select
+            className="h-10 border border-input bg-background px-3"
+            value={type}
+            onChange={(event) => setType(event.target.value as typeof type)}
+            disabled={pending}
+          >
+            <option>Feature Request</option>
+            <option>Bug Report</option>
+            <option>General Feedback</option>
+          </select>
+        </label>
+        {error ? <p role="alert">{error}</p> : null}
+        <div className="flex flex-wrap justify-between gap-3">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={pending}
+            onClick={() => {
+              if (confirming) void mutate(true);
+              else setConfirming(true);
+            }}
+          >
+            {confirming ? "Confirm withdrawal" : "Withdraw draft"}
+          </Button>
+          <Button type="submit" disabled={pending}>
+            {pending ? "Saving…" : "Save changes"}
+          </Button>
+        </div>
+        {confirming ? (
+          <p className="text-sm text-muted-foreground">
+            Withdrawing removes this draft from the portal. Confirm only if you
+            no longer want to submit it.
+          </p>
+        ) : null}
+      </form>
+    </>
+  );
+}
+function BrowserDraftClaims({ onLinked }: { onLinked(): Promise<unknown> }) {
+  const drafts = useAuthorizedDraftPosts({ sort: "new" });
+  const [pending, setPending] = useState<string>();
+  const [message, setMessage] = useState<string>();
+  async function claim(id: string) {
+    setPending(id);
+    setMessage(undefined);
+    try {
+      const saved = readCapabilities(window.localStorage)[id];
+      if (!saved) throw new Error();
+      await action({
+        action: "claim",
+        id,
+        browserCapability: saved.browserCapability,
+      });
+      await onLinked();
+      setMessage("Draft linked to your product account.");
+    } catch {
+      setMessage(
+        "This draft could not be linked. Its browser access may no longer be valid, or it may belong to another account.",
+      );
+    } finally {
+      setPending(undefined);
+    }
+  }
+  if (!drafts.length) return null;
+  return (
+    <section
+      aria-label="Drafts saved in this browser"
+      className="mt-8 border-t border-border pt-6"
+    >
+      <h2 className="font-medium">Drafts saved in this browser</h2>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Link a draft using this browser’s existing access so you can find it on
+        your other devices.
+      </p>
+      <ul className="mt-3 space-y-3">
+        {drafts.map((draft) => (
+          <li
+            key={draft.id}
+            className="flex flex-wrap items-center justify-between gap-3"
+          >
+            <span className="text-sm">{draft.title}</span>
+            <Button
+              variant="outline"
+              disabled={Boolean(pending)}
+              onClick={() => void claim(draft.id)}
+            >
+              {pending === draft.id ? "Linking…" : "Link draft"}
+            </Button>
+          </li>
+        ))}
+      </ul>
+      {message ? (
+        <p role="status" className="mt-3 text-sm">
+          {message}
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/template/src/my-feedback-runtime.test.ts

@@ -0,0 +1,93 @@
+import { afterEach, expect, it } from "vitest";
+import { Miniflare } from "miniflare";
+import { readFile, readdir } from "node:fs/promises";
+import { resolve } from "node:path";
+import {
+  createConnectedStore,
+  createFeedbackModule,
+  createPostOwnership,
+} from "@feedbax/feedback";
+import { createMyFeedbackRequestHandler } from "./my-feedback-runtime";
+import { readSessionToken, sessionHash } from "./connected-identity";
+let runtime: Miniflare | undefined;
+afterEach(async () => {
+  await runtime?.dispose();
+});
+it("scopes private submitted feedback to the authenticated session and rejects cross-origin owner writes", async () => {
+  runtime = new Miniflare({
+    modules: true,
+    script: "export default {}",
+    d1Databases: ["DB"],
+    compatibilityDate: "2026-07-30",
+  });
+  const database = await runtime.getD1Database("DB");
+  const directory = resolve(import.meta.dirname, "../migrations");
+  for (const file of (await readdir(directory)).sort())
+    await database.exec(
+      (await readFile(resolve(directory, file), "utf8"))
+        .replace(/--[^\n]*/g, "")
+        .replace(/\s+/g, " "),
+    );
+  const store = createConnectedStore(database);
+  const alice = { subject: "app:alice", displayName: "Alice" };
+  const bob = { subject: "app:bob", displayName: "Bob" };
+  for (const who of [alice, bob])
+    await store.acceptIdentity({
+      ...who,
+      nonce: who.subject,
+      sessionHash: sessionHash(who.subject),
+      expiresAt: Date.now() + 60_000,
+    });
+  const modules = new Map<string, ReturnType<typeof createFeedbackModule>>();
+  const factory = (who: typeof alice) => {
+    if (!modules.has(who.subject))
+      modules.set(
+        who.subject,
+        createFeedbackModule({ ownership: createPostOwnership(database, who) }),
+      );
+    return modules.get(who.subject)!;
+  };
+  const post = await factory(alice).submitPost({
+    title: "Private pending submission",
+    description: "Original Participant text",
+    type: "Feature Request",
+    submitter: { email: "private@example.com" },
+  });
+  const handler = createMyFeedbackRequestHandler({
+    enabled: true,
+    siteUrl: "https://portal.example",
+    database,
+    getParticipant: async (request) => {
+      const token = readSessionToken(request);
+      return token ? store.session(sessionHash(token)) : undefined;
+    },
+    getFeedback: factory,
+    rateLimit: async () => true,
+  });
+  const request = (who?: string) =>
+    new Request(
+      "https://portal.example/internal/my-feedback?filter=submitted&subject=app:alice",
+      { headers: who ? { Cookie: `__Host-feedbax-session=${who}` } : {} },
+    );
+  expect((await handler(request()))?.status).toBe(401);
+  expect(await (await handler(request(bob.subject)))?.json()).toEqual({
+    items: [],
+  });
+  const mine = await handler(request(alice.subject));
+  expect(mine?.headers.get("Cache-Control")).toBe("no-store");
+  const body = await mine?.text();
+  expect(body).toContain("Private pending submission");
+  expect(body).not.toContain("private@example.com");
+  expect(body).not.toContain(alice.subject);
+  const crossOrigin = await handler(
+    new Request("https://portal.example/internal/my-feedback/post", {
+      method: "POST",
+      headers: {
+        Cookie: `__Host-feedbax-session=${alice.subject}`,
+        Origin: "https://attacker.example",
+      },
+      body: JSON.stringify({ action: "withdraw", id: post.id }),
+    }),
+  );
+  expect(crossOrigin?.status).toBe(403);
+});