@n8n/frontend-module-type-availability-policies 0.1.0 → 0.2.0

package/LICENSE_EE.md

@@ -0,0 +1,27 @@
+# The n8n Enterprise License (the “Enterprise License”)
+
+Copyright (c) 2022-present n8n GmbH.
+
+With regard to the n8n Software:
+
+This software and associated documentation files (the "Software") may only be used in production, if
+you (and any entity that you represent) hold a valid n8n Enterprise license corresponding to your
+usage. Subject to the foregoing sentence, you are free to modify this Software and publish patches
+to the Software. You agree that n8n and/or its licensors (as applicable) retain all right, title and
+interest in and to all such modifications and/or patches, and all such modifications and/or patches
+may only be used, copied, modified, displayed, distributed, or otherwise exploited with a valid n8n
+Enterprise license for the corresponding usage. Notwithstanding the foregoing, you may copy and
+modify the Software for development and testing purposes, without requiring a subscription. You
+agree that n8n and/or its licensors (as applicable) retain all right, title and interest in and to
+all such modifications. You are not granted any other rights beyond what is expressly stated herein.
+Subject to the foregoing, it is forbidden to copy, merge, publish, distribute, sublicense, and/or
+sell the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+For all third party components incorporated into the n8n Software, those components are licensed
+under the original license provided by the owner of the applicable component.

package/README.md

@@ -10,6 +10,12 @@ The descriptor `id` must match the backend module id
 The module is license-gated on `feat:nodeTypePolicies` and is not a default module. Enable it
 in a dev instance with `N8N_ENABLED_MODULES=type-availability-policies`.
 
+`useTypeAvailabilityPoliciesStore` answers whether a project may use a node type. The store is
+passive: it does not watch the route or the active project, because the projects store lives in the
+shell. The shell calls `fetchForProject(projectId)` when a workflow opens or the active project
+changes. When the module is off, the request fails, a request is in flight for a different project,
+or nothing has loaded yet, every lookup reports "available".
+
 ```bash
 pnpm turbo typecheck lint test --filter=@n8n/frontend-module-type-availability-policies
 ```
@@ -17,5 +23,14 @@ pnpm turbo typecheck lint test --filter=@n8n/frontend-module-type-availability-p
 Use turbo and not `pnpm --filter`: this package reads its platform dependencies from source,
 and on a cold tree turbo builds them first.
 
+`useNodeTypeRestriction(type)` turns the store answer into `isRestricted` and `restrictionScope`
+for one node type. `isNodeTypeRestricted(type)` is the plain predicate for a list of nodes. The
+shell reads restriction through these and never through the store directly.
+
+`ContactInstanceAdminModal` lists the instance owners with a mail link. `RestrictedNodePopover` is the
+explanation for a row in a list: the lock trigger, the hover-opened popover and the dialog. The caller
+passes the row element and whether the row is keyboard-active. The shell renders both where a
+restricted node appears; the module owns their copy and behaviour.
+
 `packages/@n8n/module-cli/frontend-module-guide.md` holds the descriptor contract, the
 registration points, the import boundaries and the setup a module needs to render UI.

package/package.json

@@ -1,32 +1,53 @@
 {
   "name": "@n8n/frontend-module-type-availability-policies",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@n8n/frontend-module-sdk": "0.10.0"
+    "@n8n/api-types": "1.41.0",
+    "@n8n/design-system": "2.40.0",
+    "@n8n/frontend-module-sdk": "0.11.0",
+    "@n8n/i18n": "2.41.0",
+    "@n8n/rest-api-client": "2.41.0",
+    "@n8n/stores": "2.41.0",
+    "@vueuse/core": "^14.3.0",
+    "pinia": "^2.2.4",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.488",
     "@n8n/eslint-config": "0.0.1",
     "@n8n/frontend-test-utils": "0.1.0",
     "@n8n/frontend-vite-config": "0.1.0",
     "@n8n/playwright-janitor": "0.1.0",
     "@n8n/typescript-config": "1.12.0",
     "@n8n/vitest-config": "1.22.0",
+    "@pinia/testing": "^0.1.6",
     "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "eslint": "9.29.0",
     "typescript": "6.0.2",
     "unplugin-icons": "^23.0.1",
     "vite": "^8.0.2",
+    "vite-svg-loader": "5.1.0",
     "vitest": "^4.1.9",
     "vue-tsc": "^2.2.8"
   },
-  "license": "LicenseRef-n8n-sustainable-use",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://n8n.io",
+  "author": {
+    "name": "Jan Oberhauser",
+    "email": "jan@n8n.io"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/n8n-io/n8n.git"
+  },
   "scripts": {
     "clean": "rimraf .turbo",
     "typecheck": "vue-tsc --noEmit",

package/src/components/ContactInstanceAdminModal.test.ts

@@ -0,0 +1,90 @@
+import { ROLE } from '@n8n/api-types';
+import { createComponentRenderer, mockedStore, waitAllPromises } from '@n8n/frontend-test-utils';
+import type { IUser } from '@n8n/rest-api-client/api/users';
+import { useUsersStore } from '@n8n/stores/users.store';
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { describe, it, expect, vi } from 'vitest';
+
+import ContactInstanceAdminModal from './ContactInstanceAdminModal.vue';
+
+vi.mock('@n8n/design-system', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@n8n/design-system')>();
+	return {
+		...actual,
+		N8nDialog: {
+			name: 'N8nDialog',
+			props: ['open', 'header', 'description'],
+			template: '<div v-if="open"><h2>{{ header }}</h2><p>{{ description }}</p><slot /></div>',
+		},
+	};
+});
+
+const owner = {
+	id: 'owner-1',
+	firstName: 'Ada',
+	lastName: 'Lovelace',
+	fullName: 'Ada Lovelace',
+	email: 'ada@example.com',
+	role: ROLE.Owner,
+	isPendingUser: false,
+} as unknown as IUser;
+
+const member = { ...owner, id: 'member-1', fullName: 'Bob Builder', role: ROLE.Member } as IUser;
+
+const renderComponent = createComponentRenderer(ContactInstanceAdminModal, {
+	props: { open: true, description: 'Ask for the Slack node.', mailSubject: 'Access request' },
+});
+
+function setup(allUsers: IUser[], fetchUsers = vi.fn().mockResolvedValue(undefined)) {
+	setActivePinia(createTestingPinia());
+	const usersStore = mockedStore(useUsersStore);
+	usersStore.allUsers = allUsers;
+	usersStore.fetchUsers = fetchUsers;
+	return usersStore;
+}
+
+describe('ContactInstanceAdminModal', () => {
+	it('lists the owners with a mailto link and shows the description', async () => {
+		const usersStore = setup([owner, member]);
+		const { findByTestId, getByText } = renderComponent();
+
+		const list = await findByTestId('contact-instance-admin-list');
+
+		expect(usersStore.fetchUsers).toHaveBeenCalledWith({ filter: { isOwner: true } });
+		expect(list).toHaveTextContent('Ada Lovelace');
+		expect(list).not.toHaveTextContent('Bob Builder');
+		expect(getByText('ada@example.com').closest('a')).toHaveAttribute(
+			'href',
+			'mailto:ada@example.com?subject=Access%20request',
+		);
+		expect(getByText('Ask for the Slack node.')).toBeInTheDocument();
+	});
+
+	it('keeps loading until the latest owner lookup resolves after a reopen', async () => {
+		const lookups: Array<() => void> = [];
+		setup(
+			[owner],
+			vi.fn(async () => await new Promise<void>((resolve) => lookups.push(resolve))),
+		);
+		const { rerender, queryByTestId, findByTestId } = renderComponent();
+
+		await rerender({ open: false });
+		await rerender({ open: true });
+		expect(lookups).toHaveLength(2);
+
+		lookups[0]();
+		await waitAllPromises();
+		expect(queryByTestId('contact-instance-admin-list')).not.toBeInTheDocument();
+
+		lookups[1]();
+		expect(await findByTestId('contact-instance-admin-list')).toBeInTheDocument();
+	});
+
+	it('falls back to a generic hint when the owner lookup yields nothing', async () => {
+		setup([], vi.fn().mockRejectedValue(new Error('forbidden')));
+		const { findByTestId } = renderComponent();
+
+		expect(await findByTestId('contact-instance-admin-empty')).toBeInTheDocument();
+	});
+});

package/src/components/ContactInstanceAdminModal.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { ROLE } from '@n8n/api-types';
+import { N8nAvatar, N8nDialog, N8nLink, N8nLoading, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useUsersStore } from '@n8n/stores/users.store';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps<{
+	description: string;
+	mailSubject?: string;
+}>();
+
+const open = defineModel<boolean>('open', { default: false });
+
+const i18n = useI18n();
+const usersStore = useUsersStore();
+
+const isLoading = ref(false);
+let lookupId = 0;
+
+const owners = computed(() =>
+	usersStore.allUsers.filter(
+		(user) => user.role === ROLE.Owner && !user.isPendingUser && Boolean(user.email),
+	),
+);
+
+watch(
+	open,
+	async (isOpen) => {
+		if (!isOpen) return;
+
+		// A reopen can start a second lookup before the first resolves; only the latest one ends loading.
+		const id = ++lookupId;
+		isLoading.value = true;
+		await usersStore.fetchUsers({ filter: { isOwner: true } }).catch(() => undefined);
+		if (id === lookupId) isLoading.value = false;
+	},
+	{ immediate: true },
+);
+
+function mailtoHref(email: string): string {
+	const subject = props.mailSubject ? `?subject=${encodeURIComponent(props.mailSubject)}` : '';
+	return `mailto:${email}${subject}`;
+}
+</script>
+
+<template>
+	<N8nDialog
+		v-model:open="open"
+		:header="i18n.baseText('typeAvailabilityPolicies.contactAdmin.title')"
+		:description="description"
+		size="medium"
+		data-test-id="contact-instance-admin-modal"
+	>
+		<N8nLoading v-if="isLoading" :rows="2" variant="p" :class="$style.body" />
+		<ul
+			v-else-if="owners.length"
+			:class="[$style.body, $style.list]"
+			data-test-id="contact-instance-admin-list"
+		>
+			<li v-for="owner in owners" :key="owner.id" :class="$style.owner">
+				<N8nAvatar :first-name="owner.firstName" :last-name="owner.lastName" size="small" />
+				<div :class="$style.identity">
+					<N8nText size="medium" color="text-dark">{{ owner.fullName }}</N8nText>
+					<N8nLink :to="mailtoHref(owner.email ?? '')" size="small" theme="text">
+						{{ owner.email }}
+					</N8nLink>
+				</div>
+			</li>
+		</ul>
+		<N8nText
+			v-else
+			tag="p"
+			size="small"
+			color="text-base"
+			:class="$style.body"
+			data-test-id="contact-instance-admin-empty"
+		>
+			{{ i18n.baseText('typeAvailabilityPolicies.contactAdmin.empty') }}
+		</N8nText>
+	</N8nDialog>
+</template>
+
+<style lang="scss" module>
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--lg);
+}
+
+.body {
+	margin-top: var(--spacing--lg);
+}
+
+.owner {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--xs);
+}
+
+.identity {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+</style>

package/src/components/RestrictedNodePopover.test.ts

@@ -0,0 +1,77 @@
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import { screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+
+import RestrictedNodePopover from './RestrictedNodePopover.vue';
+
+const DESCRIPTION =
+	'An administrator blocked this node. To use it in your workflows, contact an instance administrator for access.';
+
+const renderComponent = createComponentRenderer(RestrictedNodePopover, {
+	props: { nodeTypeName: 'Gmail', scope: 'instance' },
+	global: {
+		stubs: {
+			ContactInstanceAdminModal: {
+				props: ['open', 'description'],
+				template:
+					'<div v-if="open" data-test-id="contact-instance-admin-modal">{{ description }}</div>',
+			},
+		},
+	},
+});
+
+const renderPopover = (props: Record<string, unknown>) => renderComponent({ props });
+
+describe('RestrictedNodePopover', () => {
+	it('renders only the lock while the row is neither hovered nor active', () => {
+		renderPopover({ active: false });
+
+		expect(screen.getByTestId('node-restricted-icon')).toBeInTheDocument();
+		expect(screen.queryByTestId('node-restricted-popover')).not.toBeInTheDocument();
+	});
+
+	it('opens for the keyboard-active row and names the node and the instance scope', async () => {
+		renderPopover({ active: true });
+
+		expect(await screen.findByTestId('node-restricted-popover')).toBeInTheDocument();
+		expect(screen.getByText('Gmail')).toBeInTheDocument();
+		expect(screen.getByText('Restricted on this instance')).toBeInTheDocument();
+		expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
+	});
+
+	it('names the project scope', async () => {
+		renderPopover({ active: true, scope: 'project' });
+
+		expect(await screen.findByText('Restricted in this project')).toBeInTheDocument();
+	});
+
+	it('falls back to the generic title for an unknown scope', async () => {
+		renderPopover({ active: true, scope: undefined });
+
+		expect(await screen.findByText('This node is restricted')).toBeInTheDocument();
+	});
+
+	it('opens when the anchor row is hovered and stays open while the pointer is on the popover', async () => {
+		const anchor = document.createElement('div');
+		document.body.appendChild(anchor);
+		renderPopover({ anchor });
+
+		await userEvent.hover(anchor);
+		const popover = await screen.findByTestId('node-restricted-popover');
+		await userEvent.hover(popover);
+		await userEvent.unhover(anchor);
+
+		expect(screen.getByTestId('node-restricted-popover')).toBeInTheDocument();
+		anchor.remove();
+	});
+
+	it('opens the contact-admin dialog for this node type', async () => {
+		renderPopover({ active: true });
+		expect(screen.queryByTestId('contact-instance-admin-modal')).not.toBeInTheDocument();
+
+		await userEvent.click(await screen.findByTestId('node-restricted-contact-admin'));
+
+		expect(screen.getByTestId('contact-instance-admin-modal')).toHaveTextContent('Gmail');
+	});
+});

package/src/components/RestrictedNodePopover.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { NodeTypeAvailabilityScope } from '@n8n/api-types';
+import { N8nButton, N8nIcon, N8nPopover, N8nText } from '@n8n/design-system';
+import { useI18n, type BaseTextKey } from '@n8n/i18n';
+import { unrefElement, useElementHover, type MaybeElement } from '@vueuse/core';
+import { computed, ref } from 'vue';
+
+import ContactInstanceAdminModal from './ContactInstanceAdminModal.vue';
+
+const props = defineProps<{
+	nodeTypeName: string;
+	scope?: NodeTypeAvailabilityScope;
+	/** The list row the popover explains. It opens beside this element, not beside the lock. */
+	anchor?: MaybeElement;
+	/** The row is the keyboard-active item, which opens the popover like a hover does. */
+	active?: boolean;
+}>();
+
+/** Leaving waits this long before closing, so the pointer can cross the gap to the popover. */
+const HOVER_GRACE_MS = 200;
+
+const SCOPE_TITLE_KEY: Record<NodeTypeAvailabilityScope, BaseTextKey> = {
+	instance: 'typeAvailabilityPolicies.restrictedNode.scope.instance',
+	project: 'typeAvailabilityPolicies.restrictedNode.scope.project',
+};
+
+const i18n = useI18n();
+
+const anchorElement = computed(() => unrefElement(props.anchor) ?? undefined);
+const contentRef = ref<HTMLElement | null>(null);
+const anchorHovered = useElementHover(anchorElement, { delayLeave: HOVER_GRACE_MS });
+const contentHovered = useElementHover(contentRef, { delayLeave: HOVER_GRACE_MS });
+const open = computed(() => anchorHovered.value || contentHovered.value || props.active);
+
+const isContactAdminOpen = ref(false);
+
+const scopeKey = computed<BaseTextKey>(
+	() =>
+		(props.scope && SCOPE_TITLE_KEY[props.scope]) ??
+		'typeAvailabilityPolicies.restrictedNode.title',
+);
+
+const interpolate = computed(() => ({ nodeType: props.nodeTypeName }));
+</script>
+
+<template>
+	<span :class="$style.root">
+		<N8nPopover
+			:open="open"
+			side="left"
+			align="center"
+			:side-offset="24"
+			:reference="anchorElement"
+			:suppress-auto-focus="true"
+			:content-class="$style.card"
+			width="254px"
+		>
+			<template #trigger>
+				<N8nIcon
+					icon="lock"
+					size="small"
+					:title="i18n.baseText('typeAvailabilityPolicies.restrictedNode.title')"
+					data-test-id="node-restricted-icon"
+				/>
+			</template>
+			<template #content>
+				<div ref="contentRef" :class="$style.popover" data-test-id="node-restricted-popover">
+					<N8nText tag="p" size="large" color="text-dark">{{ nodeTypeName }}</N8nText>
+					<N8nText tag="p" size="small" color="text-light">{{ i18n.baseText(scopeKey) }}</N8nText>
+					<N8nText tag="p" size="small" color="text-base" :class="$style.description">
+						{{ i18n.baseText('typeAvailabilityPolicies.restrictedNode.popover.description') }}
+					</N8nText>
+					<N8nButton
+						variant="outline"
+						size="small"
+						:class="$style.action"
+						data-test-id="node-restricted-contact-admin"
+						@click="isContactAdminOpen = true"
+					>
+						{{ i18n.baseText('typeAvailabilityPolicies.restrictedNode.contactAdmin') }}
+						<N8nIcon icon="arrow-up-right" size="xsmall" />
+					</N8nButton>
+				</div>
+			</template>
+		</N8nPopover>
+		<ContactInstanceAdminModal
+			v-model:open="isContactAdminOpen"
+			:description="
+				i18n.baseText('typeAvailabilityPolicies.restrictedNode.contactAdmin.description', {
+					interpolate,
+				})
+			"
+			:mail-subject="
+				i18n.baseText('typeAvailabilityPolicies.restrictedNode.contactAdmin.mailSubject', {
+					interpolate,
+				})
+			"
+		/>
+	</span>
+</template>
+
+<style lang="scss" module>
+// Two teleported children and one visible trigger: the wrapper must not affect the slot's layout.
+.root {
+	display: contents;
+}
+
+// The design system defaults popovers to --radius--xs (8px); the design uses the editor's 4px.
+.card {
+	border-radius: var(--radius);
+}
+
+.popover {
+	padding: var(--spacing--xs);
+	text-align: left;
+}
+
+.description {
+	margin-top: var(--spacing--3xs);
+}
+
+.action {
+	margin-top: var(--spacing--sm);
+}
+</style>

package/src/composables/useNodeTypeRestriction.test.ts

@@ -0,0 +1,37 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ref } from 'vue';
+
+import { isNodeTypeRestricted, useNodeTypeRestriction } from './useNodeTypeRestriction';
+import { useTypeAvailabilityPoliciesStore } from '../type-availability-policies.store';
+
+describe('useNodeTypeRestriction', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+		vi.spyOn(useTypeAvailabilityPoliciesStore(), 'getNodeTypeAvailability').mockImplementation(
+			(name) =>
+				name === 'n8n-nodes-base.slack'
+					? { name, available: false, scope: 'project' }
+					: { name, available: true },
+		);
+	});
+
+	it('reports a blocked type with the scope that blocked it', () => {
+		const nodeType = ref<string | null>('n8n-nodes-base.set');
+
+		const { isRestricted, restrictionScope } = useNodeTypeRestriction(nodeType);
+		expect(isRestricted.value).toBe(false);
+
+		nodeType.value = 'n8n-nodes-base.slack';
+		expect(isRestricted.value).toBe(true);
+		expect(restrictionScope.value).toBe('project');
+
+		nodeType.value = null;
+		expect(isRestricted.value).toBe(false);
+	});
+
+	it('answers the plain predicate', () => {
+		expect(isNodeTypeRestricted('n8n-nodes-base.slack')).toBe(true);
+		expect(isNodeTypeRestricted('n8n-nodes-base.set')).toBe(false);
+	});
+});

package/src/composables/useNodeTypeRestriction.ts

@@ -0,0 +1,25 @@
+import type { NodeTypeAvailability } from '@n8n/api-types';
+import { computed, toValue, type MaybeRefOrGetter } from 'vue';
+
+import { useTypeAvailabilityPoliciesStore } from '../type-availability-policies.store';
+
+export function getNodeTypeRestriction(nodeType: string): NodeTypeAvailability | null {
+	const availability = useTypeAvailabilityPoliciesStore().getNodeTypeAvailability(nodeType);
+	return availability && !availability.available ? availability : null;
+}
+
+export function isNodeTypeRestricted(nodeType: string): boolean {
+	return getNodeTypeRestriction(nodeType) !== null;
+}
+
+export function useNodeTypeRestriction(nodeType: MaybeRefOrGetter<string | null | undefined>) {
+	const restriction = computed(() => {
+		const type = toValue(nodeType);
+		return type ? getNodeTypeRestriction(type) : null;
+	});
+
+	const isRestricted = computed(() => restriction.value !== null);
+	const restrictionScope = computed(() => restriction.value?.scope);
+
+	return { isRestricted, restrictionScope };
+}

package/src/index.ts

@@ -1 +1,9 @@
 export { TypeAvailabilityPoliciesModule } from './type-availability-policies.module';
+export { useTypeAvailabilityPoliciesStore } from './type-availability-policies.store';
+export {
+	getNodeTypeRestriction,
+	isNodeTypeRestricted,
+	useNodeTypeRestriction,
+} from './composables/useNodeTypeRestriction';
+export { default as ContactInstanceAdminModal } from './components/ContactInstanceAdminModal.vue';
+export { default as RestrictedNodePopover } from './components/RestrictedNodePopover.vue';

package/src/type-availability-policies.api.ts

@@ -0,0 +1,10 @@
+import type { AvailableTypesResponse } from '@n8n/api-types';
+import { makeRestApiRequest } from '@n8n/rest-api-client';
+import type { IRestApiContext } from '@n8n/rest-api-client';
+
+export async function fetchAvailableTypes(
+	context: IRestApiContext,
+	projectId: string,
+): Promise<AvailableTypesResponse> {
+	return await makeRestApiRequest(context, 'GET', `/projects/${projectId}/available-types`);
+}

package/src/type-availability-policies.constants.ts

@@ -1,2 +1,4 @@
 /** Must stay the same as the backend module id: `settings.activeModules` is keyed by it. */
 export const TYPE_AVAILABILITY_POLICIES_MODULE_ID = 'type-availability-policies';
+
+export const TYPE_AVAILABILITY_POLICIES_STORE_ID = 'typeAvailabilityPolicies';

package/src/type-availability-policies.store.test.ts

@@ -0,0 +1,249 @@
+import type { AvailableTypesResponse } from '@n8n/api-types';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+import { useTypeAvailabilityPoliciesStore } from './type-availability-policies.store';
+
+const mocks = vi.hoisted(() => ({
+	fetchAvailableTypes: vi.fn(),
+	isModuleActive: vi.fn(),
+}));
+
+vi.mock('./type-availability-policies.api', () => ({
+	fetchAvailableTypes: mocks.fetchAvailableTypes,
+}));
+
+vi.mock('@n8n/stores/settings.store', () => ({
+	useSettingsStore: () => ({ isModuleActive: mocks.isModuleActive }),
+}));
+
+vi.mock('@n8n/stores/useRootStore', () => ({
+	useRootStore: () => ({
+		restApiContext: { baseUrl: 'http://localhost', pushRef: 'test' },
+	}),
+}));
+
+const ALLOWED = 'n8n-nodes-base.slack';
+const RESTRICTED = 'n8n-nodes-base.executeCommand';
+const UNKNOWN = 'n8n-nodes-base.doesNotExist';
+
+const PROJECT_A_RESPONSE: AvailableTypesResponse = [
+	{ name: ALLOWED, available: true },
+	{ name: RESTRICTED, available: false, scope: 'project', matchedRuleId: 'rule-1' },
+];
+
+const PROJECT_B_RESPONSE: AvailableTypesResponse = [
+	{ name: ALLOWED, available: false, scope: 'instance' },
+	{ name: RESTRICTED, available: true },
+];
+
+describe('useTypeAvailabilityPoliciesStore', () => {
+	let errorSpy: ReturnType<typeof vi.spyOn>;
+
+	beforeEach(() => {
+		mocks.fetchAvailableTypes.mockReset();
+		mocks.isModuleActive.mockReset().mockReturnValue(true);
+		errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		errorSpy.mockRestore();
+	});
+
+	describe('when the module is not active', () => {
+		beforeEach(() => {
+			mocks.isModuleActive.mockReturnValue(false);
+		});
+
+		it('reports every type as available and makes no request', async () => {
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+
+			expect(store.isEnabled).toBe(false);
+			expect(mocks.fetchAvailableTypes).not.toHaveBeenCalled();
+			expect(store.getNodeTypeAvailability(RESTRICTED)).toEqual({
+				name: RESTRICTED,
+				available: true,
+			});
+		});
+	});
+
+	describe('when the instance reports no active modules', () => {
+		beforeEach(() => {
+			mocks.isModuleActive.mockReturnValue(undefined);
+		});
+
+		it('reports every type as available and makes no request', async () => {
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+
+			expect(store.isEnabled).toBe(false);
+			expect(mocks.fetchAvailableTypes).not.toHaveBeenCalled();
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+	});
+
+	describe('when the module is active', () => {
+		it('returns the restricted entry with its scope and rule', async () => {
+			mocks.fetchAvailableTypes.mockResolvedValue(PROJECT_A_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+
+			expect(mocks.fetchAvailableTypes).toHaveBeenCalledWith(
+				expect.objectContaining({ baseUrl: 'http://localhost' }),
+				'project-a',
+			);
+			expect(store.loadedProjectId).toBe('project-a');
+			expect(store.getNodeTypeAvailability(RESTRICTED)).toEqual({
+				name: RESTRICTED,
+				available: false,
+				scope: 'project',
+				matchedRuleId: 'rule-1',
+			});
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(false);
+		});
+
+		it('reports allowed and unknown types as available', async () => {
+			mocks.fetchAvailableTypes.mockResolvedValue(PROJECT_A_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+
+			expect(store.getNodeTypeAvailability(ALLOWED)).toEqual({ name: ALLOWED, available: true });
+			expect(store.getNodeTypeAvailability(UNKNOWN)).toEqual({ name: UNKNOWN, available: true });
+		});
+
+		it('does not refetch the project that is already loaded', async () => {
+			mocks.fetchAvailableTypes.mockResolvedValue(PROJECT_A_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			await store.fetchForProject('project-a');
+
+			expect(mocks.fetchAvailableTypes).toHaveBeenCalledTimes(1);
+		});
+
+		it('reflects the new project after a switch', async () => {
+			mocks.fetchAvailableTypes
+				.mockResolvedValueOnce(PROJECT_A_RESPONSE)
+				.mockResolvedValueOnce(PROJECT_B_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			await store.fetchForProject('project-b');
+
+			expect(store.loadedProjectId).toBe('project-b');
+			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(false);
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+
+		it('reports every type as available while a project switch is in flight', async () => {
+			let resolveB: (value: AvailableTypesResponse) => void = () => {};
+			mocks.fetchAvailableTypes.mockResolvedValueOnce(PROJECT_A_RESPONSE).mockImplementationOnce(
+				async () =>
+					await new Promise<AvailableTypesResponse>((resolve) => {
+						resolveB = resolve;
+					}),
+			);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			const pendingB = store.fetchForProject('project-b');
+
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+			expect(store.getNodeTypeAvailability(RESTRICTED)).toEqual({
+				name: RESTRICTED,
+				available: true,
+			});
+
+			resolveB(PROJECT_B_RESPONSE);
+			await pendingB;
+
+			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(false);
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+
+		it('discards a response for a project that is no longer requested', async () => {
+			let resolveA: (value: AvailableTypesResponse) => void = () => {};
+			mocks.fetchAvailableTypes
+				.mockImplementationOnce(
+					async () =>
+						await new Promise<AvailableTypesResponse>((resolve) => {
+							resolveA = resolve;
+						}),
+				)
+				.mockResolvedValueOnce(PROJECT_B_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			const pendingA = store.fetchForProject('project-a');
+			await store.fetchForProject('project-b');
+			resolveA(PROJECT_A_RESPONSE);
+			await pendingA;
+
+			expect(store.loadedProjectId).toBe('project-b');
+			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(false);
+			expect(store.isLoading).toBe(false);
+		});
+
+		it('discards an in-flight response when the user returns to the loaded project', async () => {
+			let resolveB: (value: AvailableTypesResponse) => void = () => {};
+			mocks.fetchAvailableTypes.mockResolvedValueOnce(PROJECT_A_RESPONSE).mockImplementationOnce(
+				async () =>
+					await new Promise<AvailableTypesResponse>((resolve) => {
+						resolveB = resolve;
+					}),
+			);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			const pendingB = store.fetchForProject('project-b');
+			await store.fetchForProject('project-a');
+			resolveB(PROJECT_B_RESPONSE);
+			await pendingB;
+
+			expect(store.loadedProjectId).toBe('project-a');
+			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(true);
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(false);
+			expect(store.isLoading).toBe(false);
+		});
+
+		it('degrades to available and logs when the request fails', async () => {
+			mocks.fetchAvailableTypes.mockRejectedValue(new Error('endpoint failure'));
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+
+			expect(errorSpy).toHaveBeenCalledTimes(1);
+			expect(store.loadedProjectId).toBeNull();
+			expect(store.isLoading).toBe(false);
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+
+		it('retries after a failed request', async () => {
+			mocks.fetchAvailableTypes
+				.mockRejectedValueOnce(new Error('endpoint failure'))
+				.mockResolvedValueOnce(PROJECT_A_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			await store.fetchForProject('project-a');
+
+			expect(mocks.fetchAvailableTypes).toHaveBeenCalledTimes(2);
+			expect(store.loadedProjectId).toBe('project-a');
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(false);
+		});
+
+		it('clears all state on reset', async () => {
+			mocks.fetchAvailableTypes.mockResolvedValue(PROJECT_A_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			store.reset();
+
+			expect(store.loadedProjectId).toBeNull();
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+	});
+});

package/src/type-availability-policies.store.ts

@@ -0,0 +1,85 @@
+import type { NodeTypeAvailability } from '@n8n/api-types';
+import { useSettingsStore } from '@n8n/stores/settings.store';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import { defineStore } from 'pinia';
+import { computed, ref, shallowRef } from 'vue';
+
+import { fetchAvailableTypes } from './type-availability-policies.api';
+import {
+	TYPE_AVAILABILITY_POLICIES_MODULE_ID,
+	TYPE_AVAILABILITY_POLICIES_STORE_ID,
+} from './type-availability-policies.constants';
+
+export const useTypeAvailabilityPoliciesStore = defineStore(
+	TYPE_AVAILABILITY_POLICIES_STORE_ID,
+	() => {
+		const rootStore = useRootStore();
+		const settingsStore = useSettingsStore();
+
+		const restrictedNodeTypes = shallowRef<ReadonlyMap<string, NodeTypeAvailability>>(new Map());
+		const loadedProjectId = ref<string | null>(null);
+		const requestedProjectId = ref<string | null>(null);
+		const isLoading = ref(false);
+
+		const isEnabled = computed(
+			() => settingsStore.isModuleActive(TYPE_AVAILABILITY_POLICIES_MODULE_ID) ?? false,
+		);
+
+		async function fetchForProject(projectId: string): Promise<void> {
+			if (!isEnabled.value) return;
+
+			requestedProjectId.value = projectId;
+
+			if (projectId === loadedProjectId.value) {
+				isLoading.value = false;
+				return;
+			}
+
+			isLoading.value = true;
+			try {
+				const entries = await fetchAvailableTypes(rootStore.restApiContext, projectId);
+				if (requestedProjectId.value !== projectId) return;
+
+				restrictedNodeTypes.value = new Map(
+					entries.filter((entry) => !entry.available).map((entry) => [entry.name, entry]),
+				);
+				loadedProjectId.value = projectId;
+			} catch (error) {
+				if (requestedProjectId.value !== projectId) return;
+
+				console.error('Failed to fetch available types for project', projectId, error);
+				restrictedNodeTypes.value = new Map();
+				loadedProjectId.value = null;
+			} finally {
+				if (requestedProjectId.value === projectId) isLoading.value = false;
+			}
+		}
+
+		function getNodeTypeAvailability(name: string): NodeTypeAvailability {
+			if (loadedProjectId.value !== requestedProjectId.value) return { name, available: true };
+
+			return restrictedNodeTypes.value.get(name) ?? { name, available: true };
+		}
+
+		function isNodeTypeAvailable(name: string): boolean {
+			return getNodeTypeAvailability(name).available;
+		}
+
+		function reset(): void {
+			restrictedNodeTypes.value = new Map();
+			loadedProjectId.value = null;
+			requestedProjectId.value = null;
+			isLoading.value = false;
+		}
+
+		return {
+			isEnabled,
+			isLoading,
+			loadedProjectId,
+			fetchForProject,
+			getNodeTypeAvailability,
+			isNodeTypeAvailable,
+			reset,
+		};
+	},
+);

package/vite.config.ts

@@ -1,4 +1,6 @@
 import vue from '@vitejs/plugin-vue';
+import icons from 'unplugin-icons/vite';
+import svgLoader from 'vite-svg-loader';
 import { fileURLToPath } from 'node:url';
 import { resolve } from 'node:path';
 import { defineConfig, mergeConfig } from 'vite';
@@ -10,7 +12,7 @@ const packagesDir = resolve(packageDir, '..', '..', '..');
 
 export default mergeConfig(
 	defineConfig({
-		plugins: [vue()],
+		plugins: [vue(), icons({ compiler: 'vue3' }), svgLoader()],
 		resolve: {
 			// The same platform mapping the editor-ui dev server uses, so a test resolves
 			// `@n8n/stores/...` from source rather than from a stale `dist` — the two disagreeing is