@n8n/frontend-module-self-healing 0.0.0-stage → 0.2.0

package/src/self-healing.api.ts

@@ -0,0 +1,48 @@
+import type {
+	SaveSelfHealingConfigurationDto,
+	SelfHealingConfigurationDto,
+	SelfHealingConfigurationOptions,
+	UpdateSelfHealingConfigurationDto,
+} from '@n8n/api-types';
+import { makeRestApiRequest, type IRestApiContext } from '@n8n/rest-api-client';
+
+const path = (projectId: string) => `/projects/${projectId}/self-healing-configurations`;
+
+export const fetchConfigurations = async (
+	context: IRestApiContext,
+	projectId: string,
+): Promise<SelfHealingConfigurationDto[]> =>
+	await makeRestApiRequest(context, 'GET', path(projectId));
+
+export const fetchConfigurationOptions = async (
+	context: IRestApiContext,
+	projectId: string,
+): Promise<SelfHealingConfigurationOptions> =>
+	await makeRestApiRequest(context, 'GET', `${path(projectId)}/options`);
+
+export const saveConfiguration = async (
+	context: IRestApiContext,
+	projectId: string,
+	input: SaveSelfHealingConfigurationDto | UpdateSelfHealingConfigurationDto,
+	id?: number,
+): Promise<SelfHealingConfigurationDto> => {
+	if (id === undefined) {
+		return await makeRestApiRequest(context, 'POST', path(projectId), input);
+	}
+
+	return await makeRestApiRequest(context, 'PATCH', `${path(projectId)}/${id}`, input);
+};
+
+export const setConfigurationEnabled = async (
+	context: IRestApiContext,
+	projectId: string,
+	id: number,
+	enabled: boolean,
+): Promise<SelfHealingConfigurationDto> =>
+	await makeRestApiRequest(context, 'PATCH', `${path(projectId)}/${id}/enabled`, { enabled });
+
+export const removeConfiguration = async (
+	context: IRestApiContext,
+	projectId: string,
+	id: number,
+): Promise<void> => await makeRestApiRequest(context, 'DELETE', `${path(projectId)}/${id}`);

package/src/self-healing.store.test.ts

@@ -0,0 +1,130 @@
+import type { SelfHealingConfigurationDto } from '@n8n/api-types';
+
+import * as api from './self-healing.api';
+import { useSelfHealingStore } from './self-healing.store';
+
+vi.mock('./self-healing.api');
+
+const configuration: SelfHealingConfigurationDto = {
+	id: 1,
+	projectId: 'project',
+	scope: 'all',
+	enabled: false,
+	enabledById: null,
+	workflowIds: [],
+	reviewerIds: ['reviewer'],
+	lastActivity: null,
+};
+
+beforeEach(() => vi.resetAllMocks());
+
+it('loads saved configurations and keeps project lists separate', async () => {
+	vi.mocked(api.fetchConfigurations).mockResolvedValue([configuration]);
+	vi.mocked(api.fetchConfigurationOptions).mockResolvedValue({ workflows: [], reviewers: [] });
+	const store = useSelfHealingStore();
+	await store.load('project');
+	expect(store.configurations.project).toEqual([configuration]);
+	expect(store.configurations.other).toBeUndefined();
+});
+
+it('changes enabled state only after the server accepts it', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [configuration];
+	vi.mocked(api.setConfigurationEnabled).mockRejectedValueOnce(new Error('No access'));
+	await expect(store.setEnabled('project', 1, true)).rejects.toThrow('No access');
+	expect(store.configurations.project[0].enabled).toBe(false);
+	vi.mocked(api.setConfigurationEnabled).mockResolvedValue({
+		...configuration,
+		enabled: true,
+		enabledById: 'actor',
+	});
+	await store.setEnabled('project', 1, true);
+	expect(store.configurations.project[0]).toMatchObject({ enabled: true, enabledById: 'actor' });
+});
+
+it('removes a configuration from the list after the server removes it', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [configuration];
+	vi.mocked(api.removeConfiguration).mockResolvedValue();
+	await store.remove('project', 1);
+	expect(store.configurations.project).toEqual([]);
+});
+
+it.each(['save', 'setEnabled', 'remove'] as const)(
+	'ignores an older list response after %s succeeds',
+	async (action) => {
+		const store = useSelfHealingStore();
+		store.configurations.project = [configuration];
+		const pending = Promise.withResolvers<SelfHealingConfigurationDto[]>();
+		vi.mocked(api.fetchConfigurations).mockReturnValue(pending.promise);
+		vi.mocked(api.fetchConfigurationOptions).mockResolvedValue({ workflows: [], reviewers: [] });
+		const load = store.load('project');
+		const updated = { ...configuration, enabled: true, enabledById: 'actor' };
+
+		if (action === 'save') {
+			vi.mocked(api.saveConfiguration).mockResolvedValue(updated);
+			await store.save('project', updated, configuration.id);
+		} else if (action === 'setEnabled') {
+			vi.mocked(api.setConfigurationEnabled).mockResolvedValue(updated);
+			await store.setEnabled('project', configuration.id, true);
+		} else {
+			vi.mocked(api.removeConfiguration).mockResolvedValue();
+			await store.remove('project', configuration.id);
+		}
+
+		pending.resolve([configuration]);
+		await load;
+
+		expect(store.configurations.project).toEqual(action === 'remove' ? [] : [updated]);
+	},
+);
+
+it('keeps the latest list when requests finish out of order', async () => {
+	const store = useSelfHealingStore();
+	const pending = Promise.withResolvers<SelfHealingConfigurationDto[]>();
+	const updated = { ...configuration, enabled: true, enabledById: 'actor' };
+	vi.mocked(api.fetchConfigurations)
+		.mockReturnValueOnce(pending.promise)
+		.mockResolvedValueOnce([updated]);
+	vi.mocked(api.fetchConfigurationOptions).mockResolvedValue({ workflows: [], reviewers: [] });
+
+	const firstLoad = store.load('project');
+	await store.load('project');
+	pending.resolve([configuration]);
+	await firstLoad;
+
+	expect(store.configurations.project).toEqual([updated]);
+});
+
+it.each(['save', 'setEnabled'] as const)(
+	'keeps row order after %s updates an existing configuration',
+	async (action) => {
+		const store = useSelfHealingStore();
+		const second = { ...configuration, id: 2 };
+		const third = { ...configuration, id: 3 };
+		store.configurations.project = [configuration, second, third];
+		const updated = { ...configuration, enabled: true, enabledById: 'actor' };
+
+		if (action === 'save') {
+			vi.mocked(api.saveConfiguration).mockResolvedValue(updated);
+			await store.save('project', updated, configuration.id);
+		} else {
+			vi.mocked(api.setConfigurationEnabled).mockResolvedValue(updated);
+			await store.setEnabled('project', configuration.id, true);
+		}
+
+		expect(store.configurations.project).toEqual([updated, second, third]);
+	},
+);
+
+it('appends new configurations after existing rows', async () => {
+	const store = useSelfHealingStore();
+	const second = { ...configuration, id: 2 };
+	const created = { ...configuration, id: 3 };
+	store.configurations.project = [configuration, second];
+	vi.mocked(api.saveConfiguration).mockResolvedValue(created);
+
+	await store.save('project', created);
+
+	expect(store.configurations.project).toEqual([configuration, second, created]);
+});

package/src/self-healing.store.ts

@@ -0,0 +1,75 @@
+import type {
+	SaveSelfHealingConfigurationDto,
+	SelfHealingConfigurationDto,
+	SelfHealingConfigurationOptions,
+	UpdateSelfHealingConfigurationDto,
+} from '@n8n/api-types';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import * as api from './self-healing.api';
+
+export const useSelfHealingStore = defineStore('selfHealing', () => {
+	const root = useRootStore();
+	const configurations = ref<Record<string, SelfHealingConfigurationDto[]>>({});
+	const options = ref<Record<string, SelfHealingConfigurationOptions>>({});
+	// Only the latest pending load can replace a project's saved state.
+	const pendingLoads = new Map<string, symbol>();
+
+	async function load(projectId: string) {
+		const request = Symbol();
+		pendingLoads.set(projectId, request);
+
+		const [rows, choices] = await Promise.all([
+			api.fetchConfigurations(root.restApiContext, projectId),
+			api.fetchConfigurationOptions(root.restApiContext, projectId),
+		]);
+
+		if (pendingLoads.get(projectId) !== request) return;
+		pendingLoads.delete(projectId);
+
+		configurations.value[projectId] = rows;
+		options.value[projectId] = choices;
+	}
+
+	function remember(projectId: string, configuration: SelfHealingConfigurationDto) {
+		pendingLoads.delete(projectId);
+		const rows = configurations.value[projectId] ?? [];
+		configurations.value[projectId] = rows.some(({ id }) => id === configuration.id)
+			? rows.map((row) => (row.id === configuration.id ? configuration : row))
+			: [...rows, configuration];
+	}
+
+	async function save(
+		projectId: string,
+		input: SaveSelfHealingConfigurationDto | UpdateSelfHealingConfigurationDto,
+		id?: number,
+	) {
+		const configuration = await api.saveConfiguration(root.restApiContext, projectId, input, id);
+		remember(projectId, configuration);
+
+		return configuration;
+	}
+
+	async function setEnabled(projectId: string, id: number, enabled: boolean) {
+		const configuration = await api.setConfigurationEnabled(
+			root.restApiContext,
+			projectId,
+			id,
+			enabled,
+		);
+		remember(projectId, configuration);
+	}
+
+	async function remove(projectId: string, id: number) {
+		await api.removeConfiguration(root.restApiContext, projectId, id);
+		pendingLoads.delete(projectId);
+
+		configurations.value[projectId] = (configurations.value[projectId] ?? []).filter(
+			(row) => row.id !== id,
+		);
+	}
+
+	return { configurations, options, load, save, setEnabled, remove };
+});

package/src/views/SelfHealingConfigView.test.ts

@@ -0,0 +1,436 @@
+import { render, fireEvent, waitFor, within } from '@testing-library/vue';
+import type { SelfHealingConfigurationDto } from '@n8n/api-types';
+import { waitAllPromises } from '@n8n/frontend-test-utils';
+import { VIEWS } from '@n8n/frontend-constants/views';
+import { createMemoryHistory, createRouter, RouterView, type Router } from 'vue-router';
+
+import { useSelfHealingStore } from '../self-healing.store';
+import SelfHealingConfigView from './SelfHealingConfigView.vue';
+
+const { confirm, showError, showMessage } = vi.hoisted(() => ({
+	confirm: vi.fn(),
+	showError: vi.fn(),
+	showMessage: vi.fn(),
+}));
+vi.mock('@n8n/composables/useToast', () => ({
+	useToast: () => ({ showError, showMessage }),
+}));
+vi.mock('@n8n/design-system', async (importOriginal) => ({
+	...(await importOriginal<typeof import('@n8n/design-system')>()),
+	useMessage: () => ({ confirm }),
+}));
+vi.mock('@n8n/stores/users.store', () => ({
+	useUsersStore: () => ({ currentUser: { id: 'creator' } }),
+}));
+
+const configuration: SelfHealingConfigurationDto = {
+	id: 1,
+	projectId: 'project',
+	scope: 'all',
+	workflowIds: [],
+	reviewerIds: ['creator'],
+	enabled: false,
+	enabledById: null,
+	lastActivity: null,
+};
+
+let router: Router;
+
+async function renderView(configurationId: string) {
+	await router.push(`/projects/project/settings/self-healing/${configurationId}`);
+	return render(RouterView, { global: { plugins: [router] } });
+}
+
+beforeEach(() => {
+	vi.clearAllMocks();
+	router = createRouter({
+		history: createMemoryHistory(),
+		routes: [
+			{
+				path: '/projects/:projectId/settings/self-healing/:configurationId',
+				component: SelfHealingConfigView,
+				props: true,
+			},
+			{
+				path: '/projects/:projectId/settings',
+				name: VIEWS.PROJECT_SETTINGS,
+				component: { render: () => null },
+			},
+		],
+	});
+	const store = useSelfHealingStore();
+	store.configurations.project = [];
+	store.options.project = {
+		workflows: [{ id: 'workflow', name: 'Production workflow' }],
+		reviewers: [
+			{ id: 'creator', email: 'creator@example.com', firstName: 'Test', lastName: 'Reviewer' },
+		],
+	};
+	vi.spyOn(store, 'load').mockResolvedValue();
+});
+
+it('creates an enabled configuration with the creator as reviewer', async () => {
+	const store = useSelfHealingStore();
+	const save = vi.spyOn(store, 'save').mockResolvedValue({
+		...configuration,
+		enabled: true,
+		enabledById: 'creator',
+	});
+	const view = await renderView('new');
+	const button = await view.findByRole('button', { name: 'Create configuration' });
+	expect(button).toBeEnabled();
+	expect(view.queryByRole('switch')).not.toBeInTheDocument();
+	const reviewer = within(view.getByTestId('self-healing-selected-reviewer'));
+	expect(reviewer.getByText('Test Reviewer (you)')).toBeVisible();
+	expect(reviewer.getAllByText(/\(you\)/)).toHaveLength(1);
+	expect(reviewer.getByText('creator@example.com')).toBeVisible();
+	await fireEvent.click(button);
+	await waitFor(() =>
+		expect(save).toHaveBeenCalledWith(
+			'project',
+			{ scope: 'all', workflowIds: [], reviewerIds: ['creator'], enabled: true },
+			undefined,
+		),
+	);
+	await waitFor(() =>
+		expect(router.currentRoute.value.fullPath).toBe('/projects/project/settings#self-healing'),
+	);
+});
+
+it('requires a workflow selection when an all-workflows configuration already exists', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [configuration];
+	const view = await renderView('new');
+	expect(await view.findByRole('button', { name: 'Create configuration' })).toBeDisabled();
+	expect(view.getByTestId('self-healing-workflows')).toBeVisible();
+});
+
+it('loads an existing configuration without offering to save unchanged values', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [{ ...configuration, enabled: true, enabledById: 'creator' }];
+	const view = await renderView('1');
+	expect(await view.findByRole('button', { name: 'Save changes' })).toBeDisabled();
+});
+
+it.each(['resolves', 'rejects'])(
+	'keeps newer form edits when an obsolete load %s',
+	async (outcome) => {
+		const store = useSelfHealingStore();
+		store.configurations.project = [
+			configuration,
+			{ ...configuration, id: 2, scope: 'selected', workflowIds: ['workflow'] },
+		];
+		const pending = Promise.withResolvers<undefined>();
+		vi.mocked(store.load).mockReturnValueOnce(pending.promise).mockResolvedValueOnce();
+		const view = await renderView('1');
+		await router.push('/projects/project/settings/self-healing/2');
+		await fireEvent.click(await view.findByRole('button', { name: 'Remove reviewer' }));
+
+		if (outcome === 'rejects') {
+			pending.reject(new Error('Could not load the previous configuration'));
+		} else {
+			pending.resolve(undefined);
+		}
+		await waitAllPromises();
+
+		expect(view.queryByTestId('self-healing-selected-reviewer')).not.toBeInTheDocument();
+		expect(view.getByRole('button', { name: 'Discard changes' })).toBeEnabled();
+		expect(view.queryByRole('button', { name: 'Try again' })).not.toBeInTheDocument();
+		expect(showError).not.toHaveBeenCalled();
+		confirm.mockResolvedValueOnce('cancel');
+		await router.push('/projects/project/settings');
+		expect(confirm).toHaveBeenCalledOnce();
+		expect(router.currentRoute.value.params.configurationId).toBe('2');
+	},
+);
+
+it.each(['resolves', 'rejects'])(
+	'keeps loading the current configuration when an obsolete load %s',
+	async (outcome) => {
+		const store = useSelfHealingStore();
+		store.configurations.project = [configuration, { ...configuration, id: 2 }];
+		const previous = Promise.withResolvers<undefined>();
+		const current = Promise.withResolvers<undefined>();
+		vi.mocked(store.load)
+			.mockReturnValueOnce(previous.promise)
+			.mockReturnValueOnce(current.promise);
+		const view = await renderView('1');
+		await router.push('/projects/project/settings/self-healing/2');
+
+		if (outcome === 'rejects') {
+			previous.reject(new Error('Could not load the previous configuration'));
+		} else {
+			previous.resolve(undefined);
+		}
+		await waitAllPromises();
+
+		expect(view.getByText('Loading configurations…')).toBeVisible();
+		expect(view.queryByRole('button', { name: 'Save changes' })).not.toBeInTheDocument();
+		expect(showError).not.toHaveBeenCalled();
+		current.resolve(undefined);
+		expect(await view.findByRole('button', { name: 'Save changes' })).toBeDisabled();
+	},
+);
+
+it.each([false, true])(
+	'omits enabled=%s when saving edits and blocks changes during save',
+	async (enabled) => {
+		const store = useSelfHealingStore();
+		const selected = {
+			...configuration,
+			enabled,
+			enabledById: enabled ? 'creator' : null,
+			scope: 'selected' as const,
+			workflowIds: ['workflow'],
+		};
+		store.configurations.project = [selected];
+		const pending = Promise.withResolvers<SelfHealingConfigurationDto>();
+		const save = vi.spyOn(store, 'save').mockReturnValue(pending.promise);
+		const view = await renderView('1');
+		const button = await view.findByRole('button', { name: 'Save changes' });
+		await fireEvent.click(view.getByRole('radio', { name: 'All' }));
+		await fireEvent.click(button);
+
+		for (const select of view.getAllByRole('combobox')) {
+			expect(select).toBeDisabled();
+		}
+		expect(view.getByRole('radio', { name: 'Select manually' })).toBeDisabled();
+		expect(view.getByRole('button', { name: 'Remove reviewer' })).toBeDisabled();
+		pending.resolve({ ...selected, scope: 'all', workflowIds: [] });
+		await waitFor(() => expect(button).toBeDisabled());
+		expect(router.currentRoute.value.path).toBe('/projects/project/settings/self-healing/1');
+		expect(save).toHaveBeenCalledWith(
+			'project',
+			{ scope: 'all', workflowIds: [], reviewerIds: ['creator'] },
+			1,
+		);
+	},
+);
+
+it.each([
+	'/projects/project/settings',
+	'/projects/project/settings/self-healing/2',
+	'/projects/other/settings/self-healing/1',
+])('asks before discarding edits when navigating to %s', async (destination) => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [
+		configuration,
+		{ ...configuration, id: 2, scope: 'selected', workflowIds: ['workflow'] },
+	];
+	store.configurations.other = [{ ...configuration, projectId: 'other' }];
+	store.options.other = store.options.project;
+	const view = await renderView('1');
+	const selected = await view.findByRole('radio', { name: 'Select manually' });
+	await fireEvent.click(selected);
+
+	confirm.mockResolvedValueOnce('cancel');
+	await router.push(destination);
+
+	expect(confirm).toHaveBeenCalledOnce();
+	expect(router.currentRoute.value.path).toBe('/projects/project/settings/self-healing/1');
+	expect(selected).toBeChecked();
+
+	confirm.mockResolvedValueOnce('confirm');
+	await router.push(destination);
+
+	expect(confirm).toHaveBeenCalledTimes(2);
+	expect(router.currentRoute.value.path).toBe(destination);
+});
+
+it('selects workflow rows and reviewers before saving', async () => {
+	const store = useSelfHealingStore();
+	const save = vi.spyOn(store, 'save').mockResolvedValue({
+		...configuration,
+		scope: 'selected',
+		workflowIds: ['workflow'],
+		enabled: true,
+		enabledById: 'creator',
+	});
+	const view = await renderView('new');
+	await view.findByRole('button', { name: 'Create configuration' });
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+	expect(view.getByRole('button', { name: 'Create configuration' })).toBeDisabled();
+	await fireEvent.click(view.getAllByRole('button', { name: 'Show popup' })[0]);
+	await fireEvent.click(await view.findByRole('option', { name: 'Production workflow' }));
+	expect(view.getByTestId('self-healing-selected-workflow')).toHaveTextContent(
+		'Production workflow',
+	);
+	await fireEvent.click(view.getByRole('button', { name: 'Remove reviewer' }));
+	expect(view.getByRole('button', { name: 'Create configuration' })).toBeDisabled();
+	await fireEvent.click(view.getAllByRole('button', { name: 'Show popup' })[1]);
+	await fireEvent.click(await view.findByRole('option', { name: /Test Reviewer/ }));
+	await fireEvent.click(view.getByRole('button', { name: 'Create configuration' }));
+
+	expect(save).toHaveBeenCalledWith(
+		'project',
+		{
+			scope: 'selected',
+			workflowIds: ['workflow'],
+			reviewerIds: ['creator'],
+			enabled: true,
+		},
+		undefined,
+	);
+});
+
+it('discards edits in place without changing the saved configuration', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [
+		{ ...configuration, scope: 'selected', workflowIds: ['workflow'] },
+	];
+	const save = vi.spyOn(store, 'save');
+	const view = await renderView('1');
+	await view.findByRole('button', { name: 'Remove workflow' });
+	for (let edit = 0; edit < 2; edit++) {
+		await fireEvent.click(view.getByRole('button', { name: 'Remove workflow' }));
+		await fireEvent.click(view.getByRole('button', { name: 'Remove reviewer' }));
+		expect(view.queryByTestId('self-healing-selected-workflow')).not.toBeInTheDocument();
+		await fireEvent.click(view.getByRole('radio', { name: 'All' }));
+		await fireEvent.click(view.getByRole('button', { name: 'Discard changes' }));
+		expect(await view.findByTestId('self-healing-selected-workflow')).toHaveTextContent(
+			'Production workflow',
+		);
+		expect(view.getByTestId('self-healing-selected-reviewer')).toHaveTextContent('Test Reviewer');
+		expect(view.getByRole('button', { name: 'Save changes' })).toBeDisabled();
+		expect(view.getByRole('button', { name: 'Discard changes' })).toBeDisabled();
+	}
+	expect(router.currentRoute.value.params.configurationId).toBe('1');
+	expect(save).not.toHaveBeenCalled();
+	expect(store.load).toHaveBeenCalledOnce();
+});
+
+it('keeps draft workflow picks when switching from selected to all and back', async () => {
+	const view = await renderView('new');
+	await fireEvent.click(await view.findByRole('radio', { name: 'Select manually' }));
+	await fireEvent.click(view.getAllByRole('button', { name: 'Show popup' })[0]);
+	await fireEvent.click(await view.findByRole('option', { name: 'Production workflow' }));
+	await fireEvent.click(view.getByRole('radio', { name: 'All' }));
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+
+	expect(view.getByTestId('self-healing-selected-workflow')).toHaveTextContent(
+		'Production workflow',
+	);
+	expect(view.getByRole('button', { name: 'Create configuration' })).toBeEnabled();
+});
+
+it('saves all scope with no workflow IDs and uses it as the discard baseline', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [
+		{ ...configuration, scope: 'selected', workflowIds: ['workflow'] },
+	];
+	const save = vi.spyOn(store, 'save').mockResolvedValue(configuration);
+	const view = await renderView('1');
+	await fireEvent.click(await view.findByRole('radio', { name: 'All' }));
+	await fireEvent.click(view.getByRole('button', { name: 'Save changes' }));
+	await waitFor(() => expect(showMessage).toHaveBeenCalledOnce());
+
+	expect(save).toHaveBeenCalledWith(
+		'project',
+		expect.objectContaining({ scope: 'all', workflowIds: [] }),
+		1,
+	);
+	expect(view.getByRole('button', { name: 'Save changes' })).toBeDisabled();
+	expect(view.getByRole('button', { name: 'Discard changes' })).toBeDisabled();
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+	expect(view.queryByTestId('self-healing-selected-workflow')).not.toBeInTheDocument();
+	await fireEvent.click(view.getAllByRole('button', { name: 'Show popup' })[0]);
+	await fireEvent.click(await view.findByRole('option', { name: 'Production workflow' }));
+	await fireEvent.click(view.getByRole('button', { name: 'Discard changes' }));
+	expect(view.getByRole('radio', { name: 'All' })).toBeChecked();
+	expect(view.getByRole('button', { name: 'Save changes' })).toBeDisabled();
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+	expect(view.queryByTestId('self-healing-selected-workflow')).not.toBeInTheDocument();
+	expect(store.load).toHaveBeenCalledOnce();
+});
+
+it('keeps draft workflow picks and the saved baseline when saving all scope fails', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [configuration];
+	const error = new Error('Could not save the configuration');
+	const save = vi.spyOn(store, 'save').mockRejectedValue(error);
+	const view = await renderView('1');
+	await fireEvent.click(await view.findByRole('radio', { name: 'Select manually' }));
+	await fireEvent.click(view.getAllByRole('button', { name: 'Show popup' })[0]);
+	await fireEvent.click(await view.findByRole('option', { name: 'Production workflow' }));
+	await fireEvent.click(view.getByRole('radio', { name: 'All' }));
+	await fireEvent.click(view.getByRole('button', { name: 'Save changes' }));
+	await waitFor(() => expect(showError).toHaveBeenCalledWith(error, expect.any(String)));
+
+	expect(save).toHaveBeenCalledWith(
+		'project',
+		expect.objectContaining({ scope: 'all', workflowIds: [] }),
+		1,
+	);
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+	expect(view.getByTestId('self-healing-selected-workflow')).toHaveTextContent(
+		'Production workflow',
+	);
+	expect(view.getByRole('button', { name: 'Save changes' })).toBeEnabled();
+	await fireEvent.click(view.getByRole('button', { name: 'Discard changes' }));
+	expect(view.getByRole('radio', { name: 'All' })).toBeChecked();
+	expect(view.getByRole('button', { name: 'Discard changes' })).toBeDisabled();
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+	expect(view.queryByTestId('self-healing-selected-workflow')).not.toBeInTheDocument();
+	expect(store.load).toHaveBeenCalledOnce();
+});
+
+it('keeps workflows reserved by other configurations unavailable in the picker', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [
+		{ ...configuration, scope: 'selected', workflowIds: ['workflow'] },
+	];
+	const view = await renderView('new');
+	await view.findByRole('button', { name: 'Create configuration' });
+	await fireEvent.click(view.getByRole('radio', { name: 'Select manually' }));
+	await fireEvent.click(view.getAllByRole('button', { name: 'Show popup' })[0]);
+
+	expect(await view.findByRole('option', { name: /Production workflow/ })).toHaveAttribute(
+		'data-disabled',
+	);
+});
+
+it('returns to project settings at the self-healing section', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [configuration];
+	const view = await renderView('1');
+	await view.findByRole('button', { name: 'Save changes' });
+	await fireEvent.click(view.getByRole('button', { name: 'Project settings' }));
+
+	await waitFor(() =>
+		expect(router.currentRoute.value).toMatchObject({
+			name: VIEWS.PROJECT_SETTINGS,
+			params: { projectId: 'project' },
+			hash: '#self-healing',
+		}),
+	);
+});
+
+it('shows an email-only reviewer once and allows removal', async () => {
+	const store = useSelfHealingStore();
+	store.options.project.reviewers = [
+		{ id: 'creator', email: 'creator@example.com', firstName: null, lastName: null },
+	];
+	const view = await renderView('new');
+	const reviewer = within(await view.findByTestId('self-healing-selected-reviewer'));
+
+	expect(reviewer.getAllByText('creator@example.com')).toHaveLength(1);
+	expect(reviewer.getAllByText(/\(you\)/)).toHaveLength(1);
+	await fireEvent.click(reviewer.getByRole('button', { name: 'Remove reviewer' }));
+	expect(view.queryByTestId('self-healing-selected-reviewer')).not.toBeInTheDocument();
+});
+
+it('keeps a saved unavailable reviewer visible and removable', async () => {
+	const store = useSelfHealingStore();
+	store.configurations.project = [{ ...configuration, reviewerIds: ['creator', 'unavailable'] }];
+	const view = await renderView('1');
+	await view.findByRole('button', { name: 'Save changes' });
+	const rows = view.getAllByTestId('self-healing-selected-reviewer');
+	expect(rows).toHaveLength(2);
+	const reviewer = within(rows[1]);
+	expect(reviewer.getByText('Reviewer no longer available')).toBeVisible();
+
+	await fireEvent.click(reviewer.getByRole('button', { name: 'Remove reviewer' }));
+	expect(view.getAllByTestId('self-healing-selected-reviewer')).toHaveLength(1);
+	expect(view.getByText('Test Reviewer (you)')).toBeVisible();
+	expect(view.getByRole('button', { name: 'Save changes' })).toBeEnabled();
+});