@agent-native/dispatch 0.31.3 → 0.31.5

package/src/components/workspace-app-card.spec.tsx

@@ -1,4 +1,5 @@
 // @vitest-environment happy-dom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { MemoryRouter } from "react-router";
@@ -7,13 +8,29 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "./ui/tooltip";
 import { WorkspaceAppCard } from "./workspace-app-card";
 
-vi.mock("@agent-native/core/client/sharing", () => ({
-  ShareButton: ({ resourceTitle }: { resourceTitle?: string }) =>
-    React.createElement(
-      "button",
-      { type: "button", "aria-label": `Share ${resourceTitle ?? "app"}` },
-      "Share",
-    ),
+vi.mock("../../../core/dist/client/use-action.js", () => ({
+  useActionMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+  useActionQuery: () => ({
+    data: {
+      ownerEmail: "owner@example.com",
+      orgId: null,
+      visibility: "private",
+      role: "owner",
+      shares: [],
+    },
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: vi.fn(async () => undefined),
+  }),
+}));
+
+vi.mock("../../../core/dist/client/i18n.js", () => ({
+  useT: () => (key: string, values?: Record<string, unknown>) =>
+    String(values?.defaultValue ?? key),
 }));
 
 vi.mock("@agent-native/core/client/hooks", () => ({
@@ -44,6 +61,7 @@ vi.mock("@agent-native/core/client/host", () => ({
 describe("WorkspaceAppCard", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let queryClient: QueryClient;
 
   beforeEach(() => {
     frameState.inBuilderFrame = false;
@@ -51,10 +69,17 @@ describe("WorkspaceAppCard", () => {
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
   });
 
   afterEach(() => {
     act(() => root.unmount());
+    queryClient.clear();
     container.remove();
     vi.unstubAllGlobals();
   });
@@ -193,6 +218,77 @@ describe("WorkspaceAppCard", () => {
     }
   });
 
+  it("opens Share from the app settings menu instead of the card actions", async () => {
+    const animationFrameCallbacks: FrameRequestCallback[] = [];
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+      animationFrameCallbacks.push(callback);
+      return animationFrameCallbacks.length;
+    });
+
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <MemoryRouter>
+            <TooltipProvider>
+              <WorkspaceAppCard
+                app={{
+                  id: "analytics",
+                  name: "Analytics",
+                  path: "/analytics",
+                  status: "ready",
+                }}
+              />
+            </TooltipProvider>
+          </MemoryRouter>
+        </QueryClientProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-label="Share"]')).toBeNull();
+
+    const settingsButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Settings for Analytics"]',
+    );
+    expect(settingsButton).not.toBeNull();
+
+    await act(async () => {
+      settingsButton?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+
+    const shareItem = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === "Share");
+    expect(shareItem).not.toBeUndefined();
+
+    await act(async () => shareItem?.click());
+
+    expect(container.querySelector('button[aria-label="Share"]')).toBeNull();
+    expect(document.querySelector('[role="menu"]')).toBeNull();
+    expect(animationFrameCallbacks).toHaveLength(1);
+
+    await act(async () => animationFrameCallbacks.shift()?.(0));
+
+    expect(
+      container.querySelector('button[aria-label="Share"]'),
+    ).not.toBeNull();
+    expect(
+      document.body.querySelector("[data-agent-native-share-overlay]"),
+    ).not.toBeNull();
+
+    const shareButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Share"]',
+    );
+    expect(shareButton).not.toBeNull();
+
+    await act(async () => shareButton?.click());
+    expect(animationFrameCallbacks).toHaveLength(1);
+
+    await act(async () => animationFrameCallbacks.shift()?.(0));
+    expect(document.activeElement).toBe(settingsButton);
+  });
+
   it("keeps pinning in the app open menu", async () => {
     const onTogglePinned = vi.fn();
     await act(async () => {
@@ -270,7 +366,7 @@ describe("WorkspaceAppCard", () => {
     expect(settingsMenu?.className).toContain("w-48");
     expect(settingsMenu?.className).toContain("bg-popover");
     expect(settingsMenu?.className).toContain("shadow-md");
-    expect(document.querySelectorAll('[role="menuitem"] svg').length).toBe(4);
+    expect(document.querySelectorAll('[role="menuitem"] svg').length).toBe(5);
 
     await act(async () => resourcesItem?.click());
 

package/src/components/workspace-app-card.tsx

@@ -15,13 +15,14 @@ import {
   IconFileText,
   IconKey,
   IconPin,
+  IconShare3,
   IconSettings,
   IconTrash,
   IconUser,
   IconUsersGroup,
   IconWorld,
 } from "@tabler/icons-react";
-import { useEffect, useState, type FormEvent } from "react";
+import { useEffect, useRef, useState, type FormEvent } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
@@ -67,6 +68,23 @@ import { AppResourceEffectiveStack } from "./workspace-resource-effective-stack"
 const APP_CARD_ACTION_CLASS =
   "size-7 rounded-md p-0 text-muted-foreground transition-[background-color,color] hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground";
 
+function deferWorkspaceAppOverlayOpen(
+  event: { preventDefault: () => void },
+  closeMenu: () => void,
+  openOverlay: () => void,
+): void {
+  event.preventDefault();
+  closeMenu();
+  if (
+    typeof window !== "undefined" &&
+    typeof window.requestAnimationFrame === "function"
+  ) {
+    window.requestAnimationFrame(() => openOverlay());
+  } else {
+    setTimeout(openOverlay, 0);
+  }
+}
+
 export function WorkspaceAppCard({
   app,
   className,
@@ -211,17 +229,6 @@ export function WorkspaceAppCard({
             pendingOpenLabel={pendingOpenLabel}
             onTogglePinned={onTogglePinned}
           />
-          {!isPending ? (
-            <div className="pointer-events-auto">
-              <ShareButton
-                resourceType="workspace-app"
-                resourceId={app.id}
-                resourceTitle={app.name}
-                trigger="icon"
-                triggerClassName={APP_CARD_ACTION_CLASS}
-              />
-            </div>
-          ) : null}
           <WorkspaceAppSettings
             app={app}
             isArchived={isArchived}
@@ -236,6 +243,7 @@ export function WorkspaceAppCard({
               createdBy: t("agents.dashboardMetadataCreatedBy"),
               owner: t("dispatch.pages.appMetadataOwner"),
               teams: t("dispatch.pages.appMetadataTeams"),
+              share: t("share.share", { defaultValue: "Share" }),
             }}
           />
         </div>
@@ -376,6 +384,7 @@ type WorkspaceAppMetadataLabels = {
   createdBy: string;
   owner: string;
   teams: string;
+  share: string;
 };
 
 function WorkspaceAppSettings({
@@ -401,66 +410,112 @@ function WorkspaceAppSettings({
   onRemovePending: () => void;
   labels: WorkspaceAppMetadataLabels;
 }) {
+  const [shareOpen, setShareOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const settingsTriggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleShareOpenChange = (open: boolean) => {
+    setShareOpen(open);
+    if (open) return;
+
+    const restoreSettingsFocus = () => settingsTriggerRef.current?.focus();
+    if (
+      typeof window !== "undefined" &&
+      typeof window.requestAnimationFrame === "function"
+    ) {
+      window.requestAnimationFrame(restoreSettingsFocus);
+    } else {
+      setTimeout(restoreSettingsFocus, 0);
+    }
+  };
+
   return (
-    <DropdownMenu>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              aria-label={`Settings for ${app.name}`}
-              className={APP_CARD_ACTION_CLASS}
+    <>
+      <DropdownMenu open={settingsOpen} onOpenChange={setSettingsOpen}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                ref={settingsTriggerRef}
+                aria-label={`Settings for ${app.name}`}
+                className={APP_CARD_ACTION_CLASS}
+              >
+                <IconSettings size={15} />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>App settings</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent
+          align="end"
+          className={cn(APP_ACTION_MENU_CONTENT_CLASS, "min-w-max")}
+        >
+          <DropdownMenuItem onSelect={onEdit}>
+            <IconEdit size={14} aria-hidden="true" />
+            Edit details
+          </DropdownMenuItem>
+          {!isPending ? (
+            <DropdownMenuItem
+              onSelect={(event) =>
+                deferWorkspaceAppOverlayOpen(
+                  event,
+                  () => setSettingsOpen(false),
+                  () => setShareOpen(true),
+                )
+              }
             >
-              <IconSettings size={15} />
-            </Button>
-          </DropdownMenuTrigger>
-        </TooltipTrigger>
-        <TooltipContent>App settings</TooltipContent>
-      </Tooltip>
-      <DropdownMenuContent
-        align="end"
-        className={cn(APP_ACTION_MENU_CONTENT_CLASS, "min-w-max")}
-      >
-        <DropdownMenuItem onSelect={onEdit}>
-          <IconEdit size={14} aria-hidden="true" />
-          Edit details
-        </DropdownMenuItem>
-        {!isPending && !isArchived ? (
-          <>
-            <DropdownMenuItem onSelect={onKeys}>
-              <IconKey size={14} aria-hidden="true" />
-              Manage keys
+              <IconShare3 size={14} aria-hidden="true" />
+              {labels.share}
             </DropdownMenuItem>
-            <DropdownMenuItem onSelect={onResources}>
-              <IconFileText size={14} aria-hidden="true" />
-              Agent resources
+          ) : null}
+          {!isPending && !isArchived ? (
+            <>
+              <DropdownMenuItem onSelect={onKeys}>
+                <IconKey size={14} aria-hidden="true" />
+                Manage keys
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={onResources}>
+                <IconFileText size={14} aria-hidden="true" />
+                Agent resources
+              </DropdownMenuItem>
+            </>
+          ) : null}
+          {isPending ? (
+            <DropdownMenuItem
+              onSelect={onRemovePending}
+              className="text-destructive focus:text-destructive"
+            >
+              <IconTrash size={14} aria-hidden="true" />
+              Remove from list
             </DropdownMenuItem>
-          </>
-        ) : null}
-        {isPending ? (
-          <DropdownMenuItem
-            onSelect={onRemovePending}
-            className="text-destructive focus:text-destructive"
-          >
-            <IconTrash size={14} aria-hidden="true" />
-            Remove from list
-          </DropdownMenuItem>
-        ) : isArchived ? (
-          <DropdownMenuItem onSelect={onUnarchive}>
-            <IconEye size={14} aria-hidden="true" />
-            Restore to list
-          </DropdownMenuItem>
-        ) : (
-          <DropdownMenuItem onSelect={onArchive}>
-            <IconEyeOff size={14} aria-hidden="true" />
-            Hide from list
-          </DropdownMenuItem>
-        )}
-        <WorkspaceAppMetadata app={app} labels={labels} />
-      </DropdownMenuContent>
-    </DropdownMenu>
+          ) : isArchived ? (
+            <DropdownMenuItem onSelect={onUnarchive}>
+              <IconEye size={14} aria-hidden="true" />
+              Restore to list
+            </DropdownMenuItem>
+          ) : (
+            <DropdownMenuItem onSelect={onArchive}>
+              <IconEyeOff size={14} aria-hidden="true" />
+              Hide from list
+            </DropdownMenuItem>
+          )}
+          <WorkspaceAppMetadata app={app} labels={labels} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {!isPending && shareOpen ? (
+        <ShareButton
+          resourceType="workspace-app"
+          resourceId={app.id}
+          resourceTitle={app.name}
+          defaultOpen
+          onOpenChange={handleShareOpenChange}
+          triggerClassName="sr-only"
+        />
+      ) : null}
+    </>
   );
 }
 

package/src/routes/pages/transactional-email.$appId.$id.tsx

@@ -1,4 +1,4 @@
-import { callAction, useActionQuery } from "@agent-native/core/client/hooks";
+import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { IconAlertTriangle, IconArrowLeft } from "@tabler/icons-react";
 import { useQueries, useQuery } from "@tanstack/react-query";
@@ -10,7 +10,6 @@ import {
   callAppAction,
   fetchAppEmailCatalog,
   type AppEmailCatalog,
-  type AppTransactionalEmail,
   type LocalTransactionalEmailCatalog,
 } from "../../client/transactional-emails";
 import { ActionQueryError } from "../../components/action-query-error";

package/src/routes/pages/transactional-email.tsx

@@ -1,4 +1,4 @@
-import { callAction, useActionQuery } from "@agent-native/core/client/hooks";
+import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   IconAlertTriangle,

package/src/server/lib/mcp-gateway.ts

@@ -31,10 +31,7 @@ import {
   DISPATCH_WORKSPACE_SSO_FLAG,
   isWorkspaceSsoAppUrl,
 } from "../../shared/workspace-sso.js";
-import {
-  listWorkspaceApps,
-  type WorkspaceAppSummary,
-} from "./app-creation-store.js";
+import { listWorkspaceApps } from "./app-creation-store.js";
 import {
   getDispatchMcpAppAccessSettings,
   isAppAllowedByMcpAccess,