mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Fix typescript issues in components (no-changelog) (#9580)

Browse source
This commit is contained in:
Elias Meire 2024-05-31 16:27:56 +02:00 committed by GitHub
parent e23420d89d
commit 3227f6c13e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 57 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/editor-ui/src/Interface.ts
View file

@ -57,6 +57,7 @@ import type { Scope } from '@n8n/permissions';
import type { NotificationOptions as ElementNotificationOptions } from 'element-plus'; import type { NotificationOptions as ElementNotificationOptions } from 'element-plus';
import type { ProjectSharingData } from '@/features/projects/projects.types'; import type { ProjectSharingData } from '@/features/projects/projects.types';
import type { Connection } from '@jsplumb/core'; import type { Connection } from '@jsplumb/core';
import type { BaseTextKey } from './plugins/i18n';
export * from 'n8n-design-system/types'; export * from 'n8n-design-system/types';
@ -138,14 +139,7 @@ export type EndpointMeta = {
}; };
}; };
export interface IUpdateInformation< export interface IUpdateInformation<T extends NodeParameterValueType = NodeParameterValueType> {
T extends NodeParameterValueType =
| string
| number
| { [key: string]: string | number | boolean }
| NodeParameterValueType
| INodeParameters,
> {
name: string; name: string;
key?: string; key?: string;
value: T; value: T;
@ -1340,12 +1334,12 @@ export interface UIState {
export type IFakeDoor = { export type IFakeDoor = {
id: FAKE_DOOR_FEATURES; id: FAKE_DOOR_FEATURES;
featureName: string; featureName: BaseTextKey;
icon?: string; icon?: string;
infoText?: string; infoText?: BaseTextKey;
actionBoxTitle: string; actionBoxTitle: BaseTextKey;
actionBoxDescription: string; actionBoxDescription: BaseTextKey;
actionBoxButtonLabel?: string; actionBoxButtonLabel?: BaseTextKey;
linkURL: string; linkURL: string;
uiLocations: IFakeDoorLocation[]; uiLocations: IFakeDoorLocation[];
}; };

2
packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
View file

@ -69,7 +69,7 @@ export default defineComponent({
} }
} else { } else {
try { try {
const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName, mimeType); const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
if (isJSONData || isHTMLData) { if (isJSONData || isHTMLData) {
const fetchedData = await fetch(binaryUrl, { credentials: 'include' }); const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
this.data = await (isJSONData ? fetchedData.json() : fetchedData.text()); this.data = await (isJSONData ? fetchedData.json() : fetchedData.text());

9
packages/editor-ui/src/components/ChatEmbedModal.vue
View file

@ -22,7 +22,12 @@ const i18n = useI18n();
const rootStore = useRootStore(); const rootStore = useRootStore();
const workflowsStore = useWorkflowsStore(); const workflowsStore = useWorkflowsStore();
const tabs = ref([ type ChatEmbedModalTabValue = 'cdn' | 'vue' | 'react' | 'other';
type ChatEmbedModalTab = {
label: string;
value: ChatEmbedModalTabValue;
};
const tabs = ref<ChatEmbedModalTab[]>([
{ {
label: 'CDN Embed', label: 'CDN Embed',
value: 'cdn', value: 'cdn',
@ -40,7 +45,7 @@ const tabs = ref([
value: 'other', value: 'other',
}, },
]); ]);
const currentTab = ref('cdn'); const currentTab = ref<ChatEmbedModalTabValue>('cdn');
const webhookNode = computed(() => { const webhookNode = computed(() => {
for (const type of [CHAT_TRIGGER_NODE_TYPE, WEBHOOK_NODE_TYPE]) { for (const type of [CHAT_TRIGGER_NODE_TYPE, WEBHOOK_NODE_TYPE]) {

4
packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file

@ -134,7 +134,7 @@ export default defineComponent({
}; };
}, },
watch: { watch: {
mode(newMode, previousMode: CodeExecutionMode) { mode(_newMode, previousMode: CodeExecutionMode) {
this.reloadLinter(); this.reloadLinter();
if ( if (
@ -143,7 +143,7 @@ export default defineComponent({
this.refreshPlaceholder(); this.refreshPlaceholder();
} }
}, },
language(newLanguage, previousLanguage: CodeNodeEditorLanguage) { language(_newLanguage, previousLanguage: CodeNodeEditorLanguage) {
if ( if (
this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode] this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]
) { ) {

4
packages/editor-ui/src/components/CommunityPackageInstallModal.vue
View file

@ -16,7 +16,7 @@
</n8n-text> </n8n-text>
{{ ' ' }} {{ ' ' }}
<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick"> <n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
{{ $locale.baseText('_reusableDynamicText.moreInfo') }} {{ $locale.baseText('generic.moreInfo') }}
</n8n-link> </n8n-link>
</div> </div>
<n8n-button <n8n-button
@ -67,7 +67,7 @@
{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text {{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
><br /> ><br />
<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{ <n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
$locale.baseText('_reusableDynamicText.moreInfo') $locale.baseText('generic.moreInfo')
}}</n8n-link> }}</n8n-link>
</el-checkbox> </el-checkbox>
</div> </div>

2
packages/editor-ui/src/components/CopyInput.vue
View file

@ -77,7 +77,7 @@ export default defineComponent({
methods: { methods: {
copy(): void { copy(): void {
this.$emit('copy'); this.$emit('copy');
void this.clipboard.copy(this.value); void this.clipboard.copy(this.value ?? '');
this.showMessage({ this.showMessage({
title: this.toastTitle, title: this.toastTitle,

1
packages/editor-ui/src/components/DeleteUserModal.vue
View file

@ -118,6 +118,7 @@ export default defineComponent({
computed: { computed: {
...mapStores(useUsersStore, useProjectsStore), ...mapStores(useUsersStore, useProjectsStore),
userToDelete(): IUser | null { userToDelete(): IUser | null {
if (!this.activeId) return null;
return this.usersStore.getUserById(this.activeId); return this.usersStore.getUserById(this.activeId);
}, },
isPending(): boolean { isPending(): boolean {

2
packages/editor-ui/src/components/DraggableTarget.vue
View file

@ -114,7 +114,7 @@ export default defineComponent({
e.clientY <= dim.bottom; e.clientY <= dim.bottom;
} }
}, },
onMouseUp(e: MouseEvent) { onMouseUp() {
if (this.activeDrop) { if (this.activeDrop) {
const data = this.ndvStore.draggableData; const data = this.ndvStore.draggableData;
this.$emit('drop', data); this.$emit('drop', data);

16
packages/editor-ui/src/components/HoverableNodeIcon.vue
View file

@ -40,7 +40,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { type StyleValue, defineComponent, type PropType } from 'vue';
import type { ITemplatesNode } from '@/Interface'; import type { ITemplatesNode } from '@/Interface';
import type { INodeTypeDescription } from 'n8n-workflow'; import type { INodeTypeDescription } from 'n8n-workflow';
@ -50,6 +50,7 @@ import { useRootStore } from '@/stores/n8nRoot.store';
interface NodeIconData { interface NodeIconData {
type: string; type: string;
path?: string; path?: string;
icon?: string;
fileExtension?: string; fileExtension?: string;
fileBuffer?: string; fileBuffer?: string;
} }
@ -69,7 +70,8 @@ export default defineComponent({
default: false, default: false,
}, },
nodeType: { nodeType: {
type: Object, type: Object as PropType<INodeTypeDescription>,
required: true,
}, },
size: { size: {
type: Number, type: Number,
@ -82,9 +84,11 @@ export default defineComponent({
'max-width': this.size + 'px', 'max-width': this.size + 'px',
}; };
}, },
iconStyleData(): object { iconStyleData(): StyleValue {
const nodeType = this.nodeType as ITemplatesNode | null; const nodeType = this.nodeType;
const color = nodeType ? nodeType.defaults && nodeType.defaults.color : ''; const nodeTypeColor = nodeType?.defaults?.color;
const color = typeof nodeTypeColor === 'string' ? nodeTypeColor : '';
if (!this.size) { if (!this.size) {
return { color }; return { color };
} }
@ -103,7 +107,7 @@ export default defineComponent({
}), }),
}; };
}, },
imageStyleData(): object { imageStyleData(): StyleValue {
return { return {
width: '100%', width: '100%',
'max-width': '100%', 'max-width': '100%',

4
packages/editor-ui/src/components/IntersectionObserver.vue
View file

@ -28,7 +28,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
observer: null, observer: null as IntersectionObserver | null,
}; };
}, },
mounted() { mounted() {
@ -64,7 +64,7 @@ export default defineComponent({
}); });
}, },
beforeUnmount() { beforeUnmount() {
if (this.enabled) { if (this.enabled && this.observer) {
this.observer.disconnect(); this.observer.disconnect();
} }
}, },

8
packages/editor-ui/src/components/InviteUsersModal.vue
View file

@ -65,7 +65,7 @@ import { defineComponent } from 'vue';
import { mapStores } from 'pinia'; import { mapStores } from 'pinia';
import { useToast } from '@/composables/useToast'; import { useToast } from '@/composables/useToast';
import Modal from './Modal.vue'; import Modal from './Modal.vue';
import type { IFormInputs, IInviteResponse, IUser } from '@/Interface'; import type { IFormInputs, IInviteResponse, IUser, InvitableRoleName } from '@/Interface';
import { import {
EnterpriseEditionFeature, EnterpriseEditionFeature,
VALID_EMAIL_REGEX, VALID_EMAIL_REGEX,
@ -113,7 +113,7 @@ export default defineComponent({
formBus: createEventBus(), formBus: createEventBus(),
modalBus: createEventBus(), modalBus: createEventBus(),
emails: '', emails: '',
role: ROLE.Member, role: ROLE.Member as InvitableRoleName,
showInviteUrls: null as IInviteResponse[] | null, showInviteUrls: null as IInviteResponse[] | null,
loading: false, loading: false,
INVITE_USER_MODAL_KEY, INVITE_USER_MODAL_KEY,
@ -216,7 +216,7 @@ export default defineComponent({
return false; return false;
}, },
onInput(e: { name: string; value: string }) { onInput(e: { name: string; value: InvitableRoleName }) {
if (e.name === 'emails') { if (e.name === 'emails') {
this.emails = e.value; this.emails = e.value;
} }
@ -237,7 +237,7 @@ export default defineComponent({
throw new Error(this.$locale.baseText('settings.users.noUsersToInvite')); throw new Error(this.$locale.baseText('settings.users.noUsersToInvite'));
} }
const invited: IInviteResponse[] = await this.usersStore.inviteUsers(emails); const invited = await this.usersStore.inviteUsers(emails);
const erroredInvites = invited.filter((invite) => invite.error); const erroredInvites = invited.filter((invite) => invite.error);
const successfulEmailInvites = invited.filter( const successfulEmailInvites = invited.filter(
(invite) => !invite.error && invite.user.emailSent, (invite) => !invite.error && invite.user.emailSent,

2
packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
View file

@ -60,7 +60,7 @@ export default defineComponent({
}, },
computed: { computed: {
doc(): string { doc(): string {
return this.editor?.state.doc.toString(); return this.editor?.state.doc.toString() ?? '';
}, },
extensions(): Extension[] { extensions(): Extension[] {
const { isReadOnly } = this; const { isReadOnly } = this;

2
packages/editor-ui/src/components/KeyboardShortcutTooltip.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { KeyboardShortcut } from '@/Interface';
import type { Placement } from 'element-plus'; import type { Placement } from 'element-plus';
import type { KeyboardShortcut } from 'n8n-design-system/src/components/N8nKeyboardShortcut';
interface Props { interface Props {
label: string; label: string;

2
packages/editor-ui/src/components/MfaSetupModal.vue
View file

@ -38,7 +38,7 @@
</n8n-text> </n8n-text>
</div> </div>
<div :class="$style.qrContainer"> <div :class="$style.qrContainer">
<QrcodeVue :value="qrCode" size="150" level="H" /> <QrcodeVue :value="qrCode" :size="150" level="H" />
</div> </div>
<div :class="$style.textContainer"> <div :class="$style.textContainer">
<n8n-text size="large" color="text-dark" :bold="true">{{ <n8n-text size="large" color="text-dark" :bold="true">{{

1
packages/editor-ui/src/components/ModalDrawer.vue
View file

@ -32,6 +32,7 @@ export default defineComponent({
props: { props: {
name: { name: {
type: String, type: String,
required: true,
}, },
beforeClose: { beforeClose: {
type: Function, type: Function,

2
packages/editor-ui/src/components/NodeTitle.vue
View file

@ -48,7 +48,7 @@ import { computed, nextTick, ref } from 'vue';
type Props = { type Props = {
modelValue: string; modelValue: string;
nodeType?: INodeTypeDescription; nodeType?: INodeTypeDescription | null;
readOnly?: boolean; readOnly?: boolean;
}; };

15
packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
View file

@ -243,7 +243,6 @@ export default defineComponent({
}, },
node: { node: {
type: Object as PropType<INode>, type: Object as PropType<INode>,
required: true,
}, },
path: { path: {
type: String, type: String,
@ -308,7 +307,8 @@ export default defineComponent({
return !!(node?.credentials && Object.keys(node.credentials).length === 1); return !!(node?.credentials && Object.keys(node.credentials).length === 1);
}, },
credentialsNotSet(): boolean { credentialsNotSet(): boolean {
const nodeType = this.nodeTypesStore.getNodeType(this.node?.type); if (!this.node) return false;
const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
if (nodeType) { if (nodeType) {
const usesCredentials = const usesCredentials =
nodeType.credentials !== undefined && nodeType.credentials.length > 0; nodeType.credentials !== undefined && nodeType.credentials.length > 0;
@ -387,8 +387,8 @@ export default defineComponent({
filter: string; filter: string;
} { } {
return { return {
parameters: this.node.parameters, parameters: this.node?.parameters ?? {},
credentials: this.node.credentials, credentials: this.node?.credentials ?? {},
filter: this.searchFilter, filter: this.searchFilter,
}; };
}, },
@ -561,7 +561,8 @@ export default defineComponent({
this.uiStore.openExistingCredential(id); this.uiStore.openExistingCredential(id);
}, },
createNewCredential(): void { createNewCredential(): void {
const nodeType = this.nodeTypesStore.getNodeType(this.node?.type); if (!this.node) return;
const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
if (!nodeType) { if (!nodeType) {
return; return;
} }
@ -667,6 +668,10 @@ export default defineComponent({
return; return;
} }
if (!this.node) {
return;
}
let paginationToken: string | undefined; let paginationToken: string | undefined;
try { try {

2
packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
View file

@ -24,7 +24,7 @@ function toggleDisableNode() {}
function deleteNode() {} function deleteNode() {}
// @TODO // @TODO
function openContextMenu(e: MouseEvent, type: string) {} function openContextMenu(_e: MouseEvent, _type: string) {}
</script> </script>
<template> <template>

1
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -69,6 +69,7 @@
"generic.and": "and", "generic.and": "and",
"generic.welcome": "Welcome", "generic.welcome": "Welcome",
"generic.ownedByMe": "Owned by me", "generic.ownedByMe": "Owned by me",
"generic.moreInfo": "More info",
"about.aboutN8n": "About n8n", "about.aboutN8n": "About n8n",
"about.close": "Close", "about.close": "Close",
"about.license": "License", "about.license": "License",

16
packages/editor-ui/src/types/externalHooks.ts
View file

@ -1,13 +1,10 @@
import type { N8nInput } from 'n8n-design-system'; import type { N8nInput } from 'n8n-design-system';
import type { import type {
IConnections, IConnections,
INodeParameters,
INodeProperties, INodeProperties,
INodeTypeDescription, INodeTypeDescription,
ITelemetryTrackProperties, ITelemetryTrackProperties,
INodeParameterResourceLocator, NodeParameterValueType,
NodeParameterValue,
ResourceMapperValue,
} from 'n8n-workflow'; } from 'n8n-workflow';
import type { RouteLocation } from 'vue-router'; import type { RouteLocation } from 'vue-router';
import type { import type {
@ -197,16 +194,7 @@ export interface ExternalHooks {
ExternalHooksMethod<{ ExternalHooksMethod<{
node_type?: string; node_type?: string;
action: string; action: string;
resource: resource: NodeParameterValueType;
| string
| number
| true
| INodeParameters
| INodeParameterResourceLocator
| NodeParameterValue[]
| INodeParameters[]
| INodeParameterResourceLocator[]
| ResourceMapperValue[];
}> }>
>; >;
selectedTypeChanged: Array<ExternalHooksMethod<{ oldValue: string; newValue: string }>>; selectedTypeChanged: Array<ExternalHooksMethod<{ oldValue: string; newValue: string }>>;