fix: Add improvements to the Help Center module (#6081)

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

@@ -40,6 +40,7 @@
         :portals="portals"
         :active-portal-slug="selectedPortalSlug"
         :active-locale="selectedLocaleInPortal"
+        @fetch-portal="fetchPortalAndItsCategories"
         @close-popover="closePortalPopover"
       />
       <add-category
@@ -226,12 +227,6 @@ export default {
     },
   },
 
-  watch: {
-    '$route.params.portalSlug'() {
-      this.fetchPortalsAndItsCategories();
-    },
-  },
-
   mounted() {
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
@@ -240,7 +235,7 @@ export default {
     const slug = this.$route.params.portalSlug;
     if (slug) this.lastActivePortalSlug = slug;
 
-    this.fetchPortalsAndItsCategories();
+    this.fetchPortalAndItsCategories();
   },
   beforeDestroy() {
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
@@ -267,7 +262,7 @@ export default {
     toggleSidebar() {
       this.isSidebarOpen = !this.isSidebarOpen;
     },
-    async fetchPortalsAndItsCategories() {
+    async fetchPortalAndItsCategories() {
       await this.$store.dispatch('portals/index');
       const selectedPortalParam = {
         portalSlug: this.selectedPortalSlug,

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

@@ -248,7 +248,7 @@ export default {
       this.$emit('open-site', this.portal.slug);
     },
     openSettings() {
-      this.fetchPortalsAndItsCategories();
+      this.fetchPortalAndItsCategories();
       this.navigateToPortalEdit();
     },
     onClickOpenDeleteModal(portal) {
@@ -258,12 +258,18 @@ export default {
     closeDeletePopup() {
       this.showDeleteConfirmationPopup = false;
     },
-    fetchPortalsAndItsCategories() {
+    async fetchPortalAndItsCategories() {
-      this.$store.dispatch('portals/index').then(() => {
+      await this.$store.dispatch('portals/index');
-        this.$store.dispatch('categories/index', {
+      const {
-          portalSlug: this.portal.slug,
+        slug,
-        });
+        config: { allowed_locales: allowedLocales },
-      });
+      } = this.portal;
+      const selectedPortalParam = {
+        portalSlug: slug,
+        locale: allowedLocales[0].code,
+      };
+      this.$store.dispatch('portals/show', selectedPortalParam);
+      this.$store.dispatch('categories/index', selectedPortalParam);
     },
     async onClickDeletePortal() {
       const { slug } = this.selectedPortalForDelete;

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

@@ -36,7 +36,8 @@
         :active-portal-slug="activePortalSlug"
         :active-locale="activeLocale"
         :active="portal.slug === activePortalSlug"
-        @open-portal-page="onPortalSelect"
+        @open-portal-page="closePortalPopover"
+        @fetch-portal="fetchPortalAndItsCategories"
       />
     </div>
   </div>
@@ -69,15 +70,15 @@ export default {
     closePortalPopover() {
       this.$emit('close-popover');
     },
-    onPortalSelect() {
-      this.$emit('close-popover');
-    },
     openPortalPage() {
       this.closePortalPopover();
       this.$router.push({
         name: 'list_all_portals',
       });
     },
+    fetchPortalAndItsCategories() {
+      this.$emit('fetch-portal');
+    },
   },
 };
 </script>

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

@@ -16,7 +16,7 @@
             {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL') }}
           </label>
           <div class="logo-container">
-            <thumbnail :username="name" size="56" variant="square" />
+            <thumbnail :username="name" size="56px" variant="square" />
             <woot-button
               v-if="false"
               class="upload-button"

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

@@ -121,6 +121,7 @@ export default {
           locale: code,
         },
       });
+      this.$emit('fetch-portal');
       this.$emit('open-portal-page');
     },
     isLocaleActive(code, slug) {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue

@@ -33,7 +33,7 @@
     </header>
     <div class="category-list">
       <category-list-item
-        :categories="categoryByLocaleCode"
+        :categories="categoriesByLocaleCode"
         @delete="deleteCategory"
         @edit="openEditCategoryModal"
       />
@@ -91,7 +91,7 @@ export default {
     currentPortalSlug() {
       return this.$route.params.portalSlug;
     },
-    categoryByLocaleCode() {
+    categoriesByLocaleCode() {
       return this.$store.getters['categories/categoriesByLocaleCode'](
         this.currentLocaleCode
       );
@@ -131,6 +131,12 @@ export default {
     closeEditCategoryModal() {
       this.showEditCategoryModal = false;
     },
+    async fetchCategoriesByPortalSlugAndLocale(localeCode) {
+      await this.$store.dispatch('categories/index', {
+        portalSlug: this.currentPortalSlug,
+        locale: localeCode,
+      });
+    },
     async deleteCategory(categoryId) {
       try {
         await this.$store.dispatch('categories/delete', {
@@ -152,6 +158,7 @@ export default {
     changeCurrentCategory(event) {
       const localeCode = event.target.value;
       this.currentLocaleCode = localeCode;
+      this.fetchCategoriesByPortalSlugAndLocale(localeCode);
     },
   },
 };

app/javascript/dashboard/store/modules/helpCenterArticles/actions.js

@@ -41,11 +41,11 @@ export const actions = {
         portalSlug,
         articleObj,
       });
-      const { id: articleId, portal } = payload;
+      const { id: articleId } = payload;
       commit(types.ADD_ARTICLE, payload);
       commit(types.ADD_ARTICLE_ID, articleId);
       commit(types.ADD_ARTICLE_FLAG, articleId);
-      dispatch('portals/updatePortal', portal, { root: true });
+      dispatch('portals/updatePortal', portalSlug, { root: true });
       return articleId;
     } catch (error) {
       return throwErrorMessage(error);