diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue index 916e888860..94f2e1376e 100644 --- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue +++ b/packages/design-system/src/components/N8nActionBox/ActionBox.vue @@ -48,9 +48,9 @@ interface ActionBoxProps { buttonText: string; buttonType: ButtonType; description: string; - calloutText: string; - calloutTheme: CalloutTheme; - calloutIcon: string; + calloutText?: string; + calloutTheme?: CalloutTheme; + calloutIcon?: string; } defineOptions({ name: 'N8nActionBox' }); diff --git a/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts b/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts index 72a59953cc..caf90bbc0a 100644 --- a/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts +++ b/packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts @@ -10,6 +10,7 @@ describe('N8NActionBox', () => { description: 'Long description that you should know something is the way it is because of how it is. ', buttonText: 'Do something', + buttonType: 'primary', }, global: { stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'], diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue index 1159ba52b9..8479e8842e 100644 --- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue +++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue @@ -5,6 +5,7 @@ :placement="placement" :trigger="trigger" :popper-class="popperClass" + :teleported="teleported" @command="onSelect" @visible-change="onVisibleChange" > @@ -74,6 +75,7 @@ interface ActionDropdownProps { iconSize?: IconSize; trigger?: (typeof TRIGGER)[number]; hideArrow?: boolean; + teleported?: boolean; } const props = withDefaults(defineProps(), { @@ -83,6 +85,7 @@ const props = withDefaults(defineProps(), { iconSize: 'medium', trigger: 'click', hideArrow: false, + teleported: true, }); const $attrs = useAttrs(); @@ -98,7 +101,10 @@ const getItemClasses = (item: ActionDropdownItem): Record => { }; }; -const $emit = defineEmits(['select', 'visibleChange']); +const $emit = defineEmits<{ + (event: 'select', action: string): void; + (event: 'visibleChange', open: boolean): void; +}>(); const elementDropdown = ref>(); const popperClass = computed( diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts index bcbc2f1486..1a3db8f69e 100644 --- a/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts +++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/ActionDropdown.spec.ts @@ -6,7 +6,6 @@ describe('components', () => { it('should render default styling correctly', () => { const wrapper = render(N8nActionDropdown, { props: { - teleported: false, items: [ { id: 'item1', diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap index 162c172de4..b1c5500dbc 100644 --- a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap +++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap @@ -7,7 +7,7 @@ exports[`components > N8nActionDropdown > should render custom styling correctly `; exports[`components > N8nActionDropdown > should render default styling correctly 1`] = ` -"
+"
" `; diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue index 331ee25947..a2a38955be 100644 --- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue +++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue @@ -68,7 +68,10 @@ withDefaults(defineProps(), { iconOrientation: 'vertical', }); -const $emit = defineEmits(['action', 'visible-change']); +const $emit = defineEmits<{ + (event: 'action', value: string): void; + (event: 'visible-change', value: boolean): void; +}>(); const onCommand = (value: string) => $emit('action', value); const onVisibleChange = (value: boolean) => $emit('visible-change', value); diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue index 526e49640e..08c24406d3 100644 --- a/packages/design-system/src/components/N8nDatatable/Datatable.vue +++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue @@ -84,7 +84,10 @@ const props = withDefaults(defineProps(), { rowsPerPage: 10, }); -const $emit = defineEmits(['update:currentPage', 'update:rowsPerPage']); +const $emit = defineEmits<{ + (event: 'update:currentPage', value: number): void; + (event: 'update:rowsPerPage', value: number): void; +}>(); const { t } = useI18n(); const rowsPerPageOptions = ref([10, 25, 50, 100]); diff --git a/packages/design-system/src/components/N8nDatatable/__tests__/data.ts b/packages/design-system/src/components/N8nDatatable/__tests__/data.ts index 508e225b0d..a9bd9078cb 100644 --- a/packages/design-system/src/components/N8nDatatable/__tests__/data.ts +++ b/packages/design-system/src/components/N8nDatatable/__tests__/data.ts @@ -1,6 +1,6 @@ import type { PropType } from 'vue'; import { defineComponent, h } from 'vue'; -import type { DatatableRow } from '../../../types'; +import type { DatatableColumn, DatatableRow } from '../../../types'; import N8nButton from '../../N8nButton'; export const ActionComponent = defineComponent({ @@ -15,7 +15,7 @@ export const ActionComponent = defineComponent({ }, }); -export const columns = [ +export const columns: DatatableColumn[] = [ { id: 'id', path: 'id', label: 'ID' }, { id: 'name', path: 'name', label: 'Name' }, { id: 'age', path: 'meta.age', label: 'Age' }, @@ -23,10 +23,11 @@ export const columns = [ id: 'action', label: 'Action', render: ActionComponent, + path: 'action', }, ]; -export const rows = [ +export const rows: DatatableRow[] = [ { id: 1, name: 'Richard Hendricks', meta: { age: 29 } }, { id: 2, name: 'Bertram Gilfoyle', meta: { age: 44 } }, { id: 3, name: 'Dinesh Chugtai', meta: { age: 31 } }, diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue index 243010b366..19b6a18c2d 100644 --- a/packages/design-system/src/components/N8nFormBox/FormBox.vue +++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue @@ -68,7 +68,11 @@ withDefaults(defineProps(), { }); const formBus = createEventBus(); -const $emit = defineEmits(['submit', 'update', 'secondaryClick']); +const $emit = defineEmits<{ + (event: 'submit', value: { [key: string]: Value }): void; + (event: 'update', value: { name: string; value: Value }): void; + (event: 'secondaryClick', value: Event): void; +}>(); const onUpdateModelValue = (e: { name: string; value: Value }) => $emit('update', e); const onSubmit = (e: { [key: string]: Value }) => $emit('submit', e); diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue index e52bd299b0..a5ff244b48 100644 --- a/packages/design-system/src/components/N8nFormInput/FormInput.vue +++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue @@ -159,7 +159,7 @@ const props = withDefaults(defineProps(), { const $emit = defineEmits<{ (event: 'validate', shouldValidate: boolean): void; - (event: 'update:modelValue', value: unknown): void; + (event: 'update:modelValue', value: Validatable): void; (event: 'focus'): void; (event: 'blur'): void; (event: 'enter'): void; diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue index 842879fa65..be74e1170a 100644 --- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue +++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue @@ -26,12 +26,12 @@ const props = withDefaults(defineProps(), { tagSize: 'small', }); -const emit = defineEmits({ - update: (_: { name: string; value: Value }) => true, - 'update:modelValue': (_: Record) => true, - submit: (_: Record) => true, - ready: (_: boolean) => true, -}); +const emit = defineEmits<{ + (name: 'update', _: { name: string; value: Value }): boolean; + (name: 'update:modelValue', value: Record): boolean; + (name: 'submit', value: Record): boolean; + (name: 'ready', value: boolean): boolean; +}>(); const showValidationWarnings = ref(false); const values = reactive>({}); @@ -123,8 +123,8 @@ onMounted(() => { :show-validation-warnings="showValidationWarnings" :teleported="teleported" :tag-size="tagSize" - @update:model-value="(value) => onUpdateModelValue(input.name, value as Value)" - @validate="(value) => onValidate(input.name, value)" + @update:model-value="(value: Value) => onUpdateModelValue(input.name, value)" + @validate="(value: boolean) => onValidate(input.name, value)" @enter="onSubmit" />
diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue index b2a871b947..c820547b4a 100644 --- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue +++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue @@ -68,7 +68,10 @@ const props = withDefaults(defineProps(), { initiallyExpanded: false, eventBus: () => createEventBus(), }); -const $emit = defineEmits(['click:body', 'tooltipClick']); +const $emit = defineEmits<{ + (name: 'click:body', e: MouseEvent): void; + (name: 'tooltipClick', item: string, e: MouseEvent): void; +}>(); const expanded = ref(false); onMounted(() => { diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue index 4194a88f3a..fe2f55c844 100644 --- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue +++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue @@ -155,7 +155,11 @@ const htmlContent = computed(() => { return safeHtml; }); -const $emit = defineEmits(['markdown-click', 'update-content']); +const $emit = defineEmits<{ + (event: 'markdown-click', link: string, e: MouseEvent): void; + (event: 'update-content', content: string): void; +}>(); + const onClick = (event: MouseEvent) => { let clickedLink: HTMLAnchorElement | null = null; @@ -169,7 +173,9 @@ const onClick = (event: MouseEvent) => { clickedLink = parentLink; } } - $emit('markdown-click', clickedLink, event); + if (clickedLink) { + $emit('markdown-click', clickedLink?.href, event); + } }; // Handle checkbox changes diff --git a/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts b/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts index b15fbc481b..765067c855 100644 --- a/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts +++ b/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts @@ -4,7 +4,7 @@ import N8nRecycleScroller from '../RecycleScroller.vue'; const itemSize = 100; const itemKey = 'id'; const items = [...(new Array(100) as number[])].map((_, index) => ({ - id: index, + id: String(index), name: `Item ${index}`, })); diff --git a/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts b/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts index b17c51b700..2ee22f4e25 100644 --- a/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts +++ b/packages/design-system/src/components/N8nSelect/__tests__/Select.spec.ts @@ -26,6 +26,9 @@ describe('components', () => { it('should select an option', async () => { const n8nSelectTestComponent = defineComponent({ + props: { + teleported: Boolean, + }, setup() { const options = ref(['1', '2', '3']); const selected = ref(''); @@ -36,7 +39,7 @@ describe('components', () => { }; }, template: ` - + `, diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue index e6861ec1ce..3c9f017ff2 100644 --- a/packages/design-system/src/components/N8nTags/Tags.vue +++ b/packages/design-system/src/components/N8nTags/Tags.vue @@ -42,7 +42,10 @@ const props = withDefaults(defineProps(), { truncateAt: 3, }); -const $emit = defineEmits(['expand', 'click:tag']); +const $emit = defineEmits<{ + (event: 'expand', value: boolean): void; + (event: 'click:tag', tagId: string, e: MouseEvent): void; +}>(); const { t } = useI18n(); diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue index 313d80283d..898c2a3a1c 100644 --- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue +++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue @@ -54,7 +54,10 @@ const props = withDefaults(defineProps(), { currentUserId: '', }); -const $emit = defineEmits(['blur', 'focus']); +const $emit = defineEmits<{ + (event: 'blur'): void; + (event: 'focus'): void; +}>(); const { t } = useI18n(); diff --git a/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts b/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts index 087dee0e0c..bae51036a7 100644 --- a/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts +++ b/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts @@ -15,7 +15,6 @@ describe('UserStack', () => { lastName: 'Side', fullName: 'Sunny Side', email: 'hello@n8n.io', - isDefaultUser: false, isPendingUser: false, isOwner: true, signInType: 'email', @@ -27,7 +26,6 @@ describe('UserStack', () => { lastName: 'Dog', fullName: 'Kobi Dog', email: 'kobi@n8n.io', - isDefaultUser: false, isPendingUser: false, isOwner: false, signInType: 'ldap', @@ -59,7 +57,6 @@ describe('UserStack', () => { lastName: 'Side', fullName: 'Sunny Side', email: 'hello@n8n.io', - isDefaultUser: false, isPendingUser: false, isOwner: true, signInType: 'email', @@ -71,7 +68,6 @@ describe('UserStack', () => { lastName: 'Dog', fullName: 'Kobi Dog', email: 'kobi@n8n.io', - isDefaultUser: false, isPendingUser: false, isOwner: false, signInType: 'ldap', @@ -83,7 +79,6 @@ describe('UserStack', () => { lastName: 'Doe', fullName: 'John Doe', email: 'john@n8n.io', - isDefaultUser: false, isPendingUser: false, isOwner: false, signInType: 'email', @@ -95,7 +90,6 @@ describe('UserStack', () => { lastName: 'Doe', fullName: 'Jane Doe', email: 'jane@n8n.io', - isDefaultUser: false, isPendingUser: false, isOwner: false, signInType: 'ldap', diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.vue b/packages/design-system/src/components/N8nUsersList/UsersList.vue index e6e15e48e1..b098577fb4 100644 --- a/packages/design-system/src/components/N8nUsersList/UsersList.vue +++ b/packages/design-system/src/components/N8nUsersList/UsersList.vue @@ -27,7 +27,7 @@ placement="bottom" :actions="getActions(user)" theme="dark" - @action="(action) => onUserAction(user, action)" + @action="(action: string) => onUserAction(user, action)" /> @@ -105,7 +105,9 @@ const getActions = (user: IUser): UserAction[] => { return props.actions.filter((action) => (action.guard ?? defaultGuard)(user)); }; -const $emit = defineEmits(['action']); +const $emit = defineEmits<{ + (event: 'action', _: { action: string; userId: string }): void; +}>(); const onUserAction = (user: IUser, action: string) => $emit('action', { action, diff --git a/packages/design-system/src/types/datatable.ts b/packages/design-system/src/types/datatable.ts index 816ab3c302..751dab559e 100644 --- a/packages/design-system/src/types/datatable.ts +++ b/packages/design-system/src/types/datatable.ts @@ -4,8 +4,7 @@ export type DatatableRowDataType = string | number | boolean | null | undefined; export interface DatatableRow { id: string | number; - - [key: string]: DatatableRowDataType; + [key: string]: DatatableRowDataType | Record; } export interface DatatableColumn { diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue index b603b9f698..b7431eaa65 100644 --- a/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue +++ b/packages/editor-ui/src/components/CredentialPicker/CredentialPicker.vue @@ -13,11 +13,11 @@ const props = defineProps<{ selectedCredentialId: string | null; }>(); -const $emit = defineEmits({ - credentialSelected: (_credentialId: string) => true, - credentialDeselected: () => true, - credentialModalOpened: () => true, -}); +const $emit = defineEmits<{ + (event: 'credentialSelected', credentialId: string): void; + (event: 'credentialDeselected'): void; + (event: 'credentialModalOpened'): void; +}>(); const uiStore = useUIStore(); const credentialsStore = useCredentialsStore(); diff --git a/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue b/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue index b73a9c7167..da79d18ab8 100644 --- a/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue +++ b/packages/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue @@ -12,10 +12,10 @@ const props = defineProps<{ selectedCredentialId: string | null; }>(); -const $emit = defineEmits({ - credentialSelected: (_credentialId: string) => true, - newCredential: () => true, -}); +const $emit = defineEmits<{ + (event: 'credentialSelected', credentialId: string): void; + (event: 'newCredential'): void; +}>(); const i18n = useI18n(); diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue index d72390ca6c..d832d23363 100644 --- a/packages/editor-ui/src/components/InlineTextEdit.vue +++ b/packages/editor-ui/src/components/InlineTextEdit.vue @@ -21,7 +21,7 @@ diff --git a/packages/editor-ui/src/components/NDVFloatingNodes.vue b/packages/editor-ui/src/components/NDVFloatingNodes.vue index 3e8b5c9997..a62919e4d4 100644 --- a/packages/editor-ui/src/components/NDVFloatingNodes.vue +++ b/packages/editor-ui/src/components/NDVFloatingNodes.vue @@ -20,7 +20,7 @@ data-test-id="floating-node" :data-node-name="node.name" :data-node-placement="connectionGroup" - @click="$emit('switchSelectedNode', node.name)" + @click="emit('switchSelectedNode', node.name)" > (); const workflowsStore = useWorkflowsStore(); const nodeTypesStore = useNodeTypesStore(); const workflow = workflowsStore.getCurrentWorkflow(); -const emit = defineEmits(['switchSelectedNode']); +const emit = defineEmits<{ + (key: 'switchSelectedNode', nodeName: string): void; +}>(); interface NodeConfig { node: INodeUi; diff --git a/packages/editor-ui/src/components/NDVSubConnections.vue b/packages/editor-ui/src/components/NDVSubConnections.vue index d8187df358..d12cd84e39 100644 --- a/packages/editor-ui/src/components/NDVSubConnections.vue +++ b/packages/editor-ui/src/components/NDVSubConnections.vue @@ -139,7 +139,10 @@ const workflowsStore = useWorkflowsStore(); const nodeTypesStore = useNodeTypesStore(); const nodeHelpers = useNodeHelpers(); const { debounce } = useDebounce(); -const emit = defineEmits(['switchSelectedNode', 'openConnectionNodeCreator']); +const emit = defineEmits<{ + (event: 'switchSelectedNode', nodeName: string): void; + (event: 'openConnectionNodeCreator', nodeName: string, connectionType: ConnectionTypes): void; +}>(); interface NodeConfig { node: INodeUi; diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue index b47377f8d2..7aca037c80 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue +++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue @@ -29,9 +29,9 @@ import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue' import type { IDataObject } from 'n8n-workflow'; import { useTelemetry } from '@/composables/useTelemetry'; -const emit = defineEmits({ - nodeTypeSelected: (_nodeTypes: string[]) => true, -}); +const emit = defineEmits<{ + (event: 'nodeTypeSelected', _: [actionKey: string, nodeName: string] | [nodeName: string]): void; +}>(); const telemetry = useTelemetry(); const { userActivated } = useUsersStore(); diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue index d05190889f..070a6f6701 100644 --- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue +++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue @@ -31,9 +31,9 @@ export interface Props { rootView: 'trigger' | 'action'; } -const emit = defineEmits({ - nodeTypeSelected: (_nodeTypes: string[]) => true, -}); +const emit = defineEmits<{ + (event: 'nodeTypeSelected', nodeTypes: string[]): void; +}>(); const i18n = useI18n(); const telemetry = useTelemetry(); diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue index ba640a1a29..ab3d61379a 100644 --- a/packages/editor-ui/src/components/NodeDetailsView.vue +++ b/packages/editor-ui/src/components/NodeDetailsView.vue @@ -141,7 +141,7 @@ diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue index 14a038d8cf..3dd58f966f 100644 --- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue +++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue @@ -165,6 +165,7 @@ export type IResource = { id: string; name: string; value: string; + key?: string; updatedAt?: string; createdAt?: string; homeProject?: ProjectSharingData; diff --git a/packages/editor-ui/src/composables/__tests__/useHistoryHelper.test.ts b/packages/editor-ui/src/composables/__tests__/useHistoryHelper.test.ts index a41bed8547..494554f68d 100644 --- a/packages/editor-ui/src/composables/__tests__/useHistoryHelper.test.ts +++ b/packages/editor-ui/src/composables/__tests__/useHistoryHelper.test.ts @@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event'; import { useHistoryHelper } from '../useHistoryHelper'; import { defineComponent, type PropType } from 'vue'; import type { RouteLocationNormalizedLoaded } from 'vue-router'; +import { mock } from 'vitest-mock-extended'; const undoMock = vi.fn(); const redoMock = vi.fn(); @@ -58,12 +59,12 @@ describe('useHistoryHelper', () => { // @ts-ignore render(TestComponent, { props: { - route: { + route: mock({ name: MAIN_HEADER_TABS.WORKFLOW, meta: { nodeView: true, }, - }, + }), }, }); @@ -76,12 +77,12 @@ describe('useHistoryHelper', () => { // @ts-ignore render(TestComponent, { props: { - route: { + route: mock({ name: MAIN_HEADER_TABS.WORKFLOW, meta: { nodeView: true, }, - }, + }), }, }); diff --git a/packages/editor-ui/src/views/MfaView.vue b/packages/editor-ui/src/views/MfaView.vue index 31276408d6..928789aea5 100644 --- a/packages/editor-ui/src/views/MfaView.vue +++ b/packages/editor-ui/src/views/MfaView.vue @@ -115,7 +115,11 @@ const i18 = useI18n(); // #region Emit // --------------------------------------------------------------------------- -const emit = defineEmits(['onFormChanged', 'onBackClick', 'submit']); +const emit = defineEmits<{ + (event: 'onFormChanged', formField: string): void; + (event: 'onBackClick', formField: string): void; + (event: 'submit', form: { token: string; recoveryCode: string }): void; +}>(); // #endregion diff --git a/packages/editor-ui/src/views/VariablesView.vue b/packages/editor-ui/src/views/VariablesView.vue index 734ab7280b..250734fce8 100644 --- a/packages/editor-ui/src/views/VariablesView.vue +++ b/packages/editor-ui/src/views/VariablesView.vue @@ -118,13 +118,17 @@ function resetNewVariablesList() { newlyAddedVariableIds.value = []; } -const resourceToEnvironmentVariable = (data: IResource): EnvironmentVariable => { - return { - id: data.id, - key: data.name, - value: 'value' in data ? data.value : '', - }; -}; +const resourceToEnvironmentVariable = (data: IResource): EnvironmentVariable => ({ + id: data.id, + key: data.name, + value: 'value' in data ? data.value : '', +}); + +const environmentVariableToResource = (data: EnvironmentVariable): IResource => ({ + id: data.id, + name: data.key, + value: 'value' in data ? data.value : '', +}); async function initialize() { if (!isFeatureEnabled.value) return; @@ -159,35 +163,33 @@ function addTemporaryVariable() { } async function saveVariable(data: IResource) { - let updatedVariable: EnvironmentVariable; const variable = resourceToEnvironmentVariable(data); - try { - if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) { + if (typeof variable.id === 'string' && variable.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) { const { id, ...rest } = variable; - updatedVariable = await environmentsStore.createVariable(rest); + const updatedVariable = await environmentsStore.createVariable(rest); allVariables.value.unshift(updatedVariable); allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id); newlyAddedVariableIds.value.unshift(updatedVariable.id); } else { - updatedVariable = await environmentsStore.updateVariable(variable); + const updatedVariable = await environmentsStore.updateVariable(variable); allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id); allVariables.value.push(updatedVariable); - toggleEditing(updatedVariable); + toggleEditing(environmentVariableToResource(updatedVariable)); } } catch (error) { showError(error, i18n.baseText('variables.errors.save')); } } -function toggleEditing(data: EnvironmentVariable) { +function toggleEditing(data: IResource) { editMode.value = { ...editMode.value, [data.id]: !editMode.value[data.id], }; } -function cancelEditing(data: EnvironmentVariable) { +function cancelEditing(data: IResource) { if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) { allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id); } else { @@ -195,10 +197,13 @@ function cancelEditing(data: EnvironmentVariable) { } } -async function deleteVariable(data: EnvironmentVariable) { +async function deleteVariable(data: IResource) { + const variable = resourceToEnvironmentVariable(data); try { const confirmed = await message.confirm( - i18n.baseText('variables.modals.deleteConfirm.message', { interpolate: { name: data.key } }), + i18n.baseText('variables.modals.deleteConfirm.message', { + interpolate: { name: variable.key }, + }), i18n.baseText('variables.modals.deleteConfirm.title'), { confirmButtonText: i18n.baseText('variables.modals.deleteConfirm.confirmButton'), @@ -210,7 +215,7 @@ async function deleteVariable(data: EnvironmentVariable) { return; } - await environmentsStore.deleteVariable(data); + await environmentsStore.deleteVariable(variable); allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id); } catch (error) { showError(error, i18n.baseText('variables.errors.delete'));