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): Migrate components to composition API (#11497)

Browse source
This commit is contained in:
Mutasem Aldmour 2024-11-04 23:00:06 +01:00 committed by GitHub
parent 3eb05e6df9
commit 611967decc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 1005 additions and 1088 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
packages/editor-ui/src/components/CommunityPackageCard.vue
View file

@ -1,65 +1,59 @@
<script lang="ts"> <script lang="ts" setup>
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
import type { PublicInstalledPackage } from 'n8n-workflow'; import type { PublicInstalledPackage } from 'n8n-workflow';
import { mapStores } from 'pinia';
import { defineComponent } from 'vue';
import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants'; import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
export default defineComponent({ interface Props {
name: 'CommunityPackageCard', communityPackage?: PublicInstalledPackage | null;
props: { loading?: boolean;
communityPackage: { }
type: Object as () => PublicInstalledPackage | null,
required: false, const props = withDefaults(defineProps<Props>(), {
default: null, communityPackage: null,
}, loading: false,
loading: { });
type: Boolean,
default: false, const { openCommunityPackageUpdateConfirmModal, openCommunityPackageUninstallConfirmModal } =
}, useUIStore();
}, const i18n = useI18n();
data() { const telemetry = useTelemetry();
return {
packageActions: [ const packageActions = [
{ {
label: this.$locale.baseText('settings.communityNodes.viewDocsAction.label'), label: i18n.baseText('settings.communityNodes.viewDocsAction.label'),
value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS, value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS,
type: 'external-link', type: 'external-link',
}, },
{ {
label: this.$locale.baseText('settings.communityNodes.uninstallAction.label'), label: i18n.baseText('settings.communityNodes.uninstallAction.label'),
value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL, value: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL,
}, },
], ];
};
}, async function onAction(value: string) {
computed: { if (!props.communityPackage) return;
...mapStores(useUIStore),
},
methods: {
async onAction(value: string) {
if (!this.communityPackage) return;
switch (value) { switch (value) {
case COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS: case COMMUNITY_PACKAGE_MANAGE_ACTIONS.VIEW_DOCS:
this.$telemetry.track('user clicked to browse the cnr package documentation', { telemetry.track('user clicked to browse the cnr package documentation', {
package_name: this.communityPackage.packageName, package_name: props.communityPackage.packageName,
package_version: this.communityPackage.installedVersion, package_version: props.communityPackage.installedVersion,
}); });
window.open(`${NPM_PACKAGE_DOCS_BASE_URL}${this.communityPackage.packageName}`, '_blank'); window.open(`${NPM_PACKAGE_DOCS_BASE_URL}${props.communityPackage.packageName}`, '_blank');
break; break;
case COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL: case COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL:
this.uiStore.openCommunityPackageUninstallConfirmModal(this.communityPackage.packageName); openCommunityPackageUninstallConfirmModal(props.communityPackage.packageName);
break; break;
default: default:
break; break;
} }
}, }
onUpdateClick() {
if (!this.communityPackage) return; function onUpdateClick() {
this.uiStore.openCommunityPackageUpdateConfirmModal(this.communityPackage.packageName); if (!props.communityPackage) return;
}, openCommunityPackageUpdateConfirmModal(props.communityPackage.packageName);
}, }
});
</script> </script>
<template> <template>
@ -76,7 +70,7 @@ export default defineComponent({
<div :class="$style.cardSubtitle"> <div :class="$style.cardSubtitle">
<n8n-text :bold="true" size="small" color="text-light"> <n8n-text :bold="true" size="small" color="text-light">
{{ {{
$locale.baseText('settings.communityNodes.packageNodes.label', { i18n.baseText('settings.communityNodes.packageNodes.label', {
adjustToNumber: communityPackage.installedNodes.length, adjustToNumber: communityPackage.installedNodes.length,
}) })
}}:&nbsp; }}:&nbsp;
@ -96,7 +90,7 @@ export default defineComponent({
<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top"> <n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
<template #content> <template #content>
<div> <div>
{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }} {{ i18n.baseText('settings.communityNodes.failedToLoad.tooltip') }}
</div> </div>
</template> </template>
<n8n-icon icon="exclamation-triangle" color="danger" size="large" /> <n8n-icon icon="exclamation-triangle" color="danger" size="large" />
@ -104,7 +98,7 @@ export default defineComponent({
<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top"> <n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
<template #content> <template #content>
<div> <div>
{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }} {{ i18n.baseText('settings.communityNodes.updateAvailable.tooltip') }}
</div> </div>
</template> </template>
<n8n-button outline label="Update" @click="onUpdateClick" /> <n8n-button outline label="Update" @click="onUpdateClick" />
@ -112,7 +106,7 @@ export default defineComponent({
<n8n-tooltip v-else placement="top"> <n8n-tooltip v-else placement="top">
<template #content> <template #content>
<div> <div>
{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }} {{ i18n.baseText('settings.communityNodes.upToDate.tooltip') }}
</div> </div>
</template> </template>
<n8n-icon icon="check-circle" color="text-light" size="large" /> <n8n-icon icon="check-circle" color="text-light" size="large" />

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

@ -51,6 +51,7 @@ export default defineComponent({
}, },
pushRef: { pushRef: {
type: String, type: String,
required: true,
}, },
readOnly: { readOnly: {
type: Boolean, type: Boolean,

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

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed, onMounted, ref } from 'vue';
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, InvitableRoleName } from '@/Interface'; import type { IFormInputs, IInviteResponse, IUser, InvitableRoleName } from '@/Interface';
@ -12,64 +11,40 @@ import {
} from '@/constants'; } from '@/constants';
import { useUsersStore } from '@/stores/users.store'; import { useUsersStore } from '@/stores/users.store';
import { useSettingsStore } from '@/stores/settings.store'; import { useSettingsStore } from '@/stores/settings.store';
import { useUIStore } from '@/stores/ui.store';
import { createFormEventBus, createEventBus } from 'n8n-design-system/utils'; import { createFormEventBus, createEventBus } from 'n8n-design-system/utils';
import { useClipboard } from '@/composables/useClipboard'; import { useClipboard } from '@/composables/useClipboard';
import { useI18n } from '@/composables/useI18n';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper'; import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
const NAME_EMAIL_FORMAT_REGEX = /^.* <(.*)>$/; const NAME_EMAIL_FORMAT_REGEX = /^.* <(.*)>$/;
function getEmail(email: string): string { const usersStore = useUsersStore();
let parsed = email.trim(); const settingsStore = useSettingsStore();
if (NAME_EMAIL_FORMAT_REGEX.test(parsed)) {
const matches = parsed.match(NAME_EMAIL_FORMAT_REGEX);
if (matches && matches.length === 2) {
parsed = matches[1];
}
}
return parsed;
}
export default defineComponent({
name: 'InviteUsersModal',
components: { Modal },
props: {
modalName: {
type: String,
},
},
setup() {
const clipboard = useClipboard(); const clipboard = useClipboard();
const { showMessage, showError } = useToast();
const i18n = useI18n();
const { goToUpgrade } = usePageRedirectionHelper();
return { const formBus = createFormEventBus();
clipboard, const modalBus = createEventBus();
...useToast(), const config = ref<IFormInputs | null>();
...usePageRedirectionHelper(), const emails = ref('');
}; const role = ref<InvitableRoleName>(ROLE.Member);
}, const showInviteUrls = ref<IInviteResponse[] | null>(null);
data() { const loading = ref(false);
return {
config: null as IFormInputs | null, onMounted(() => {
formBus: createFormEventBus(), config.value = [
modalBus: createEventBus(),
emails: '',
role: ROLE.Member as InvitableRoleName,
showInviteUrls: null as IInviteResponse[] | null,
loading: false,
INVITE_USER_MODAL_KEY,
};
},
mounted() {
this.config = [
{ {
name: 'emails', name: 'emails',
properties: { properties: {
label: this.$locale.baseText('settings.users.newEmailsToInvite'), label: i18n.baseText('settings.users.newEmailsToInvite'),
required: true, required: true,
validationRules: [{ name: 'VALID_EMAILS' }], validationRules: [{ name: 'VALID_EMAILS' }],
validators: { validators: {
VALID_EMAILS: { VALID_EMAILS: {
validate: this.validateEmails, validate: validateEmails,
}, },
}, },
placeholder: 'name1@email.com, name2@email.com, ...', placeholder: 'name1@email.com, name2@email.com, ...',
@ -81,62 +56,60 @@ export default defineComponent({
name: 'role', name: 'role',
initialValue: ROLE.Member, initialValue: ROLE.Member,
properties: { properties: {
label: this.$locale.baseText('auth.role'), label: i18n.baseText('auth.role'),
required: true, required: true,
type: 'select', type: 'select',
options: [ options: [
{ {
value: ROLE.Member, value: ROLE.Member,
label: this.$locale.baseText('auth.roles.member'), label: i18n.baseText('auth.roles.member'),
}, },
{ {
value: ROLE.Admin, value: ROLE.Admin,
label: this.$locale.baseText('auth.roles.admin'), label: i18n.baseText('auth.roles.admin'),
disabled: !this.isAdvancedPermissionsEnabled, disabled: !isAdvancedPermissionsEnabled.value,
}, },
], ],
capitalize: true, capitalize: true,
}, },
}, },
]; ];
}, });
computed: {
...mapStores(useUsersStore, useSettingsStore, useUIStore), const emailsCount = computed((): number => {
emailsCount(): number { return emails.value.split(',').filter((email: string) => !!email.trim()).length;
return this.emails.split(',').filter((email: string) => !!email.trim()).length; });
},
buttonLabel(): string { const buttonLabel = computed((): string => {
if (this.emailsCount > 1) { if (emailsCount.value > 1) {
return this.$locale.baseText( return i18n.baseText(
`settings.users.inviteXUser${this.settingsStore.isSmtpSetup ? '' : '.inviteUrl'}`, `settings.users.inviteXUser${settingsStore.isSmtpSetup ? '' : '.inviteUrl'}`,
{ {
interpolate: { count: this.emailsCount.toString() }, interpolate: { count: emailsCount.value.toString() },
}, },
); );
} }
return this.$locale.baseText( return i18n.baseText(`settings.users.inviteUser${settingsStore.isSmtpSetup ? '' : '.inviteUrl'}`);
`settings.users.inviteUser${this.settingsStore.isSmtpSetup ? '' : '.inviteUrl'}`, });
);
}, const enabledButton = computed((): boolean => {
enabledButton(): boolean { return emailsCount.value >= 1;
return this.emailsCount >= 1; });
},
invitedUsers(): IUser[] { const invitedUsers = computed((): IUser[] => {
return this.showInviteUrls return showInviteUrls.value
? this.usersStore.allUsers.filter((user) => ? usersStore.allUsers.filter((user) =>
this.showInviteUrls!.find((invite) => invite.user.id === user.id), showInviteUrls.value?.find((invite) => invite.user.id === user.id),
) )
: []; : [];
}, });
isAdvancedPermissionsEnabled(): boolean {
return this.settingsStore.isEnterpriseFeatureEnabled[ const isAdvancedPermissionsEnabled = computed((): boolean => {
EnterpriseEditionFeature.AdvancedPermissions return settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.AdvancedPermissions];
]; });
},
}, const validateEmails = (value: string | number | boolean | null | undefined) => {
methods: {
validateEmails(value: string | number | boolean | null | undefined) {
if (typeof value !== 'string') { if (typeof value !== 'string') {
return false; return false;
} }
@ -155,29 +128,31 @@ export default defineComponent({
} }
return false; return false;
}, };
onInput(e: { name: string; value: InvitableRoleName }) {
function onInput(e: { name: string; value: InvitableRoleName }) {
if (e.name === 'emails') { if (e.name === 'emails') {
this.emails = e.value; emails.value = e.value;
} }
if (e.name === 'role') { if (e.name === 'role') {
this.role = e.value; role.value = e.value;
}
} }
},
async onSubmit() {
try {
this.loading = true;
const emails = this.emails async function onSubmit() {
try {
loading.value = true;
const emailList = emails.value
.split(',') .split(',')
.map((email) => ({ email: getEmail(email), role: this.role })) .map((email) => ({ email: getEmail(email), role: role.value }))
.filter((invite) => !!invite.email); .filter((invite) => !!invite.email);
if (emails.length === 0) { if (emailList.length === 0) {
throw new Error(this.$locale.baseText('settings.users.noUsersToInvite')); throw new Error(i18n.baseText('settings.users.noUsersToInvite'));
} }
const invited = await this.usersStore.inviteUsers(emails); const invited = await usersStore.inviteUsers(emailList);
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,
@ -187,14 +162,14 @@ export default defineComponent({
); );
if (successfulEmailInvites.length) { if (successfulEmailInvites.length) {
this.showMessage({ showMessage({
type: 'success', type: 'success',
title: this.$locale.baseText( title: i18n.baseText(
successfulEmailInvites.length > 1 successfulEmailInvites.length > 1
? 'settings.users.usersInvited' ? 'settings.users.usersInvited'
: 'settings.users.userInvited', : 'settings.users.userInvited',
), ),
message: this.$locale.baseText('settings.users.emailInvitesSent', { message: i18n.baseText('settings.users.emailInvitesSent', {
interpolate: { interpolate: {
emails: successfulEmailInvites.map(({ user }) => user.email).join(', '), emails: successfulEmailInvites.map(({ user }) => user.email).join(', '),
}, },
@ -204,17 +179,17 @@ export default defineComponent({
if (successfulUrlInvites.length) { if (successfulUrlInvites.length) {
if (successfulUrlInvites.length === 1) { if (successfulUrlInvites.length === 1) {
void this.clipboard.copy(successfulUrlInvites[0].user.inviteAcceptUrl); void clipboard.copy(successfulUrlInvites[0].user.inviteAcceptUrl);
} }
this.showMessage({ showMessage({
type: 'success', type: 'success',
title: this.$locale.baseText( title: i18n.baseText(
successfulUrlInvites.length > 1 successfulUrlInvites.length > 1
? 'settings.users.multipleInviteUrlsCreated' ? 'settings.users.multipleInviteUrlsCreated'
: 'settings.users.inviteUrlCreated', : 'settings.users.inviteUrlCreated',
), ),
message: this.$locale.baseText( message: i18n.baseText(
successfulUrlInvites.length > 1 successfulUrlInvites.length > 1
? 'settings.users.multipleInviteUrlsCreated.message' ? 'settings.users.multipleInviteUrlsCreated.message'
: 'settings.users.inviteUrlCreated.message', : 'settings.users.inviteUrlCreated.message',
@ -229,10 +204,10 @@ export default defineComponent({
if (erroredInvites.length) { if (erroredInvites.length) {
setTimeout(() => { setTimeout(() => {
this.showMessage({ showMessage({
type: 'error', type: 'error',
title: this.$locale.baseText('settings.users.usersEmailedError'), title: i18n.baseText('settings.users.usersEmailedError'),
message: this.$locale.baseText('settings.users.emailInvitesSentError', { message: i18n.baseText('settings.users.emailInvitesSentError', {
interpolate: { emails: erroredInvites.map(({ error }) => error).join(', ') }, interpolate: { emails: erroredInvites.map(({ error }) => error).join(', ') },
}), }),
}); });
@ -240,24 +215,25 @@ export default defineComponent({
} }
if (successfulUrlInvites.length > 1) { if (successfulUrlInvites.length > 1) {
this.showInviteUrls = successfulUrlInvites; showInviteUrls.value = successfulUrlInvites;
} else { } else {
this.modalBus.emit('close'); modalBus.emit('close');
} }
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.users.usersInvitedError')); showError(error, i18n.baseText('settings.users.usersInvitedError'));
} }
this.loading = false; loading.value = false;
}, }
showCopyInviteLinkToast(successfulUrlInvites: IInviteResponse[]) {
this.showMessage({ function showCopyInviteLinkToast(successfulUrlInvites: IInviteResponse[]) {
showMessage({
type: 'success', type: 'success',
title: this.$locale.baseText( title: i18n.baseText(
successfulUrlInvites.length > 1 successfulUrlInvites.length > 1
? 'settings.users.multipleInviteUrlsCreated' ? 'settings.users.multipleInviteUrlsCreated'
: 'settings.users.inviteUrlCreated', : 'settings.users.inviteUrlCreated',
), ),
message: this.$locale.baseText( message: i18n.baseText(
successfulUrlInvites.length > 1 successfulUrlInvites.length > 1
? 'settings.users.multipleInviteUrlsCreated.message' ? 'settings.users.multipleInviteUrlsCreated.message'
: 'settings.users.inviteUrlCreated.message', : 'settings.users.inviteUrlCreated.message',
@ -268,28 +244,40 @@ export default defineComponent({
}, },
), ),
}); });
},
onSubmitClick() {
this.formBus.emit('submit');
},
onCopyInviteLink(user: IUser) {
if (user.inviteAcceptUrl && this.showInviteUrls) {
void this.clipboard.copy(user.inviteAcceptUrl);
this.showCopyInviteLinkToast([]);
} }
},
goToUpgradeAdvancedPermissions() { function onSubmitClick() {
void this.goToUpgrade('advanced-permissions', 'upgrade-advanced-permissions'); formBus.emit('submit');
}, }
},
}); function onCopyInviteLink(user: IUser) {
if (user.inviteAcceptUrl && showInviteUrls.value) {
void clipboard.copy(user.inviteAcceptUrl);
showCopyInviteLinkToast([]);
}
}
function goToUpgradeAdvancedPermissions() {
void goToUpgrade('advanced-permissions', 'upgrade-advanced-permissions');
}
function getEmail(email: string): string {
let parsed = email.trim();
if (NAME_EMAIL_FORMAT_REGEX.test(parsed)) {
const matches = parsed.match(NAME_EMAIL_FORMAT_REGEX);
if (matches && matches.length === 2) {
parsed = matches[1];
}
}
return parsed;
}
</script> </script>
<template> <template>
<Modal <Modal
:name="INVITE_USER_MODAL_KEY" :name="INVITE_USER_MODAL_KEY"
:title=" :title="
$locale.baseText( i18n.baseText(
showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers', showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers',
) )
" "
@ -303,7 +291,7 @@ export default defineComponent({
<i18n-t keypath="settings.users.advancedPermissions.warning"> <i18n-t keypath="settings.users.advancedPermissions.warning">
<template #link> <template #link>
<n8n-link size="small" @click="goToUpgradeAdvancedPermissions"> <n8n-link size="small" @click="goToUpgradeAdvancedPermissions">
{{ $locale.baseText('settings.users.advancedPermissions.warning.link') }} {{ i18n.baseText('settings.users.advancedPermissions.warning.link') }}
</n8n-link> </n8n-link>
</template> </template>
</i18n-t> </i18n-t>
@ -313,7 +301,7 @@ export default defineComponent({
<template #actions="{ user }"> <template #actions="{ user }">
<n8n-tooltip> <n8n-tooltip>
<template #content> <template #content>
{{ $locale.baseText('settings.users.inviteLink.copy') }} {{ i18n.baseText('settings.users.inviteLink.copy') }}
</template> </template>
<n8n-icon-button <n8n-icon-button
icon="link" icon="link"

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

@ -122,7 +122,7 @@ const badge = computed(() => {
:disabled="disabled" :disabled="disabled"
:size="size" :size="size"
:circle="circle" :circle="circle"
:node-type-name="nodeName ?? nodeType?.displayName ?? ''" :node-type-name="nodeName ? nodeName : nodeType?.displayName"
:show-tooltip="showTooltip" :show-tooltip="showTooltip"
:tooltip-position="tooltipPosition" :tooltip-position="tooltipPosition"
:badge="badge" :badge="badge"

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

@ -35,7 +35,7 @@ type Props = {
isReadOnly?: boolean; isReadOnly?: boolean;
linkedRuns?: boolean; linkedRuns?: boolean;
canLinkRuns?: boolean; canLinkRuns?: boolean;
pushRef?: string; pushRef: string;
blockUI?: boolean; blockUI?: boolean;
isProductionExecutionPreview?: boolean; isProductionExecutionPreview?: boolean;
isPaneActive?: boolean; isPaneActive?: boolean;

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

@ -135,6 +135,7 @@ export default defineComponent({
}, },
pushRef: { pushRef: {
type: String, type: String,
required: true,
}, },
paneType: { paneType: {
type: String as PropType<NodePanelType>, type: String as PropType<NodePanelType>,

10
packages/editor-ui/src/components/RunDataJson.vue
View file

@ -23,15 +23,15 @@ const LazyRunDataJsonActions = defineAsyncComponent(
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
editMode: { enabled?: boolean; value?: string }; editMode: { enabled?: boolean; value?: string };
pushRef?: string; pushRef: string;
paneType?: string; paneType: string;
node: INodeUi; node: INodeUi;
inputData: INodeExecutionData[]; inputData: INodeExecutionData[];
mappingEnabled?: boolean; mappingEnabled?: boolean;
distanceFromActive: number; distanceFromActive: number;
runIndex?: number; runIndex: number | undefined;
totalRuns?: number; totalRuns: number | undefined;
search?: string; search: string | undefined;
}>(), }>(),
{ {
editMode: () => ({}), editMode: () => ({}),

179
packages/editor-ui/src/components/RunDataJsonActions.vue
View file

@ -1,7 +1,4 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { mapStores, storeToRefs } from 'pinia';
import jp from 'jsonpath'; import jp from 'jsonpath';
import type { INodeUi } from '@/Interface'; import type { INodeUi } from '@/Interface';
import type { IDataObject } from 'n8n-workflow'; import type { IDataObject } from 'n8n-workflow';
@ -14,92 +11,67 @@ import { useToast } from '@/composables/useToast';
import { useI18n } from '@/composables/useI18n'; import { useI18n } from '@/composables/useI18n';
import { nonExistingJsonPath } from '@/constants'; import { nonExistingJsonPath } from '@/constants';
import { useClipboard } from '@/composables/useClipboard'; import { useClipboard } from '@/composables/useClipboard';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useSourceControlStore } from '@/stores/sourceControl.store';
import { usePinnedData } from '@/composables/usePinnedData'; import { usePinnedData } from '@/composables/usePinnedData';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useTelemetry } from '@/composables/useTelemetry';
type JsonPathData = { type JsonPathData = {
path: string; path: string;
startPath: string; startPath: string;
}; };
export default defineComponent({ const props = withDefaults(
name: 'RunDataJsonActions', defineProps<{
props: { node: INodeUi;
node: { paneType: string;
type: Object as PropType<INodeUi>, pushRef: string;
required: true, displayMode: string;
distanceFromActive: number;
selectedJsonPath: string;
jsonData: IDataObject[];
currentOutputIndex?: number;
runIndex?: number;
}>(),
{
selectedJsonPath: nonExistingJsonPath,
}, },
paneType: { );
type: String,
},
pushRef: {
type: String,
},
currentOutputIndex: {
type: Number,
},
runIndex: {
type: Number,
},
displayMode: {
type: String,
},
distanceFromActive: {
type: Number,
},
selectedJsonPath: {
type: String,
default: nonExistingJsonPath,
},
jsonData: {
type: Array as PropType<IDataObject[]>,
required: true,
},
},
setup() {
const ndvStore = useNDVStore(); const ndvStore = useNDVStore();
const workflowsStore = useWorkflowsStore();
const i18n = useI18n(); const i18n = useI18n();
const nodeHelpers = useNodeHelpers(); const nodeHelpers = useNodeHelpers();
const clipboard = useClipboard(); const clipboard = useClipboard();
const { activeNode } = storeToRefs(ndvStore); const { activeNode } = ndvStore;
const pinnedData = usePinnedData(activeNode); const pinnedData = usePinnedData(activeNode);
const { showToast } = useToast();
const telemetry = useTelemetry();
return { const route = useRoute();
i18n,
nodeHelpers, const isReadOnlyRoute = computed(() => {
clipboard, return route?.meta?.readOnlyCanvas === true;
pinnedData, });
...useToast(),
}; const noSelection = computed(() => {
}, return props.selectedJsonPath === nonExistingJsonPath;
computed: { });
...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore, useSourceControlStore), const normalisedJsonPath = computed((): string => {
isReadOnlyRoute() { return noSelection.value ? '[""]' : props.selectedJsonPath;
return this.$route?.meta?.readOnlyCanvas === true; });
},
activeNode(): INodeUi | null { function getJsonValue(): string {
return this.ndvStore.activeNode; let selectedValue = jp.query(props.jsonData, `$${normalisedJsonPath.value}`)[0];
}, if (noSelection.value) {
noSelection() {
return this.selectedJsonPath === nonExistingJsonPath;
},
normalisedJsonPath(): string {
return this.noSelection ? '[""]' : this.selectedJsonPath;
},
},
methods: {
getJsonValue(): string {
let selectedValue = jp.query(this.jsonData, `$${this.normalisedJsonPath}`)[0];
if (this.noSelection) {
const inExecutionsFrame = const inExecutionsFrame =
window !== window.parent && window.parent.location.pathname.includes('/executions'); window !== window.parent && window.parent.location.pathname.includes('/executions');
if (this.pinnedData.hasData.value && !inExecutionsFrame) { if (pinnedData.hasData.value && !inExecutionsFrame) {
selectedValue = clearJsonKey(this.pinnedData.data.value as object); selectedValue = clearJsonKey(pinnedData.data.value as object);
} else { } else {
selectedValue = executionDataToJson( selectedValue = executionDataToJson(
this.nodeHelpers.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex), nodeHelpers.getNodeInputData(props.node, props.runIndex, props.currentOutputIndex),
); );
} }
} }
@ -112,37 +84,40 @@ export default defineComponent({
} }
return value; return value;
}, }
getJsonItemPath(): JsonPathData {
const newPath = convertPath(this.normalisedJsonPath); function getJsonItemPath(): JsonPathData {
const newPath = convertPath(normalisedJsonPath.value);
let startPath = ''; let startPath = '';
let path = ''; let path = '';
const pathParts = newPath.split(']'); const pathParts = newPath.split(']');
const index = pathParts[0].slice(1); const index = pathParts[0].slice(1);
path = pathParts.slice(1).join(']'); path = pathParts.slice(1).join(']');
startPath = `$item(${index}).$node["${this.node.name}"].json`; startPath = `$item(${index}).$node["${props.node.name}"].json`;
return { path, startPath }; return { path, startPath };
}, }
getJsonParameterPath(): JsonPathData {
const newPath = convertPath(this.normalisedJsonPath);
const path = newPath.split(']').slice(1).join(']');
let startPath = `$node["${this.node.name}"].json`;
if (this.distanceFromActive === 1) { function getJsonParameterPath(): JsonPathData {
const newPath = convertPath(normalisedJsonPath.value);
const path = newPath.split(']').slice(1).join(']');
let startPath = `$node["${props.node.name}"].json`;
if (props.distanceFromActive === 1) {
startPath = '$json'; startPath = '$json';
} }
return { path, startPath }; return { path, startPath };
}, }
handleCopyClick(commandData: { command: string }) {
function handleCopyClick(commandData: { command: string }) {
let value: string; let value: string;
if (commandData.command === 'value') { if (commandData.command === 'value') {
value = this.getJsonValue(); value = getJsonValue();
this.showToast({ showToast({
title: this.i18n.baseText('runData.copyValue.toast'), title: i18n.baseText('runData.copyValue.toast'),
message: '', message: '',
type: 'success', type: 'success',
duration: 2000, duration: 2000,
@ -151,23 +126,23 @@ export default defineComponent({
let startPath = ''; let startPath = '';
let path = ''; let path = '';
if (commandData.command === 'itemPath') { if (commandData.command === 'itemPath') {
const jsonItemPath = this.getJsonItemPath(); const jsonItemPath = getJsonItemPath();
startPath = jsonItemPath.startPath; startPath = jsonItemPath.startPath;
path = jsonItemPath.path; path = jsonItemPath.path;
this.showToast({ showToast({
title: this.i18n.baseText('runData.copyItemPath.toast'), title: i18n.baseText('runData.copyItemPath.toast'),
message: '', message: '',
type: 'success', type: 'success',
duration: 2000, duration: 2000,
}); });
} else if (commandData.command === 'parameterPath') { } else if (commandData.command === 'parameterPath') {
const jsonParameterPath = this.getJsonParameterPath(); const jsonParameterPath = getJsonParameterPath();
startPath = jsonParameterPath.startPath; startPath = jsonParameterPath.startPath;
path = jsonParameterPath.path; path = jsonParameterPath.path;
this.showToast({ showToast({
title: this.i18n.baseText('runData.copyParameterPath.toast'), title: i18n.baseText('runData.copyParameterPath.toast'),
message: '', message: '',
type: 'success', type: 'success',
duration: 2000, duration: 2000,
@ -185,21 +160,19 @@ export default defineComponent({
parameterPath: 'parameter_path', parameterPath: 'parameter_path',
}[commandData.command]; }[commandData.command];
this.$telemetry.track('User copied ndv data', { telemetry.track('User copied ndv data', {
node_type: this.activeNode?.type, node_type: activeNode?.type,
push_ref: this.pushRef, push_ref: props.pushRef,
run_index: this.runIndex, run_index: props.runIndex,
view: 'json', view: 'json',
copy_type: copyType, copy_type: copyType,
workflow_id: this.workflowsStore.workflowId, workflow_id: workflowsStore.workflowId,
pane: this.paneType, pane: props.paneType,
in_execution_log: this.isReadOnlyRoute, in_execution_log: isReadOnlyRoute.value,
}); });
void this.clipboard.copy(value); void clipboard.copy(value);
}, }
},
});
</script> </script>
<template> <template>

183
packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
View file

@ -1,120 +1,123 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed, onBeforeMount, onMounted, ref } from 'vue';
import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants'; import { MODAL_CONFIRM } from '@/constants';
import { useMessage } from '@/composables/useMessage'; import { useMessage } from '@/composables/useMessage';
import { useLogStreamingStore } from '@/stores/logStreaming.store'; import { useLogStreamingStore } from '@/stores/logStreaming.store';
import type { PropType } from 'vue';
import { mapStores } from 'pinia';
import type { MessageEventBusDestinationOptions } from 'n8n-workflow'; import type { MessageEventBusDestinationOptions } from 'n8n-workflow';
import { deepCopy, defaultMessageEventBusDestinationOptions } from 'n8n-workflow'; import { deepCopy, defaultMessageEventBusDestinationOptions } from 'n8n-workflow';
import type { BaseTextKey } from '@/plugins/i18n'; import type { BaseTextKey } from '@/plugins/i18n';
import type { EventBus } from 'n8n-design-system'; import type { EventBus } from 'n8n-design-system';
import { useI18n } from '@/composables/useI18n';
import { assert } from '@/utils/assert';
export const DESTINATION_LIST_ITEM_ACTIONS = { const DESTINATION_LIST_ITEM_ACTIONS = {
OPEN: 'open', OPEN: 'open',
DELETE: 'delete', DELETE: 'delete',
}; };
export default defineComponent({ const { confirm } = useMessage();
components: {}, const i18n = useI18n();
setup() { const logStreamingStore = useLogStreamingStore();
return {
...useMessage(), const nodeParameters = ref<MessageEventBusDestinationOptions>({});
}; const cardActions = ref<HTMLDivElement | null>(null);
},
data() { const props = withDefaults(
return { defineProps<{
EnterpriseEditionFeature, eventBus: EventBus;
nodeParameters: {} as MessageEventBusDestinationOptions, destination: MessageEventBusDestinationOptions;
}; readonly: boolean;
}, }>(),
props: {
eventBus: {
type: Object as PropType<EventBus>,
},
destination: {
type: Object,
required: true,
default: deepCopy(defaultMessageEventBusDestinationOptions),
},
readonly: Boolean,
},
mounted() {
this.nodeParameters = Object.assign(
deepCopy(defaultMessageEventBusDestinationOptions),
this.destination,
);
this.eventBus?.on('destinationWasSaved', this.onDestinationWasSaved);
},
beforeUnmount() {
this.eventBus?.off('destinationWasSaved', this.onDestinationWasSaved);
},
computed: {
...mapStores(useLogStreamingStore),
actions(): Array<{ label: string; value: string }> {
const actions = [
{ {
label: this.$locale.baseText('workflows.item.open'), destination: () => deepCopy(defaultMessageEventBusDestinationOptions),
},
);
const emit = defineEmits<{
edit: [id: string | undefined];
remove: [id: string | undefined];
}>();
onMounted(() => {
nodeParameters.value = Object.assign(
deepCopy(defaultMessageEventBusDestinationOptions),
props.destination,
);
props.eventBus?.on('destinationWasSaved', onDestinationWasSaved);
});
onBeforeMount(() => {
props.eventBus?.off('destinationWasSaved', onDestinationWasSaved);
});
const actions = computed((): Array<{ label: string; value: string }> => {
const actionList = [
{
label: i18n.baseText('workflows.item.open'),
value: DESTINATION_LIST_ITEM_ACTIONS.OPEN, value: DESTINATION_LIST_ITEM_ACTIONS.OPEN,
}, },
]; ];
if (!this.readonly) { if (!props.readonly) {
actions.push({ actionList.push({
label: this.$locale.baseText('workflows.item.delete'), label: i18n.baseText('workflows.item.delete'),
value: DESTINATION_LIST_ITEM_ACTIONS.DELETE, value: DESTINATION_LIST_ITEM_ACTIONS.DELETE,
}); });
} }
return actions; return actionList;
}, });
typeLabelName(): BaseTextKey {
return `settings.log-streaming.${this.destination.__type}` as BaseTextKey; const typeLabelName = computed((): BaseTextKey => {
}, return `settings.log-streaming.${props.destination.__type}` as BaseTextKey;
}, });
methods: {
onDestinationWasSaved() { function onDestinationWasSaved() {
const updatedDestination = this.logStreamingStore.getDestination(this.destination.id); assert(props.destination.id);
const updatedDestination = logStreamingStore.getDestination(props.destination.id);
if (updatedDestination) { if (updatedDestination) {
this.nodeParameters = Object.assign( nodeParameters.value = Object.assign(
deepCopy(defaultMessageEventBusDestinationOptions), deepCopy(defaultMessageEventBusDestinationOptions),
this.destination, props.destination,
); );
} }
}, }
async onClick(event: Event) {
const cardActions = this.$refs.cardActions as HTMLDivElement | null; async function onClick(event: Event) {
const target = event.target as HTMLDivElement | null; const target = event.target as HTMLDivElement | null;
if ( if (
cardActions === target || cardActions.value === target ||
cardActions?.contains(target) || cardActions.value?.contains(target) ||
target?.contains(cardActions) target?.contains(cardActions.value)
) { ) {
return; return;
} }
this.$emit('edit', this.destination.id); emit('edit', props.destination.id);
}, }
onEnabledSwitched(state: boolean) {
this.nodeParameters.enabled = state; function onEnabledSwitched(state: boolean) {
void this.saveDestination(); nodeParameters.value.enabled = state;
}, void saveDestination();
async saveDestination() { }
await this.logStreamingStore.saveDestination(this.nodeParameters);
}, async function saveDestination() {
async onAction(action: string) { await logStreamingStore.saveDestination(nodeParameters.value);
}
async function onAction(action: string) {
if (action === DESTINATION_LIST_ITEM_ACTIONS.OPEN) { if (action === DESTINATION_LIST_ITEM_ACTIONS.OPEN) {
this.$emit('edit', this.destination.id); emit('edit', props.destination.id);
} else if (action === DESTINATION_LIST_ITEM_ACTIONS.DELETE) { } else if (action === DESTINATION_LIST_ITEM_ACTIONS.DELETE) {
const deleteConfirmed = await this.confirm( const deleteConfirmed = await confirm(
this.$locale.baseText('settings.log-streaming.destinationDelete.message', { i18n.baseText('settings.log-streaming.destinationDelete.message', {
interpolate: { destinationName: this.destination.label }, interpolate: { destinationName: props.destination.label ?? '' },
}), }),
this.$locale.baseText('settings.log-streaming.destinationDelete.headline'), i18n.baseText('settings.log-streaming.destinationDelete.headline'),
{ {
type: 'warning', type: 'warning',
confirmButtonText: this.$locale.baseText( confirmButtonText: i18n.baseText(
'settings.log-streaming.destinationDelete.confirmButtonText', 'settings.log-streaming.destinationDelete.confirmButtonText',
), ),
cancelButtonText: this.$locale.baseText( cancelButtonText: i18n.baseText(
'settings.log-streaming.destinationDelete.cancelButtonText', 'settings.log-streaming.destinationDelete.cancelButtonText',
), ),
}, },
@ -124,11 +127,9 @@ export default defineComponent({
return; return;
} }
this.$emit('remove', this.destination.id); emit('remove', props.destination.id);
}
} }
},
},
});
</script> </script>
<template> <template>
@ -140,7 +141,7 @@ export default defineComponent({
</n8n-heading> </n8n-heading>
<div :class="$style.cardDescription"> <div :class="$style.cardDescription">
<n8n-text color="text-light" size="small"> <n8n-text color="text-light" size="small">
<span>{{ $locale.baseText(typeLabelName) }}</span> <span>{{ i18n.baseText(typeLabelName) }}</span>
</n8n-text> </n8n-text>
</div> </div>
</div> </div>
@ -149,10 +150,10 @@ export default defineComponent({
<div ref="cardActions" :class="$style.cardActions"> <div ref="cardActions" :class="$style.cardActions">
<div :class="$style.activeStatusText" data-test-id="destination-activator-status"> <div :class="$style.activeStatusText" data-test-id="destination-activator-status">
<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold> <n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
{{ $locale.baseText('workflowActivator.active') }} {{ i18n.baseText('workflowActivator.active') }}
</n8n-text> </n8n-text>
<n8n-text v-else color="text-base" size="small" bold> <n8n-text v-else color="text-base" size="small" bold>
{{ $locale.baseText('workflowActivator.inactive') }} {{ i18n.baseText('workflowActivator.inactive') }}
</n8n-text> </n8n-text>
</div> </div>
@ -162,8 +163,8 @@ export default defineComponent({
:model-value="nodeParameters.enabled" :model-value="nodeParameters.enabled"
:title=" :title="
nodeParameters.enabled nodeParameters.enabled
? $locale.baseText('workflowActivator.deactivateWorkflow') ? i18n.baseText('workflowActivator.deactivateWorkflow')
: $locale.baseText('workflowActivator.activateWorkflow') : i18n.baseText('workflowActivator.activateWorkflow')
" "
active-color="#13ce66" active-color="#13ce66"
inactive-color="#8899AA" inactive-color="#8899AA"

96
packages/editor-ui/src/components/TemplateCard.vue
View file

@ -1,63 +1,45 @@
<script lang="ts"> <script lang="ts" setup>
import { type PropType, defineComponent } from 'vue';
import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
import { abbreviateNumber } from '@/utils/typesUtils'; import { abbreviateNumber } from '@/utils/typesUtils';
import NodeList from './NodeList.vue'; import NodeList from './NodeList.vue';
import TimeAgo from '@/components/TimeAgo.vue'; import TimeAgo from '@/components/TimeAgo.vue';
import type { ITemplatesWorkflow } from '@/Interface'; import type { ITemplatesWorkflow } from '@/Interface';
import { useI18n } from '@/composables/useI18n';
import type { BaseTextKey } from '@/plugins/i18n';
export default defineComponent({ const i18n = useI18n();
name: 'TemplateCard',
components: { const nodesToBeShown = 5;
TimeAgo,
NodeList, withDefaults(
defineProps<{
workflow?: ITemplatesWorkflow;
lastItem?: boolean;
firstItem?: boolean;
useWorkflowButton?: boolean;
loading?: boolean;
simpleView?: boolean;
}>(),
{
lastItem: false,
firstItem: false,
useWorkflowButton: false,
loading: false,
simpleView: false,
}, },
props: { );
workflow: {
type: Object as PropType<ITemplatesWorkflow>, const emit = defineEmits<{
}, useWorkflow: [e: MouseEvent];
lastItem: { click: [e: MouseEvent];
type: Boolean, }>();
default: false,
}, function onUseWorkflowClick(e: MouseEvent) {
firstItem: { emit('useWorkflow', e);
type: Boolean, }
default: false,
}, function onCardClick(e: MouseEvent) {
useWorkflowButton: { emit('click', e);
type: Boolean,
},
loading: {
type: Boolean,
},
simpleView: {
type: Boolean,
default: false,
},
},
data() {
return {
nodesToBeShown: 5,
};
},
methods: {
filterTemplateNodes,
abbreviateNumber,
countNodesToBeSliced(nodes: []): number {
if (nodes.length > this.nodesToBeShown) {
return this.nodesToBeShown - 1;
} else {
return this.nodesToBeShown;
} }
},
onUseWorkflowClick(e: MouseEvent) {
this.$emit('useWorkflow', e);
},
onCardClick(e: MouseEvent) {
this.$emit('click', e);
},
},
});
</script> </script>
<template> <template>
@ -88,8 +70,12 @@ export default defineComponent({
<TimeAgo :date="workflow.createdAt" /> <TimeAgo :date="workflow.createdAt" />
</n8n-text> </n8n-text>
<div v-if="workflow.user" :class="$style.line" v-text="'|'" /> <div v-if="workflow.user" :class="$style.line" v-text="'|'" />
<n8n-text v-if="workflow.user" size="small" color="text-light" <n8n-text v-if="workflow.user" size="small" color="text-light">
>By {{ workflow.user.username }}</n8n-text {{
i18n.baseText('template.byAuthor' as BaseTextKey, {
interpolate: { name: workflow.user.username },
})
}}</n8n-text
> >
</div> </div>
</div> </div>

171
packages/editor-ui/src/components/TemplateFilters.vue
View file

@ -1,101 +1,104 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed, ref, watch } from 'vue';
import type { ITemplatesCategory } from '@/Interface'; import type { ITemplatesCategory } from '@/Interface';
import type { PropType } from 'vue'; import { useI18n } from '@/composables/useI18n';
import { useTemplatesStore } from '@/stores/templates.store';
import { mapStores } from 'pinia';
export default defineComponent({ interface Props {
name: 'TemplateFilters', categories?: ITemplatesCategory[];
props: { sortOnPopulate?: boolean;
categories: { expandLimit?: number;
type: Array as PropType<ITemplatesCategory[]>, loading?: boolean;
default: () => [], selected?: ITemplatesCategory[];
},
sortOnPopulate: {
type: Boolean,
default: false,
},
expandLimit: {
type: Number,
default: 12,
},
loading: {
type: Boolean,
},
selected: {
type: Array as PropType<ITemplatesCategory[]>,
default: () => [],
},
},
emits: ['clearAll', 'select', 'clear'],
data() {
return {
collapsed: true,
sortedCategories: [] as ITemplatesCategory[],
};
},
computed: {
...mapStores(useTemplatesStore),
allSelected(): boolean {
return this.selected.length === 0;
},
},
watch: {
sortOnPopulate: {
handler(value: boolean) {
if (value) {
this.sortCategories();
} }
},
immediate: true, const props = withDefaults(defineProps<Props>(), {
}, categories: () => [],
categories: { sortOnPopulate: false,
handler(categories: ITemplatesCategory[]) { expandLimit: 12,
if (categories.length > 0) { loading: false,
this.sortCategories(); selected: () => [],
}
},
immediate: true,
},
},
methods: {
sortCategories() {
if (!this.sortOnPopulate) {
this.sortedCategories = this.categories;
} else {
const selected = this.selected || [];
const selectedCategories = this.categories.filter((cat) => selected.includes(cat));
const notSelectedCategories = this.categories.filter((cat) => !selected.includes(cat));
this.sortedCategories = selectedCategories.concat(notSelectedCategories);
}
},
collapseAction() {
this.collapsed = false;
},
handleCheckboxChanged(value: boolean, selectedCategory: ITemplatesCategory) {
this.$emit(value ? 'select' : 'clear', selectedCategory);
},
isSelected(category: ITemplatesCategory) {
return this.selected.includes(category);
},
resetCategories() {
this.$emit('clearAll');
},
},
}); });
const emit = defineEmits<{
clearAll: [];
select: [category: ITemplatesCategory];
clear: [category: ITemplatesCategory];
}>();
const i18n = useI18n();
const collapsed = ref(true);
const sortedCategories = ref<ITemplatesCategory[]>([]);
const allSelected = computed((): boolean => {
return props.selected.length === 0;
});
function sortCategories() {
if (!props.sortOnPopulate) {
sortedCategories.value = props.categories;
} else {
const selected = props.selected || [];
const selectedCategories = props.categories.filter((cat) => selected.includes(cat));
const notSelectedCategories = props.categories.filter((cat) => !selected.includes(cat));
sortedCategories.value = selectedCategories.concat(notSelectedCategories);
}
}
function collapseAction() {
collapsed.value = false;
}
function handleCheckboxChanged(value: boolean, selectedCategory: ITemplatesCategory) {
if (value) {
emit('select', selectedCategory);
} else {
emit('clear', selectedCategory);
}
}
function isSelected(category: ITemplatesCategory) {
return props.selected.includes(category);
}
function resetCategories() {
emit('clearAll');
}
watch(
() => props.sortOnPopulate,
(value: boolean) => {
if (value) {
sortCategories();
}
},
{
immediate: true,
},
);
watch(
() => props.categories,
(categories: ITemplatesCategory[]) => {
if (categories.length > 0) {
sortCategories();
}
},
{
immediate: true,
},
);
</script> </script>
<template> <template>
<div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container"> <div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container">
<div :class="$style.title" v-text="$locale.baseText('templates.categoriesHeading')" /> <div :class="$style.title" v-text="i18n.baseText('templates.categoriesHeading')" />
<div v-if="loading" :class="$style.list"> <div v-if="loading" :class="$style.list">
<n8n-loading :loading="loading" :rows="expandLimit" /> <n8n-loading :loading="loading" :rows="expandLimit" />
</div> </div>
<ul v-if="!loading" :class="$style.categories"> <ul v-if="!loading" :class="$style.categories">
<li :class="$style.item" data-test-id="template-filter-all-categories"> <li :class="$style.item" data-test-id="template-filter-all-categories">
<el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()"> <el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()">
{{ $locale.baseText('templates.allCategories') }} {{ i18n.baseText('templates.allCategories') }}
</el-checkbox> </el-checkbox>
</li> </li>
<li <li

42
packages/editor-ui/src/components/TemplatesInfoCard.vue
View file

@ -1,33 +1,23 @@
<script lang="ts"> <script lang="ts" setup>
import { type PropType, defineComponent } from 'vue';
import Card from '@/components/CollectionWorkflowCard.vue'; import Card from '@/components/CollectionWorkflowCard.vue';
import NodeList from '@/components/NodeList.vue'; import NodeList from '@/components/NodeList.vue';
import { useI18n } from '@/composables/useI18n';
import type { ITemplatesCollection } from '@/Interface'; import type { ITemplatesCollection } from '@/Interface';
export default defineComponent({ withDefaults(
name: 'TemplatesInfoCard', defineProps<{
components: { collection: ITemplatesCollection;
Card, loading?: boolean;
NodeList, showItemCount?: boolean;
width: string;
}>(),
{
loading: false,
showItemCount: true,
}, },
props: { );
collection: {
type: Object as PropType<ITemplatesCollection>, const i18n = useI18n();
required: true,
},
loading: {
type: Boolean,
},
showItemCount: {
type: Boolean,
default: true,
},
width: {
type: String,
required: true,
},
},
});
</script> </script>
<template> <template>
@ -36,7 +26,7 @@ export default defineComponent({
<span> <span>
<n8n-text v-show="showItemCount" size="small" color="text-light"> <n8n-text v-show="showItemCount" size="small" color="text-light">
{{ collection.workflows.length }} {{ collection.workflows.length }}
{{ $locale.baseText('templates.workflows') }} {{ i18n.baseText('templates.workflows') }}
</n8n-text> </n8n-text>
</span> </span>
<NodeList :nodes="collection.nodes" :show-more="false" /> <NodeList :nodes="collection.nodes" :show-more="false" />

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

@ -1991,6 +1991,7 @@
"template.details.details": "Details", "template.details.details": "Details",
"template.details.times": "times", "template.details.times": "times",
"template.details.viewed": "Viewed", "template.details.viewed": "Viewed",
"template.byAuthor": "By {name}",
"templates.allCategories": "All Categories", "templates.allCategories": "All Categories",
"templates.categoriesHeading": "Categories", "templates.categoriesHeading": "Categories",
"templates.collection": "Collection", "templates.collection": "Collection",

214
packages/editor-ui/src/views/SettingsApiView.vue
View file

@ -1,142 +1,122 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { computed, onMounted, ref } from 'vue';
import type { ApiKey, IUser } from '@/Interface'; import type { ApiKey } from '@/Interface';
import { useToast } from '@/composables/useToast'; import { useToast } from '@/composables/useToast';
import { useMessage } from '@/composables/useMessage'; import { useMessage } from '@/composables/useMessage';
import { useDocumentTitle } from '@/composables/useDocumentTitle'; import { useDocumentTitle } from '@/composables/useDocumentTitle';
import CopyInput from '@/components/CopyInput.vue'; import CopyInput from '@/components/CopyInput.vue';
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/settings.store'; import { useSettingsStore } from '@/stores/settings.store';
import { useRootStore } from '@/stores/root.store'; import { useRootStore } from '@/stores/root.store';
import { useUIStore } from '@/stores/ui.store';
import { useUsersStore } from '@/stores/users.store';
import { useCloudPlanStore } from '@/stores/cloudPlan.store'; import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { DOCS_DOMAIN, MODAL_CONFIRM } from '@/constants'; import { DOCS_DOMAIN, MODAL_CONFIRM } from '@/constants';
import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper'; import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
export default defineComponent({ const settingsStore = useSettingsStore();
name: 'SettingsApiView', const cloudPlanStore = useCloudPlanStore();
components: { const { baseUrl } = useRootStore();
CopyInput,
},
setup() {
return {
...useToast(),
...useMessage(),
...useUIStore(),
pageRedirectionHelper: usePageRedirectionHelper(),
documentTitle: useDocumentTitle(),
};
},
data() {
return {
loading: false,
mounted: false,
apiKeys: [] as ApiKey[],
swaggerUIEnabled: false,
apiDocsURL: '',
};
},
mounted() {
this.documentTitle.set(this.$locale.baseText('settings.api'));
if (!this.isPublicApiEnabled) return;
void this.getApiKeys(); const { showError, showMessage } = useToast();
const baseUrl = this.rootStore.baseUrl; const { confirm } = useMessage();
const apiPath = this.settingsStore.publicApiPath; const documentTitle = useDocumentTitle();
const latestVersion = this.settingsStore.publicApiLatestVersion; const i18n = useI18n();
this.swaggerUIEnabled = this.settingsStore.isSwaggerUIEnabled; const { goToUpgrade } = usePageRedirectionHelper();
this.apiDocsURL = this.swaggerUIEnabled const telemetry = useTelemetry();
? `${baseUrl}${apiPath}/v${latestVersion}/docs`
const loading = ref(false);
const mounted = ref(false);
const apiKeys = ref<ApiKey[]>([]);
const apiDocsURL = ref('');
const { isPublicApiEnabled, isSwaggerUIEnabled, publicApiPath, publicApiLatestVersion } =
settingsStore;
const isRedactedApiKey = computed((): boolean => {
if (!apiKeys.value) return false;
return apiKeys.value[0].apiKey.includes('*');
});
onMounted(() => {
documentTitle.set(i18n.baseText('settings.api'));
if (!isPublicApiEnabled) return;
void getApiKeys();
apiDocsURL.value = isSwaggerUIEnabled
? `${baseUrl}${publicApiPath}/v${publicApiLatestVersion}/docs`
: `https://${DOCS_DOMAIN}/api/api-reference/`; : `https://${DOCS_DOMAIN}/api/api-reference/`;
}, });
computed: {
...mapStores(useRootStore, useSettingsStore, useUsersStore, useCloudPlanStore, useUIStore), function onUpgrade() {
currentUser(): IUser | null { void goToUpgrade('settings-n8n-api', 'upgrade-api', 'redirect');
return this.usersStore.currentUser; }
},
isTrialing(): boolean { async function showDeleteModal() {
return this.cloudPlanStore.userIsTrialing; const confirmed = await confirm(
}, i18n.baseText('settings.api.delete.description'),
isLoadingCloudPlans(): boolean { i18n.baseText('settings.api.delete.title'),
return this.cloudPlanStore.state.loadingPlan;
},
isPublicApiEnabled(): boolean {
return this.settingsStore.isPublicApiEnabled;
},
isRedactedApiKey(): boolean {
if (!this.apiKeys) return false;
return this.apiKeys[0].apiKey.includes('*');
},
},
methods: {
onUpgrade() {
void this.pageRedirectionHelper.goToUpgrade('settings-n8n-api', 'upgrade-api', 'redirect');
},
async showDeleteModal() {
const confirmed = await this.confirm(
this.$locale.baseText('settings.api.delete.description'),
this.$locale.baseText('settings.api.delete.title'),
{ {
confirmButtonText: this.$locale.baseText('settings.api.delete.button'), confirmButtonText: i18n.baseText('settings.api.delete.button'),
cancelButtonText: this.$locale.baseText('generic.cancel'), cancelButtonText: i18n.baseText('generic.cancel'),
}, },
); );
if (confirmed === MODAL_CONFIRM) { if (confirmed === MODAL_CONFIRM) {
await this.deleteApiKey(); await deleteApiKey();
} }
}, }
async getApiKeys() {
async function getApiKeys() {
try { try {
this.apiKeys = await this.settingsStore.getApiKeys(); apiKeys.value = await settingsStore.getApiKeys();
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.api.view.error')); showError(error, i18n.baseText('settings.api.view.error'));
} finally { } finally {
this.mounted = true; mounted.value = true;
} }
}, }
async createApiKey() {
this.loading = true; async function createApiKey() {
loading.value = true;
try { try {
const newApiKey = await this.settingsStore.createApiKey(); const newApiKey = await settingsStore.createApiKey();
this.apiKeys.push(newApiKey); apiKeys.value.push(newApiKey);
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.api.create.error')); showError(error, i18n.baseText('settings.api.create.error'));
} finally { } finally {
this.loading = false; loading.value = false;
this.$telemetry.track('User clicked create API key button'); telemetry.track('User clicked create API key button');
} }
}, }
async deleteApiKey() {
async function deleteApiKey() {
try { try {
await this.settingsStore.deleteApiKey(this.apiKeys[0].id); await settingsStore.deleteApiKey(apiKeys.value[0].id);
this.showMessage({ showMessage({
title: this.$locale.baseText('settings.api.delete.toast'), title: i18n.baseText('settings.api.delete.toast'),
type: 'success', type: 'success',
}); });
this.apiKeys = []; apiKeys.value = [];
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.api.delete.error')); showError(error, i18n.baseText('settings.api.delete.error'));
} finally { } finally {
this.$telemetry.track('User clicked delete API key button'); telemetry.track('User clicked delete API key button');
}
}
function onCopy() {
telemetry.track('User clicked copy API key button');
} }
},
onCopy() {
this.$telemetry.track('User clicked copy API key button');
},
},
});
</script> </script>
<template> <template>
<div :class="$style.container"> <div :class="$style.container">
<div :class="$style.header"> <div :class="$style.header">
<n8n-heading size="2xlarge"> <n8n-heading size="2xlarge">
{{ $locale.baseText('settings.api') }} {{ i18n.baseText('settings.api') }}
<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }"> <span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }">
({{ $locale.baseText('generic.beta') }}) ({{ i18n.baseText('generic.beta') }})
</span> </span>
</n8n-heading> </n8n-heading>
</div> </div>
@ -149,14 +129,14 @@ export default defineComponent({
<a <a
href="https://docs.n8n.io/api" href="https://docs.n8n.io/api"
target="_blank" target="_blank"
v-text="$locale.baseText('settings.api.view.info.api')" v-text="i18n.baseText('settings.api.view.info.api')"
/> />
</template> </template>
<template #webhookAction> <template #webhookAction>
<a <a
href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/" href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
target="_blank" target="_blank"
v-text="$locale.baseText('settings.api.view.info.webhook')" v-text="i18n.baseText('settings.api.view.info.webhook')"
/> />
</template> </template>
</i18n-t> </i18n-t>
@ -165,7 +145,7 @@ export default defineComponent({
<n8n-card class="mb-4xs" :class="$style.card"> <n8n-card class="mb-4xs" :class="$style.card">
<span :class="$style.delete"> <span :class="$style.delete">
<n8n-link :bold="true" @click="showDeleteModal"> <n8n-link :bold="true" @click="showDeleteModal">
{{ $locale.baseText('generic.delete') }} {{ i18n.baseText('generic.delete') }}
</n8n-link> </n8n-link>
</span> </span>
@ -173,47 +153,43 @@ export default defineComponent({
<CopyInput <CopyInput
:label="apiKeys[0].label" :label="apiKeys[0].label"
:value="apiKeys[0].apiKey" :value="apiKeys[0].apiKey"
:copy-button-text="$locale.baseText('generic.clickToCopy')" :copy-button-text="i18n.baseText('generic.clickToCopy')"
:toast-title="$locale.baseText('settings.api.view.copy.toast')" :toast-title="i18n.baseText('settings.api.view.copy.toast')"
:redact-value="true" :redact-value="true"
:disable-copy="isRedactedApiKey" :disable-copy="isRedactedApiKey"
:hint="!isRedactedApiKey ? $locale.baseText('settings.api.view.copy') : ''" :hint="!isRedactedApiKey ? i18n.baseText('settings.api.view.copy') : ''"
@copy="onCopy" @copy="onCopy"
/> />
</div> </div>
</n8n-card> </n8n-card>
<div :class="$style.hint"> <div :class="$style.hint">
<n8n-text size="small"> <n8n-text size="small">
{{ {{ i18n.baseText(`settings.api.view.${isSwaggerUIEnabled ? 'tryapi' : 'more-details'}`) }}
$locale.baseText(`settings.api.view.${swaggerUIEnabled ? 'tryapi' : 'more-details'}`)
}}
</n8n-text> </n8n-text>
{{ ' ' }} {{ ' ' }}
<n8n-link :to="apiDocsURL" :new-window="true" size="small"> <n8n-link :to="apiDocsURL" :new-window="true" size="small">
{{ {{
$locale.baseText( i18n.baseText(
`settings.api.view.${swaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`, `settings.api.view.${isSwaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`,
) )
}} }}
</n8n-link> </n8n-link>
</div> </div>
</div> </div>
<n8n-action-box <n8n-action-box
v-else-if="!isPublicApiEnabled && isTrialing" v-else-if="!isPublicApiEnabled && cloudPlanStore.userIsTrialing"
data-test-id="public-api-upgrade-cta" data-test-id="public-api-upgrade-cta"
:heading="$locale.baseText('settings.api.trial.upgradePlan.title')" :heading="i18n.baseText('settings.api.trial.upgradePlan.title')"
:description="$locale.baseText('settings.api.trial.upgradePlan.description')" :description="i18n.baseText('settings.api.trial.upgradePlan.description')"
:button-text="$locale.baseText('settings.api.trial.upgradePlan.cta')" :button-text="i18n.baseText('settings.api.trial.upgradePlan.cta')"
@click:button="onUpgrade" @click:button="onUpgrade"
/> />
<n8n-action-box <n8n-action-box
v-else-if="mounted && !isLoadingCloudPlans" v-else-if="mounted && !cloudPlanStore.state.loadingPlan"
:button-text=" :button-text="
$locale.baseText( i18n.baseText(loading ? 'settings.api.create.button.loading' : 'settings.api.create.button')
loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
)
" "
:description="$locale.baseText('settings.api.create.description')" :description="i18n.baseText('settings.api.create.description')"
@click:button="createApiKey" @click:button="createApiKey"
/> />
</div> </div>

235
packages/editor-ui/src/views/SettingsLogStreamingView.vue
View file

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, nextTick } from 'vue'; import { computed, nextTick, onBeforeMount, onMounted } from 'vue';
import { mapStores } from 'pinia';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { useWorkflowsStore } from '@/stores/workflows.store'; import { useWorkflowsStore } from '@/stores/workflows.store';
import { hasPermission } from '@/utils/rbac/permissions'; import { hasPermission } from '@/utils/rbac/permissions';
@ -14,154 +13,158 @@ import { deepCopy, defaultMessageEventBusDestinationOptions } from 'n8n-workflow
import EventDestinationCard from '@/components/SettingsLogStreaming/EventDestinationCard.ee.vue'; import EventDestinationCard from '@/components/SettingsLogStreaming/EventDestinationCard.ee.vue';
import { createEventBus } from 'n8n-design-system/utils'; import { createEventBus } from 'n8n-design-system/utils';
import { useDocumentTitle } from '@/composables/useDocumentTitle'; import { useDocumentTitle } from '@/composables/useDocumentTitle';
import { ref, getCurrentInstance } from 'vue';
import { useI18n } from '@/composables/useI18n';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper'; import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
export default defineComponent({ const environment = process.env.NODE_ENV;
name: 'SettingsLogStreamingView',
components: { const settingsStore = useSettingsStore();
EventDestinationCard, const logStreamingStore = useLogStreamingStore();
}, const workflowsStore = useWorkflowsStore();
props: {}, const uiStore = useUIStore();
data() { const credentialsStore = useCredentialsStore();
return { const documentTitle = useDocumentTitle();
eventBus: createEventBus(), const i18n = useI18n();
destinations: Array<MessageEventBusDestinationOptions>,
disableLicense: false, const pageRedirectHelper = usePageRedirectionHelper();
allDestinations: [] as MessageEventBusDestinationOptions[],
documentTitle: useDocumentTitle(), const eventBus = createEventBus();
pageRedirectionHelper: usePageRedirectionHelper(), const disableLicense = ref(false);
}; const allDestinations = ref<MessageEventBusDestinationOptions[]>([]);
},
async mounted() { const sortedItemKeysByLabel = computed(() => {
this.documentTitle.set(this.$locale.baseText('settings.log-streaming.heading')); const sortedKeys: Array<{ label: string; key: string }> = [];
if (!this.isLicensed) return; for (const [key, value] of Object.entries(logStreamingStore.items)) {
sortedKeys.push({ key, label: value.destination?.label ?? 'Destination' });
}
return sortedKeys.sort((a, b) => a.label.localeCompare(b.label));
});
const isLicensed = computed((): boolean => {
if (disableLicense.value) return false;
return settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.LogStreaming];
});
const canManageLogStreaming = computed((): boolean => {
return hasPermission(['rbac'], { rbac: { scope: 'logStreaming:manage' } });
});
onMounted(async () => {
documentTitle.set(i18n.baseText('settings.log-streaming.heading'));
if (!isLicensed.value) return;
// Prepare credentialsStore so modals can pick up credentials // Prepare credentialsStore so modals can pick up credentials
await this.credentialsStore.fetchCredentialTypes(false); await credentialsStore.fetchCredentialTypes(false);
await this.credentialsStore.fetchAllCredentials(); await credentialsStore.fetchAllCredentials();
this.uiStore.nodeViewInitialized = false; uiStore.nodeViewInitialized = false;
// fetch Destination data from the backend // fetch Destination data from the backend
await this.getDestinationDataFromBackend(); await getDestinationDataFromBackend();
// since we are not really integrated into the hooks, we listen to the store and refresh the destinations // since we are not really integrated into the hooks, we listen to the store and refresh the destinations
this.logStreamingStore.$onAction(({ name, after }) => { logStreamingStore.$onAction(({ name, after }) => {
if (name === 'removeDestination' || name === 'updateDestination') { if (name === 'removeDestination' || name === 'updateDestination') {
after(async () => { after(async () => {
this.$forceUpdate(); forceUpdateInstance();
}); });
} }
}); });
// refresh when a modal closes // refresh when a modal closes
this.eventBus.on('destinationWasSaved', this.onDestinationWasSaved); eventBus.on('destinationWasSaved', onDestinationWasSaved);
// listen to remove emission // listen to remove emission
this.eventBus.on('remove', this.onRemove); eventBus.on('remove', onRemove);
// listen to modal closing and remove nodes from store // listen to modal closing and remove nodes from store
this.eventBus.on('closing', this.onBusClosing); eventBus.on('closing', onBusClosing);
}, });
beforeUnmount() {
this.eventBus.off('destinationWasSaved', this.onDestinationWasSaved); onBeforeMount(() => {
this.eventBus.off('remove', this.onRemove); eventBus.off('destinationWasSaved', onDestinationWasSaved);
this.eventBus.off('closing', this.onBusClosing); eventBus.off('remove', onRemove);
}, eventBus.off('closing', onBusClosing);
computed: { });
...mapStores(
useSettingsStore, function onDestinationWasSaved() {
useLogStreamingStore, forceUpdateInstance();
useWorkflowsStore,
useUIStore,
useCredentialsStore,
),
sortedItemKeysByLabel() {
const sortedKeys: Array<{ label: string; key: string }> = [];
for (const [key, value] of Object.entries(this.logStreamingStore.items)) {
sortedKeys.push({ key, label: value.destination?.label ?? 'Destination' });
} }
return sortedKeys.sort((a, b) => a.label.localeCompare(b.label));
}, function forceUpdateInstance() {
environment() { const instance = getCurrentInstance();
return process.env.NODE_ENV; instance?.proxy?.$forceUpdate();
}, }
isLicensed(): boolean {
if (this.disableLicense) return false; function onBusClosing() {
return this.settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.LogStreaming]; workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
}, uiStore.stateIsDirty = false;
canManageLogStreaming(): boolean { }
return hasPermission(['rbac'], { rbac: { scope: 'logStreaming:manage' } });
}, async function getDestinationDataFromBackend(): Promise<void> {
}, logStreamingStore.clearEventNames();
methods: { logStreamingStore.clearDestinations();
onDestinationWasSaved() { allDestinations.value = [];
this.$forceUpdate(); const eventNamesData = await logStreamingStore.fetchEventNames();
},
onBusClosing() {
this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
this.uiStore.stateIsDirty = false;
},
async getDestinationDataFromBackend(): Promise<void> {
this.logStreamingStore.clearEventNames();
this.logStreamingStore.clearDestinations();
this.allDestinations = [];
const eventNamesData = await this.logStreamingStore.fetchEventNames();
if (eventNamesData) { if (eventNamesData) {
for (const eventName of eventNamesData) { for (const eventName of eventNamesData) {
this.logStreamingStore.addEventName(eventName); logStreamingStore.addEventName(eventName);
} }
} }
const destinationData: MessageEventBusDestinationOptions[] = const destinationData: MessageEventBusDestinationOptions[] =
await this.logStreamingStore.fetchDestinations(); await logStreamingStore.fetchDestinations();
if (destinationData) { if (destinationData) {
for (const destination of destinationData) { for (const destination of destinationData) {
this.logStreamingStore.addDestination(destination); logStreamingStore.addDestination(destination);
this.allDestinations.push(destination); allDestinations.value.push(destination);
} }
} }
this.$forceUpdate(); forceUpdateInstance();
}, }
goToUpgrade() {
void this.pageRedirectionHelper.goToUpgrade('log-streaming', 'upgrade-log-streaming'); function goToUpgrade() {
}, void pageRedirectHelper.goToUpgrade('log-streaming', 'upgrade-log-streaming');
storeHasItems(): boolean { }
return this.logStreamingStore.items && Object.keys(this.logStreamingStore.items).length > 0;
}, function storeHasItems(): boolean {
async addDestination() { return logStreamingStore.items && Object.keys(logStreamingStore.items).length > 0;
}
async function addDestination() {
const newDestination = deepCopy(defaultMessageEventBusDestinationOptions); const newDestination = deepCopy(defaultMessageEventBusDestinationOptions);
newDestination.id = uuid(); newDestination.id = uuid();
this.logStreamingStore.addDestination(newDestination); logStreamingStore.addDestination(newDestination);
await nextTick(); await nextTick();
this.uiStore.openModalWithData({ uiStore.openModalWithData({
name: LOG_STREAM_MODAL_KEY, name: LOG_STREAM_MODAL_KEY,
data: { data: {
destination: newDestination, destination: newDestination,
isNew: true, isNew: true,
eventBus: this.eventBus, eventBus,
}, },
}); });
},
async onRemove(destinationId?: string) {
if (!destinationId) return;
await this.logStreamingStore.deleteDestination(destinationId);
const foundNode = this.workflowsStore.getNodeByName(destinationId);
if (foundNode) {
this.workflowsStore.removeNode(foundNode);
} }
},
async onEdit(destinationId?: string) { async function onRemove(destinationId?: string) {
if (!destinationId) return; if (!destinationId) return;
const editDestination = this.logStreamingStore.getDestination(destinationId); await logStreamingStore.deleteDestination(destinationId);
const foundNode = workflowsStore.getNodeByName(destinationId);
if (foundNode) {
workflowsStore.removeNode(foundNode);
}
}
async function onEdit(destinationId?: string) {
if (!destinationId) return;
const editDestination = logStreamingStore.getDestination(destinationId);
if (editDestination) { if (editDestination) {
this.uiStore.openModalWithData({ uiStore.openModalWithData({
name: LOG_STREAM_MODAL_KEY, name: LOG_STREAM_MODAL_KEY,
data: { data: {
destination: editDestination, destination: editDestination,
isNew: false, isNew: false,
eventBus: this.eventBus, eventBus,
}, },
}); });
} }
}, }
},
});
</script> </script>
<template> <template>
@ -169,7 +172,7 @@ export default defineComponent({
<div :class="$style.header"> <div :class="$style.header">
<div class="mb-2xl"> <div class="mb-2xl">
<n8n-heading size="2xlarge"> <n8n-heading size="2xlarge">
{{ $locale.baseText(`settings.log-streaming.heading`) }} {{ i18n.baseText(`settings.log-streaming.heading`) }}
</n8n-heading> </n8n-heading>
<template v-if="environment !== 'production'"> <template v-if="environment !== 'production'">
<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong> <strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
@ -180,7 +183,7 @@ export default defineComponent({
<template v-if="isLicensed"> <template v-if="isLicensed">
<div class="mb-l"> <div class="mb-l">
<n8n-info-tip theme="info" type="note"> <n8n-info-tip theme="info" type="note">
<span v-n8n-html="$locale.baseText('settings.log-streaming.infoText')"></span> <span v-n8n-html="i18n.baseText('settings.log-streaming.infoText')"></span>
</n8n-info-tip> </n8n-info-tip>
</div> </div>
<template v-if="storeHasItems()"> <template v-if="storeHasItems()">
@ -202,35 +205,35 @@ export default defineComponent({
</el-row> </el-row>
<div class="mt-m text-right"> <div class="mt-m text-right">
<n8n-button v-if="canManageLogStreaming" size="large" @click="addDestination"> <n8n-button v-if="canManageLogStreaming" size="large" @click="addDestination">
{{ $locale.baseText(`settings.log-streaming.add`) }} {{ i18n.baseText(`settings.log-streaming.add`) }}
</n8n-button> </n8n-button>
</div> </div>
</template> </template>
<div v-else data-test-id="action-box-licensed"> <div v-else data-test-id="action-box-licensed">
<n8n-action-box <n8n-action-box
:button-text="$locale.baseText(`settings.log-streaming.add`)" :button-text="i18n.baseText(`settings.log-streaming.add`)"
@click:button="addDestination" @click:button="addDestination"
> >
<template #heading> <template #heading>
<span v-n8n-html="$locale.baseText(`settings.log-streaming.addFirstTitle`)" /> <span v-n8n-html="i18n.baseText(`settings.log-streaming.addFirstTitle`)" />
</template> </template>
</n8n-action-box> </n8n-action-box>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div v-if="$locale.baseText('settings.log-streaming.infoText')" class="mb-l"> <div v-if="i18n.baseText('settings.log-streaming.infoText')" class="mb-l">
<n8n-info-tip theme="info" type="note"> <n8n-info-tip theme="info" type="note">
<span v-n8n-html="$locale.baseText('settings.log-streaming.infoText')"></span> <span v-n8n-html="i18n.baseText('settings.log-streaming.infoText')"></span>
</n8n-info-tip> </n8n-info-tip>
</div> </div>
<div data-test-id="action-box-unlicensed"> <div data-test-id="action-box-unlicensed">
<n8n-action-box <n8n-action-box
:description="$locale.baseText('settings.log-streaming.actionBox.description')" :description="i18n.baseText('settings.log-streaming.actionBox.description')"
:button-text="$locale.baseText('settings.log-streaming.actionBox.button')" :button-text="i18n.baseText('settings.log-streaming.actionBox.button')"
@click:button="goToUpgrade" @click:button="goToUpgrade"
> >
<template #heading> <template #heading>
<span v-n8n-html="$locale.baseText('settings.log-streaming.actionBox.title')" /> <span v-n8n-html="i18n.baseText('settings.log-streaming.actionBox.title')" />
</template> </template>
</n8n-action-box> </n8n-action-box>
</div> </div>