3 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/language_switcher/components/app.vue b/app/assets/javascripts/language_switcher/components/app.vue
new file mode 100644
index 00000000000..71babe6c614
--- /dev/null
+++ b/app/assets/javascripts/language_switcher/components/app.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlCollapsibleListbox } from '@gitlab/ui';
+import { setCookie } from '~/lib/utils/common_utils';
+import { PREFERRED_LANGUAGE_COOKIE_KEY } from '../constants';
+
+export default {
+  components: {
+    GlCollapsibleListbox,
+  },
+  inject: {
+    locales: {
+      default: [],
+    },
+    preferredLocale: {
+      default: {},
+    },
+  },
+  data() {
+    return {
+      selected: this.preferredLocale.value,
+    };
+  },
+  methods: {
+    onLanguageSelected(code) {
+      setCookie(PREFERRED_LANGUAGE_COOKIE_KEY, code);
+      window.location.reload();
+    },
+  },
+};
+</script>
+<template>
+  <gl-collapsible-listbox
+    v-model="selected"
+    :toggle-text="preferredLocale.text"
+    :items="locales"
+    category="tertiary"
+    right
+    icon="earth"
+    size="small"
+    toggle-class="py-0 gl-h-6"
+    @select="onLanguageSelected"
+  >
+    <template #list-item="{ item: locale }">
+      <span :data-testid="`language_switcher_lang_${locale.value}`">
+        {{ locale.text }}
+      </span>
+    </template>
+  </gl-collapsible-listbox>
+</template>
diff --git a/app/assets/javascripts/language_switcher/constants.js b/app/assets/javascripts/language_switcher/constants.js
new file mode 100644
index 00000000000..b5c0613ac01
--- /dev/null
+++ b/app/assets/javascripts/language_switcher/constants.js
@@ -0,0 +1 @@
+export const PREFERRED_LANGUAGE_COOKIE_KEY = 'preferred_language';
diff --git a/app/assets/javascripts/language_switcher/index.js b/app/assets/javascripts/language_switcher/index.js
new file mode 100644
index 00000000000..b224e2510bb
--- /dev/null
+++ b/app/assets/javascripts/language_switcher/index.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import { getCookie } from '~/lib/utils/common_utils';
+import LanguageSwitcher from './components/app.vue';
+import { PREFERRED_LANGUAGE_COOKIE_KEY } from './constants';
+
+export const initLanguageSwitcher = () => {
+  const el = document.querySelector('.js-language-switcher');
+  if (!el) return false;
+  const locales = JSON.parse(el.dataset.locales);
+  const preferredLangCode = getCookie(PREFERRED_LANGUAGE_COOKIE_KEY);
+  const preferredLocale = locales.find((locale) => locale.value === preferredLangCode);
+
+  return new Vue({
+    el,
+    provide: {
+      locales,
+      preferredLocale,
+    },
+    render(createElement) {
+      return createElement(LanguageSwitcher);
+    },
+  });
+};