fix: Fixes bug with locale switching from popover (#5426)

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

@@ -10,7 +10,7 @@
       v-if="portals.length"
       :class="sidebarClassName"
       :header-title="headerTitle"
-      :sub-title="localeName(selectedPortalLocale)"
+      :sub-title="localeName(selectedLocaleInPortal)"
       :accessible-menu-items="accessibleMenuItems"
       :additional-secondary-menu-items="additionalSecondaryMenuItems"
       @open-popover="openPortalPopover"
@@ -32,13 +32,14 @@
         v-if="showPortalPopover"
         :portals="portals"
         :active-portal-slug="selectedPortalSlug"
+        :active-locale="selectedLocaleInPortal"
         @close-popover="closePortalPopover"
       />
       <add-category
         v-if="showAddCategoryModal"
         :show.sync="showAddCategoryModal"
         :portal-name="selectedPortalName"
-        :locale="selectedPortalLocale"
+        :locale="selectedLocaleInPortal"
         :portal-slug="selectedPortalSlug"
         @cancel="onClickCloseAddCategoryModal"
       />
@@ -96,6 +97,9 @@ export default {
 
       return this.$store.getters['portals/allPortals'][0];
     },
+    selectedLocaleInPortal() {
+      return this.$route.params.locale || this.defaultPortalLocale;
+    },
     sidebarClassName() {
       if (this.isOnDesktop) {
         return '';
@@ -120,7 +124,7 @@ export default {
     selectedPortalSlug() {
       return this.selectedPortal ? this.selectedPortal?.slug : '';
     },
-    selectedPortalLocale() {
+    defaultPortalLocale() {
       return this.selectedPortal
         ? this.selectedPortal?.meta?.default_locale
         : '';
@@ -142,7 +146,7 @@ export default {
           key: 'list_all_locale_articles',
           count: allArticlesCount,
           toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedPortalLocale}/articles`
+            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles`
           ),
           toolTip: 'All Articles',
           toStateName: 'list_all_locale_articles',
@@ -153,7 +157,7 @@ export default {
           key: 'list_mine_articles',
           count: mineArticlesCount,
           toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedPortalLocale}/articles/mine`
+            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/mine`
           ),
           toolTip: 'My articles',
           toStateName: 'list_mine_articles',
@@ -164,7 +168,7 @@ export default {
           key: 'list_draft_articles',
           count: draftArticlesCount,
           toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedPortalLocale}/articles/draft`
+            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/draft`
           ),
           toolTip: 'Draft',
           toStateName: 'list_draft_articles',
@@ -175,7 +179,7 @@ export default {
           key: 'list_archived_articles',
           count: archivedArticlesCount,
           toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedPortalLocale}/articles/archived`
+            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/archived`
           ),
           toolTip: 'Archived',
           toStateName: 'list_archived_articles',

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

@@ -34,18 +34,11 @@
         :key="portal.id"
         :portal="portal"
         :active-portal-slug="activePortalSlug"
+        :active-locale="activeLocale"
         :active="portal.slug === activePortalSlug"
         @open-portal-page="onPortalSelect"
       />
     </div>
-    <footer>
-      <woot-button variant="link" @click="closePortalPopover">
-        {{ $t('HELP_CENTER.PORTAL.POPOVER.CANCEL_BUTTON_LABEL') }}
-      </woot-button>
-      <woot-button @click="() => {}">
-        {{ $t('HELP_CENTER.PORTAL.POPOVER.CHOOSE_LOCALE_BUTTON') }}
-      </woot-button>
-    </footer>
   </div>
 </template>
 
@@ -66,6 +59,10 @@ export default {
       type: String,
       default: '',
     },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
   },
 
   methods: {
@@ -125,12 +122,5 @@ export default {
       }
     }
   }
-
-  footer {
-    display: flex;
-    justify-content: end;
-    align-items: center;
-    gap: var(--space-small);
-  }
 }
 </style>

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

@@ -19,13 +19,13 @@
         />
       </header>
       <div class="portal-locales">
-        <h5 class="locale-title">
+        <h5 class="locale-title sub-block-title">
           {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
         </h5>
         <ul>
           <li v-for="locale in locales" :key="locale.code">
             <woot-button
-              :class="
+              :variant="
                 `locale-item ${
                   isLocaleActive(locale.code, activePortalSlug)
                     ? 'smooth'
@@ -38,7 +38,7 @@
             >
               <div class="locale-content">
                 <div class="meta">
-                  <h6 class="text-block-title text-left">
+                  <h6 class="text-block-title text-left locale-name">
                     <span>
                       {{ localeName(locale.code) }}
                     </span>
@@ -90,6 +90,10 @@ export default {
       type: String,
       default: '',
     },
+    activeLocale: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -129,7 +133,7 @@ export default {
     },
     isLocaleActive(code, slug) {
       const isPortalActive = this.portal.slug === slug;
-      const isLocaleActive = this.portal?.meta?.default_locale === code;
+      const isLocaleActive = this.activeLocale === code;
       return isPortalActive && isLocaleActive;
     },
     isLocaleDefault(code) {
@@ -151,6 +155,7 @@ export default {
 
   &.active {
     border: 1px solid var(--w-400);
+    background: var(---25);
   }
 
   .actions-container {
@@ -177,15 +182,13 @@ export default {
       .portal-count {
         font-size: var(--font-size-mini);
         margin-bottom: 0;
-        color: var(--s-500);
+        color: var(--s-600);
       }
     }
 
     .portal-locales {
-      .locale-title {
+      .locale-name {
-        color: var(--s-600);
+        margin-bottom: var(--space-micro);
-        font-size: var(--font-size-default);
-        font-weight: var(--font-weight-medium);
       }
 
       .locale-content {
@@ -204,6 +207,7 @@ export default {
       .locale__radio {
         width: var(--space-large);
         margin-top: var(--space-tiny);
+        color: var(--g-600);
       }
 
       .add-locale-wrap {
@@ -227,7 +231,7 @@ export default {
 
     .locale-meta {
       display: flex;
-      color: var(--s-500);
+      color: var(--s-600);
       font-size: var(--font-size-small);
       text-align: left;
       line-height: var(--space-normal);