fix(editor): Fix i18n issues (#3072)

* 🐛 Fix `defaultLocale` watcher * ⚡ Improve error handling for headers * ✏️ Improve naming * 🐛 Fix hiring banner check * ⚡ Flatten base text keys * ⚡ Fix miscorrected key * ⚡ Implement pluralization * ✏️ Update docs * 🚚 Move headers fetching to `App.vue` * fix hiring banner * ⚡ Fix missing import * ✏️ Alphabetize translations * ⚡ Switch to async check * feat(editor): Refactor Output Panel + fix i18n issues (#3097) * update main panel * finish up tabs * fix docs link * add icon * update node settings * clean up settings * add rename modal * fix component styles * fix spacing * truncate name * remove mixin * fix spacing * fix spacing * hide docs url * fix bug * fix renaming * refactor tabs out * refactor execute button * refactor header * add more views * fix error view * fix workflow rename bug * rename component * fix small screen bug * move items, fix positions * add hover state * show selector on empty state * add empty run state * fix binary view * 1 item * add vjs styles * show empty row for every item * refactor tabs * add branch names * fix spacing * fix up spacing * add run selector * fix positioning * clean up * increase width of selector * fix up spacing * fix copy button * fix branch naming; type issues * fix docs in custom nodes * add type * hide items when run selector is shown * increase selector size * add select prepend * clean up a bit * Add pagination * add stale icon * enable stale data in execution run * Revert "enable stale data in execution run" 8edb68d * move metadata to its own state * fix smaller size * add scroll buttons * update tabs on resize * update stale data on rename * remove metadata on delete * hide x * change title colors * binary data classes * remove duplicate css * add colors * delete unused keys * use event bus * update styles of pagination * fix ts issues * fix ts issues * use chevron icons * fix design with download button * add back to canvas button * add trigger warning disabled * show trigger warning tooltip * update button labels for triggers * update node output message * fix add-option bug * add page selector * fix pagination selector bug * fix executions bug * remove hint * add json colors * add colors for json * add color json keys * fix select options bug * update keys * address comments * update name limit * align pencil * update icon size * update radio buttons height * address comments * fix pencil bug * change buttons alignment * fully center * change order of buttons * add no output message in branch * scroll to top * change active state * fix page size * all items * update expression background * update naming * align pencil * update modal background * add schedule group * update schedule nodes messages * use ellpises for last chars * fix spacing * fix tabs issue * fix too far data bug * fix executions bug * fix table wrapping * fix rename bug * add padding * handle unkown errors * add sticky header * ignore empty input, trim node name * nudge lightness of color * center buttons * update pagination * set colors of title * increase table font, fix alignment * fix pencil bug * fix spacing * use date now * address pagination issues * delete unused keys * update keys sort * fix prepend * fix radio button position * Revert "fix radio button position" ae42781 Co-authored-by: Mutasem <[email protected]> Co-authored-by: Mutasem Aldmour <[email protected]>
n8n-io · Apr 11, 2022 · 4ae0f5b · 4ae0f5b
1 parent 94a52b9
commit 4ae0f5b
Show file tree

Hide file tree

Showing 45 changed files with 2,568 additions and 2,028 deletions.
diff --git a/packages/cli/src/Server.ts b/packages/cli/src/Server.ts
@@ -30,7 +30,7 @@
 /* eslint-disable no-await-in-loop */
 
 import express from 'express';
-import { readFileSync } from 'fs';
+import { readFileSync, promises } from 'fs';
 import { readFile } from 'fs/promises';
 import _, { cloneDeep } from 'lodash';
 import { dirname as pathDirname, join as pathJoin, resolve as pathResolve } from 'path';
@@ -1503,10 +1503,17 @@ class App {
 				async (req: express.Request, res: express.Response): Promise<object | void> => {
 					const packagesPath = pathJoin(__dirname, '..', '..', '..');
 					const headersPath = pathJoin(packagesPath, 'nodes-base', 'dist', 'nodes', 'headers');
+
+					try {
+						await promises.access(`${headersPath}.js`);
+					} catch (_) {
+						return; // no headers available
+					}
+
 					try {
 						return require(headersPath);
 					} catch (error) {
-						res.status(500).send('Failed to find headers file');
+						res.status(500).send('Failed to load headers file');
 					}
 				},
 			),

diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -2,6 +2,7 @@
 	<component
 		:is="$options.components.N8nText"
 		:size="props.size"
+		:color="props.color"
 		:compact="true"
 	>
 		<component
@@ -36,6 +37,8 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		color: {
+		},
 	},
 };
 </script>

diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.js b/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.js
@@ -11,7 +11,13 @@ const Template = (args, { argTypes }) => ({
 		N8nInfoTip,
 	},
 	template:
-		'<n8n-info-tip>Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
+		'<n8n-info-tip v-bind="$props">Need help doing something? <a href="/docs" target="_blank">Open docs</a></n8n-info-tip>',
 });
 
-export const InputLabel = Template.bind({});
+export const Note = Template.bind({});
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+	type: 'tooltip',
+	tooltipPlacement: 'right',
+};
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -1,23 +1,48 @@
-<template functional>
-	<div :class="$style.infotip">
-		<component :is="$options.components.N8nIcon" icon="info-circle" /> <span><slot></slot></span>
+<template>
+	<div :class="[$style[theme], $style[type]]">
+		<n8n-tooltip :placement="tooltipPlacement" :popper-class="$style.tooltipPopper" :disabled="type !== 'tooltip'">
+			<span>
+				<n8n-icon :icon="theme.startsWith('info') ? 'info-circle': 'exclamation-triangle'" />
+				<span v-if="type === 'note'"><slot></slot></span>
+			</span>
+			<span v-if="type === 'tooltip'" slot="content"><slot></slot></span>
+		</n8n-tooltip>
 	</div>
 </template>
 
 <script lang="ts">
 import N8nIcon from '../N8nIcon';
+import N8nTooltip from '../N8nTooltip';
 
 export default {
 	name: 'n8n-info-tip',
 	components: {
 		N8nIcon,
+		N8nTooltip,
+	},
+	props: {
+		theme: {
+			type: String,
+			default: 'info',
+			validator: (value: string): boolean =>
+				['info', 'info-light', 'warning', 'danger'].includes(value),
+		},
+		type: {
+			type: String,
+			default: 'note',
+			validator: (value: string): boolean =>
+				['note', 'tooltip'].includes(value),
+		},
+		tooltipPlacement: {
+			type: String,
+			default: 'top',
+		},
 	},
 };
 </script>
 
 <style lang="scss" module>
-.infotip {
-	color: var(--color-text-light);
+.base {
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	line-height: var(--font-size-s);
@@ -27,7 +52,35 @@ export default {
 
 	svg {
 		font-size: var(--font-size-s);
+	}
+}
+
+.note {
+	composes: base;
+
+	svg {
 		margin-right: var(--spacing-4xs);
 	}
 }
+
+.tooltip {
+	composes: base;
+	display: inline-block;
+}
+
+.info-light {
+	color: var(--color-foreground-dark);
+}
+
+.info {
+	color: var(--color-text-light);
+}
+
+.warning {
+	color: var(--color-warning);
+}
+
+.danger {
+	color: var(--color-danger);
+}
 </style>
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -0,0 +1,66 @@
+<template>
+	<label role="radio" tabindex="-1" :class="$style.container" aria-checked="true">
+		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
+		<div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div>
+	</label>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'n8n-radio-button',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		value: {
+			type: String,
+			required: true,
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.container {
+	display: inline-block;
+	outline: 0;
+	position: relative;
+
+	&:hover {
+		.button:not(.active) {
+			color: var(--color-primary);
+		}
+	}
+}
+
+.input {
+	opacity: 0;
+	outline: 0;
+	z-index: -1;
+	position: absolute;
+}
+
+.button {
+	border-radius: 0;
+	padding: 0 var(--spacing-s);
+	display: flex;
+	align-items: center;
+	height: 26px;
+	font-size: var(--font-size-2xs);
+	border-radius: var(--border-radius-base);
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text-base);
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+.active {
+	background-color: var(--color-foreground-xlight);
+	color: var(--color-text-dark);
+}
+</style>
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.js b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.js
@@ -0,0 +1,51 @@
+import N8nRadioButtons from './RadioButtons.vue';
+
+import { action } from '@storybook/addon-actions';
+
+export default {
+	title: 'Atoms/RadioButtons',
+	component: N8nRadioButtons,
+	argTypes: {
+	},
+	parameters: {
+		backgrounds: { default: '--color-background-xlight' },
+	},
+};
+
+const methods = {
+	onInput: action('input'),
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nRadioButtons,
+	},
+	template:
+		`<n8n-radio-buttons v-model="val" v-bind="$props" @input="onInput">
+		</n8n-radio-buttons>`,
+	methods,
+	data() {
+		return {
+			val: '',
+		};
+	},
+});
+
+export const Example = Template.bind({});
+Example.args = {
+	options: [
+		{
+			label: 'Test',
+			value: 'test',
+		},
+		{
+			label: 'World',
+			value: 'world',
+		},
+		{
+			label: 'Hello',
+			value: 'hello',
+		},
+	],
+};
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -0,0 +1,49 @@
+<template>
+	<div role="radiogroup" :class="$style.radioGroup">
+		<RadioButton
+			v-for="option in options"
+			:key="option.value"
+			v-bind="option"
+			:active="value === option.value"
+			@click="(e) => onClick(option.value, e)"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import RadioButton from './RadioButton';
+
+export default {
+	name: 'n8n-radio-buttons',
+	props: {
+		value: {
+			type: String,
+		},
+		options: {
+		},
+	},
+	components: {
+		RadioButton,
+	},
+	methods: {
+		onClick(value) {
+			this.$emit('input', value);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+
+.radioGroup {
+	display: inline-flex;
+	line-height: 1;
+	vertical-align: middle;
+	font-size: 0;
+	background-color: var(--color-foreground-base);
+	padding: var(--spacing-5xs);
+	border-radius: var(--border-radius-base);
+}
+
+</style>
+
diff --git a/packages/design-system/src/components/N8nRadioButtons/index.js b/packages/design-system/src/components/N8nRadioButtons/index.js
@@ -0,0 +1,3 @@
+import N8nRadioButtons from './RadioButtons.vue';
+
+export default N8nRadioButtons;