chore: Refactor sidebar components used in help center (#5695)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

@@ -196,6 +196,7 @@ export default {
           icon: 'folder',
           label: 'HELP_CENTER.CATEGORY',
           hasSubMenu: true,
+          showNewButton: true,
           key: 'category',
           children: this.categories.map(category => ({
             id: category.id,
@@ -218,7 +219,7 @@ export default {
   },
 
   watch: {
-    selectedPortal() {
+    '$route.params.portalSlug'() {
       this.fetchPortalsAndItsCategories();
     },
   },
@@ -239,7 +240,7 @@ export default {
   },
   updated() {
     const slug = this.$route.params.portalSlug;
-    if (slug) {
+    if (slug !== this.lastActivePortalSlug) {
       this.lastActivePortalSlug = slug;
       this.updateUISettings({
         last_active_portal_slug: slug,
@@ -260,7 +261,6 @@ export default {
     },
     async fetchPortalsAndItsCategories() {
       await this.$store.dispatch('portals/index');
-
       const selectedPortalParam = {
         portalSlug: this.selectedPortalSlug,
         locale: this.selectedLocaleInPortal,

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

@@ -376,7 +376,6 @@ export default {
         }
       }
       .portal-title {
-        color: var(--s-900);
         margin-bottom: 0;
       }
       .portal-count {
@@ -389,14 +388,17 @@ export default {
       }
     }
     .portal-locales {
-      margin-top: var(--space-medium);
-      margin-bottom: var(--space-small);
+      margin-bottom: var(--space-large);
       .locale-title {
         color: var(--s-800);
         font-weight: var(--font-weight-medium);
         margin-bottom: var(--space-small);
       }
     }
+
+    .portal--heading {
+      margin-bottom: var(--space-normal);
+    }
   }
   .portal-settings--icon {
     padding: var(--space-smaller);

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

@@ -12,16 +12,20 @@
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
         :menu-item="menuItem"
-        :is-help-center-sidebar="true"
       />
       <secondary-nav-item
         v-for="menuItem in additionalSecondaryMenuItems"
         :key="menuItem.key"
         :menu-item="menuItem"
-        :is-help-center-sidebar="true"
-        :is-category-empty="!hasCategory"
         @open="onClickOpenAddCatogoryModal"
       />
+      <p
+        v-if="!hasCategory"
+        key="empty-category-nessage"
+        class="empty-text text-muted"
+      >
+        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
+      </p>
     </transition-group>
   </div>
 </template>
@@ -123,4 +127,8 @@ export default {
     overflow-y: auto;
   }
 }
+
+.empty-text {
+  padding: var(--space-smaller) var(--space-normal);
+}
 </style>

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue

@@ -76,7 +76,7 @@ export default {
   justify-content: space-between;
   padding: var(--space-normal);
   margin: var(--space-minus-small);
-  margin-bottom: var(--space-small);
+  margin-bottom: var(--space-smaller);
   border-bottom: 1px solid var(--color-border-light);
 }
 

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

@@ -13,7 +13,7 @@ export default {
     } = this.uiSettings || {};
 
     if (lastActivePortalSlug)
-      this.$router.push({
+      this.$router.replace({
         name: 'list_all_locale_articles',
         params: {
           portalSlug: lastActivePortalSlug,
@@ -22,7 +22,7 @@ export default {
         replace: true,
       });
     else
-      this.$router.push({
+      this.$router.replace({
         name: 'list_all_portals',
         replace: true,
       });

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue

@@ -6,7 +6,7 @@
         'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
       )
     "
-    @submit="updateBasicSettings"
+    @submit="createPortal"
   />
 </template>
 
@@ -37,7 +37,7 @@ export default {
   },
 
   methods: {
-    async updateBasicSettings(portal) {
+    async createPortal(portal) {
       try {
         await this.$store.dispatch('portals/create', {
           portal,
@@ -45,16 +45,16 @@ export default {
         this.alertMessage = this.$t(
           'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
         );
+        this.$router.push({
+          name: 'portal_customization',
+          params: { portalSlug: portal.slug },
+        });
       } catch (error) {
         this.alertMessage =
           error?.message ||
           this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
       } finally {
         this.showAlert(this.alertMessage);
-        this.$router.push({
-          name: 'portal_customization',
-          params: { portalSlug: portal.slug },
-        });
       }
     },
   },