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"

8edb68dbffa0aa0d8189117e1a53381cb2c27608

* 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"

ae42781786f2e6dcfb00d1be770b19a67f533bdf

Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

packages/editor-ui/src/App.vue

@@ -28,10 +28,13 @@ import { showMessage } from './components/mixins/showMessage';
 import { IUser } from './Interface';
 import { mapGetters } from 'vuex';
 import { userHelpers } from './components/mixins/userHelpers';
+import { addHeaders, loadLanguage } from './plugins/i18n';
+import { restApi } from '@/components/mixins/restApi';
 
 export default mixins(
 	showMessage,
 	userHelpers,
+	restApi,
 ).extend({
 	name: 'App',
 	components: {
@@ -42,6 +45,9 @@ export default mixins(
 	computed: {
 		...mapGetters('settings', ['isHiringBannerEnabled', 'isTemplatesEnabled', 'isTemplatesEndpointReachable', 'isUserManagementEnabled', 'showSetupPage']),
 		...mapGetters('users', ['currentUser']),
+		defaultLocale (): string {
+			return this.$store.getters.defaultLocale;
+		},
 	},
 	data() {
 		return {
@@ -79,7 +85,7 @@ export default mixins(
 			}
 		},
 		logHiringBanner() {
-			if (!this.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
+			if (this.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
 				console.log(HIRING_BANNER); // eslint-disable-line no-console
 			}
 		},
@@ -143,8 +149,8 @@ export default mixins(
 		},
 	},
 	async mounted() {
-		this.logHiringBanner();
 		await this.initialize();
+		this.logHiringBanner();
 		this.authenticate();
 		this.redirectIfNecessary();
 
@@ -152,6 +158,11 @@ export default mixins(
 
 		this.trackPage();
 		this.$externalHooks().run('app.mount');
+
+		if (this.defaultLocale !== 'en') {
+			const headers = await this.restApi().getNodeTranslationHeaders();
+			if (headers) addHeaders(headers, this.defaultLocale);
+		}
 	},
 	watch: {
 		$route(route) {
@@ -160,6 +171,9 @@ export default mixins(
 
 			this.trackPage();
 		},
+		defaultLocale(newLocale) {
+			loadLanguage(newLocale);
+		},
 	},
 });
 </script>