diff options
Diffstat (limited to 'app/assets/javascripts/language_switcher/components/app.vue')
-rw-r--r-- | app/assets/javascripts/language_switcher/components/app.vue | 26 |
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> |