chore: Moves portal slug as ID to query resources in vue store (#5359)

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

@@ -67,7 +67,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import { required, minLength } from 'vuelidate/lib/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
@@ -105,11 +104,8 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      selectedPortal: 'portals/getSelectedPortal',
-    }),
     selectedPortalSlug() {
-      return this.selectedPortal?.slug;
+      return this.$route.params.portalSlug;
     },
     nameError() {
       if (this.$v.name.$error) {

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

@@ -32,7 +32,7 @@
       <portal-popover
         v-if="showPortalPopover"
         :portals="portals"
-        :active-portal="selectedPortal"
+        :active-portal-slug="selectedPortalSlug"
         @close-popover="closePortalPopover"
       />
       <add-category
@@ -77,18 +77,24 @@ export default {
       showNotificationPanel: false,
       showPortalPopover: false,
       showAddCategoryModal: false,
+      lastActivePortalSlug: '',
     };
   },
 
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
-      selectedPortal: 'portals/getSelectedPortal',
       portals: 'portals/allPortals',
       categories: 'categories/allCategories',
       meta: 'portals/getMeta',
       isFetching: 'portals/isFetchingPortals',
     }),
+    selectedPortal() {
+      const slug = this.$route.params.portalSlug || this.lastActivePortalSlug;
+      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
+
+      return this.$store.getters['portals/allPortals'][0];
+    },
     sidebarClassName() {
       if (this.isOnDesktop) {
         return '';
@@ -111,12 +117,15 @@ export default {
       return this.selectedPortal ? this.selectedPortal.name : '';
     },
     selectedPortalSlug() {
-      return this.portalSlug || this.selectedPortal?.slug;
+      return this.selectedPortal ? this.selectedPortal?.slug : '';
     },
     selectedPortalLocale() {
-      return this.locale || this.selectedPortal?.meta?.default_locale;
+      return this.selectedPortal
+        ? this.selectedPortal?.meta?.default_locale
+        : '';
     },
     accessibleMenuItems() {
+      if (!this.selectedPortal) return [];
       const {
         meta: {
           all_articles_count: allArticlesCount,
@@ -192,22 +201,30 @@ export default {
       ];
     },
     currentRoute() {
-      return ' ';
+      return '  ';
     },
     headerTitle() {
-      return this.selectedPortal.name;
+      return this.selectedPortal ? this.selectedPortal.name : '';
     },
   },
   mounted() {
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
     bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+
+    const slug = this.$route.params.portalSlug;
+    if (slug) this.lastActivePortalSlug = slug;
+
     this.fetchPortalsAndItsCategories();
   },
   beforeDestroy() {
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
     window.removeEventListener('resize', this.handleResize);
   },
+  updated() {
+    const slug = this.$route.params.portalSlug;
+    if (slug) this.lastActivePortalSlug = slug;
+  },
   methods: {
     handleResize() {
       if (window.innerWidth > 1200) {

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

@@ -194,7 +194,7 @@ export default {
       this.$emit('open-site');
     },
     openSettings() {
-      this.$emit('open');
+      this.navigateToPortalEdit();
     },
     swapLocale() {
       this.$emit('swap');
@@ -202,6 +202,12 @@ export default {
     deleteLocale() {
       this.$emit('delete');
     },
+    navigateToPortalEdit() {
+      this.$router.push({
+        name: 'edit_portal_information',
+        params: { portalSlug: this.portal.slug },
+      });
+    },
   },
 };
 </script>

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

@@ -24,7 +24,7 @@
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
-        :active="portal.id === activePortal.id"
+        :active="portal.slug === activePortalSlug"
         @open-portal-page="openPortalPage"
       />
     </div>
@@ -32,7 +32,7 @@
       <woot-button variant="link" @click="closePortalPopover">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.CANCEL_BUTTON_LABEL') }}
       </woot-button>
-      <woot-button>
+      <woot-button @click="() => {}">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.CHOOSE_LOCALE_BUTTON') }}
       </woot-button>
     </footer>
@@ -52,11 +52,12 @@ export default {
       type: Array,
       default: () => [],
     },
-    activePortal: {
-      type: Object,
-      default: () => ({}),
+    activePortalSlug: {
+      type: String,
+      default: '',
     },
   },
+
   methods: {
     closePortalPopover() {
       this.$emit('close-popover');

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

@@ -58,7 +58,6 @@ export default {
     ...mapGetters({
       isFetching: 'articles/isFetching',
       articles: 'articles/articles',
-      selectedPortal: 'portals/getSelectedPortal',
     }),
     article() {
       return this.$store.getters['articles/articleById'](this.articleId);
@@ -67,7 +66,7 @@ export default {
       return this.$route.params.articleSlug;
     },
     selectedPortalSlug() {
-      return this.portalSlug || this.selectedPortal?.slug;
+      return this.$route.params.portalSlug;
     },
   },
   mounted() {

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

@@ -46,7 +46,6 @@ export default {
     ...mapGetters({
       articles: 'articles/allArticles',
       categories: 'categories/allCategories',
-      selectedPortal: 'portals/getSelectedPortal',
       uiFlags: 'articles/uiFlags',
       meta: 'articles/getMeta',
       isFetching: 'articles/isFetching',
@@ -64,7 +63,7 @@ export default {
       return this.isFetching && !this.articles.length;
     },
     selectedPortalSlug() {
-      return this.selectedPortal?.slug;
+      return this.$route.params.portalSlug;
     },
     selectedCategorySlug() {
       const { categorySlug } = this.$route.params;

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

@@ -46,7 +46,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      selectedPortal: 'portals/getSelectedPortal',
       currentUserID: 'getCurrentUserID',
       articles: 'articles/articles',
       categories: 'categories/allCategories',
@@ -58,7 +57,7 @@ export default {
       return { title: this.articleTitle, content: this.articleContent };
     },
     selectedPortalSlug() {
-      return this.portalSlug || this.selectedPortal?.slug;
+      return this.$route.params.portalSlug;
     },
     categoryId() {
       return this.categories.length ? this.categories[0].id : null;

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

@@ -86,7 +86,7 @@ export default {
     }),
     createdPortalSlug() {
       const {
-        params: { portal_slug: slug },
+        params: { portalSlug: slug },
       } = this.$route;
       return slug;
     },