fix(editor): Add ssh key type selection to source control settings when regenerating key (#7172)

packages/editor-ui/src/views/SettingsSourceControl.vue

@@ -5,6 +5,8 @@ import { MODAL_CONFIRM } from '@/constants';
 import { useUIStore, useSourceControlStore } from '@/stores';
 import { useToast, useMessage, useLoadingService, useI18n } from '@/composables';
 import CopyInput from '@/components/CopyInput.vue';
+import type { TupleToUnion } from '@/utils/typeHelpers';
+import type { SshKeyTypes } from '@/Interface';
 
 const locale = useI18n();
 const sourceControlStore = useSourceControlStore();
@@ -111,6 +113,7 @@ onMounted(async () => {
 
 const formValidationStatus = reactive<Record<string, boolean>>({
 	repoUrl: false,
+	keyGeneratorType: false,
 });
 
 function onValidate(key: string, value: boolean) {
@@ -129,6 +132,8 @@ const repoUrlValidationRules: Array<Rule | RuleGroup> = [
 	},
 ];
 
+const keyGeneratorTypeValidationRules: Array<Rule | RuleGroup> = [{ name: 'REQUIRED' }];
+
 const validForConnection = computed(() => formValidationStatus.repoUrl);
 const branchNameValidationRules: Array<Rule | RuleGroup> = [{ name: 'REQUIRED' }];
 
@@ -144,7 +149,7 @@ async function refreshSshKey() {
 		);
 
 		if (confirmation === MODAL_CONFIRM) {
-			await sourceControlStore.generateKeyPair();
+			await sourceControlStore.generateKeyPair(sourceControlStore.preferences.keyGeneratorType);
 			toast.showMessage({
 				title: locale.baseText('settings.sourceControl.refreshSshKey.successful.title'),
 				type: 'success',
@@ -166,6 +171,13 @@ const refreshBranches = async () => {
 		toast.showError(error, locale.baseText('settings.sourceControl.refreshBranches.error'));
 	}
 };
+
+const onSelectSshKeyType = async (sshKeyType: TupleToUnion<SshKeyTypes>) => {
+	if (sshKeyType === sourceControlStore.preferences.keyGeneratorType) {
+		return;
+	}
+	sourceControlStore.preferences.keyGeneratorType = sshKeyType;
+};
 </script>
 
 <template>
@@ -219,7 +231,23 @@ const refreshBranches = async () => {
 			<div v-if="sourceControlStore.preferences.publicKey" :class="$style.group">
 				<label>{{ locale.baseText('settings.sourceControl.sshKey') }}</label>
 				<div :class="{ [$style.sshInput]: !isConnected }">
+					<n8n-form-input
+						v-if="!isConnected"
+						:class="$style.sshKeyTypeSelect"
+						label
+						type="select"
+						id="keyGeneratorType"
+						name="keyGeneratorType"
+						data-test-id="source-control-ssh-key-type-select"
+						validateOnBlur
+						:validationRules="keyGeneratorTypeValidationRules"
+						:options="sourceControlStore.sshKeyTypesWithLabel"
+						:modelValue="sourceControlStore.preferences.keyGeneratorType"
+						@validate="(value) => onValidate('keyGeneratorType', value)"
+						@update:modelValue="onSelectSshKeyType"
+					/>
 					<CopyInput
+						:class="$style.copyInput"
 						collapse
 						size="medium"
 						:value="sourceControlStore.preferences.publicKey"
@@ -230,8 +258,8 @@ const refreshBranches = async () => {
 						size="large"
 						type="tertiary"
 						icon="sync"
-						class="ml-s"
 						@click="refreshSshKey"
+						data-test-id="source-control-refresh-ssh-key-button"
 					>
 						{{ locale.baseText('settings.sourceControl.refreshSshKey') }}
 					</n8n-button>
@@ -412,12 +440,24 @@ const refreshBranches = async () => {
 	align-items: center;
 
 	> div {
-		width: calc(100% - 144px - var(--spacing-s));
+		flex: 1 1 auto;
 	}
 
 	> button {
 		height: 42px;
 	}
+
+	.copyInput {
+		margin: 0 var(--spacing-2xs);
+	}
+}
+
+.sshKeyTypeSelect {
+	min-width: 120px;
+}
+
+.copyInput {
+	overflow: auto;
 }
 
 .branchSelection {

packages/editor-ui/src/views/__tests__/SettingsSourceControl.test.ts

@@ -68,8 +68,9 @@ describe('SettingsSourceControl', () => {
 		await nextTick();
 
 		const updatePreferencesSpy = vi.spyOn(sourceControlStore, 'updatePreferences');
+		const generateKeyPairSpy = vi.spyOn(sourceControlStore, 'generateKeyPair');
 
-		const { html, container, getByTestId, getByText, queryByTestId, getByRole } = renderComponent({
+		const { container, getByTestId, getByText, queryByTestId, getByRole } = renderComponent({
 			pinia,
 			global: {
 				stubs: ['teleport'],
@@ -127,6 +128,25 @@ describe('SettingsSourceControl', () => {
 		await waitFor(() =>
 			expect(queryByTestId('source-control-connected-content')).not.toBeInTheDocument(),
 		);
+
+		const sshKeyTypeSelect = getByTestId('source-control-ssh-key-type-select');
+		const refreshSshKeyButton = getByTestId('source-control-refresh-ssh-key-button');
+		await waitFor(() => {
+			expect(sshKeyTypeSelect).toBeVisible();
+			expect(refreshSshKeyButton).toBeVisible();
+		});
+
+		await userEvent.click(within(sshKeyTypeSelect).getByRole('textbox'));
+		await waitFor(() => expect(getByText('RSA')).toBeVisible());
+		await userEvent.click(getByText('RSA'));
+		await userEvent.click(refreshSshKeyButton);
+
+		const refreshSshKeyDialog = getByRole('dialog');
+		await waitFor(() => expect(refreshSshKeyDialog).toBeVisible());
+		await userEvent.click(within(refreshSshKeyDialog).getAllByRole('button')[1]);
+		await waitFor(() => expect(refreshSshKeyDialog).not.toBeVisible());
+
+		expect(generateKeyPairSpy).toHaveBeenCalledWith('rsa');
 	}, 10000);
 
 	describe('should test repo URLs', () => {