mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-19 19:11:13 +00:00
feat(HTTP Request Node): Redesign and add the ability to import cURL commands (#3860)
* ⚡ Initial commit * 👕 Fix linting issue * ⚡ Add import button * ⚡ Remove ligh versioning * ⚡ Improvements * ⚡ Improvements * 🔥 Remove HttpRequest2 file used for testing * 🐛 Fix building issue * ⚡ Small improvement * 👕 Fix linting issue * 🔥 Remove HttpRequest2 from loader * ⚡ Update package-lock.json * ⚡ Improvements * ⚡ Small change * 🐛 Fix issue retrieving splitIntoItems * 🐛 Fix issue retrieving neverError parameter * 🐛 Fix issue with displayOptions * ⚡ Improvements * ⚡ Improvements * ⚡ Improvements * ⚡ Improvements * ⚡ Move cURL section to its own component * ⚡ Improvements * ⚡ Improvements * ⚡ Add fix for batching in all versions * ⚡ Add notice to cURL modal * 🔥 Remove comments * ⚡ Improvements * ⚡ Type curl-to-json endpoint * ⚡ Fix typo * 🔥 Remove console.logs * ⚡ Fix typo in curl-to-json endpoint * ⚡ Improvements * ⚡ Improvements * ⚡ Update package-lock.json * ⚡ Rename import modal constant * ⚡ Add return types to methods * ⚡ Add CSS modules to ImportParameter component * ⚡ Rename ImportParameter component to use kebab-case * ⚡ Improvements * ⚡ update package-lock.json * ⚡ Fix linting issues * Fix issue with css reference in ImportParameter component * ⚡ Small improvements * ⚡ Rename redirects to redirect * ⚡ Allow to set multiple parameters on valueChanged * 👕 Fix linting issue * 🐛 Add mistakenly removed openExistingCredentials * ⚡ Improve curl regex * ⚡ Keep headers as defined in the cURL command * ⚡ Account for all protocols supported by cURL * ⚡ Add tests * 🔥 Remove unnecessary lines * ⚡ Add more testing * ⚡ Add noDataExpression to dependent fields * 🐛 Fix bug not handling multipart-form data correctly * ⚡ Change error messages * 🐛 Fix response format string for empty values * Fix typo
This commit is contained in:
Ricardo Espinoza
196
packages/editor-ui/src/components/ImportCurlModal.vue
Normal file
196
packages/editor-ui/src/components/ImportCurlModal.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<Modal
|
||||
width="700px"
|
||||
:title="$locale.baseText('importCurlModal.title')"
|
||||
:eventBus="modalBus"
|
||||
:name="IMPORT_CURL_MODAL_KEY"
|
||||
:center="true"
|
||||
>
|
||||
<template slot="content">
|
||||
<div :class="$style.container">
|
||||
<n8n-input-label :label="$locale.baseText('importCurlModal.input.label')">
|
||||
<n8n-input
|
||||
:value="curlCommand"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
:placeholder="$locale.baseText('importCurlModal.input.placeholder')"
|
||||
@input="onInput"
|
||||
@focus="$event.target.select()"
|
||||
ref="input"
|
||||
/>
|
||||
</n8n-input-label>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<div :class="$style.modalFooter">
|
||||
<n8n-notice
|
||||
:class="$style.notice"
|
||||
:content="$locale.baseText('ImportCurlModal.notice.content')"
|
||||
/>
|
||||
<div>
|
||||
<n8n-button
|
||||
@click="importCurlCommand"
|
||||
float="right"
|
||||
:label="$locale.baseText('importCurlModal.button.label')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Modal from './Modal.vue';
|
||||
import {
|
||||
IMPORT_CURL_MODAL_KEY,
|
||||
CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS,
|
||||
CURL_IMPORT_NODES_PROTOCOLS,
|
||||
} from '../constants';
|
||||
import { showMessage } from './mixins/showMessage';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import { INodeUi } from '@/Interface';
|
||||
|
||||
export default mixins(showMessage).extend({
|
||||
name: 'ImportCurlModal',
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
IMPORT_CURL_MODAL_KEY,
|
||||
curlCommand: '',
|
||||
modalBus: new Vue(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
node(): INodeUi {
|
||||
return this.$store.getters.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;
|
||||
|
||||
try {
|
||||
const parameters = await this.$store.dispatch('ui/getCurlToJson', curlCommand);
|
||||
|
||||
const url = parameters['parameters.url'];
|
||||
|
||||
const invalidProtocol = CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS.find((p) =>
|
||||
url.includes(`${p}://`),
|
||||
);
|
||||
|
||||
if (!invalidProtocol) {
|
||||
this.$store.dispatch('ui/setHttpNodeParameters', {
|
||||
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();
|
||||
|
||||
this.sendTelemetry({ success: false, invalidProtocol: false });
|
||||
} finally {
|
||||
this.$store.dispatch('ui/setCurlCommand', { 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.$store.getters['ui/getCurlCommand'];
|
||||
setTimeout(() => {
|
||||
(this.$refs.input as HTMLTextAreaElement).focus();
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.modalFooter {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
margin-bottom: var(--spacing-s);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user