mirrors/n8n
2
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-11-20 17:46:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Explicitly import design system components (#20169)

Browse Source
This commit is contained in:
Csaba Tuncsik 2025-10-01 17:26:41 +02:00 committed by GitHub
parent a905ae3306
commit 85681de21c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
435 changed files with 1592 additions and 680 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/@n8n/chat/vite.config.mts
View File

@ -6,8 +6,6 @@ import icons from 'unplugin-icons/vite';
import dts from 'vite-plugin-dts';
import { vitestConfig } from '@n8n/vitest-config/frontend';
import pkg from './package.json';
import iconsResolver from 'unplugin-icons/resolver';
import components from 'unplugin-vue-components/vite';
const includeVue = process.env.INCLUDE_VUE === 'true';
const srcPath = resolve(__dirname, 'src');
@ -25,18 +23,6 @@ export default mergeConfig(
autoInstall: true,
}),
dts(),
components({
dts: './src/components.d.ts',
resolvers: [
(componentName) => {
if (componentName.startsWith('N8n'))
return { name: componentName, from: '@n8n/design-system' };
},
iconsResolver({
prefix: 'icon',
}),
],
}),
{
name: 'rename-css-file',
closeBundle() {

1
packages/frontend/@n8n/design-system/package.json
View File

@ -43,7 +43,6 @@
"sass": "^1.71.1",
"tailwindcss": "^3.4.3",
"unplugin-icons": "catalog:frontend",
"unplugin-vue-components": "catalog:frontend",
"vite": "catalog:",
"vitest": "catalog:",
"vitest-mock-extended": "catalog:",

3
packages/frontend/@n8n/design-system/src/__tests__/setup.ts
View File

@ -1,13 +1,12 @@
import '@testing-library/jest-dom';
import { configure } from '@testing-library/vue';
import { config } from '@vue/test-utils';
import ElementPlus from 'element-plus';
import { N8nPlugin } from '@n8n/design-system/plugin';
configure({ testIdAttribute: 'data-test-id' });
config.global.plugins = [N8nPlugin, ElementPlus];
config.global.plugins = [N8nPlugin];
window.ResizeObserver =
window.ResizeObserver ||

3
packages/frontend/@n8n/design-system/src/components/AskAssistantAvatar/index.ts Normal file
View File

@ -0,0 +1,3 @@
import AssistantAvatar from './AssistantAvatar.vue';
export default AssistantAvatar;

3
packages/frontend/@n8n/design-system/src/components/AskAssistantButton/index.ts Normal file
View File

@ -0,0 +1,3 @@
import AskAssistantButton from './AskAssistantButton.vue';
export default AskAssistantButton;

2
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
View File

@ -432,8 +432,8 @@ defineExpose({
:show-ask-owner-tooltip="showAskOwnerTooltip"
:max-length="maxCharacterLength"
:refocus-after-send="true"
@upgrade-click="emit('upgrade-click')"
data-test-id="chat-input"
@upgrade-click="emit('upgrade-click')"
@submit="onSendMessage"
@stop="emit('stop')"
/>

3
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/index.ts Normal file
View File

@ -0,0 +1,3 @@
import AskAssistantChat from './AskAssistantChat.vue';
export default AskAssistantChat;

5
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/MessageRating.vue
View File

@ -1,9 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from '@n8n/design-system/composables/useI18n';
import type { RatingFeedback } from '@n8n/design-system/types';
import { useI18n } from '../../../composables/useI18n';
import type { RatingFeedback } from '../../../types';
import N8nButton from '../../N8nButton';
import N8nIconButton from '../../N8nIconButton';
import N8nInput from '../../N8nInput';

3
packages/frontend/@n8n/design-system/src/components/AskAssistantChat/messages/ToolMessage.vue
View File

@ -1,9 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from '@n8n/design-system/composables/useI18n';
import BaseMessage from './BaseMessage.vue';
import { useI18n } from '../../../composables/useI18n';
import type { ChatUI } from '../../../types/assistant';
import N8nIcon from '../../N8nIcon';
import N8nText from '../../N8nText';

3
packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/index.ts Normal file
View File

@ -0,0 +1,3 @@
import AssistantIcon from './AssistantIcon.vue';
export default AssistantIcon;

3
packages/frontend/@n8n/design-system/src/components/AskAssistantText/index.ts Normal file
View File

@ -0,0 +1,3 @@
import AssistantText from './AssistantText.vue';
export default AssistantText;

3
packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.vue
View File

@ -2,8 +2,7 @@
import parseDiff from 'parse-diff';
import { computed } from 'vue';
import { useI18n } from '@n8n/design-system/composables/useI18n';
import { useI18n } from '../../composables/useI18n';
import N8nButton from '../N8nButton';
import N8nIcon from '../N8nIcon';

3
packages/frontend/@n8n/design-system/src/components/InlineAskAssistantButton/index.ts Normal file
View File

@ -0,0 +1,3 @@
import InlineAskAssistantButton from './InlineAskAssistantButton.vue';
export default InlineAskAssistantButton;

5
packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.vue
View File

@ -1,12 +1,11 @@
<script lang="ts" setup>
import N8nTooltip from '@n8n/design-system/components/N8nTooltip/Tooltip.vue';
import type { ButtonType } from '@n8n/design-system/types/button';
import type { ButtonType } from '../../types/button';
import N8nButton from '../N8nButton';
import N8nCallout, { type CalloutTheme } from '../N8nCallout';
import N8nHeading from '../N8nHeading';
import { type IconName } from '../N8nIcon/icons';
import N8nText from '../N8nText';
import N8nTooltip from '../N8nTooltip/Tooltip.vue';
interface ActionBoxProps {
emoji?: string;

3
packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View File

@ -8,8 +8,7 @@
import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
import { ref, useCssModule, useAttrs, computed } from 'vue';
import type { ActionDropdownItem, IconSize, ButtonSize } from '@n8n/design-system/types';
import type { ActionDropdownItem, IconSize, ButtonSize } from '../../types';
import N8nBadge from '../N8nBadge';
import N8nIcon from '../N8nIcon';
import { type IconName } from '../N8nIcon/icons';

5
packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
View File

@ -2,9 +2,8 @@
import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
import { ref } from 'vue';
import type { IUser, UserAction } from '@n8n/design-system/types';
import type { IconOrientation, IconSize } from '@n8n/design-system/types/icon';
import type { IUser, UserAction } from '../../types';
import type { IconOrientation, IconSize } from '../../types/icon';
import N8nIcon from '../N8nIcon';
import N8nLoading from '../N8nLoading';

3
packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup generic="UserType extends IUser">
import { computed, ref, watch } from 'vue';
import type { IUser, UserAction } from '@n8n/design-system/types';
import type { IUser, UserAction } from '../../types';
import N8nActionToggle from '../N8nActionToggle';
import N8nLink from '../N8nLink';
import N8nLoading from '../N8nLoading';

5
packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
View File

@ -1,9 +1,8 @@
<script setup lang="ts">
import { computed, useAttrs, useCssModule, watchEffect } from 'vue';
import type { IconSize } from '@n8n/design-system/types';
import type { ButtonProps } from '@n8n/design-system/types/button';
import type { IconSize } from '../../types';
import type { ButtonProps } from '../../types/button';
import N8nIcon from '../N8nIcon';
import N8nSpinner from '../N8nSpinner';

3
packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup>
import { computed, useCssModule } from 'vue';
import type { IconSize, CalloutTheme } from '@n8n/design-system/types';
import type { IconSize, CalloutTheme } from '../../types';
import N8nIcon from '../N8nIcon';
import { type IconName } from '../N8nIcon/icons';
import N8nText from '../N8nText';

3
packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { IconSize } from '@n8n/design-system/types';
import type { IconSize } from '../../types';
import N8nIcon from '../N8nIcon';
interface ExternalLinkProps {

3
packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.vue
View File

@ -1,10 +1,9 @@
<script lang="ts" setup>
import { computed, useCssModule } from 'vue';
import type { IconSize, IconColor } from '@n8n/design-system/types/icon';
import type { IconName } from './icons';
import { deprecatedIconSet, updatedIconSet } from './icons';
import type { IconSize, IconColor } from '../../types/icon';
interface IconProps {
// component supports both deprecated and updated icon set to support project icons

3
packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { IconButtonProps } from '@n8n/design-system/types/button';
import type { IconButtonProps } from '../../types/button';
import N8nButton from '../N8nButton';
defineOptions({ name: 'N8nIconButton' });

3
packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
View File

@ -2,8 +2,7 @@
import { createEventBus, type EventBus } from '@n8n/utils/event-bus';
import { onMounted, ref } from 'vue';
import type { IconColor } from '@n8n/design-system/types/icon';
import type { IconColor } from '../../types/icon';
import N8nIcon from '../N8nIcon';
import { type IconName } from '../N8nIcon/icons';
import N8nText from '../N8nText';

5
packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.vue
View File

@ -2,9 +2,8 @@
import type { Placement } from 'element-plus';
import { computed } from 'vue';
import type { IconSize } from '@n8n/design-system/types';
import type { IconColor } from '@n8n/design-system/types/icon';
import type { IconSize } from '../../types';
import type { IconColor } from '../../types/icon';
import N8nIcon from '../N8nIcon';
import { type IconName } from '../N8nIcon/icons';
import N8nTooltip from '../N8nTooltip';

5
packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
View File

@ -2,9 +2,8 @@
import { ElInput } from 'element-plus';
import { computed, ref } from 'vue';
import type { ElementPlusSizePropType, InputAutocompletePropType } from '@n8n/design-system/types';
import type { InputSize, InputType } from '@n8n/design-system/types/input';
import type { ElementPlusSizePropType, InputAutocompletePropType } from '../../types';
import type { InputSize, InputType } from '../../types/input';
import { uid } from '../../utils';
interface InputProps {

3
packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { TextColor } from '@n8n/design-system/types/text';
import type { TextColor } from '../../types/text';
import N8nIcon from '../N8nIcon';
import N8nText from '../N8nText';
import N8nTooltip from '../N8nTooltip';

2
packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.vue
View File

@ -2,7 +2,7 @@
import { ElInputNumber } from 'element-plus';
import { computed } from 'vue';
import type { ElementPlusSizePropType, InputSize } from '@n8n/design-system/types';
import type { ElementPlusSizePropType, InputSize } from '../../types';
type InputNumberProps = {
size?: InputSize;

3
packages/frontend/@n8n/design-system/src/components/N8nLink/Link.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup>
import type { RouteLocationRaw } from 'vue-router';
import type { TextSize } from '@n8n/design-system/types/text';
import type { TextSize } from '../../types/text';
import N8nRoute from '../N8nRoute';
import N8nText from '../N8nText';

2
packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.vue
View File

@ -2,7 +2,7 @@
import type { ComponentPublicInstance } from 'vue';
import { computed, onMounted, onBeforeMount, ref, nextTick, watch } from 'vue';
import type { ItemWithKey } from '@n8n/design-system/types';
import type { ItemWithKey } from '../../types';
interface RecycleScrollerProps {
itemSize: number;

2
packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed, ref, useCssModule } from 'vue';
import { directionsCursorMaps, type Direction, type ResizeData } from '@n8n/design-system/types';
import { directionsCursorMaps, type Direction, type ResizeData } from '../../types';
function closestNumber(value: number, divisor: number): number {
const q = value / divisor;

3
packages/frontend/@n8n/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup>
import { computed, ref, useAttrs } from 'vue';
import { type ResizeData } from '@n8n/design-system/types';
import { type ResizeData } from '../../types';
import N8nResizeWrapper from '../N8nResizeWrapper/ResizeWrapper.vue';
import { defaultStickyProps } from '../N8nSticky/constants';
import N8nSticky from '../N8nSticky/Sticky.vue';

3
packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.vue
View File

@ -3,8 +3,7 @@ import { ElSelect } from 'element-plus';
import type { PropType } from 'vue';
import { computed, ref, useAttrs } from 'vue';
import type { SelectSize } from '@n8n/design-system/types';
import type { SelectSize } from '../../types';
import { isEventBindingElementAttribute } from '../../utils';
type InnerSelectRef = InstanceType<typeof ElSelect>;

3
packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { IconSize } from '@n8n/design-system/types';
import type { IconSize } from '../../types';
import N8nIcon from '../N8nIcon';
const TYPE = ['dots', 'ring'] as const;

2
packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed, useCssModule } from 'vue';
import type { TextAlign, TextColor, TextSize } from '@n8n/design-system/types/text';
import type { TextAlign, TextColor, TextSize } from '../../types/text';
interface TextProps {
bold?: boolean;

3
packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.vue
View File

@ -2,9 +2,8 @@
import { ElTooltip } from 'element-plus';
import type { PropType } from 'vue';
import type { IN8nButton } from '@n8n/design-system/types';
import { useInjectTooltipAppendTo } from '../../composables/useTooltipAppendTo';
import type { IN8nButton } from '../../types';
import N8nButton from '../N8nButton';
export type Justify =

3
packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.vue
View File

@ -2,8 +2,7 @@
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
import { computed } from 'vue';
import type { IUser, UserStackGroups } from '@n8n/design-system/types';
import type { IUser, UserStackGroups } from '../../types';
import N8nAvatar from '../N8nAvatar';
import N8nUserInfo from '../N8nUserInfo';

5
packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.vue
View File

@ -1,9 +1,8 @@
<script setup lang="ts" generic="ColumnType extends ColumnHeader">
import { computed, ref } from 'vue';
import { useI18n } from '@n8n/design-system/composables/useI18n';
import type { ButtonSize, IconSize } from '@n8n/design-system/types';
import { useI18n } from '../../composables/useI18n';
import type { ButtonSize, IconSize } from '../../types';
import N8nButton from '../N8nButton';
import N8nIcon from '../N8nIcon';
import N8nPopoverReka from '../N8nPopoverReka/N8nPopoverReka.vue';

6
packages/frontend/@n8n/design-system/src/components/index.ts
View File

@ -1,4 +1,9 @@
export { default as N8nActionBox } from './N8nActionBox';
export { default as N8nAskAssistantButton } from './AskAssistantButton';
export { default as N8nAskAssistantChat } from './AskAssistantChat';
export { default as N8nAssistantIcon } from './AskAssistantIcon';
export { default as N8nAssistantAvatar } from './AskAssistantAvatar';
export { default as N8nAssistantText } from './AskAssistantText';
export { default as N8nActionDropdown } from './N8nActionDropdown';
export { default as N8nActionToggle } from './N8nActionToggle';
export { default as N8nAlert } from './N8nAlert';
@ -19,6 +24,7 @@ export { default as N8nFormInput } from './N8nFormInput';
export { default as N8nHeading } from './N8nHeading';
export { default as N8nIcon } from './N8nIcon';
export { default as N8nIconButton } from './N8nIconButton';
export { default as N8nInlineAskAssistantButton } from './InlineAskAssistantButton';
export { default as N8nInfoAccordion } from './N8nInfoAccordion';
export { default as N8nInfoTip } from './N8nInfoTip';
export { default as N8nInput } from './N8nInput';

11
packages/frontend/@n8n/design-system/vite.config.mts
View File

@ -1,9 +1,7 @@
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig, mergeConfig } from 'vite';
import components from 'unplugin-vue-components/vite';
import icons from 'unplugin-icons/vite';
import iconsResolver from 'unplugin-icons/resolver';
import { vitestConfig } from '@n8n/vitest-config/frontend';
import svgLoader from 'vite-svg-loader';
@ -34,15 +32,6 @@ export default mergeConfig(
compiler: 'vue3',
autoInstall: true,
}),
components({
dirs: [],
dts: false,
resolvers: [
iconsResolver({
prefix: 'Icon',
}),
],
}),
],
resolve: {
alias: {

1
packages/frontend/editor-ui/package.json
View File

@ -134,7 +134,6 @@
"fake-indexeddb": "^6.0.0",
"miragejs": "^0.1.48",
"unplugin-icons": "catalog:frontend",
"unplugin-vue-components": "catalog:frontend",
"vite": "catalog:",
"vite-plugin-istanbul": "^7.2.0",
"vite-plugin-node-polyfills": "^0.24.0",

18
packages/frontend/editor-ui/src/__tests__/render.ts
View File

@ -1,7 +1,6 @@
import type { Component, Plugin } from 'vue';
import type { Plugin } from 'vue';
import { render, type RenderOptions as TestingLibraryRenderOptions } from '@testing-library/vue';
import { i18nInstance } from '@n8n/i18n';
import { GlobalComponentsPlugin } from '@/plugins/components';
import { GlobalDirectivesPlugin } from '@/plugins/directives';
import { FontAwesomePlugin } from '@/plugins/icons';
import type { Pinia } from 'pinia';
@ -10,7 +9,6 @@ import type { Telemetry } from '@/plugins/telemetry';
import vueJsonPretty from 'vue-json-pretty';
import merge from 'lodash/merge';
import type { TestingPinia } from '@pinia/testing';
import * as components from '@n8n/design-system/components';
export type RenderOptions<T> = Omit<TestingLibraryRenderOptions<T>, 'props'> & {
pinia?: TestingPinia | Pinia;
@ -26,28 +24,20 @@ const TelemetryPlugin: Plugin<{}> = {
},
};
const TestingGlobalComponentsPlugin: Plugin<{}> = {
install(app) {
for (const [name, component] of Object.entries(components)) {
app.component(name, component as unknown as Component);
}
},
};
const defaultOptions = {
global: {
stubs: {
RouterLink: true,
RouterLink: {
template: '<a><slot /></a>',
},
VueJsonPretty: vueJsonPretty,
},
plugins: [
i18nInstance,
PiniaVuePlugin,
FontAwesomePlugin,
GlobalComponentsPlugin,
GlobalDirectivesPlugin,
TelemetryPlugin,
TestingGlobalComponentsPlugin,
],
},
};

2
packages/frontend/editor-ui/src/components/AboutModal.vue
View File

@ -9,6 +9,8 @@ import { useDebugInfo } from '@/composables/useDebugInfo';
import { useI18n } from '@n8n/i18n';
import { getThirdPartyLicenses } from '@n8n/rest-api-client';
import { ElCol, ElRow } from 'element-plus';
import { N8nButton, N8nLink, N8nText } from '@n8n/design-system';
const modalBus = createEventBus();
const toast = useToast();
const i18n = useI18n();

9
packages/frontend/editor-ui/src/components/ActivationModal.vue
View File

@ -17,6 +17,8 @@ import { useExecutionsStore } from '@/stores/executions.store';
import { useRouter } from 'vue-router';
import { useI18n } from '@n8n/i18n';
import { ElCheckbox } from 'element-plus';
import { N8nButton, N8nText } from '@n8n/design-system';
const checked = ref(false);
const executionsStore = useExecutionsStore();
@ -84,9 +86,10 @@ const showSettings = async () => {
uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
};
const handleCheckboxChange = (checkboxValue: boolean) => {
checked.value = checkboxValue;
useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = checkboxValue.toString();
const handleCheckboxChange = (checkboxValue: string | number | boolean) => {
const boolValue = typeof checkboxValue === 'boolean' ? checkboxValue : Boolean(checkboxValue);
checked.value = boolValue;
useStorage(LOCAL_STORAGE_ACTIVATION_FLAG).value = boolValue.toString();
};
</script>

1
packages/frontend/editor-ui/src/components/AnnotationTagsDropdown.ee.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import TagsDropdown from '@/components/TagsDropdown.vue';
import { useUIStore } from '@/stores/ui.store';
import { useAnnotationTagsStore } from '@/stores/tags.store';
import { ANNOTATION_TAGS_MANAGER_MODAL_KEY } from '@/constants';

1
packages/frontend/editor-ui/src/components/ApiKeyCard.vue
View File

@ -4,6 +4,7 @@ import { useI18n } from '@n8n/i18n';
import type { ApiKey } from '@n8n/api-types';
import { DateTime } from 'luxon';
import { N8nActionToggle, N8nCard, N8nText } from '@n8n/design-system';
const API_KEY_ITEM_ACTIONS = {
EDIT: 'edit',
DELETE: 'delete',

14
packages/frontend/editor-ui/src/components/ApiKeyCreateOrEditModal.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import ApiKeyScopes from '@/components/ApiKeyScopes.vue';
import CopyInput from '@/components/CopyInput.vue';
import Modal from '@/components/Modal.vue';
import { API_KEY_CREATE_OR_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
import { computed, onMounted, ref } from 'vue';
@ -10,13 +12,21 @@ import { useDocumentTitle } from '@/composables/useDocumentTitle';
import { useApiKeysStore } from '@/stores/apiKeys.store';
import { useToast } from '@/composables/useToast';
import type { BaseTextKey } from '@n8n/i18n';
import { N8nText } from '@n8n/design-system';
import { DateTime } from 'luxon';
import type { ApiKey, ApiKeyWithRawValue, CreateApiKeyRequestDto } from '@n8n/api-types';
import ApiKeyScopes from '@/components/ApiKeyScopes.vue';
import type { ApiKeyScope } from '@n8n/permissions';
import { useSettingsStore } from '@/stores/settings.store';
import { ElDatePicker } from 'element-plus';
import {
N8nButton,
N8nCard,
N8nInput,
N8nInputLabel,
N8nOption,
N8nSelect,
N8nText,
} from '@n8n/design-system';
const EXPIRATION_OPTIONS = {
'7_DAYS': 7,
'30_DAYS': 30,

3
packages/frontend/editor-ui/src/components/ApiKeyScopes.vue
View File

@ -1,12 +1,13 @@
<script setup>
import { ref, computed, watch } from 'vue';
import { ElSelect, ElOption, ElOptionGroup } from 'element-plus';
import { capitalCase } from 'change-case';
import { useI18n } from '@n8n/i18n';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
import { I18nT } from 'vue-i18n';
import { ElCheckbox, ElOption, ElOptionGroup, ElSelect } from 'element-plus';
import { N8nInputLabel, N8nLink, N8nNotice } from '@n8n/design-system';
// Define props
const props = defineProps({
modelValue: {

6
packages/frontend/editor-ui/src/components/AskAssistant/Agent/AskAssistantBuild.vue
View File

@ -2,7 +2,6 @@
import { useBuilderStore } from '@/stores/builder.store';
import { useUsersStore } from '@/stores/users.store';
import { computed, watch, ref } from 'vue';
import AskAssistantChat from '@n8n/design-system/components/AskAssistantChat/AskAssistantChat.vue';
import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@n8n/i18n';
import { useWorkflowsStore } from '@/stores/workflows.store';
@ -14,6 +13,7 @@ import { nodeViewEventBus } from '@/event-bus';
import ExecuteMessage from './ExecuteMessage.vue';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
import { N8nAskAssistantChat, N8nText } from '@n8n/design-system';
const emit = defineEmits<{
close: [];
}>();
@ -245,7 +245,7 @@ watch(currentRoute, () => {
<template>
<div data-test-id="ask-assistant-chat" tabindex="0" :class="$style.container" @keydown.stop>
<AskAssistantChat
<N8nAskAssistantChat
:user="user"
:messages="builderStore.chatMessages"
:streaming="builderStore.streaming"
@ -275,7 +275,7 @@ watch(currentRoute, () => {
i18n.baseText('aiAssistant.builder.assistantPlaceholder')
}}</N8nText>
</template>
</AskAssistantChat>
</N8nAskAssistantChat>
</div>
</template>

2
packages/frontend/editor-ui/src/components/AskAssistant/Agent/NodeIssueItem.vue
View File

@ -7,6 +7,8 @@ interface WorkflowNodeIssue {
value: string | string[];
}
import { useNDVStore } from '@/stores/ndv.store';
import NodeIcon from '@/components/NodeIcon.vue';
import { N8nIcon } from '@n8n/design-system';
interface Props {
/** The node issue to display */

2
packages/frontend/editor-ui/src/components/AskAssistant/AssistantsHub.vue
View File

@ -7,6 +7,8 @@ import SlideTransition from '@/components/transitions/SlideTransition.vue';
import AskAssistantBuild from './Agent/AskAssistantBuild.vue';
import AskAssistantChat from './Chat/AskAssistantChat.vue';
import { N8nResizeWrapper } from '@n8n/design-system';
import HubSwitcher from '@/components/AskAssistant/HubSwitcher.vue';
const builderStore = useBuilderStore();
const assistantStore = useAssistantStore();

6
packages/frontend/editor-ui/src/components/AskAssistant/Chat/AskAssistantChat.vue
View File

@ -2,7 +2,7 @@
import { useAssistantStore } from '@/stores/assistant.store';
import { useUsersStore } from '@/stores/users.store';
import { computed } from 'vue';
import AskAssistantChat from '@n8n/design-system/components/AskAssistantChat/AskAssistantChat.vue';
import { N8nAskAssistantChat } from '@n8n/design-system';
import { useTelemetry } from '@/composables/useTelemetry';
import { useBuilderStore } from '@/stores/builder.store';
import { useI18n } from '@n8n/i18n';
@ -64,7 +64,7 @@ async function undoCodeDiff(index: number) {
<template>
<div data-test-id="ask-assistant-chat" tabindex="0" class="wrapper" @keydown.stop>
<AskAssistantChat
<N8nAskAssistantChat
:user="user"
:messages="assistantStore.chatMessages"
:streaming="assistantStore.streaming"
@ -83,7 +83,7 @@ async function undoCodeDiff(index: number) {
<template #header>
<slot name="header" />
</template>
</AskAssistantChat>
</N8nAskAssistantChat>
</div>
</template>

7
packages/frontend/editor-ui/src/components/AskAssistant/Chat/AskAssistantFloatingButton.vue
View File

@ -2,10 +2,9 @@
import { useI18n } from '@n8n/i18n';
import { useStyles } from '@/composables/useStyles';
import { useAssistantStore } from '@/stores/assistant.store';
import AssistantAvatar from '@n8n/design-system/components/AskAssistantAvatar/AssistantAvatar.vue';
import AskAssistantButton from '@n8n/design-system/components/AskAssistantButton/AskAssistantButton.vue';
import { computed } from 'vue';
import { N8nAskAssistantButton, N8nAssistantAvatar, N8nTooltip } from '@n8n/design-system';
const assistantStore = useAssistantStore();
const i18n = useI18n();
const { APP_Z_INDEXES } = useStyles();
@ -45,11 +44,11 @@ const onClick = () => {
<template #content>
<div :class="$style.text">{{ lastUnread }}</div>
<div :class="$style.assistant">
<AssistantAvatar size="mini" />
<N8nAssistantAvatar size="mini" />
<span>{{ i18n.baseText('aiAssistant.name') }}</span>
</div>
</template>
<AskAssistantButton :unread-count="assistantStore.unreadCount" @click="onClick" />
<N8nAskAssistantButton :unread-count="assistantStore.unreadCount" @click="onClick" />
</N8nTooltip>
</div>
</template>

7
packages/frontend/editor-ui/src/components/AskAssistant/Chat/NewAssistantSessionModal.vue
View File

@ -1,14 +1,13 @@
<script lang="ts" setup>
import { NEW_ASSISTANT_SESSION_MODAL } from '@/constants';
import Modal from '@/components/Modal.vue';
import AssistantIcon from '@n8n/design-system/components/AskAssistantIcon/AssistantIcon.vue';
import AssistantText from '@n8n/design-system/components/AskAssistantText/AssistantText.vue';
import { useI18n } from '@n8n/i18n';
import { useUIStore } from '@/stores/ui.store';
import type { ChatRequest } from '@/types/assistant.types';
import { useAssistantStore } from '@/stores/assistant.store';
import type { ICredentialType } from 'n8n-workflow';
import { N8nAssistantIcon, N8nAssistantText, N8nButton, N8nText } from '@n8n/design-system';
const i18n = useI18n();
const uiStore = useUIStore();
const assistantStore = useAssistantStore();
@ -50,8 +49,8 @@ const startNewSession = async () => {
>
<template #header>
{{ i18n.baseText('aiAssistant.newSessionModal.title.part1') }}
<span :class="$style.assistantIcon"><AssistantIcon size="medium" /></span>
<AssistantText size="xlarge" :text="i18n.baseText('aiAssistant.assistant')" />
<span :class="$style.assistantIcon"><N8nAssistantIcon size="medium" /></span>
<N8nAssistantText size="xlarge" :text="i18n.baseText('aiAssistant.assistant')" />
{{ i18n.baseText('aiAssistant.newSessionModal.title.part2') }}
</template>
<template #content>

1
packages/frontend/editor-ui/src/components/AskAssistant/HubSwitcher.vue
View File

@ -2,6 +2,7 @@
import { useI18n } from '@n8n/i18n';
import { computed } from 'vue';
import { N8nRadioButtons } from '@n8n/design-system';
defineProps<{
isBuildMode: boolean;
}>();

2
packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue
View File

@ -10,10 +10,10 @@ import { useNDVStore } from '@/stores/ndv.store';
import type { AssignmentValue, INodeProperties } from 'n8n-workflow';
import { computed, ref } from 'vue';
import TypeSelect from './TypeSelect.vue';
import { N8nIconButton, N8nTooltip } from '@n8n/design-system';
import { useI18n } from '@n8n/i18n';
import { BINARY_DATA_ACCESS_TOOLTIP } from '@/constants';
import { N8nIconButton, N8nTooltip } from '@n8n/design-system';
interface Props {
path: string;
modelValue: AssignmentValue;

1
packages/frontend/editor-ui/src/components/AssignmentCollection/AssignmentCollection.vue
View File

@ -20,6 +20,7 @@ import ExperimentalEmbeddedNdvMapper from '@/components/canvas/experimental/comp
import { ExpressionLocalResolveContextSymbol } from '@/constants';
import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store';
import { N8nInputLabel } from '@n8n/design-system';
interface Props {
parameter: INodeProperties;
value: AssignmentCollectionValue;

1
packages/frontend/editor-ui/src/components/AssignmentCollection/TypeSelect.vue
View File

@ -5,6 +5,7 @@ import { ASSIGNMENT_TYPES } from './constants';
import { computed } from 'vue';
import { type IconName } from '@n8n/design-system/components/N8nIcon/icons';
import { N8nIcon, N8nOption, N8nSelect } from '@n8n/design-system';
interface Props {
modelValue: string;
isReadOnly?: boolean;

3
packages/frontend/editor-ui/src/components/Badge.vue
View File

@ -1,5 +1,8 @@
<script lang="ts">
import { ElTag } from 'element-plus';
export default {
components: { ElTag },
props: ['text', 'type'],
};
</script>

2
packages/frontend/editor-ui/src/components/Banner.vue
View File

@ -1,6 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ElTag } from 'element-plus';
import { N8nButton, N8nIcon, N8nLink } from '@n8n/design-system';
interface Props {
theme: 'success' | 'danger';
message: string;

1
packages/frontend/editor-ui/src/components/BecomeTemplateCreatorCta/BecomeTemplateCreatorCta.vue
View File

@ -3,6 +3,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useBecomeTemplateCreatorStore } from './becomeTemplateCreatorStore';
import { useI18n } from '@n8n/i18n';
import { N8nButton, N8nIcon } from '@n8n/design-system';
const i18n = useI18n();
const store = useBecomeTemplateCreatorStore();
const telemetry = useTelemetry();

1
packages/frontend/editor-ui/src/components/BinaryDataDisplay.vue
View File

@ -6,6 +6,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useI18n } from '@n8n/i18n';
import { N8nButton } from '@n8n/design-system';
const props = defineProps<{
displayData: IBinaryData;
windowVisible: boolean;

4
packages/frontend/editor-ui/src/components/ButtonParameter/ButtonParameter.vue
View File

@ -2,7 +2,7 @@
import { type INodeProperties, type NodePropertyAction } from 'n8n-workflow';
import type { INodeUi, IUpdateInformation } from '@/Interface';
import { ref, computed, onMounted } from 'vue';
import { N8nButton, N8nInput, N8nTooltip } from '@n8n/design-system/components';
import { N8nButton, N8nInput, N8nInputLabel, N8nTooltip } from '@n8n/design-system';
import { useI18n } from '@n8n/i18n';
import { useToast } from '@/composables/useToast';
import { useNDVStore } from '@/stores/ndv.store';
@ -14,9 +14,9 @@ import {
getTextareaCursorPosition,
} from './utils';
import { useTelemetry } from '@/composables/useTelemetry';
import DraggableTarget from '@/components/DraggableTarget.vue';
import { propertyNameFromExpression } from '../../utils/mappingUtils';
const AI_TRANSFORM_CODE_GENERATED_FOR_PROMPT = 'codeGeneratedForPrompt';
const emit = defineEmits<{

1
packages/frontend/editor-ui/src/components/ChangePasswordModal.vue
View File

@ -9,6 +9,7 @@ import { createEventBus } from '@n8n/utils/event-bus';
import type { IFormInputs, IFormInput, FormFieldValueUpdate, FormValues } from '@/Interface';
import { useI18n } from '@n8n/i18n';
import { N8nButton, N8nFormInputs } from '@n8n/design-system';
const config = ref<IFormInputs | null>(null);
const formBus = createFormEventBus();
const modalBus = createEventBus();

1
packages/frontend/editor-ui/src/components/ChatEmbedModal.vue
View File

@ -11,6 +11,7 @@ import JsEditor from '@/components/JsEditor/JsEditor.vue';
import { useI18n } from '@n8n/i18n';
import { I18nT } from 'vue-i18n';
import { N8nButton, N8nInfoTip, N8nLink, N8nTabs, N8nText } from '@n8n/design-system';
const props = withDefaults(
defineProps<{
modalBus?: EventBus;

3
packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
View File

@ -3,7 +3,7 @@ import { ref, computed, onMounted } from 'vue';
import snakeCase from 'lodash/snakeCase';
import { useSessionStorage } from '@vueuse/core';
import { N8nButton, N8nInput, N8nTooltip } from '@n8n/design-system/components';
import { N8nButton, N8nCircleLoader, N8nIcon, N8nInput, N8nTooltip } from '@n8n/design-system';
import { randomInt } from 'n8n-workflow';
import type { CodeExecutionMode, INodeExecutionData } from 'n8n-workflow';
@ -25,7 +25,6 @@ import {
ASK_AI_LOADING_DURATION_MS,
} from '@/constants';
import type { AskAiRequest } from '@/types/assistant.types';
const emit = defineEmits<{
submit: [code: string];
replaceCode: [code: string];

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

@ -21,7 +21,9 @@ import { useSettingsStore } from '@/stores/settings.store';
import { dropInCodeEditor } from '@/plugins/codemirror/dragAndDrop';
import type { TargetNodeParameterContext } from '@/Interface';
import { valueToInsert } from './utils';
import DraggableTarget from '@/components/DraggableTarget.vue';
import { ElTabPane, ElTabs } from 'element-plus';
export type CodeNodeLanguageOption = CodeNodeEditorLanguage | 'pythonNative';
type Props = {
@ -116,7 +118,7 @@ watch([() => props.language, () => props.mode], (_, [prevLanguage, prevMode]) =>
}
});
async function onBeforeTabLeave(_activeName: string, oldActiveName: string) {
async function onBeforeTabLeave(_activeName: string | number, oldActiveName: string | number) {
// Confirm dialog if leaving ask-ai tab during loading
if (oldActiveName === 'ask-ai' && isLoadingAIResponse.value) {
const confirmModal = await message.alert(i18n.baseText('codeNodeEditor.askAi.sureLeaveTab'), {

2
packages/frontend/editor-ui/src/components/CollectionParameter.vue
View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { ref, computed } from 'vue';
import ParameterInputList from '@/components/ParameterInputList.vue';
import type { IUpdateInformation } from '@/Interface';
import type {
@ -17,6 +18,7 @@ import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useI18n } from '@n8n/i18n';
import { storeToRefs } from 'pinia';
import { N8nButton, N8nOption, N8nSelect, N8nText } from '@n8n/design-system';
const selectedOption = ref<string | undefined>(undefined);
export interface Props {
hideDelete?: boolean;

2
packages/frontend/editor-ui/src/components/CollectionWorkflowCard.vue
View File

@ -1,4 +1,6 @@
<script lang="ts" setup>
import { N8nCard, N8nLoading } from '@n8n/design-system';
defineProps<{
loading: boolean;
title?: string;

8
packages/frontend/editor-ui/src/components/CommunityPackageCard.vue
View File

@ -10,6 +10,14 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { computed, ref, watch } from 'vue';
import semver from 'semver';
import {
N8nActionToggle,
N8nButton,
N8nIcon,
N8nLoading,
N8nText,
N8nTooltip,
} from '@n8n/design-system';
interface Props {
communityPackage?: PublicInstalledPackage | null;
loading?: boolean;

2
packages/frontend/editor-ui/src/components/CommunityPackageInstallModal.vue
View File

@ -14,6 +14,8 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useI18n } from '@n8n/i18n';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { ElCheckbox } from 'element-plus';
import { N8nButton, N8nInput, N8nInputLabel, N8nLink, N8nText } from '@n8n/design-system';
const communityNodesStore = useCommunityNodesStore();
const toast = useToast();

4
packages/frontend/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
View File

@ -11,11 +11,13 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import type { CommunityNodeType } from '@n8n/api-types';
import { useSettingsStore } from '@/stores/settings.store';
import semver from 'semver';
import { N8nText } from '@n8n/design-system';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import type { WorkflowResource } from '@/Interface';
import { N8nButton, N8nNotice, N8nText } from '@n8n/design-system';
import NodesInWorkflowTable from '@/components/NodesInWorkflowTable.vue';
export type CommunityPackageManageMode = 'uninstall' | 'update' | 'view-documentation';
interface Props {

2
packages/frontend/editor-ui/src/components/CommunityPlusEnrollmentModal.vue
View File

@ -2,7 +2,6 @@
import { ref } from 'vue';
import { createEventBus } from '@n8n/utils/event-bus';
import type { Validatable, IValidator } from '@n8n/design-system';
import { N8nFormInput } from '@n8n/design-system';
import { VALID_EMAIL_REGEX, COMMUNITY_PLUS_DOCS_URL } from '@/constants';
import Modal from '@/components/Modal.vue';
import { useI18n } from '@n8n/i18n';
@ -11,6 +10,7 @@ import { useUsageStore } from '@/stores/usage.store';
import { useTelemetry } from '@/composables/useTelemetry';
import { useUsersStore } from '@/stores/users.store';
import { N8nButton, N8nFormInput, N8nText } from '@n8n/design-system';
const props = defineProps<{
modalName: string;
data?: {

1
packages/frontend/editor-ui/src/components/ConfirmPasswordModal/ConfirmPasswordModal.vue
View File

@ -7,6 +7,7 @@ import type { IFormInputs, IFormInput, FormValues } from '@/Interface';
import { useI18n } from '@n8n/i18n';
import { confirmPasswordEventBus } from './confirm-password.event-bus';
import { N8nButton, N8nFormInputs, N8nText } from '@n8n/design-system';
const config = ref<IFormInputs | null>(null);
const formBus = createFormEventBus();
const loading = ref(false);

1
packages/frontend/editor-ui/src/components/ConsumedTokensDetails.vue
View File

@ -3,7 +3,6 @@ import { useI18n } from '@n8n/i18n';
import { type LlmTokenUsageData } from '@/Interface';
import { formatTokenUsageCount } from '@/utils/aiUtils';
import { N8nText } from '@n8n/design-system';
const { consumedTokens } = defineProps<{ consumedTokens: LlmTokenUsageData }>();
const i18n = useI18n();
</script>

1
packages/frontend/editor-ui/src/components/ContactPromptModal.vue
View File

@ -11,6 +11,7 @@ import { useToast } from '@/composables/useToast';
import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
import { useTelemetry } from '@/composables/useTelemetry';
import { N8nButton, N8nHeading, N8nInput, N8nText } from '@n8n/design-system';
defineProps<{
modalName: ModalKey;
}>();

2
packages/frontend/editor-ui/src/components/ContextMenu/ContextMenu.vue
View File

@ -2,10 +2,10 @@
import { useContextMenu } from '@/composables/useContextMenu';
import { type ContextMenuAction } from '@/composables/useContextMenuItems';
import { useStyles } from '@/composables/useStyles';
import { N8nActionDropdown } from '@n8n/design-system';
import { ref, watch } from 'vue';
import { type ComponentExposed } from 'vue-component-type-helpers';
import { N8nActionDropdown } from '@n8n/design-system';
const contextMenu = useContextMenu();
const { position, isOpen, actions, target } = contextMenu;
const dropdown = ref<ComponentExposed<typeof N8nActionDropdown>>();

1
packages/frontend/editor-ui/src/components/CopyInput.vue
View File

@ -3,6 +3,7 @@ import { useClipboard } from '@/composables/useClipboard';
import { useI18n } from '@n8n/i18n';
import { useToast } from '@/composables/useToast';
import { N8nInputLabel } from '@n8n/design-system';
type Props = {
label?: string;
hint?: string;

1
packages/frontend/editor-ui/src/components/CredentialCard.vue
View File

@ -14,6 +14,7 @@ import { useI18n } from '@n8n/i18n';
import { ResourceType } from '@/utils/projects.utils';
import type { CredentialsResource } from '@/Interface';
import { N8nActionToggle, N8nBadge, N8nCard, N8nText } from '@n8n/design-system';
const CREDENTIAL_LIST_ITEM_ACTIONS = {
OPEN: 'open',
DELETE: 'delete',

7
packages/frontend/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue
View File

@ -18,6 +18,8 @@ import type {
} from 'n8n-workflow';
import { computed, onMounted, ref } from 'vue';
import { ElRadio } from 'element-plus';
import { N8nInputLabel } from '@n8n/design-system';
export interface Props {
credentialType: ICredentialType;
}
@ -107,8 +109,9 @@ function shouldShowAuthOption(option: NodeAuthenticationOption): boolean {
return shouldDisplay;
}
function onAuthTypeChange(newType: string): void {
emit('authTypeChanged', newType);
function onAuthTypeChange(newType: string | number | boolean): void {
const stringValue = typeof newType === 'string' ? newType : String(newType);
emit('authTypeChanged', stringValue);
}
function valueChanged(data: IUpdateInformation): void {

14
packages/frontend/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
View File

@ -31,9 +31,16 @@ import CredentialInputs from './CredentialInputs.vue';
import GoogleAuthButton from './GoogleAuthButton.vue';
import OauthButton from './OauthButton.vue';
import { useAssistantStore } from '@/stores/assistant.store';
import InlineAskAssistantButton from '@n8n/design-system/components/InlineAskAssistantButton/InlineAskAssistantButton.vue';
import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
import {
N8nInlineAskAssistantButton,
N8nCallout,
N8nInfoTip,
N8nLink,
N8nNotice,
N8nText,
} from '@n8n/design-system';
type Props = {
mode: string;
credentialType: ICredentialType;
@ -316,7 +323,10 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
:class="$style.askAssistantButton"
data-test-id="credential-edit-ask-assistant-button"
>
<InlineAskAssistantButton :asked="assistantAlreadyAsked" @click="onAskAssistantClick" />
<N8nInlineAskAssistantButton
:asked="assistantAlreadyAsked"
@click="onAskAssistantClick"
/>
<span>for setup instructions</span>
</div>

8
packages/frontend/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View File

@ -35,7 +35,6 @@ import { useSettingsStore } from '@/stores/settings.store';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import type { Project, ProjectSharingData } from '@/types/projects.types';
import { N8nInlineTextEdit, N8nText, type IMenuItem } from '@n8n/design-system';
import { getResourcePermissions } from '@n8n/permissions';
import { assert } from '@n8n/utils/assert';
import { createEventBus } from '@n8n/utils/event-bus';
@ -54,6 +53,13 @@ import { useI18n } from '@n8n/i18n';
import { useElementSize } from '@vueuse/core';
import { useRouter } from 'vue-router';
import {
N8nIconButton,
N8nInlineTextEdit,
N8nMenu,
N8nText,
type IMenuItem,
} from '@n8n/design-system';
type Props = {
modalName: string;
activeId?: string;

2
packages/frontend/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
View File

@ -2,8 +2,8 @@
import TimeAgo from '../TimeAgo.vue';
import { useI18n } from '@n8n/i18n';
import type { ICredentialsDecryptedResponse, ICredentialsResponse } from '@/Interface';
import { ElCol, ElRow } from 'element-plus';
import { N8nText } from '@n8n/design-system';
type Props = {
currentCredential: ICredentialsResponse | ICredentialsDecryptedResponse | null;
};

1
packages/frontend/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
View File

@ -8,6 +8,7 @@ import type { IUpdateInformation } from '@/Interface';
import ParameterInputExpanded from '../ParameterInputExpanded.vue';
import { computed } from 'vue';
import { N8nNotice } from '@n8n/design-system';
type Props = {
credentialProperties: INodeProperties[];
credentialData: ICredentialDataDecryptedObject;

1
packages/frontend/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
View File

@ -17,6 +17,7 @@ import type { EventBus } from '@n8n/utils/event-bus';
import type { ICredentialDataDecryptedObject } from 'n8n-workflow';
import { computed, onMounted, ref, watch } from 'vue';
import { N8nActionBox, N8nInfoTip } from '@n8n/design-system';
type Props = {
credentialId: string;
credentialData: ICredentialDataDecryptedObject;

1
packages/frontend/editor-ui/src/components/CredentialEdit/OauthButton.vue
View File

@ -2,6 +2,7 @@
import { useI18n } from '@n8n/i18n';
import GoogleAuthButton from './GoogleAuthButton.vue';
import { N8nButton } from '@n8n/design-system';
defineProps<{
isGoogleOAuthType: boolean;
}>();

2
packages/frontend/editor-ui/src/components/CredentialIcon.vue
View File

@ -4,10 +4,10 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useRootStore } from '@n8n/stores/useRootStore';
import { useUIStore } from '@/stores/ui.store';
import { getThemedValue } from '@/utils/nodeTypesUtils';
import { N8nNodeIcon } from '@n8n/design-system';
import type { ICredentialType } from 'n8n-workflow';
import { computed } from 'vue';
import { N8nNodeIcon } from '@n8n/design-system';
const props = defineProps<{
credentialTypeName: string | null;
}>();

1
packages/frontend/editor-ui/src/components/CredentialPicker/CredentialPicker.vue
View File

@ -7,6 +7,7 @@ import CredentialsDropdown from './CredentialsDropdown.vue';
import { useI18n } from '@n8n/i18n';
import { CREDENTIAL_EDIT_MODAL_KEY } from '@/constants';
import { N8nButton, N8nIconButton } from '@n8n/design-system';
const props = defineProps<{
appName: string;
credentialType: string;

1
packages/frontend/editor-ui/src/components/CredentialPicker/CredentialsDropdown.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { useI18n } from '@n8n/i18n';
import { N8nOption, N8nSelect, N8nText } from '@n8n/design-system';
export type CredentialOption = {
id: string;
name: string;

2
packages/frontend/editor-ui/src/components/CredentialsSelect.vue
View File

@ -4,10 +4,10 @@ import { computed, ref } from 'vue';
import ScopesNotice from '@/components/ScopesNotice.vue';
import NodeCredentials from '@/components/NodeCredentials.vue';
import { useCredentialsStore } from '@/stores/credentials.store';
import { N8nOption, N8nSelect } from '@n8n/design-system';
import type { INodeUi, INodeUpdatePropertiesInformation } from '@/Interface';
import { useI18n } from '@n8n/i18n';
import { N8nOption, N8nSelect } from '@n8n/design-system';
type Props = {
activeCredentialType: string;
parameter: INodeProperties;

2
packages/frontend/editor-ui/src/components/CredentialsSelectModal.vue
View File

@ -4,13 +4,13 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useCredentialsStore } from '@/stores/credentials.store';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { N8nButton, N8nSelect } from '@n8n/design-system';
import { createEventBus } from '@n8n/utils/event-bus';
import { onMounted, ref } from 'vue';
import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
import Modal from './Modal.vue';
import { useI18n } from '@n8n/i18n';
import { N8nButton, N8nIcon, N8nOption, N8nSelect } from '@n8n/design-system';
const externalHooks = useExternalHooks();
const telemetry = useTelemetry();
const i18n = useI18n();

1
packages/frontend/editor-ui/src/components/CssEditor/CssEditor.vue
View File

@ -23,6 +23,7 @@ import { editorKeymap } from '@/plugins/codemirror/keymap';
import { n8nAutocompletion } from '@/plugins/codemirror/n8nLang';
import { codeEditorTheme } from '../CodeNodeEditor/theme';
import type { TargetNodeParameterContext } from '@/Interface';
import DraggableTarget from '@/components/DraggableTarget.vue';
type Props = {
modelValue: string;

1
packages/frontend/editor-ui/src/components/DebugPaywallModal.vue
View File

@ -2,6 +2,7 @@
import Modal from '@/components/Modal.vue';
import { useI18n } from '@n8n/i18n';
import { N8nButton, N8nLink, N8nText } from '@n8n/design-system';
const props = defineProps<{
modalName: string;
data: { title: string; footerButtonAction: () => void };

2
packages/frontend/editor-ui/src/components/DeleteUserModal.vue
View File

@ -9,6 +9,8 @@ import { createEventBus } from '@n8n/utils/event-bus';
import type { ProjectSharingData } from '@/types/projects.types';
import { useI18n } from '@n8n/i18n';
import { ElRadio } from 'element-plus';
import { N8nButton, N8nInput, N8nInputLabel, N8nText } from '@n8n/design-system';
const props = defineProps<{
modalName: string;
data: {

1
packages/frontend/editor-ui/src/components/DuplicateWorkflowDialog.vue
View File

@ -15,6 +15,7 @@ import { useI18n } from '@n8n/i18n';
import { useTelemetry } from '@/composables/useTelemetry';
import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
import { N8nButton, N8nInput } from '@n8n/design-system';
const props = defineProps<{
modalName: string;
isActive: boolean;

12
packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue
View File

@ -22,12 +22,16 @@ import { MAX_DISPLAY_DATA_SIZE, NEW_ASSISTANT_SESSION_MODAL, VIEWS } from '@/con
import type { BaseTextKey } from '@n8n/i18n';
import { useAssistantStore } from '@/stores/assistant.store';
import type { ChatRequest } from '@/types/assistant.types';
import InlineAskAssistantButton from '@n8n/design-system/components/InlineAskAssistantButton/InlineAskAssistantButton.vue';
import { useUIStore } from '@/stores/ui.store';
import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
import { useAIAssistantHelpers } from '@/composables/useAIAssistantHelpers';
import { N8nIconButton } from '@n8n/design-system';
import {
N8nInlineAskAssistantButton,
N8nButton,
N8nIcon,
N8nIconButton,
N8nTooltip,
} from '@n8n/design-system';
type Props = {
// TODO: .node can be undefined
error: NodeError | NodeApiError | NodeOperationError;
@ -479,7 +483,7 @@ async function onAskAssistantClick() {
class="node-error-view__button"
data-test-id="node-error-view-ask-assistant-button"
>
<InlineAskAssistantButton :asked="assistantAlreadyAsked" @click="onAskAssistantClick" />
<N8nInlineAskAssistantButton :asked="assistantAlreadyAsked" @click="onAskAssistantClick" />
</div>
</div>

1
packages/frontend/editor-ui/src/components/Evaluations.ee/ListRuns/MetricsChart.vue
View File

@ -4,6 +4,7 @@ import { computed, watchEffect } from 'vue';
import { Line } from 'vue-chartjs';
import { useMetricsChart } from '../composables/useMetricsChart';
import { N8nOption, N8nSelect } from '@n8n/design-system';
const emit = defineEmits<{
'update:selectedMetric': [value: string];
}>();

2
packages/frontend/editor-ui/src/components/Evaluations.ee/ListRuns/TestRunsTable.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts">
import type { TestRunRecord } from '@/api/evaluation.ee';
import { useI18n } from '@n8n/i18n';
import { N8nIcon, N8nText } from '@n8n/design-system';
import { computed } from 'vue';
import type { TestTableColumn } from '../shared/TestTableBase.vue';
import type { BaseTextKey } from '@n8n/i18n';
@ -9,6 +8,7 @@ import TestTableBase from '../shared/TestTableBase.vue';
import { statusDictionary } from '../shared/statusDictionary';
import { getErrorBaseKey } from '@/components/Evaluations.ee/shared/errorCodes';
import { I18nT } from 'vue-i18n';
import { N8nHeading, N8nIcon, N8nText, N8nTooltip } from '@n8n/design-system';
const emit = defineEmits<{
rowClick: [run: TestRunRecord & { index: number }];
}>();

1
packages/frontend/editor-ui/src/components/Evaluations.ee/Paywall/EvaluationsPaywall.vue
View File

@ -3,6 +3,7 @@ import { useI18n } from '@n8n/i18n';
import { COMMUNITY_PLUS_ENROLLMENT_MODAL } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { N8nActionBox } from '@n8n/design-system';
const i18n = useI18n();
const uiStore = useUIStore();

2
packages/frontend/editor-ui/src/components/Evaluations.ee/SetupWizard/SetupWizard.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { useI18n } from '@n8n/i18n';
import { N8nText, N8nButton, N8nCallout } from '@n8n/design-system';
import { ref, computed } from 'vue';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useEvaluationStore } from '@/stores/evaluation.store.ee';
@ -11,6 +10,7 @@ import { useUsageStore } from '@/stores/usage.store';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
import { I18nT } from 'vue-i18n';
import { N8nButton, N8nCallout, N8nText } from '@n8n/design-system';
defineEmits<{
runTest: [];
}>();

2
packages/frontend/editor-ui/src/components/Evaluations.ee/shared/StepHeader.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import { N8nText, N8nBadge } from '@n8n/design-system';
import StepIndicator from './StepIndicator.vue';
import { useI18n } from '@n8n/i18n';
import { N8nBadge, N8nText } from '@n8n/design-system';
defineProps<{
stepNumber: number;
title: string;

Some files were not shown because too many files have changed in this diff Show More