feat: Make it possible to dynamically load community nodes (#2849)
* ✨ Make it possible to dynamically load node packages * ⚡ Fix comment * ✨ Make possible to dynamically install nodes from npm * Created migration for sqlite regarding community nodes * Saving to db whenever a package with nodes is installed * Created endpoint to fetch installed packages * WIP - uninstall package with nodes * Fix lint issues * Updating nodes via API * Lint and improvement fixes * Created community node helpers and removed packages taht do not contain nodes * Check for package updates when fetching installed packages * Blocked access to non-owner and preventing incorrect install of packages * Added auto healing process * Unit tests for helpers * Finishing tests for helpers * Improved unit tests, refactored more helpers and created integration tests for GET * Implemented detection of missing packages on init and added warning to frontend settings * Add check for banned packages and fix broken tests * Create migrations for other db systems * Updated with latest changes from master * Fixed conflict errors * Improved unit tests, refactored more helpers and created integration tests for GET * Implemented detection of missing packages on init and added warning to frontend settings * 🔥 Removing access check for the Settings sidebar item * ✨ Added inital community nodes settings screen * ⚡Added executionMode flag to settings * ✨ Implemented N8N-callout component * 💄Updating Callout component template propery names * 💄 Updating Callout component styling. * 💄Updating Callout component sizing and colors. * ✔️ Updating Callout component test snapshots after styling changes * ✨ Updating the `ActionBox` component so it supports callouts and conditional button rendering * 💄 Removing duplicate callout theme validation in the `ActionBox` component. Adding a selection control for it in the storybook. * ✨ Added warning message if instance is in the queue mode. Updated colors based on the new design. * ⚡ Added a custom permission support to router * 🔨 Implemented UM detection as a custom permission. * 👌Updating route permission logic. * ✨ Implemented installed community packages list in the settings view * 👌 Updating settings routes rules and community nodes setting view. * Allow installation of packages that failed to load * 👌 Updating `ActionBox`, `CommuntyPackageCard` components and settings loading logic. * 👌 Fixing community nodes loading state and sidebar icon spacing. * ✨ Implemented loading skeletons for community package cards * 👌 Handling errrors while loading installed package list. Updating spacing. * 👌 Updating community nodes error messages. * Added disable flag * 🐛 Fixing a community nodes update detection bug when there are missing packages. (#3497) * ✨ Added front-end support for community nodes feature flag * ✨ Implemented community package installation modal dialog * 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state. * ✨ Implemented community packages install flow * Standardize error codes (#3501) * Standardize error: 400 for request issues such as invalid package name and 500 for installation problems * Fix http status code for when package is not found * ✨ Implemented community package installation modal dialog * 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state. * ✨ Implemented community packages install flow * ✨ Updated error handling based on the response codes * ✨ Implemented community package installation modal dialog * ✨ Implemented community package uninstall flow. * ✨ Finished update confirm modal UI * 💄 Replaced community nodes tooltip image with the one exported from figma. * ✨ Implemented community package update process * ✨ Updating community nodes list after successful package update * 🔒 Updating public API setting route to use new access rules. Updating express app definition in community nodes tests * ✨ Implemented community package installation modal dialog * 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state. * ✨ Implemented community packages install flow * ✨ Updated error handling based on the response codes * Change output for installation request * Improve payload for update requests * 👌 Updating community nodes install modal UI * 👌 Updating community nodes confirm modal logic * 👌 Refactoring community nodes confirm modal dialog * 👌 Separating community nodes components loading states * 💄 Updating community nodes install modal spacing. * Fix behavior for installing already installed packages * 💡 Commenting community nodes install process * 🔥 Removing leftover commits of deleted Vue mutations * ✨ Updated node list to identify community nodes and handle node name clash * ✨ Implemented missing community node dialog. * 💄 Updating n8n-tabs component to support tooltips * ✨ Updating node details with community node details. * 🔨 Using back-end response when updating community packages * 👌 Updating tabs component and refactoring community nodes store mutations * 👌 Adding community node flag to node type descriptions and using it to identify community nodes * 👌 Hiding unnecessary elements from missing node details panel. * 👌 Updating missing node type descriptions for custom and community nodes * 👌 Updating community node package name detection logic * 👌 Removing communityNode flag from node description * ✨ Adding `force` flag to credentials fetching (#3527) * ✨ Adding `force` flag to credentials fetching which can be used to skip check when loading credentials * ✨ Forcing credentials loading when opening nodeView * 👌 Minor updates to community nodes details panel * tests for post endpoint * duplicate comments * Add Patch and Delete enpoints tests * 🔒 Using `pageCategory`prop to assemble the list of settings routes instead of hard-coded array (#3562) * 📈 Added front-end telemetry events for community nodes * 📈 Updating community nodes telemetry events * 💄 Updating community nodes settings UI elements based on product/design review * 💄 Updating node view & node details view for community nodes based on product/design feedback * 💄 Fixing community node text capitalisation * ✨ Adding community node install error message under the package name input field * Fixed and improved tests * Fix lint issue * feat: Migrated to npm release of riot-tmpl fork. * 📈 Updating community nodes telemetry events based on the product review * 💄 Updating community nodes UI based on the design feedback * 🔀 Merging recent node draggable panels changes * Implement self healing process * Improve error messages for package name requirement and disk space * 💄 Removing front-end error message override since appropriate response is available from the back-end * Fix lint issues * Fix installed node name * 💄 Removed additional node name parsing * 📈 Updating community nodes telemetry events * Fix postgres migration for cascading nodes when package is removed * Remove postman mock for banned packages * 📈 Adding missing telemetry event for community node documentation click * 🐛 Fixing community nodes UI bugs reported during the bug bash * Fix issue with uninstalling packages not reflecting UI * 🐛 Fixing a missing node type bug when trying to run a workflow. * Improve error detection for installing packages * 💄 Updating community nodes components styling and wording based on the product feedback * Implement telemetry be events * Add author name and email to packages * Fix telemetry be events for community packages * 📈 Updating front-end telemetry events with community nodes author data * 💄 Updating credentials documentation link logic to handle community nodes credentials * 🐛 Fixing draggable panels logic * Fix duplicate wrong import * 💄 Hiding community nodes credentials documentation links when they don't contain an absolute URL * Fix issue with detection of missing packages * 💄 Adding the `Docs` tab to community nodes * 💄 Adding a failed loading indicator to community nodes list * Prevent n8n from crashing on startup * Refactor and improve code quality * ⚡ Remove not needed depenedency Co-authored-by: Omar Ajoue <krynble@gmail.com> Co-authored-by: Milorad Filipović <milorad@n8n.io> Co-authored-by: Milorad FIlipović <miloradfilipovic19@gmail.com> Co-authored-by: agobrech <ael.gobrecht@gmail.com> Co-authored-by: Alex Grozav <alex@grozav.com>
This commit is contained in:
Jan Oberhauser
GitHub
@@ -5,6 +5,12 @@ export default {
|
||||
title: 'Atoms/ActionBox',
|
||||
component: N8nActionBox,
|
||||
argTypes: {
|
||||
calloutTheme: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['info', 'success', 'warning', 'danger', 'custom'],
|
||||
},
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
backgrounds: { default: '--color-background-light' },
|
||||
|
||||
@@ -3,12 +3,15 @@
|
||||
<div :class="$style.heading" v-if="props.heading">
|
||||
<component :is="$options.components.N8nHeading" size="xlarge" align="center">{{ props.heading }}</component>
|
||||
</div>
|
||||
<div :class="$style.description">
|
||||
<div :class="$style.description" @click="(e) => listeners.descriptionClick && listeners.descriptionClick(e)">
|
||||
<n8n-text color="text-base"><span v-html="props.description"></span></n8n-text>
|
||||
</div>
|
||||
<component :is="$options.components.N8nButton" :label="props.buttonText" size="large"
|
||||
<component v-if="props.buttonText" :is="$options.components.N8nButton" :label="props.buttonText" size="large"
|
||||
@click="(e) => listeners.click && listeners.click(e)"
|
||||
/>
|
||||
<component v-if="props.calloutText" :is="$options.components.N8nCallout"
|
||||
:theme="props.calloutTheme" :message="props.calloutText" :icon="props.calloutIcon"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -16,6 +19,7 @@
|
||||
import N8nButton from '../N8nButton';
|
||||
import N8nHeading from '../N8nHeading';
|
||||
import N8nText from '../N8nText';
|
||||
import N8nCallout from '../N8nCallout';
|
||||
|
||||
export default {
|
||||
name: 'n8n-action-box',
|
||||
@@ -29,11 +33,22 @@ export default {
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
calloutText: {
|
||||
type: String,
|
||||
},
|
||||
calloutTheme: {
|
||||
type: String,
|
||||
default: 'info',
|
||||
},
|
||||
calloutIcon: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
N8nButton,
|
||||
N8nHeading,
|
||||
N8nText,
|
||||
N8nCallout,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -61,6 +76,7 @@ export default {
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--color-text-base);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -15,6 +15,15 @@
|
||||
:disabled="action.disabled"
|
||||
>
|
||||
{{action.label}}
|
||||
<div :class="$style.iconContainer">
|
||||
<component
|
||||
v-if="action.type === 'external-link'"
|
||||
:is="$options.components.N8nIcon"
|
||||
icon="external-link-alt"
|
||||
size="xsmall"
|
||||
color="text-base"
|
||||
/>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
@@ -100,4 +109,12 @@ export default {
|
||||
background-color: var(--color-background-xlight);
|
||||
}
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li:hover .iconContainer svg {
|
||||
color: var(--color-primary-tint-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import N8nCallout from './Callout.vue';
|
||||
import { StoryFn } from '@storybook/vue';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Callout',
|
||||
component: N8nCallout,
|
||||
argTypes: {
|
||||
theme: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['info', 'success', 'warning', 'danger', 'custom'],
|
||||
},
|
||||
},
|
||||
message: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
icon: {
|
||||
control: {
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const template : StoryFn = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nCallout,
|
||||
},
|
||||
template: `<n8n-callout v-bind="$props"></n8n-callout>`,
|
||||
});
|
||||
|
||||
export const callout = template.bind({});
|
||||
callout.args = {
|
||||
theme: 'custom',
|
||||
icon: 'code-branch',
|
||||
message: 'This is a callout. <a href="https://n8n.io" target="_blank">Read more.</a>',
|
||||
};
|
||||
103
packages/design-system/src/components/N8nCallout/Callout.vue
Normal file
103
packages/design-system/src/components/N8nCallout/Callout.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div :class="classes" role="alert">
|
||||
<div :class="$style.icon">
|
||||
<n8n-icon v-bind="$attrs" :icon="getIcon" size="large"/>
|
||||
</div>
|
||||
<div :class="$style.message" >
|
||||
<n8n-text size="small" v-bind="$attrs"><span v-html="message"></span></n8n-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import N8nIcon from '../N8nIcon';
|
||||
import N8nText from '../N8nText';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'n8n-callout',
|
||||
components: {
|
||||
N8nIcon,
|
||||
N8nText
|
||||
},
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value: string): boolean =>
|
||||
['info', 'success', 'warning', 'danger', 'custom'].includes(value),
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'info-circle'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultIcons: {
|
||||
'info': 'info-circle',
|
||||
'success': 'check-circle',
|
||||
'warning': 'exclamation-triangle',
|
||||
'danger': 'times-circle',
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes(): string[] {
|
||||
return [
|
||||
this.$style['callout'],
|
||||
this.$style[this.theme],
|
||||
];
|
||||
},
|
||||
getIcon(): string {
|
||||
if(this.theme === 'custom') {
|
||||
return this.icon;
|
||||
}
|
||||
return this.defaultIcons[this.theme];
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.callout {
|
||||
display: flex;
|
||||
font-size: var(--font-size-2xs);
|
||||
padding: var(--spacing-xs);
|
||||
border: var(--border-width-base) var(--border-style-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info, .custom {
|
||||
border-color: var(--color-foreground-base);
|
||||
background-color: var(--color-background-light);
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-color: var(--color-warning-tint-1);
|
||||
background-color: var(--color-warning-tint-2);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.success {
|
||||
border-color: var(--color-success-tint-1);
|
||||
background-color: var(--color-success-tint-2);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.danger {
|
||||
border-color: var(--color-danger-tint-1);
|
||||
background-color: var(--color-danger-tint-2);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
import { render } from '@testing-library/vue';
|
||||
import N8nCallout from '../Callout.vue';
|
||||
|
||||
describe('components', () => {
|
||||
describe('N8NCallout', () => {
|
||||
describe('props', () => {
|
||||
it('should render info theme correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'info',
|
||||
message: 'This is an info callout.',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
it('should render success theme correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'success',
|
||||
message: 'This is an success callout.',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
it('should render warning theme correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'warning',
|
||||
message: 'This is an warning callout.',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
it('should render danger theme correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'danger',
|
||||
message: 'This is an danger callout.',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
it('should render custom theme correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'custom',
|
||||
message: 'This is an custom callout.',
|
||||
icon: 'code',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('content', () => {
|
||||
it('should render custom HTML content correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'custom',
|
||||
message: 'This is an HTML callout. <a href="#" target="_blank"><b>Read more</b></a>',
|
||||
icon: 'code',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
it('should pass props to text component correctly', () => {
|
||||
const wrapper = render(N8nCallout, {
|
||||
props: {
|
||||
theme: 'warning',
|
||||
message: 'This is a callout.',
|
||||
bold: true,
|
||||
align: 'center',
|
||||
tag: 'p',
|
||||
},
|
||||
stubs: [
|
||||
'n8n-icon',
|
||||
'n8n-text',
|
||||
],
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
// Vitest Snapshot v1
|
||||
|
||||
exports[`components > N8NCallout > content > should pass props to text component correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _warning_a6gr6_16\\" bold=\\"true\\" align=\\"center\\" tag=\\"p\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\" bold=\\"true\\" align=\\"center\\" tag=\\"p\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub bold=\\"true\\" size=\\"small\\" align=\\"center\\" tag=\\"p\\"><span>This is a callout.</span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`components > N8NCallout > content > should render custom HTML content correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _custom_a6gr6_10\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"code\\" size=\\"large\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an HTML callout. <a href=\\"#\\" target=\\"_blank\\"><b>Read more</b></a></span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`components > N8NCallout > props > should render custom theme correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _custom_a6gr6_10\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"code\\" size=\\"large\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an custom callout.</span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`components > N8NCallout > props > should render danger theme correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _danger_a6gr6_28\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an danger callout.</span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`components > N8NCallout > props > should render info theme correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _info_a6gr6_10\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an info callout.</span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`components > N8NCallout > props > should render success theme correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _success_a6gr6_22\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an success callout.</span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`components > N8NCallout > props > should render warning theme correctly 1`] = `
|
||||
"<div role=\\"alert\\" class=\\"_callout_a6gr6_1 _warning_a6gr6_16\\">
|
||||
<div class=\\"_icon_a6gr6_34\\">
|
||||
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text-stub size=\\"small\\" tag=\\"span\\"><span>This is an warning callout.</span></n8n-text-stub>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
@@ -0,0 +1,3 @@
|
||||
import N8nCallout from './Callout.vue';
|
||||
|
||||
export default N8nCallout;
|
||||
@@ -10,7 +10,7 @@ export default {
|
||||
size: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['small', 'medium', 'large'],
|
||||
options: ['xsmall', 'small', 'medium', 'large'],
|
||||
},
|
||||
},
|
||||
spin: {
|
||||
|
||||
@@ -37,6 +37,7 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -59,4 +60,8 @@ export default {
|
||||
.small {
|
||||
width: var(--font-size-2xs) !important;
|
||||
}
|
||||
|
||||
.xsmall {
|
||||
width: var(--font-size-3xs) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,28 +7,35 @@
|
||||
<n8n-icon icon="chevron-right" size="small" />
|
||||
</div>
|
||||
<div ref="tabs" :class="$style.tabs">
|
||||
<div v-for="option in options" :key="option.value" :class="{ [$style.alignRight]: option.align === 'right' }">
|
||||
<a
|
||||
v-if="option.href"
|
||||
target="_blank"
|
||||
:href="option.href"
|
||||
:class="[$style.link, $style.tab]"
|
||||
@click="() => handleTabClick(option.value)"
|
||||
>
|
||||
<div>
|
||||
{{ option.label }}
|
||||
<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
|
||||
</div>
|
||||
</a>
|
||||
<div v-for="option in options"
|
||||
:key="option.value"
|
||||
:id="option.value"
|
||||
:class="{ [$style.alignRight]: option.align === 'right' }"
|
||||
>
|
||||
<n8n-tooltip :disabled="!option.tooltip" placement="bottom">
|
||||
<div slot="content" v-html="option.tooltip" @click="handleTooltipClick(option.value, $event)"></div>
|
||||
<a
|
||||
v-if="option.href"
|
||||
target="_blank"
|
||||
:href="option.href"
|
||||
:class="[$style.link, $style.tab]"
|
||||
@click="() => handleTabClick(option.value)"
|
||||
>
|
||||
<div>
|
||||
{{ option.label }}
|
||||
<span :class="$style.external"><n8n-icon icon="external-link-alt" size="small" /></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
v-else
|
||||
:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
|
||||
@click="() => handleTabClick(option.value)"
|
||||
>
|
||||
<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
|
||||
<span v-if="option.label">{{ option.label }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
:class="{ [$style.tab]: true, [$style.activeTab]: value === option.value }"
|
||||
@click="() => handleTabClick(option.value)"
|
||||
>
|
||||
<n8n-icon v-if="option.icon" :icon="option.icon" size="medium" />
|
||||
<span v-if="option.label">{{ option.label }}</span>
|
||||
</div>
|
||||
</n8n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,6 +89,9 @@ export default Vue.extend({
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleTooltipClick(tab: string, event: MouseEvent) {
|
||||
this.$emit('tooltipClick', tab, event);
|
||||
},
|
||||
handleTabClick(tab: string) {
|
||||
this.$emit('input', tab);
|
||||
},
|
||||
|
||||
@@ -39,6 +39,7 @@ import N8nActionToggle from './N8nActionToggle';
|
||||
import N8nAvatar from './N8nAvatar';
|
||||
import N8nBadge from './N8nBadge';
|
||||
import N8nButton from './N8nButton';
|
||||
import N8nCallout from './N8nCallout';
|
||||
import N8nCard from './N8nCard';
|
||||
import N8nFormBox from './N8nFormBox';
|
||||
import N8nFormInput from './N8nFormInput';
|
||||
@@ -80,6 +81,7 @@ export {
|
||||
N8nAvatar,
|
||||
N8nBadge,
|
||||
N8nButton,
|
||||
N8nCallout,
|
||||
N8nCard,
|
||||
N8nHeading,
|
||||
N8nFormBox,
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
);
|
||||
|
||||
--color-warning-tint-1-h: 35;
|
||||
--color-warning-tint-1-s: 78%;
|
||||
--color-warning-tint-1-s: 77%;
|
||||
--color-warning-tint-1-l: 84%;
|
||||
--color-warning-tint-1: hsl(
|
||||
var(--color-warning-h),
|
||||
@@ -146,9 +146,9 @@
|
||||
var(--color-warning-tint-2-l)
|
||||
);
|
||||
|
||||
--color-danger-h: 0;
|
||||
--color-danger-s: 87.6%;
|
||||
--color-danger-l: 65.3%;
|
||||
--color-danger-h: 355;
|
||||
--color-danger-s: 83%;
|
||||
--color-danger-l: 52%;
|
||||
--color-danger: hsl(
|
||||
var(--color-danger-h),
|
||||
var(--color-danger-s),
|
||||
|
||||
Reference in New Issue
Block a user