diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-20 17:22:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-20 17:22:11 +0300 |
commit | 0c872e02b2c822e3397515ec324051ff540f0cd5 (patch) | |
tree | ce2fb6ce7030e4dad0f4118d21ab6453e5938cdd /app/assets/javascripts/nav | |
parent | f7e05a6853b12f02911494c4b3fe53d9540d74fc (diff) |
Add latest changes from gitlab-org/gitlab@15-7-stable-eev15.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/nav')
-rw-r--r-- | app/assets/javascripts/nav/components/new_nav_toggle.vue | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/nav/components/new_nav_toggle.vue b/app/assets/javascripts/nav/components/new_nav_toggle.vue new file mode 100644 index 00000000000..ef59140115d --- /dev/null +++ b/app/assets/javascripts/nav/components/new_nav_toggle.vue @@ -0,0 +1,71 @@ +<script> +import { GlBadge, GlToggle } from '@gitlab/ui'; +import axios from '~/lib/utils/axios_utils'; +import { createAlert } from '~/flash'; +import { s__ } from '~/locale'; + +export default { + i18n: { + badgeLabel: s__('NorthstarNavigation|Alpha'), + sectionTitle: s__('NorthstarNavigation|Navigation redesign'), + toggleMenuItemLabel: s__('NorthstarNavigation|New navigation'), + toggleLabel: s__('NorthstarNavigation|Toggle new navigation'), + updateError: s__( + 'NorthstarNavigation|Could not update the new navigation preference. Please try again later.', + ), + }, + components: { + GlBadge, + GlToggle, + }, + props: { + enabled: { + type: Boolean, + required: true, + }, + endpoint: { + type: String, + required: true, + }, + }, + data() { + return { + isEnabled: this.enabled, + }; + }, + methods: { + async toggleNav() { + try { + await axios.put(this.endpoint, { user: { use_new_navigation: !this.enabled } }); + window.location.reload(); + } catch (error) { + createAlert({ + message: this.$options.i18n.updateError, + error, + }); + } + }, + }, +}; +</script> + +<template> + <li> + <div + class="gl-px-4 gl-py-2 gl-display-flex gl-justify-content-space-between gl-align-items-center" + > + <b>{{ $options.i18n.sectionTitle }}</b> + <gl-badge>{{ $options.i18n.badgeLabel }}</gl-badge> + </div> + + <div class="menu-item gl-display-flex! gl-justify-content-space-between gl-align-items-center"> + {{ $options.i18n.toggleMenuItemLabel }} + <gl-toggle + v-model="isEnabled" + :label="$options.i18n.toggleLabel" + label-position="hidden" + @change="toggleNav" + /> + </div> + </li> +</template> |