lael-labs/executor

.changeset/fair-admin-integrations.md+5−0

@@ -0,0 +1,5 @@
	1	---
	2	"@executor-js/react": patch
	3	---
	4
	5	Hide integration creation controls from workspace members and explain the admin requirement on direct add links.

e2e/cloud/integration-creation-permissions.test.ts+17−0

@@ -0,0 +1,17 @@
	1	import { Effect } from "effect";
	2	import { scenario } from "../src/scenario";
	3	import { Target } from "../src/services";
	4	import { integrationCreationPermissions } from "../src/integration-creation-permissions";
	5	import { forBrowser, joinOrg } from "./support/session";
	6
	7	scenario(
	8	"Integration creation · cloud members see admin guidance and admins can add",
	9	{ timeout: 180_000 },
	10	Effect.gen(function* () {
	11	const target = yield* Target;
	12	const admin = yield* target.newIdentity();
	13	const invitee = yield* target.newIdentity({ org: false });
	14	const member = yield* joinOrg(target, admin, invitee);
	15	yield* integrationCreationPermissions(forBrowser(admin), forBrowser(member));
	16	}),
	17	);

e2e/selfhost/integration-creation-permissions.test.ts+21−0

@@ -0,0 +1,21 @@
	1	import { Effect } from "effect";
	2	import { scenario } from "../src/scenario";
	3	import { Target } from "../src/services";
	4	import { integrationCreationPermissions } from "../src/integration-creation-permissions";
	5	import { createInvitedIdentity } from "../targets/selfhost";
	6
	7	scenario(
	8	"Integration creation · self-host members see admin guidance and owners can add",
	9	{ timeout: 180_000 },
	10	Effect.gen(function* () {
	11	const target = yield* Target;
	12	const admin = yield* target.newIdentity();
	13	const member = yield* Effect.promise(() =>
	14	createInvitedIdentity(target.baseUrl, admin, {
	15	role: "member",
	16	emailPrefix: "integration-permissions",
	17	}),
	18	);
	19	yield* integrationCreationPermissions(admin, member);
	20	}),
	21	);

e2e/src/integration-creation-permissions.ts+115−0

@@ -0,0 +1,115 @@
	1	import { randomBytes } from "node:crypto";
	2	import { expect } from "@effect/vitest";
	3	import { Effect } from "effect";
	4	import { composePluginApi } from "@executor-js/api/server";
	5	import { openApiHttpPlugin } from "@executor-js/plugin-openapi/api";
	6	import { IntegrationSlug } from "@executor-js/sdk/shared";
	7
	8	import { Api, Browser } from "./services";
	9	import type { Identity } from "./target";
	10	import { visit } from "./surfaces/browser";
	11
	12	const api = composePluginApi([openApiHttpPlugin()] as const);
	13
	14	/** Exercise integration creation and member restrictions through the shared console. */
	15	export const integrationCreationPermissions = (admin: Identity, member: Identity) =>
	16	Effect.gen(function* () {
	17	const browser = yield* Browser;
	18	const { client } = yield* Api;
	19	const adminClient = yield* client(api, admin);
	20	const title = `Permissions API ${randomBytes(4).toString("hex")}`;
	21	const slug = IntegrationSlug.make(title.toLowerCase().replaceAll(" ", "_"));
	22	const spec = JSON.stringify({
	23	openapi: "3.0.3",
	24	info: { title, version: "1.0.0" },
	25	servers: [{ url: "https://api.example.com" }],
	26	paths: {},
	27	components: {
	28	securitySchemes: { apiKey: { type: "apiKey", in: "header", name: "X-API-Key" } },
	29	},
	30	security: [{ apiKey: [] }],
	31	});
	32
	33	yield* Effect.ensuring(
	34	Effect.gen(function* () {
	35	yield* browser.session(admin, async ({ page, step }) => {
	36	await step("Admin opens the integration catalog", async () => {
	37	await visit(page, "/");
	38	await page.getByRole("button", { name: "Browse integrations", exact: true }).waitFor();
	39	await page.keyboard.press("ControlOrMeta+k");
	40	await page.getByRole("option", { name: /^Add OpenAPI/ }).waitFor();
	41	await page.keyboard.press("Escape");
	42	await page.getByRole("link", { name: "Add integration", exact: true }).click();
	43	await page.getByRole("heading", { name: "Add an integration", exact: true }).waitFor();
	44	await page
	45	.getByRole("textbox", { name: "Search integrations, or paste a URL" })
	46	.waitFor();
	47	});
	48	await step("Admin creates an integration from the setup form", async () => {
	49	await visit(page, "/integrations/add/openapi");
	50	await page.getByPlaceholder("https://api.example.com/openapi.json").fill(spec);
	51	await page.getByRole("button", { name: "Add integration", exact: true }).click();
	52	await page.waitForURL((url) => url.pathname.endsWith(`/integrations/${slug}`), {
	53	timeout: 30_000,
	54	});
	55	await page.getByRole("button", { name: "Edit", exact: true }).waitFor();
	56	await page.getByRole("button", { name: "Delete", exact: true }).waitFor();
	57	});
	58	});
	59	expect(yield* adminClient.integrations.get({ params: { slug } })).toMatchObject({
	60	name: title,
	61	});
	62
	63	yield* browser.session(member, async ({ page, step }) => {
	64	await step("Member sees existing integrations without an Add action", async () => {
	65	await visit(page, "/");
	66	await page.getByRole("heading", { name: "Integrations", exact: true }).waitFor();
	67	await page.getByTestId(`integration-entry-${slug}`).waitFor();
	68	expect(
	69	await page.getByRole("button", { name: "Browse integrations", exact: true }).count(),
	70	).toBe(0);
	71	await page.keyboard.press("ControlOrMeta+k");
	72	const palette = page.getByRole("dialog");
	73	await palette.getByRole("option", { name: new RegExp(title) }).waitFor();
	74	expect(await palette.getByRole("option", { name: /^Add / }).count()).toBe(0);
	75	expect(await palette.getByText("Popular integrations", { exact: true }).count()).toBe(
	76	0,
	77	);
	78	await page.keyboard.press("Escape");
	79	expect(await page.getByRole("link", { name: /^Add (an? )?integration$/ }).count()).toBe(
	80	0,
	81	);
	82	});
	83	await step(
	84	"Member opens an existing integration and can add a personal connection",
	85	async () => {
	86	await page.getByTestId(`integration-entry-${slug}`).click();
	87	await page.getByRole("button", { name: "Add connection", exact: true }).waitFor();
	88	expect(await page.getByRole("button", { name: /^(Edit\|Delete)$/ }).count()).toBe(0);
	89	await page.getByRole("button", { name: "Add connection", exact: true }).click();
	90	const dialog = page.getByRole("dialog");
	91	await dialog.waitFor();
	92	expect(await dialog.getByText("Workspace", { exact: true }).count()).toBe(0);
	93	},
	94	);
	95	for (const path of [
	96	"/integrations/browse",
	97	"/integrations/add/openapi",
	98	"/integrations/add/mcp",
	99	]) {
	100	await step(`Member follows ${path} and sees the admin explanation`, async () => {
	101	await visit(page, path);
	102	await page.getByRole("heading", { name: "An admin must add integrations" }).waitFor();
	103	expect(await page.getByRole("textbox").count()).toBe(0);
	104	expect(await page.getByRole("button", { name: /^Add/ }).count()).toBe(0);
	105	});
	106	}
	107	await step("Member returns to their existing integrations", async () => {
	108	await page.getByRole("link", { name: "Back to integrations" }).click();
	109	await page.getByRole("heading", { name: "Integrations", exact: true }).waitFor();
	110	});
	111	});
	112	}),
	113	adminClient.openapi.removeSpec({ params: { slug } }).pipe(Effect.ignore),
	114	);
	115	});

packages/react/src/components/command-palette.tsx+13−5

 import { PresetIcon } from "./preset-icon";
 import { integrationsOptimisticAtom } from "../api/atoms";
 import { useIntegrationPlugins } from "@executor-js/sdk/client";
+import { useCanCreateWorkspaceConnections } from "../multiplayer/use-admin-nav";
 import {
   CommandDialog,
   CommandEmpty,
   const integrationPlugins = useIntegrationPlugins();
   const navigate = useNavigate();
   const integrationsResult = useAtomValue(integrationsOptimisticAtom);
+  const canCreateIntegration = useCanCreateWorkspaceConnections();
   // Toggle with ⌘K / Ctrl+K
   useEffect(() => {
   return (
     <CommandDialog open={open} onOpenChange={onOpenChange}>
-      <CommandInput placeholder="Search integrations or jump to add…" />
+      <CommandInput
+        placeholder={
+          canCreateIntegration ? "Search integrations or jump to add…" : "Search integrations…"
+        }
+      />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
           </CommandGroup>
         )}
-        {connectedIntegrations.length > 0 && integrationPlugins.length > 0 && <CommandSeparator />}
+        {canCreateIntegration &&
+          connectedIntegrations.length > 0 &&
+          integrationPlugins.length > 0 && <CommandSeparator />}
-        {integrationPlugins.length > 0 && (
+        {canCreateIntegration && integrationPlugins.length > 0 && (
           <CommandGroup heading="Add integration">
             {integrationPlugins.map((plugin) => (
               <CommandItem
           </CommandGroup>
         )}
-        {presetEntries.length > 0 && <CommandSeparator />}
+        {canCreateIntegration && presetEntries.length > 0 && <CommandSeparator />}
-        {presetEntries.length > 0 && (
+        {canCreateIntegration && presetEntries.length > 0 && (
           <CommandGroup heading="Popular integrations">
             {presetEntries.map((e) => (
               <CommandItem

packages/react/src/components/integration-creation-gate.tsx+36−0

@@ -0,0 +1,36 @@
	1	import type { ReactNode } from "react";
	2	import { Link } from "@tanstack/react-router";
	3	import { useAtomValue } from "@effect/atom-react";
	4
	5	import { orgMembersAtom } from "../api/account-atoms";
	6	import { isAsyncResultLoading } from "../lib/async-result";
	7	import { useCanCreateWorkspaceConnections } from "../multiplayer/use-admin-nav";
	8	import { Button } from "./button";
	9	import { PageContainer, PageHeader } from "./page";
	10	import { Skeleton } from "./skeleton";
	11
	12	/** Keep integration creation flows behind the same role gate as edit and delete. */
	13	export function IntegrationCreationGate({ children }: { readonly children: ReactNode }) {
	14	const canCreate = useCanCreateWorkspaceConnections();
	15	const members = useAtomValue(orgMembersAtom);
	16	if (canCreate) return children;
	17	if (isAsyncResultLoading(members)) {
	18	return (
	19	<PageContainer>
	20	<Skeleton className="h-8 w-64" />
	21	</PageContainer>
	22	);
	23	}
	24
	25	return (
	26	<PageContainer>
	27	<PageHeader
	28	title="An admin must add integrations"
	29	description="Ask a workspace admin to add the integration. You can add personal connections to existing integrations."
	30	/>
	31	<Button asChild variant="outline">
	32	<Link to="/{-$orgSlug}">Back to integrations</Link>
	33	</Button>
	34	</PageContainer>
	35	);
	36	}

packages/react/src/multiplayer/shell.tsx+15−11

 import { Wordmark } from "../components/wordmark";
 import { useClientPlugins, useIntegrationPlugins } from "@executor-js/sdk/client";
 import { useAuth } from "./auth-context";
+import { useCanCreateWorkspaceConnections } from "./use-admin-nav";
 // ---------------------------------------------------------------------------
 // Shared multiplayer shell (cloud + self-host).
   },
 ) {
   const plugins = useClientPlugins();
+  const canCreateIntegration = useCanCreateWorkspaceConnections();
   const pluginNavItems = plugins.flatMap((plugin) =>
     (plugin.pages ?? []).flatMap((page) =>
       page.nav
         <div className="mt-5 mb-1 flex items-center justify-between px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
           <span>Integrations</span>
-          <Button
+          {canCreateIntegration && (
-            type="button"
+            <Button
-            variant="ghost"
+              type="button"
-            size="icon-xs"
+              variant="ghost"
-            aria-label="Browse integrations"
+              size="icon-xs"
-            title="Browse integrations"
+              aria-label="Browse integrations"
-            onClick={props.onOpenIntegrationConnect}
+              title="Browse integrations"
-            className="-my-1 text-muted-foreground hover:bg-sidebar-active/60 hover:text-foreground"
+              onClick={props.onOpenIntegrationConnect}
-          >
+              className="-my-1 text-muted-foreground hover:bg-sidebar-active/60 hover:text-foreground"
-            <PlusIcon className="size-3.5" />
+            >
-          </Button>
+              <PlusIcon className="size-3.5" />
+            </Button>
+          )}
         </div>
         <IntegrationList pathname={props.pathname} onNavigate={props.onNavigate} />

packages/react/src/pages/integration-add.tsx+13−3

-import { Suspense } from "react";
+import { Suspense, type ComponentProps } from "react";
 import { useAtomRefresh } from "@effect/atom-react";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { useIntegrationPlugins } from "@executor-js/sdk/client";
 import { integrationsOptimisticAtom } from "../api/atoms";
 import { trackEvent } from "../api/analytics";
 import { useExecutorDocumentTitle } from "../lib/document-title";
+import { IntegrationCreationGate } from "../components/integration-creation-gate";
 // ---------------------------------------------------------------------------
 // Page
 // ---------------------------------------------------------------------------
-export function AddIntegrationPage(props: {
+/** Render an integration setup flow only when the workspace role permits creation. */
+export function AddIntegrationPage(props: ComponentProps<typeof AddIntegrationContent>) {
+  useExecutorDocumentTitle("Add integration");
+  return (
+    <IntegrationCreationGate>
+      <AddIntegrationContent {...props} />
+    </IntegrationCreationGate>
+  );
+}
+function AddIntegrationContent(props: {
   pluginKey: string;
   url?: string;
   preset?: string;
   authKind?: string;
   specOverrides?: string;
 }) {
-  useExecutorDocumentTitle("Add integration");
   const { pluginKey, url, preset, namespace, authHeader, authNote, authKind, specOverrides } =
     props;
   const navigate = useNavigate();

packages/react/src/pages/integration-browse.tsx+10−0

 } from "../components/integration-favicon";
 import { Skeleton } from "../components/skeleton";
 import { useExecutorDocumentTitle } from "../lib/document-title";
+import { IntegrationCreationGate } from "../components/integration-creation-gate";
 import {
   availableCatalogKinds,
   catalogLogoUrl,
 // Page
 // ---------------------------------------------------------------------------
+/** Render the integration catalog only when the workspace role permits creation. */
 export function IntegrationBrowsePage() {
   useExecutorDocumentTitle("Add an integration");
+  return (
+    <IntegrationCreationGate>
+      <IntegrationBrowseContent />
+    </IntegrationCreationGate>
+  );
+}
+function IntegrationBrowseContent() {
   const navigate = useNavigate();
   const integrationPlugins = useIntegrationPlugins();
   const doDetect = useAtomSet(detectIntegration, { mode: "promiseExit" });

packages/react/src/pages/integrations.tsx+29−21

 import { useExecutorDocumentTitle } from "../lib/document-title";
 import { ErrorState } from "../components/error-state";
 import { isAsyncResultLoading } from "../lib/async-result";
+import { useCanCreateWorkspaceConnections } from "../multiplayer/use-admin-nav";
 const KIND_TO_PLUGIN_KEY: Record<string, string> = {
   openapi: "openapi",
   useExecutorDocumentTitle("Integrations");
   const integrations = useAtomValue(integrationsOptimisticAtom);
   const refreshIntegrations = useAtomRefresh(integrationsOptimisticAtom);
+  const canCreate = useCanCreateWorkspaceConnections();
   return (
     <PageContainer>
         title="Integrations"
         description="Tool providers available in this workspace."
         actions={
-          <Button asChild size="sm" className="gap-1.5">
+          canCreate && (
-            <Link
+            <Button asChild size="sm" className="gap-1.5">
-              to="/{-$orgSlug}/integrations/browse"
+              <Link
-              onClick={() => trackEvent("integration_browse_opened", { via: "header" })}
+                to="/{-$orgSlug}/integrations/browse"
-            >
+                onClick={() => trackEvent("integration_browse_opened", { via: "header" })}
-              <PlusIcon className="size-4" />
+              >
-              Add integration
+                <PlusIcon className="size-4" />
-            </Link>
+                Add integration
-          </Button>
+              </Link>
+            </Button>
+          )
         }
       />
           ),
           onSuccess: ({ value }) => {
             if (value.length === 0) {
-              return <EmptyIntegrations />;
+              return <EmptyIntegrations canCreate={canCreate} />;
             }
             return (
 // Empty state
 // ---------------------------------------------------------------------------
-function EmptyIntegrations() {
+function EmptyIntegrations({ canCreate }: { readonly canCreate: boolean }) {
   return (
     <div className="mb-8 flex flex-col items-center justify-center rounded-2xl border border-dashed border-border py-16">
       <div className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
       </div>
       <p className="mb-1 text-[14px] font-medium text-foreground/70">No integrations yet</p>
       <p className="mb-5 text-[13px] text-muted-foreground/60">
-        Connect an integration to start curating tools.
+        {canCreate
+          ? "Connect an integration to start curating tools."
+          : "Ask a workspace admin to add an integration."}
       </p>
-      <Button asChild size="sm" className="gap-1.5">
+      {canCreate && (
-        <Link
+        <Button asChild size="sm" className="gap-1.5">
-          to="/{-$orgSlug}/integrations/browse"
+          <Link
-          onClick={() => trackEvent("integration_browse_opened", { via: "empty-state" })}
+            to="/{-$orgSlug}/integrations/browse"
-        >
+            onClick={() => trackEvent("integration_browse_opened", { via: "empty-state" })}
-          <PlusIcon className="size-4" />
+          >
-          Add an integration
+            <PlusIcon className="size-4" />
-        </Link>
+            Add an integration
-      </Button>
+          </Link>
+        </Button>
+      )}
     </div>
   );
 }