Extract-out AI curl

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

packages/editor-ui/src/Interface.ts

@@ -1,4 +1,4 @@
-import type { AI_CONNECT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY } from './constants';
+import type { CREDENTIAL_EDIT_MODAL_KEY } from './constants';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { IMenuItem } from 'n8n-design-system';
 import type {
@@ -979,7 +979,6 @@ export interface ITagsState {
 
 export type Modals = {
 	[CREDENTIAL_EDIT_MODAL_KEY]: NewCredentialsModal;
-	[AI_CONNECT_MODAL_KEY]: AiConnectModal;
 	[key: string]: ModalState;
 };
 
@@ -992,11 +991,6 @@ export type ModalState = {
 	httpNodeParameters?: string;
 };
 
-export type AiConnectModal = ModalState & {
-	prompt: string;
-	service: string;
-};
-
 export type NewCredentialsModal = ModalState & {
 	showAuthSelector?: boolean;
 };

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

@@ -10,10 +10,11 @@
 			<div :class="$style.container">
 				<n8n-input-label :label="$locale.baseText('importCurlModal.input.label')" color="text-dark">
 					<n8n-input
+						:value="curlCommand"
 						type="textarea"
 						:rows="5"
 						:placeholder="$locale.baseText('importCurlModal.input.placeholder')"
-						v-model="curlCommand"
+						@input="onInput"
 						@focus="$event.target.select()"
 						ref="input"
 					/>
@@ -28,7 +29,7 @@
 				/>
 				<div>
 					<n8n-button
-						@click="onSubmit"
+						@click="importCurlCommand"
 						float="right"
 						:label="$locale.baseText('importCurlModal.button.label')"
 					/>
@@ -38,39 +39,149 @@
 	</Modal>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import Modal from '@/components/Modal.vue';
-
-import { onMounted, ref } from 'vue';
+import {
+	IMPORT_CURL_MODAL_KEY,
+	CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS,
+	CURL_IMPORT_NODES_PROTOCOLS,
+} from '@/constants';
+import { useToast } from '@/composables';
+import { defineComponent } from 'vue';
+import type { INodeUi } from '@/Interface';
+import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
+import { useNDVStore } from '@/stores/ndv.store';
 import { createEventBus } from 'n8n-design-system';
-import { useImportCurl } from '@/composables';
-import { IMPORT_CURL_MODAL_KEY } from '@/constants';
-import { useTelemetry } from '@/composables';
 
-const uiStore = useUIStore();
-const { track } = useTelemetry();
-const { importCurlCommand } = useImportCurl(track, IMPORT_CURL_MODAL_KEY);
+export default defineComponent({
+	name: 'ImportCurlModal',
+	components: {
+		Modal,
+	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
+	data() {
+		return {
+			IMPORT_CURL_MODAL_KEY,
+			curlCommand: '',
+			modalBus: createEventBus(),
+		};
+	},
+	computed: {
+		...mapStores(useNDVStore, useUIStore),
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
+		},
+	},
+	methods: {
+		closeDialog(): void {
+			this.modalBus.emit('close');
+		},
+		onInput(value: string): void {
+			this.curlCommand = value;
+		},
+		async importCurlCommand(): Promise<void> {
+			const curlCommand = this.curlCommand;
+			if (curlCommand === '') return;
 
-const modalBus = createEventBus();
-const curlCommand = ref('');
-const input = ref();
+			try {
+				const parameters = await this.uiStore.getCurlToJson(curlCommand);
+				const url = parameters['parameters.url'];
 
-function closeDialog() {
-	modalBus.emit('close');
-}
+				const invalidProtocol = CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS.find((p) =>
+					url.includes(`${p}://`),
+				);
 
-async function onSubmit() {
-	if (await importCurlCommand(curlCommand.value)) {
-		closeDialog();
-	}
-}
+				if (!invalidProtocol) {
+					this.uiStore.setHttpNodeParameters({
+						name: IMPORT_CURL_MODAL_KEY,
+						parameters: JSON.stringify(parameters),
+					});
+
+					this.closeDialog();
+
+					this.sendTelemetry();
+
+					return;
+					// if we have a node that supports the invalid protocol
+					// suggest that one
+				} else if (CURL_IMPORT_NODES_PROTOCOLS[invalidProtocol]) {
+					const useNode = CURL_IMPORT_NODES_PROTOCOLS[invalidProtocol];
+
+					this.showProtocolErrorWithSupportedNode(invalidProtocol, useNode);
+					// we do not have a node that supports the use protocol
+				} else {
+					this.showProtocolError(invalidProtocol);
+				}
+				this.sendTelemetry({ success: false, invalidProtocol: true, protocol: invalidProtocol });
+			} catch (e) {
+				this.showInvalidcURLCommandError();
 
-onMounted(() => {
-	curlCommand.value = uiStore.getCurlCommand(IMPORT_CURL_MODAL_KEY) || '';
-	setTimeout(() => {
-		(input.value as HTMLTextAreaElement)?.focus();
-	});
+				this.sendTelemetry({ success: false, invalidProtocol: false });
+			} finally {
+				this.uiStore.setCurlCommand({ name: IMPORT_CURL_MODAL_KEY, command: this.curlCommand });
+			}
+		},
+		showProtocolErrorWithSupportedNode(protocol: string, node: string): void {
+			this.showToast({
+				title: this.$locale.baseText('importParameter.showError.invalidProtocol1.title', {
+					interpolate: {
+						node,
+					},
+				}),
+				message: this.$locale.baseText('importParameter.showError.invalidProtocol.message', {
+					interpolate: {
+						protocol: protocol.toUpperCase(),
+					},
+				}),
+				type: 'error',
+				duration: 0,
+			});
+		},
+		showProtocolError(protocol: string): void {
+			this.showToast({
+				title: this.$locale.baseText('importParameter.showError.invalidProtocol2.title'),
+				message: this.$locale.baseText('importParameter.showError.invalidProtocol.message', {
+					interpolate: {
+						protocol,
+					},
+				}),
+				type: 'error',
+				duration: 0,
+			});
+		},
+		showInvalidcURLCommandError(): void {
+			this.showToast({
+				title: this.$locale.baseText('importParameter.showError.invalidCurlCommand.title'),
+				message: this.$locale.baseText('importParameter.showError.invalidCurlCommand.message'),
+				type: 'error',
+				duration: 0,
+			});
+		},
+		sendTelemetry(
+			data: { success: boolean; invalidProtocol: boolean; protocol?: string } = {
+				success: true,
+				invalidProtocol: false,
+				protocol: '',
+			},
+		): void {
+			this.$telemetry.track('User imported curl command', {
+				success: data.success,
+				invalidProtocol: data.invalidProtocol,
+				protocol: data.protocol,
+			});
+		},
+	},
+	mounted() {
+		this.curlCommand = this.uiStore.getCurlCommand || '';
+		setTimeout(() => {
+			(this.$refs.input as HTMLTextAreaElement).focus();
+		});
+	},
 });
 </script>