@agent-native/core-corpus 0.216.0 → 0.218.0

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -1,11 +1,16 @@
 import { trackEvent } from "@agent-native/core/client/analytics";
 import { appPath } from "@agent-native/core/client/api-path";
-import {
-  useActionMutation,
-  useActionQuery,
-  useSession,
-} from "@agent-native/core/client/hooks";
+import { useActionMutation, useSession } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  useShareButtonController,
+  type ShareButtonController,
+} from "@agent-native/core/client/sharing/useShareButtonController";
+import {
+  ShareGeneralAccessRow,
+  SharePeopleInvite,
+  SharePeopleList,
+} from "@agent-native/toolkit/app/sharing";
 import { writeClipboardText } from "@agent-native/toolkit/clipboard";
 import {
   AgentDestinationActions,
@@ -41,14 +46,8 @@ import {
 } from "@/components/agent-destination-logos";
 import {
   CopyButton,
-  GeneralAccessSelect,
-  InvitePeopleField,
-  PeopleAccessSection,
   ShareSectionLabel,
   nestedLayerDismissGuards,
-  useResourceVisibilityMutation,
-  type SharesQuery,
-  type SharesResponse,
   type Visibility,
 } from "@/components/sharing/share-ui";
 import { Button } from "@/components/ui/button";
@@ -326,19 +325,22 @@ function ShareRecordingContent({
     setShareMode("people");
   }, [recordingId]);
 
-  const sharesQuery = useActionQuery<SharesResponse>(
-    "list-resource-shares",
-    { resourceType: "recording", resourceId: recordingId },
-    { enabled: !viewerReshareOnly },
-  );
-
-  const data = viewerReshareOnly ? undefined : sharesQuery.data;
+  const controller = useShareButtonController({
+    resourceType: "recording",
+    resourceId: recordingId,
+    defaultOpen: !viewerReshareOnly,
+    shareUrl: absoluteAppUrl(`/r/${recordingId}`),
+  });
+  const sharesQuery = controller.sharesQuery;
+  const data = viewerReshareOnly ? undefined : controller.data;
   const role = data?.role ?? initialRole;
-  const canManage = role === "owner" || role === "admin";
+  const canManage = !viewerReshareOnly && controller.canManage;
   const canViewShares =
     role === "owner" || role === "admin" || role === "editor";
   const visibility =
-    (data?.visibility as Visibility | null | undefined) ??
+    (viewerReshareOnly
+      ? null
+      : (controller.visibilityOverride ?? data?.visibility)) ??
     initialVisibility ??
     null;
   const canEmbed = canViewShares || visibility === "public";
@@ -355,9 +357,8 @@ function ShareRecordingContent({
           ownerViaId,
         );
 
-  const { setResourceVisibility, isPending: visibilityMutationPending } =
-    useResourceVisibilityMutation("recording", recordingId, sharesQuery);
-  const visibilityPending = visibilityMutationPending || sharesQuery.isLoading;
+  const visibilityPending =
+    controller.visibilityTransition.submitting || sharesQuery.isLoading;
   const sharesLoaded = visibility !== null;
   const viewTitle =
     view === "social"
@@ -368,11 +369,8 @@ function ShareRecordingContent({
   const peopleTab = (
     <PeopleTab
       recordingId={recordingId}
-      sharesQuery={sharesQuery}
+      controller={controller}
       visibility={visibility}
-      visibilityPending={visibilityPending}
-      onVisibilityChange={setResourceVisibility}
-      canManage={canManage}
       hasPassword={passwordProtected}
       expiresAt={currentExpiry}
       onPasswordChange={setPasswordProtected}
@@ -462,7 +460,7 @@ function ShareRecordingContent({
         ) : (
           <ClipsEmbedConfigurator
             recordingId={recordingId}
-            sharesQuery={sharesQuery}
+            controller={controller}
             visibility={visibility}
             canManage={canManage}
             ownerViaId={ownerViaId}
@@ -498,11 +496,8 @@ function ShareOptionRow({
 
 function PeopleTab({
   recordingId,
-  sharesQuery,
+  controller,
   visibility,
-  visibilityPending,
-  onVisibilityChange,
-  canManage,
   hasPassword,
   expiresAt,
   onPasswordChange,
@@ -514,14 +509,8 @@ function PeopleTab({
   onOpenEmbed,
 }: {
   recordingId: string;
-  sharesQuery: SharesQuery;
+  controller: ShareButtonController;
   visibility: Visibility | null;
-  visibilityPending: boolean;
-  onVisibilityChange: (
-    next: Visibility,
-    options?: { onSuccess?: () => void },
-  ) => void;
-  canManage: boolean;
   hasPassword?: boolean;
   expiresAt: string | null;
   onPasswordChange: (hasPassword: boolean) => void;
@@ -556,55 +545,37 @@ function PeopleTab({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-3">
-        {/* `share-resource` requires owner/admin, so anyone else would only
-              get a rejected submission. */}
-        {canManage ? (
-          <InvitePeopleField
-            resourceType="recording"
-            resourceId={recordingId}
-            resourceUrl={absoluteAppUrl(`/r/${recordingId}`)}
-            sharesQuery={sharesQuery}
-            onError={(err) =>
-              toast.error(
-                err instanceof Error
-                  ? err.message
-                  : t("clipsFinalRaw.inviteFailed"),
-              )
-            }
-          />
-        ) : null}
+        <SharePeopleInvite
+          controller={controller}
+          roleCopy={{
+            commenter: {
+              label: t("shareUi.recordingCommenter.label"),
+              description: t("shareUi.recordingCommenter.description"),
+            },
+          }}
+        />
 
         {canViewShares ? (
           visibility ? (
             <div className="flex flex-col gap-1.5">
               <ShareSectionLabel>{t("shareUi.whoHasAccess")}</ShareSectionLabel>
               <div className="flex flex-col gap-0.5">
-                <PeopleAccessSection
-                  resourceType="recording"
-                  resourceId={recordingId}
-                  sharesQuery={sharesQuery}
-                  canManage={canManage}
-                  roleCopy={{
-                    commenter: {
-                      label: t("shareUi.recordingCommenter.label"),
-                      description: t("shareUi.recordingCommenter.description"),
-                    },
-                  }}
-                  onError={(err, action) =>
-                    toast.error(
-                      err instanceof Error
-                        ? err.message
-                        : action === "permission"
-                          ? t("clipsFinalRaw.permissionUpdateFailed")
-                          : t("clipsFinalRaw.removePersonFailed"),
-                    )
-                  }
-                />
-                <GeneralAccessSelect
-                  visibility={visibility}
-                  canManage={canManage}
-                  isPending={visibilityPending}
-                  onChange={onVisibilityChange}
+                <div className="max-h-72 overflow-y-auto">
+                  <SharePeopleList
+                    controller={controller}
+                    roleCopy={{
+                      commenter: {
+                        label: t("shareUi.recordingCommenter.label"),
+                        description: t(
+                          "shareUi.recordingCommenter.description",
+                        ),
+                      },
+                    }}
+                  />
+                </div>
+                <ShareGeneralAccessRow
+                  controller={{ ...controller, visibility }}
+                  sentenceTrigger
                 />
                 <RecordingAccessControls
                   recordingId={recordingId}
@@ -1133,13 +1104,13 @@ function SocialTab({
 
 function ClipsEmbedConfigurator({
   recordingId,
-  sharesQuery,
+  controller,
   visibility,
   canManage,
   ownerViaId,
 }: {
   recordingId: string;
-  sharesQuery: SharesQuery;
+  controller: ShareButtonController;
   visibility: Visibility | null;
   canManage: boolean;
   ownerViaId?: string;
@@ -1156,12 +1127,8 @@ function ClipsEmbedConfigurator({
   const visibilityLabel = visibility
     ? t(`shareUi.visibility.${visibility}.label`)
     : "";
-  const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
-    "recording",
-    recordingId,
-    sharesQuery,
-  );
-  const makePublic = () => setResourceVisibility("public");
+  const isPending = controller.visibilityTransition.submitting;
+  const makePublic = () => controller.handleVisibility("public");
 
   const src = useMemo(() => {
     const params: string[] = [];
@@ -1219,6 +1186,12 @@ function ClipsEmbedConfigurator({
         </div>
       ) : null}
 
+      {controller.shareError ? (
+        <div role="alert" className="text-xs text-destructive">
+          {controller.shareError}
+        </div>
+      ) : null}
+
       <CopyButton value={code} className="w-full" variant="default">
         {t("shareDialog.copyEmbedCode")}
       </CopyButton>

package/corpus/templates/clips/app/components/sharing/share-test-support.tsx

@@ -0,0 +1,180 @@
+import type { ShareButtonSharesResponse } from "@agent-native/core/client/sharing/useShareButtonController";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { act, type ReactNode } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, expect, vi } from "vitest";
+
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+const mocks = vi.hoisted(() => ({
+  data: undefined as ShareButtonSharesResponse | undefined,
+  query: vi.fn(),
+  refetch: vi.fn(async () => undefined),
+  visibility: vi.fn(),
+  share: vi.fn(),
+  unshare: vi.fn(),
+  update: vi.fn(),
+  createLink: vi.fn(async () => ({
+    contextUrl: "https://clips.example.test/scoped-agent",
+  })),
+  clipboard: vi.fn(async (_value: string) => true),
+  track: vi.fn(),
+}));
+function mutation(name: string) {
+  if (name === "set-resource-visibility")
+    return { mutateAsync: mocks.visibility };
+  if (name === "share-resource") return { mutate: mocks.share };
+  if (name === "unshare-resource") return { mutate: mocks.unshare };
+  if (name.includes("agent-link") || name === "create-agent-resource-link")
+    return { mutateAsync: mocks.createLink };
+  return { mutate: mocks.update };
+}
+vi.mock("@agent-native/core/client/use-action", () => ({
+  useActionQuery: (...args: unknown[]) => {
+    mocks.query(...args);
+    return { data: mocks.data, refetch: mocks.refetch, isLoading: false };
+  },
+  useActionMutation: (name: string) => mutation(name),
+}));
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: (name: string) => mutation(name),
+  useSession: () => ({ session: { userId: "test-owner" } }),
+}));
+vi.mock("@agent-native/core/client/org/hooks", () => ({
+  useOrg: () => ({ data: null }),
+}));
+vi.mock("@agent-native/core/client/analytics", () => ({
+  trackEvent: mocks.track,
+}));
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string, options?: { defaultValue?: string }) =>
+    options?.defaultValue ?? key,
+}));
+vi.mock("@agent-native/toolkit/clipboard", () => ({
+  writeClipboardText: mocks.clipboard,
+}));
+vi.mock("@/components/ui/dialog", () => ({
+  Dialog: ({ open, children }: { open: boolean; children: ReactNode }) =>
+    open ? children : null,
+  DialogContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+}));
+vi.mock("@/components/ui/popover", () => ({
+  Popover: ({ children }: { children: ReactNode }) => children,
+  PopoverContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  PopoverTrigger: ({ children }: { children: ReactNode }) => children,
+  PopoverAnchor: ({ children }: { children: ReactNode }) => children,
+}));
+
+export function shareTestHarness() {
+  let root: ReturnType<typeof createRoot>;
+  let container: HTMLDivElement;
+  let client: QueryClient;
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({ members: [] }) })),
+    );
+    Element.prototype.scrollIntoView = vi.fn();
+    Element.prototype.hasPointerCapture = vi.fn(() => false);
+    Element.prototype.setPointerCapture = vi.fn();
+    Element.prototype.releasePointerCapture = vi.fn();
+    mocks.data = {
+      ownerEmail: "owner@example.test",
+      orgId: "org-test",
+      role: "owner",
+      visibility: "private",
+      shares: [
+        {
+          id: "share-test",
+          principalType: "user",
+          principalId: "viewer@example.test",
+          role: "viewer",
+        },
+      ],
+    };
+    mocks.visibility
+      .mockReset()
+      .mockImplementation(async ({ visibility }: { visibility: string }) => ({
+        visibility,
+      }));
+    mocks.clipboard.mockResolvedValue(true);
+    client = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    client.clear();
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+  return {
+    async render(children: ReactNode) {
+      await act(async () =>
+        root.render(
+          <QueryClientProvider client={client}>
+            <TooltipProvider>{children}</TooltipProvider>
+          </QueryClientProvider>,
+        ),
+      );
+    },
+    get client() {
+      return client;
+    },
+  };
+}
+export function button(label: string, scope: ParentNode = document.body) {
+  const result = Array.from(
+    scope.querySelectorAll<HTMLButtonElement>("button"),
+  ).find(
+    (el) =>
+      el.textContent?.trim() === label ||
+      el.getAttribute("aria-label") === label,
+  );
+  expect(result, `button ${label}`).toBeDefined();
+  return result!;
+}
+export async function click(element: HTMLElement) {
+  await act(async () => {
+    element.dispatchEvent(
+      new MouseEvent("mousedown", { bubbles: true, button: 0 }),
+    );
+    element.click();
+  });
+}
+export async function input(element: HTMLInputElement, value: string) {
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value",
+    )!.set!.call(element, value);
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+export async function select(trigger: HTMLElement, label: string) {
+  await act(async () =>
+    trigger.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    ),
+  );
+  const option = Array.from(
+    document.querySelectorAll<HTMLElement>('[role="option"]'),
+  ).find((el) => el.textContent?.includes(label));
+  expect(option, `option ${label}`).toBeDefined();
+  await click(option!);
+}
+
+export { mocks };