Restore i18n post-UM

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');
 					}
 				},
 			),

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>

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',
+};

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>

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>

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',
+		},
+	],
+};

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>
+

packages/design-system/src/components/N8nRadioButtons/index.js

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