feat: Adds dropdown to switch locales from articles list page (#8402)

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -3,6 +3,7 @@
     "HEADER": {
       "FILTER": "Filter by",
       "SORT": "Sort by",
+      "LOCALE": "Locale",
       "SETTINGS_BUTTON": "Settings",
       "NEW_BUTTON": "New Article",
       "DROPDOWN_OPTIONS": {
@@ -15,6 +16,12 @@
         "MINE": "My Articles",
         "DRAFT": "Draft Articles",
         "ARCHIVED": "Archived Articles"
+      },
+      "LOCALE_SELECT": {
+        "TITLE": "Select locale",
+        "PLACEHOLDER": "Select locale",
+        "NO_RESULT": "No locale found",
+        "SEARCH_PLACEHOLDER": "Search locale"
       }
     },
     "EDIT_HEADER": {

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 bg-white dark:bg-slate-900"
+    class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 z-10 bg-white dark:bg-slate-900"
   >
     <div class="flex items-center">
       <woot-sidemenu-icon />
@@ -86,6 +86,45 @@
         size="small"
         color-scheme="secondary"
       />
+      <div class="relative">
+        <woot-button
+          v-if="shouldShowLocaleDropdown"
+          icon="globe"
+          color-scheme="secondary"
+          size="small"
+          variant="hollow"
+          @click="openLocaleDropdown"
+        >
+          <div class="flex justify-between w-full min-w-0 items-center">
+            <span
+              class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+            >
+              {{ selectedLocale }}
+              <Fluent-icon
+                class="dropdown-arrow"
+                icon="chevron-down"
+                size="14"
+              />
+            </span>
+          </div>
+        </woot-button>
+        <div
+          v-if="showLocaleDropdown"
+          v-on-clickaway="closeLocaleDropdown"
+          class="dropdown-pane dropdown-pane--open"
+        >
+          <multiselect-dropdown-items
+            :options="switchableLocales"
+            :has-thumbnail="false"
+            :selected-items="[selectedLocale]"
+            :input-placeholder="
+              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
+            "
+            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
+            @click="onClickSelectItem"
+          />
+        </div>
+      </div>
       <woot-button
         size="small"
         icon="add"
@@ -103,12 +142,15 @@ import { mixin as clickaway } from 'vue-clickaway';
 
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
+
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 export default {
   components: {
     FluentIcon,
     WootDropdownItem,
     WootDropdownMenu,
+    MultiselectDropdownItems,
   },
   mixins: [clickaway],
   props: {
@@ -124,16 +166,35 @@ export default {
       type: String,
       default: '',
     },
+    selectedLocale: {
+      type: String,
+      default: '',
+    },
     shouldShowSettings: {
       type: Boolean,
       default: false,
     },
+    allLocales: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       showSortByDropdown: false,
+      showLocaleDropdown: false,
     };
   },
+  computed: {
+    shouldShowLocaleDropdown() {
+      return this.allLocales.length > 1;
+    },
+    switchableLocales() {
+      return this.allLocales.filter(
+        locale => locale.name !== this.selectedLocale
+      );
+    },
+  },
   methods: {
     openFilterModal() {
       this.$emit('openModal');
@@ -146,8 +207,22 @@ export default {
       this.$emit('close');
       this.showSortByDropdown = false;
     },
+    openLocaleDropdown() {
+      this.showLocaleDropdown = true;
+    },
+    closeLocaleDropdown() {
+      this.showLocaleDropdown = false;
+    },
     onClickNewArticlePage() {
-      this.$emit('newArticlePage');
+      this.$emit('new-article-page');
+    },
+    onClickSelectItem(value) {
+      const { name, code } = value;
+      this.closeLocaleDropdown();
+      if (!name || name === this.selectedLocale) {
+        return;
+      }
+      this.$emit('change-locale', code);
     },
   },
 };
@@ -155,7 +230,7 @@ export default {
 
 <style scoped lang="scss">
 .dropdown-pane--open {
-  @apply top-12 right-[9.25rem];
+  @apply absolute top-10 right-0 z-50 min-w-[8rem];
 }
 .dropdown-arrow {
   @apply ml-1 rtl:ml-0 rtl:mr-1;

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -22,7 +22,7 @@
       v-if="isHelpCenterEnabled"
       class="flex h-full min-h-0 overflow-hidden flex-1 px-0 bg-white dark:bg-slate-900"
     >
-      <router-view />
+      <router-view @reload-locale="fetchPortalAndItsCategories" />
       <command-bar />
       <account-selector
         :show-account-modal="showAccountModal"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue

@@ -5,8 +5,11 @@
     <article-header
       :header-title="headerTitle"
       :count="meta.count"
+      :selected-locale="activeLocaleName"
+      :all-locales="allowedLocales"
       selected-value="Published"
-      @newArticlePage="newArticlePage"
+      @new-article-page="newArticlePage"
+      @change-locale="onChangeLocale"
     />
     <article-table
       :articles="articles"
@@ -32,6 +35,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import allLocales from 'shared/constants/locales.js';
 
 import Spinner from 'shared/components/Spinner.vue';
 import ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue';
@@ -58,6 +62,7 @@ export default {
       meta: 'articles/getMeta',
       isFetching: 'articles/isFetching',
       currentUserId: 'getCurrentUserID',
+      getPortalBySlug: 'portals/portalBySlug',
     }),
     selectedCategory() {
       return this.categories.find(
@@ -118,6 +123,28 @@ export default {
         ? this.selectedCategory.name
         : '';
     },
+    activeLocale() {
+      return this.$route.params.locale;
+    },
+    activeLocaleName() {
+      return allLocales[this.activeLocale];
+    },
+    portal() {
+      return this.getPortalBySlug(this.selectedPortalSlug);
+    },
+    allowedLocales() {
+      if (!this.portal) {
+        return [];
+      }
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.map(locale => {
+        return {
+          id: locale.code,
+          name: allLocales[locale.code],
+          code: locale.code,
+        };
+      });
+    },
   },
   watch: {
     $route() {
@@ -137,7 +164,7 @@ export default {
       this.$store.dispatch('articles/index', {
         pageNumber: pageNumber || this.pageNumber,
         portalSlug: this.$route.params.portalSlug,
-        locale: this.$route.params.locale,
+        locale: this.activeLocale,
         status: this.status,
         authorId: this.author,
         categorySlug: this.selectedCategorySlug,
@@ -152,6 +179,16 @@ export default {
         portalSlug: this.$route.params.portalSlug,
       });
     },
+    onChangeLocale(locale) {
+      this.$router.push({
+        name: 'list_all_locale_articles',
+        params: {
+          portalSlug: this.$route.params.portalSlug,
+          locale,
+        },
+      });
+      this.$emit('reload-locale');
+    },
   },
 };
 </script>