@n8n/frontend-module-type-availability-policies 0.3.2 → 0.4.0

package/README.md

@@ -13,8 +13,9 @@ 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".
+changes, and `reload()` after a community node install, because the server answers only for the
+node types it has loaded. 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
@@ -27,6 +28,8 @@ and on a cold tree turbo builds them first.
 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.
 
+Tests stub the store through `mockRestrictedNodeTypes` from the module's `__tests__/mocks`.
+
 `ContactInstanceAdminModal` lists the instance owners with a mail link. The surfaces below render it
 as a sibling of their own content, so a popover that closes never unmounts the open dialog.
 `RestrictedNodePopover` is the explanation for a row in a list: the lock trigger, the hover-opened

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@n8n/frontend-module-type-availability-policies",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./__tests__/mocks": "./src/__tests__/mocks.ts"
   },
   "dependencies": {
-    "@n8n/api-types": "1.42.2",
-    "@n8n/design-system": "2.41.2",
-    "@n8n/frontend-module-sdk": "0.12.2",
-    "@n8n/i18n": "2.42.2",
-    "@n8n/rest-api-client": "2.42.2",
-    "@n8n/stores": "2.42.2",
-    "@n8n/utils": "1.49.0",
+    "@n8n/api-types": "1.43.0",
+    "@n8n/design-system": "2.42.0",
+    "@n8n/frontend-module-sdk": "0.13.0",
+    "@n8n/i18n": "2.43.0",
+    "@n8n/rest-api-client": "2.43.0",
+    "@n8n/stores": "2.43.0",
+    "@n8n/utils": "1.50.0",
     "@vueuse/core": "^14.3.0",
     "pinia": "^2.2.4",
     "vue": "^3.5.13"
@@ -25,7 +26,7 @@
     "@n8n/frontend-vite-config": "0.1.0",
     "@n8n/playwright-janitor": "0.1.0",
     "@n8n/typescript-config": "1.12.0",
-    "@n8n/vitest-config": "1.23.0",
+    "@n8n/vitest-config": "1.24.0",
     "@pinia/testing": "^0.1.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",

package/src/__tests__/mocks.ts

@@ -0,0 +1,19 @@
+import type { NodeTypeAvailabilityScope } from '@n8n/api-types';
+import { vi } from 'vitest';
+
+import { useTypeAvailabilityPoliciesStore } from '../type-availability-policies.store';
+
+/**
+ * Makes the active pinia's policy store report these node types as restricted. Call after
+ * `setActivePinia` (or after rendering with the pinia the component uses).
+ */
+export function mockRestrictedNodeTypes(
+	restricted: Record<string, NodeTypeAvailabilityScope> = {},
+): void {
+	vi.spyOn(useTypeAvailabilityPoliciesStore(), 'getNodeTypeAvailability').mockImplementation(
+		(name) => {
+			const scope = restricted[name];
+			return scope ? { name, available: false, scope } : { name, available: true };
+		},
+	);
+}

package/src/components/RestrictedNodePanel.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { NodeTypeAvailabilityScope } from '@n8n/api-types';
 import { N8nButton, N8nIcon, N8nText } from '@n8n/design-system';
-import { useI18n, type BaseTextKey } from '@n8n/i18n';
+import { useI18n } from '@n8n/i18n';
 import { computed, ref } from 'vue';
 
 import ContactInstanceAdminModal from './ContactInstanceAdminModal.vue';
+import { describeNodeTypeRestriction } from '../composables/useNodeTypeRestriction';
 
 const {
 	nodeTypeName,
@@ -18,27 +19,13 @@ const {
 
 const emit = defineEmits<{ replaceNode: [] }>();
 
-const DESCRIPTION_KEY: Record<NodeTypeAvailabilityScope, BaseTextKey> = {
-	instance: 'typeAvailabilityPolicies.restrictedNode.description.instance',
-	project: 'typeAvailabilityPolicies.restrictedNode.description.project',
-};
-
 const i18n = useI18n();
 
 const isContactAdminOpen = ref(false);
 
-// The next step is interpolated into the description, so each locale controls the sentence order.
-const description = computed(() => {
-	const nextStep = i18n.baseText(
-		showReplace
-			? 'typeAvailabilityPolicies.restrictedNode.nextStep.replace'
-			: 'typeAvailabilityPolicies.restrictedNode.nextStep.contact',
-	);
-	return i18n.baseText(
-		scope ? DESCRIPTION_KEY[scope] : 'typeAvailabilityPolicies.restrictedNode.description.generic',
-		{ interpolate: { nodeType: nodeTypeName, nextStep } },
-	);
-});
+const description = computed(() =>
+	describeNodeTypeRestriction(nodeTypeName, scope, showReplace ? 'replace' : 'contact'),
+);
 </script>
 
 <template>

package/src/components/RestrictedNodePopover.test.ts

@@ -75,6 +75,31 @@ describe('RestrictedNodePopover', () => {
 		expect(screen.getByTestId('node-restricted-popover')).toBeInTheDocument();
 	});
 
+	it('opens while focus is inside the anchor row and closes when focus leaves', async () => {
+		const button = document.createElement('button');
+		anchor.appendChild(button);
+		renderPopover({ anchor });
+
+		button.focus();
+		expect(await screen.findByTestId('node-restricted-popover')).toBeInTheDocument();
+
+		button.blur();
+		await waitFor(() =>
+			expect(screen.queryByTestId('node-restricted-popover')).not.toBeInTheDocument(),
+		);
+	});
+
+	it('closes while the contact-admin dialog is open', async () => {
+		renderPopover({ active: true });
+
+		await userEvent.click(await screen.findByTestId('node-restricted-contact-admin'));
+
+		await waitFor(() =>
+			expect(screen.queryByTestId('node-restricted-popover')).not.toBeInTheDocument(),
+		);
+		expect(screen.getByTestId('contact-instance-admin-modal')).toBeInTheDocument();
+	});
+
 	it('opens the contact-admin dialog for this node type', async () => {
 		renderPopover({ active: true });
 		expect(screen.queryByTestId('contact-instance-admin-modal')).not.toBeInTheDocument();

package/src/components/RestrictedNodePopover.vue

@@ -2,7 +2,7 @@
 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 { unrefElement, useElementHover, useFocusWithin, type MaybeElement } from '@vueuse/core';
 import { computed, ref } from 'vue';
 
 import { SCOPE_LABEL_KEY } from '../type-availability-policies.constants';
@@ -13,7 +13,7 @@ const props = defineProps<{
 	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. */
+	/** Keyboard-active without DOM focus, such as a virtual list selection. */
 	active?: boolean;
 }>();
 
@@ -26,9 +26,20 @@ 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);
+// Content is teleported, so focus in it is outside the anchor.
+// Close for the contact-admin dialog, which this would otherwise cover.
+const { focused: anchorFocused } = useFocusWithin(anchorElement);
+const { focused: contentFocused } = useFocusWithin(contentRef);
+const open = computed(
+	() =>
+		!isContactAdminOpen.value &&
+		(anchorHovered.value ||
+			contentHovered.value ||
+			anchorFocused.value ||
+			contentFocused.value ||
+			props.active),
+);
 
 const scopeKey = computed<BaseTextKey>(
 	() =>
@@ -39,6 +50,7 @@ const scopeKey = computed<BaseTextKey>(
 
 <template>
 	<span :class="$style.root">
+		<!-- The tool pickers render this inside a modal. -->
 		<N8nPopover
 			:open="open"
 			side="left"
@@ -48,14 +60,17 @@ const scopeKey = computed<BaseTextKey>(
 			:suppress-auto-focus="true"
 			:content-class="$style.card"
 			width="254px"
+			z-index="var(--floating-ui--z)"
 		>
 			<template #trigger>
-				<N8nIcon
-					icon="lock"
-					size="small"
-					:title="i18n.baseText('typeAvailabilityPolicies.restrictedNode.title')"
-					data-test-id="node-restricted-icon"
-				/>
+				<span
+					:class="$style.marker"
+					tabindex="0"
+					role="img"
+					:aria-label="i18n.baseText('typeAvailabilityPolicies.restrictedNode.title')"
+				>
+					<N8nIcon icon="lock" size="small" data-test-id="node-restricted-icon" />
+				</span>
 			</template>
 			<template #content>
 				<div ref="contentRef" :class="$style.popover" data-test-id="node-restricted-popover">
@@ -88,6 +103,19 @@ const scopeKey = computed<BaseTextKey>(
 	display: contents;
 }
 
+.marker {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--spacing--3xs);
+	color: var(--color--text--tint-1);
+
+	&:focus-visible {
+		outline: var(--focus--border-width) solid var(--focus--border-color);
+		outline-offset: 2px;
+	}
+}
+
 // The design system defaults popovers to --radius--xs (8px); the design uses the editor's 4px.
 .card {
 	border-radius: var(--radius);

package/src/composables/useNodeTypeRestriction.ts

@@ -1,4 +1,5 @@
-import type { NodeTypeAvailability } from '@n8n/api-types';
+import type { NodeTypeAvailability, NodeTypeAvailabilityScope } from '@n8n/api-types';
+import { useI18n, type BaseTextKey } from '@n8n/i18n';
 import { computed, toValue, type MaybeRefOrGetter } from 'vue';
 
 import { useTypeAvailabilityPoliciesStore } from '../type-availability-policies.store';
@@ -12,6 +13,28 @@ export function isNodeTypeRestricted(nodeType: string): boolean {
 	return getNodeTypeRestriction(nodeType) !== null;
 }
 
+const DESCRIPTION_KEY: Record<NodeTypeAvailabilityScope, BaseTextKey> = {
+	instance: 'typeAvailabilityPolicies.restrictedNode.description.instance',
+	project: 'typeAvailabilityPolicies.restrictedNode.description.project',
+};
+
+export function describeNodeTypeRestriction(
+	nodeTypeName: string,
+	scope?: NodeTypeAvailabilityScope,
+	nextStep: 'contact' | 'replace' = 'contact',
+): string {
+	const i18n = useI18n();
+	const nextStepText = i18n.baseText(
+		nextStep === 'replace'
+			? 'typeAvailabilityPolicies.restrictedNode.nextStep.replace'
+			: 'typeAvailabilityPolicies.restrictedNode.nextStep.contact',
+	);
+	return i18n.baseText(
+		scope ? DESCRIPTION_KEY[scope] : 'typeAvailabilityPolicies.restrictedNode.description.generic',
+		{ interpolate: { nodeType: nodeTypeName, nextStep: nextStepText } },
+	);
+}
+
 export function useNodeTypeRestriction(nodeType: MaybeRefOrGetter<string | null | undefined>) {
 	const restriction = computed(() => {
 		const type = toValue(nodeType);

package/src/index.ts

@@ -1,6 +1,7 @@
 export { TypeAvailabilityPoliciesModule } from './type-availability-policies.module';
 export { useTypeAvailabilityPoliciesStore } from './type-availability-policies.store';
 export {
+	describeNodeTypeRestriction,
 	getNodeTypeRestriction,
 	isNodeTypeRestricted,
 	useNodeTypeRestriction,

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

@@ -1,4 +1,5 @@
 import type { AvailableTypesResponse } from '@n8n/api-types';
+import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 import { useTypeAvailabilityPoliciesStore } from './type-availability-policies.store';
@@ -125,6 +126,62 @@ describe('useTypeAvailabilityPoliciesStore', () => {
 			expect(mocks.fetchAvailableTypes).toHaveBeenCalledTimes(1);
 		});
 
+		it('reloads the requested project', async () => {
+			mocks.fetchAvailableTypes
+				.mockResolvedValueOnce(PROJECT_A_RESPONSE)
+				.mockResolvedValueOnce(PROJECT_B_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			await store.reload();
+
+			expect(mocks.fetchAvailableTypes).toHaveBeenCalledTimes(2);
+			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(false);
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+
+		it('keeps the loaded answer while a reload is in flight', async () => {
+			const reload = createDeferredPromise<AvailableTypesResponse>();
+			mocks.fetchAvailableTypes
+				.mockResolvedValueOnce(PROJECT_A_RESPONSE)
+				.mockReturnValueOnce(reload.promise);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.fetchForProject('project-a');
+			const pending = store.reload();
+
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(false);
+
+			reload.resolve(PROJECT_B_RESPONSE);
+			await pending;
+
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+
+		it('ignores an older response for the same project after a reload', async () => {
+			const first = createDeferredPromise<AvailableTypesResponse>();
+			mocks.fetchAvailableTypes
+				.mockReturnValueOnce(first.promise)
+				.mockResolvedValueOnce(PROJECT_B_RESPONSE);
+			const store = useTypeAvailabilityPoliciesStore();
+
+			const pending = store.fetchForProject('project-a');
+			await store.reload();
+			first.resolve(PROJECT_A_RESPONSE);
+			await pending;
+
+			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(false);
+			expect(store.isNodeTypeAvailable(RESTRICTED)).toBe(true);
+		});
+
+		it('does not reload before a project was requested', async () => {
+			const store = useTypeAvailabilityPoliciesStore();
+
+			await store.reload();
+
+			expect(mocks.fetchAvailableTypes).not.toHaveBeenCalled();
+		});
+
 		it('reflects the new project after a switch', async () => {
 			mocks.fetchAvailableTypes
 				.mockResolvedValueOnce(PROJECT_A_RESPONSE)
@@ -140,13 +197,10 @@ describe('useTypeAvailabilityPoliciesStore', () => {
 		});
 
 		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 deferredB = createDeferredPromise<AvailableTypesResponse>();
+			mocks.fetchAvailableTypes
+				.mockResolvedValueOnce(PROJECT_A_RESPONSE)
+				.mockReturnValueOnce(deferredB.promise);
 			const store = useTypeAvailabilityPoliciesStore();
 
 			await store.fetchForProject('project-a');
@@ -158,7 +212,7 @@ describe('useTypeAvailabilityPoliciesStore', () => {
 				available: true,
 			});
 
-			resolveB(PROJECT_B_RESPONSE);
+			deferredB.resolve(PROJECT_B_RESPONSE);
 			await pendingB;
 
 			expect(store.isNodeTypeAvailable(ALLOWED)).toBe(false);
@@ -166,20 +220,15 @@ describe('useTypeAvailabilityPoliciesStore', () => {
 		});
 
 		it('discards a response for a project that is no longer requested', async () => {
-			let resolveA: (value: AvailableTypesResponse) => void = () => {};
+			const deferredA = createDeferredPromise<AvailableTypesResponse>();
 			mocks.fetchAvailableTypes
-				.mockImplementationOnce(
-					async () =>
-						await new Promise<AvailableTypesResponse>((resolve) => {
-							resolveA = resolve;
-						}),
-				)
+				.mockReturnValueOnce(deferredA.promise)
 				.mockResolvedValueOnce(PROJECT_B_RESPONSE);
 			const store = useTypeAvailabilityPoliciesStore();
 
 			const pendingA = store.fetchForProject('project-a');
 			await store.fetchForProject('project-b');
-			resolveA(PROJECT_A_RESPONSE);
+			deferredA.resolve(PROJECT_A_RESPONSE);
 			await pendingA;
 
 			expect(store.loadedProjectId).toBe('project-b');
@@ -188,19 +237,16 @@ describe('useTypeAvailabilityPoliciesStore', () => {
 		});
 
 		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 deferredB = createDeferredPromise<AvailableTypesResponse>();
+			mocks.fetchAvailableTypes
+				.mockResolvedValueOnce(PROJECT_A_RESPONSE)
+				.mockReturnValueOnce(deferredB.promise);
 			const store = useTypeAvailabilityPoliciesStore();
 
 			await store.fetchForProject('project-a');
 			const pendingB = store.fetchForProject('project-b');
 			await store.fetchForProject('project-a');
-			resolveB(PROJECT_B_RESPONSE);
+			deferredB.resolve(PROJECT_B_RESPONSE);
 			await pendingB;
 
 			expect(store.loadedProjectId).toBe('project-a');

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

@@ -20,6 +20,7 @@ export const useTypeAvailabilityPoliciesStore = defineStore(
 		const loadedProjectId = ref<string | null>(null);
 		const requestedProjectId = ref<string | null>(null);
 		const isLoading = ref(false);
+		let latestRequest = 0;
 
 		const isEnabled = computed(
 			() => settingsStore.isModuleActive(TYPE_AVAILABILITY_POLICIES_MODULE_ID) ?? false,
@@ -29,29 +30,42 @@ export const useTypeAvailabilityPoliciesStore = defineStore(
 			if (!isEnabled.value) return;
 
 			requestedProjectId.value = projectId;
+			latestRequest++;
 
 			if (projectId === loadedProjectId.value) {
 				isLoading.value = false;
 				return;
 			}
 
+			await load(projectId);
+		}
+
+		/** Refetches the current project after the server's node set changed. */
+		async function reload(): Promise<void> {
+			if (!isEnabled.value || requestedProjectId.value === null) return;
+
+			await load(requestedProjectId.value);
+		}
+
+		async function load(projectId: string): Promise<void> {
+			const request = ++latestRequest;
 			isLoading.value = true;
 			try {
 				const entries = await fetchAvailableTypes(rootStore.restApiContext, projectId);
-				if (requestedProjectId.value !== projectId) return;
+				if (request !== latestRequest) 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;
+				if (request !== latestRequest) 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;
+				if (request === latestRequest) isLoading.value = false;
 			}
 		}
 
@@ -66,6 +80,7 @@ export const useTypeAvailabilityPoliciesStore = defineStore(
 		}
 
 		function reset(): void {
+			latestRequest++;
 			restrictedNodeTypes.value = new Map();
 			loadedProjectId.value = null;
 			requestedProjectId.value = null;
@@ -77,6 +92,7 @@ export const useTypeAvailabilityPoliciesStore = defineStore(
 			isLoading,
 			loadedProjectId,
 			fetchForProject,
+			reload,
 			getNodeTypeAvailability,
 			isNodeTypeAvailable,
 			reset,