1 files changed, 24 insertions, 2 deletions
diff --git a/app/assets/javascripts/language_switcher/components/app.vue b/app/assets/javascripts/language_switcher/components/app.vue
index 71babe6c614..4d3fe22e247 100644
--- a/app/assets/javascripts/language_switcher/components/app.vue
+++ b/app/assets/javascripts/language_switcher/components/app.vue
@@ -1,11 +1,17 @@
 <script>
-import { GlCollapsibleListbox } from '@gitlab/ui';
+import { GlCollapsibleListbox, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
 import { setCookie } from '~/lib/utils/common_utils';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { PREFERRED_LANGUAGE_COOKIE_KEY } from '../constants';
 
+const HELP_TRANSLATE_MSG = __('Help translate to your language');
+const HELP_TRANSLATE_HREF = helpPagePath('/development/i18n/translation.md');
+
 export default {
   components: {
     GlCollapsibleListbox,
+    GlLink,
   },
   inject: {
     locales: {
@@ -25,7 +31,12 @@ export default {
       setCookie(PREFERRED_LANGUAGE_COOKIE_KEY, code);
       window.location.reload();
     },
+    itemTestSelector(locale) {
+      return `language_switcher_lang_${locale}`;
+    },
   },
+  HELP_TRANSLATE_MSG,
+  HELP_TRANSLATE_HREF,
 };
 </script>
 <template>
@@ -41,9 +52,20 @@ export default {
     @select="onLanguageSelected"
   >
     <template #list-item="{ item: locale }">
-      <span :data-testid="`language_switcher_lang_${locale.value}`">
+      <span
+        :data-testid="itemTestSelector(locale.value)"
+        :data-qa-selector="itemTestSelector(locale.value)"
+      >
         {{ locale.text }}
       </span>
     </template>
+    <template #footer>
+      <div
+        class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-justify-content-center gl-p-3"
+        data-testid="footer"
+      >
+        <gl-link :href="$options.HELP_TRANSLATE_HREF">{{ $options.HELP_TRANSLATE_MSG }}</gl-link>
+      </div>
+    </template>
   </gl-collapsible-listbox>
 </template>