fix(editor): Hide credential’s modal menu when the credential is managed (no-changelog) (#12471)

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -1106,7 +1106,7 @@ function resetCredentialData(): void {
 		</template>
 		<template #content>
 			<div :class="$style.container" data-test-id="credential-edit-dialog">
-				<div :class="$style.sidebar">
+				<div v-if="!isEditingManagedCredential" :class="$style.sidebar">
 					<n8n-menu
 						mode="tabs"
 						:items="sidebarItems"

packages/editor-ui/src/components/CredentialEdit/__tests__/CredentialEdit.test.ts

@@ -3,6 +3,8 @@ import CredentialEdit from '@/components/CredentialEdit/CredentialEdit.vue';
 import { createTestingPinia } from '@pinia/testing';
 import { CREDENTIAL_EDIT_MODAL_KEY, STORES } from '@/constants';
 import { cleanupAppModals, createAppModals, retry } from '@/__tests__/utils';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import type { ICredentialsResponse } from '@/Interface';
 
 vi.mock('@/permissions', () => ({
 	getResourcePermissions: vi.fn(() => ({
@@ -23,6 +25,10 @@ const renderComponent = createComponentRenderer(CredentialEdit, {
 			},
 			[STORES.SETTINGS]: {
 				settings: {
+					enterprise: {
+						sharing: true,
+						externalSecrets: false,
+					},
 					templates: {
 						host: '',
 					},
@@ -67,4 +73,54 @@ describe('CredentialEdit', () => {
 		});
 		await retry(() => expect(queryByTestId('credential-save-button')).not.toBeInTheDocument());
 	});
+
+	test('hides menu item when credential is managed', async () => {
+		const credentialsStore = useCredentialsStore();
+
+		credentialsStore.state.credentials = {
+			'123': {
+				isManaged: false,
+			} as ICredentialsResponse,
+		};
+
+		const { queryByText } = renderComponent({
+			props: {
+				activeId: '123', // credentialId will be set to this value in edit mode
+				isTesting: false,
+				isSaving: false,
+				hasUnsavedChanges: false,
+				modalName: CREDENTIAL_EDIT_MODAL_KEY,
+				mode: 'edit',
+			},
+		});
+
+		await retry(() => expect(queryByText('Details')).toBeInTheDocument());
+		await retry(() => expect(queryByText('Connection')).toBeInTheDocument());
+		await retry(() => expect(queryByText('Sharing')).toBeInTheDocument());
+	});
+
+	test('shows menu item when credential is not managed', async () => {
+		const credentialsStore = useCredentialsStore();
+
+		credentialsStore.state.credentials = {
+			'123': {
+				isManaged: true,
+			} as ICredentialsResponse,
+		};
+
+		const { queryByText } = renderComponent({
+			props: {
+				activeId: '123', // credentialId will be set to this value in edit mode
+				isTesting: false,
+				isSaving: false,
+				hasUnsavedChanges: false,
+				modalName: CREDENTIAL_EDIT_MODAL_KEY,
+				mode: 'edit',
+			},
+		});
+
+		await retry(() => expect(queryByText('Details')).not.toBeInTheDocument());
+		await retry(() => expect(queryByText('Connection')).not.toBeInTheDocument());
+		await retry(() => expect(queryByText('Sharing')).not.toBeInTheDocument());
+	});
 });