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

2025-10-30 10:42:38 +00:00 · 2022-08-31 19:59:05 +05:30
parent d14beeb654
commit ebea5428bc
16 changed files with 121 additions and 148 deletions
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddCategory.vue
+++ b/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) {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/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) {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ b/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>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/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');
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/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() {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/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;
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/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;
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/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;
    },
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
@@ -3,21 +3,17 @@ import { throwErrorMessage } from 'dashboard/store/utils/api';
 import { types } from './mutations';
 const portalAPIs = new PortalAPI();
 export const actions = {
-  index: async ({ commit, state, dispatch }) => {
+  index: async ({ commit }) => {
    try {
      commit(types.SET_UI_FLAG, { isFetching: true });
      const {
        data: { payload, meta },
      } = await portalAPIs.get();
      commit(types.CLEAR_PORTALS);
-      const portalIds = payload.map(portal => portal.id);
+      const portalSlugs = payload.map(portal => portal.slug);
      commit(types.ADD_MANY_PORTALS_ENTRY, payload);
-      commit(types.ADD_MANY_PORTALS_IDS, portalIds);
-      const { selectedPortalId } = state;
-      // Check if selected portal is still in the portals list
-      if (!portalIds.includes(selectedPortalId)) {
-        dispatch('setPortalId', portalIds[0]);
-      }
+      commit(types.ADD_MANY_PORTALS_IDS, portalSlugs);
+
      commit(types.SET_PORTALS_META, meta);
    } catch (error) {
      throwErrorMessage(error);
@@ -26,20 +22,13 @@ export const actions = {
    }
  },

-  create: async ({ commit, state, dispatch }, params) => {
+  create: async ({ commit }, params) => {
    commit(types.SET_UI_FLAG, { isCreating: true });
    try {
      const { data } = await portalAPIs.create(params);
-      const { id: portalId } = data;
+      const { slug: portalSlug } = data;
      commit(types.ADD_PORTAL_ENTRY, data);
-      commit(types.ADD_PORTAL_ID, portalId);
-      const {
-        portals: { selectedPortalId },
-      } = state;
-      // Check if there are any selected portal
-      if (!selectedPortalId) {
-        dispatch('setPortalId', portalId);
-      }
+      commit(types.ADD_PORTAL_ID, portalSlug);
    } catch (error) {
      throwErrorMessage(error);
    } finally {
@@ -47,47 +36,46 @@ export const actions = {
    }
  },

-  update: async ({ commit }, params) => {
-    const portalId = params.id;
-    const portalSlug = params.slug;
+  update: async ({ commit }, { portalObj }) => {
+    const portalSlug = portalObj.slug;
    commit(types.SET_HELP_PORTAL_UI_FLAG, {
      uiFlags: { isUpdating: true },
-      portalId,
+      portalSlug,
    });
    try {
-      const { data } = await portalAPIs.updatePortal({ portalSlug, params });
+      const { data } = await portalAPIs.updatePortal({
+        portalSlug,
+        portalObj,
+      });
      commit(types.UPDATE_PORTAL_ENTRY, data);
    } catch (error) {
      throwErrorMessage(error);
    } finally {
      commit(types.SET_HELP_PORTAL_UI_FLAG, {
        uiFlags: { isUpdating: false },
-        portalId,
+        portalSlug,
      });
    }
  },

-  delete: async ({ commit }, portalId) => {
+  delete: async ({ commit }, { portalSlug }) => {
    commit(types.SET_HELP_PORTAL_UI_FLAG, {
      uiFlags: { isDeleting: true },
-      portalId,
+      portalSlug,
    });
    try {
-      await portalAPIs.delete(portalId);
-      commit(types.REMOVE_PORTAL_ENTRY, portalId);
-      commit(types.REMOVE_PORTAL_ID, portalId);
+      await portalAPIs.delete(portalSlug);
+      commit(types.REMOVE_PORTAL_ENTRY, portalSlug);
+      commit(types.REMOVE_PORTAL_ID, portalSlug);
    } catch (error) {
      throwErrorMessage(error);
    } finally {
      commit(types.SET_HELP_PORTAL_UI_FLAG, {
        uiFlags: { isDeleting: false },
-        portalId,
+        portalSlug,
      });
    }
  },
-  setPortalId: async ({ commit }, portalId) => {
-    commit(types.SET_SELECTED_PORTAL_ID, portalId);
-  },
  updatePortal: async ({ commit }, portal) => {
    commit(types.UPDATE_PORTAL_ENTRY, portal);
  },
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
@@ -6,18 +6,16 @@ export const getters = {
  },

  isFetchingPortals: state => state.uiFlags.isFetching,
-  portalById: (...getterArguments) => portalId => {
+  portalBySlug: (...getterArguments) => portalId => {
    const [state] = getterArguments;
    const portal = state.portals.byId[portalId];

-    return {
-      ...portal,
-    };
+    return portal;
  },
  allPortals: (...getterArguments) => {
    const [state, _getters] = getterArguments;
    const portals = state.portals.allIds.map(id => {
-      return _getters.portalById(id);
+      return _getters.portalBySlug(id);
    });
    return portals;
  },
@@ -25,9 +23,4 @@ export const getters = {
  getMeta: state => {
    return state.meta;
  },
-  getSelectedPortal: (...getterArguments) => {
-    const [state, _getters] = getterArguments;
-    const { selectedPortalId } = state.portals;
-    return _getters.portalById(selectedPortalId);
-  },
 };
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
@@ -25,7 +25,6 @@ const state = {
    meta: {
      byId: {},
    },
-    selectedPortalId: null,
  },
  uiFlags: {
    allFetched: false,
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@@ -9,7 +9,6 @@ export const types = {
  ADD_PORTAL_ID: 'addPortalId',
  CLEAR_PORTALS: 'clearPortals',
  ADD_MANY_PORTALS_IDS: 'addManyPortalsIds',
-  SET_SELECTED_PORTAL_ID: 'setSelectedPortalId',
  UPDATE_PORTAL_ENTRY: 'updatePortalEntry',
  REMOVE_PORTAL_ENTRY: 'removePortalEntry',
  REMOVE_PORTAL_ID: 'removePortalId',
@@ -25,7 +24,7 @@ export const mutations = {
  },

  [types.ADD_PORTAL_ENTRY]($state, portal) {
-    Vue.set($state.portals.byId, portal.id, {
+    Vue.set($state.portals.byId, portal.slug, {
      ...portal,
    });
  },
@@ -33,7 +32,7 @@ export const mutations = {
  [types.ADD_MANY_PORTALS_ENTRY]($state, portals) {
    const allPortals = { ...$state.portals.byId };
    portals.forEach(portal => {
-      allPortals[portal.id] = portal;
+      allPortals[portal.slug] = portal;
    });
    Vue.set($state.portals, 'byId', allPortals);
  },
@@ -41,7 +40,7 @@ export const mutations = {
  [types.CLEAR_PORTALS]: $state => {
    Vue.set($state.portals, 'byId', {});
    Vue.set($state.portals, 'allIds', []);
-    Vue.set($state.portals, 'uiFlags.byId', {});
+    Vue.set($state.portals.uiFlags, 'byId', {});
  },

  [types.SET_PORTALS_META]: ($state, data) => {
@@ -50,41 +49,39 @@ export const mutations = {
    Vue.set($state.meta, 'currentPage', currentPage);
  },

-  [types.SET_SELECTED_PORTAL_ID]: ($state, portalId) => {
-    Vue.set($state.portals, 'selectedPortalId', portalId);
+  [types.ADD_PORTAL_ID]($state, portalSlug) {
+    $state.portals.allIds.push(portalSlug);
  },

-  [types.ADD_PORTAL_ID]($state, portalId) {
-    $state.portals.allIds.push(portalId);
-  },
-
-  [types.ADD_MANY_PORTALS_IDS]($state, portalIds) {
-    $state.portals.allIds.push(...portalIds);
+  [types.ADD_MANY_PORTALS_IDS]($state, portalSlugs) {
+    $state.portals.allIds.push(...portalSlugs);
  },

  [types.UPDATE_PORTAL_ENTRY]($state, portal) {
-    const portalId = portal.id;
-    if (!$state.portals.allIds.includes(portalId)) return;
+    const portalSlug = portal.slug;
+    if (!$state.portals.allIds.includes(portalSlug)) return;

-    Vue.set($state.portals.byId, portalId, {
+    Vue.set($state.portals.byId, portalSlug, {
      ...portal,
    });
  },

-  [types.REMOVE_PORTAL_ENTRY]($state, portalId) {
-    if (!portalId) return;
+  [types.REMOVE_PORTAL_ENTRY]($state, portalSlug) {
+    if (!portalSlug) return;

-    const { [portalId]: toBeRemoved, ...newById } = $state.portals.byId;
+    const { [portalSlug]: toBeRemoved, ...newById } = $state.portals.byId;
    Vue.set($state.portals, 'byId', newById);
  },

-  [types.REMOVE_PORTAL_ID]($state, portalId) {
-    $state.portals.allIds = $state.portals.allIds.filter(id => id !== portalId);
+  [types.REMOVE_PORTAL_ID]($state, portalSlug) {
+    $state.portals.allIds = $state.portals.allIds.filter(
+      slug => slug !== portalSlug
+    );
  },

-  [types.SET_HELP_PORTAL_UI_FLAG]($state, { portalId, uiFlags }) {
-    const flags = $state.portals.uiFlags.byId[portalId];
-    Vue.set($state.portals.uiFlags.byId, portalId, {
+  [types.SET_HELP_PORTAL_UI_FLAG]($state, { portalSlug, uiFlags }) {
+    const flags = $state.portals.uiFlags.byId[portalSlug];
+    Vue.set($state.portals.uiFlags.byId, portalSlug, {
      ...defaultPortalFlags,
      ...flags,
      ...uiFlags,
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js
@@ -15,16 +15,13 @@ describe('#actions', () => {
      await actions.index({
        commit,
        dispatch,
-        state: {
-          selectedPortalId: 4,
-        },
+        state: {},
      });
-      expect(dispatch.mock.calls).toMatchObject([['setPortalId', 1]]);
      expect(commit.mock.calls).toEqual([
        [types.SET_UI_FLAG, { isFetching: true }],
        [types.CLEAR_PORTALS],
        [types.ADD_MANY_PORTALS_ENTRY, apiResponse.payload],
-        [types.ADD_MANY_PORTALS_IDS, [1, 2]],
+        [types.ADD_MANY_PORTALS_IDS, ['domain', 'campaign']],
        [types.SET_PORTALS_META, { current_page: 1, portals_count: 1 }],
        [types.SET_UI_FLAG, { isFetching: false }],
      ]);
@@ -43,7 +40,7 @@ describe('#actions', () => {
    it('sends correct actions if API is success', async () => {
      axios.post.mockResolvedValue({ data: apiResponse.payload[1] });
      await actions.create(
-        { commit, dispatch, state: { portals: { selectedPortalId: null } } },
+        { commit, dispatch, state: { portals: {} } },
        {
          color: 'red',
          custom_domain: 'domain_for_help',
@@ -53,17 +50,14 @@ describe('#actions', () => {
      expect(commit.mock.calls).toEqual([
        [types.SET_UI_FLAG, { isCreating: true }],
        [types.ADD_PORTAL_ENTRY, apiResponse.payload[1]],
-        [types.ADD_PORTAL_ID, 2],
+        [types.ADD_PORTAL_ID, 'campaign'],
        [types.SET_UI_FLAG, { isCreating: false }],
      ]);
    });
    it('sends correct actions if API is error', async () => {
      axios.post.mockRejectedValue({ message: 'Incorrect header' });
      await expect(
-        actions.create(
-          { commit, dispatch, state: { portals: { selectedPortalId: null } } },
-          {}
-        )
+        actions.create({ commit, dispatch, state: { portals: {} } }, {})
      ).rejects.toThrow(Error);
      expect(commit.mock.calls).toEqual([
        [types.SET_UI_FLAG, { isCreating: true }],
@@ -75,32 +69,32 @@ describe('#actions', () => {
  describe('#update', () => {
    it('sends correct actions if API is success', async () => {
      axios.patch.mockResolvedValue({ data: apiResponse.payload[1] });
-      await actions.update({ commit }, apiResponse.payload[1]);
+      await actions.update({ commit }, { portalObj: apiResponse.payload[1] });
      expect(commit.mock.calls).toEqual([
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isUpdating: true }, portalId: 2 },
+          { uiFlags: { isUpdating: true }, portalSlug: 'campaign' },
        ],
        [types.UPDATE_PORTAL_ENTRY, apiResponse.payload[1]],
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isUpdating: false }, portalId: 2 },
+          { uiFlags: { isUpdating: false }, portalSlug: 'campaign' },
        ],
      ]);
    });
    it('sends correct actions if API is error', async () => {
      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
      await expect(
-        actions.update({ commit }, apiResponse.payload[1])
+        actions.update({ commit }, { portalObj: apiResponse.payload[1] })
      ).rejects.toThrow(Error);
      expect(commit.mock.calls).toEqual([
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isUpdating: true }, portalId: 2 },
+          { uiFlags: { isUpdating: true }, portalSlug: 'campaign' },
        ],
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isUpdating: false }, portalId: 2 },
+          { uiFlags: { isUpdating: false }, portalSlug: 'campaign' },
        ],
      ]);
    });
@@ -109,40 +103,35 @@ describe('#actions', () => {
  describe('#delete', () => {
    it('sends correct actions if API is success', async () => {
      axios.delete.mockResolvedValue({});
-      await actions.delete({ commit }, 2);
+      await actions.delete({ commit }, { portalSlug: 'campaign' });
      expect(commit.mock.calls).toEqual([
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isDeleting: true }, portalId: 2 },
+          { uiFlags: { isDeleting: true }, portalSlug: 'campaign' },
        ],
-        [types.REMOVE_PORTAL_ENTRY, 2],
-        [types.REMOVE_PORTAL_ID, 2],
+        [types.REMOVE_PORTAL_ENTRY, 'campaign'],
+        [types.REMOVE_PORTAL_ID, 'campaign'],
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isDeleting: false }, portalId: 2 },
+          { uiFlags: { isDeleting: false }, portalSlug: 'campaign' },
        ],
      ]);
    });
    it('sends correct actions if API is error', async () => {
      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
-      await expect(actions.delete({ commit }, 2)).rejects.toThrow(Error);
+      await expect(
+        actions.delete({ commit }, { portalSlug: 'campaign' })
+      ).rejects.toThrow(Error);
      expect(commit.mock.calls).toEqual([
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isDeleting: true }, portalId: 2 },
+          { uiFlags: { isDeleting: true }, portalSlug: 'campaign' },
        ],
        [
          types.SET_HELP_PORTAL_UI_FLAG,
-          { uiFlags: { isDeleting: false }, portalId: 2 },
+          { uiFlags: { isDeleting: false }, portalSlug: 'campaign' },
        ],
      ]);
    });
  });
-  describe('#setPortalId', () => {
-    it('sends correct actions', async () => {
-      axios.delete.mockResolvedValue({});
-      await actions.setPortalId({ commit }, 1);
-      expect(commit.mock.calls).toEqual([[types.SET_SELECTED_PORTAL_ID, 1]]);
-    });
-  });
 });
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/fixtures.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/fixtures.js
@@ -40,7 +40,6 @@ export default {
        1: { isFetching: false, isUpdating: true, isDeleting: false },
      },
    },
-    selectedPortalId: 1,
  },
  uiFlags: {
    allFetched: false,
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/getters.spec.js
@@ -16,9 +16,9 @@ describe('#getters', () => {
    expect(getters.isFetchingPortals(state)).toEqual(true);
  });

-  it('portalById', () => {
+  it('portalBySlug', () => {
    const state = portal;
-    expect(getters.portalById(state)(1)).toEqual({
+    expect(getters.portalBySlug(state)(1)).toEqual({
      id: 1,
      color: 'red',
      custom_domain: 'domain_for_help',
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
@@ -31,13 +31,13 @@ describe('#mutations', () => {
      expect(state).toEqual(portal);
    });
    it('does adds helpcenter object to state', () => {
-      mutations[types.ADD_PORTAL_ENTRY](state, { id: 3 });
-      expect(state.portals.byId[3]).toEqual({ id: 3 });
+      mutations[types.ADD_PORTAL_ENTRY](state, { slug: 'new' });
+      expect(state.portals.byId.new).toEqual({ slug: 'new' });
    });
  });

  describe('[types.ADD_PORTAL_ID]', () => {
-    it('adds helpcenter id to state', () => {
+    it('adds helpcenter slug to state', () => {
      mutations[types.ADD_PORTAL_ID](state, 12);
      expect(state.portals.allIds).toEqual([1, 2, 12]);
    });
@@ -48,13 +48,13 @@ describe('#mutations', () => {
      mutations[types.UPDATE_PORTAL_ENTRY](state, {});
      expect(state).toEqual(portal);
    });
-    it('does not updates if object id is not present ', () => {
-      mutations[types.UPDATE_PORTAL_ENTRY](state, { id: 5 });
+    it('does not updates if object slug is not present ', () => {
+      mutations[types.UPDATE_PORTAL_ENTRY](state, { slug: 5 });
      expect(state).toEqual(portal);
    });
-    it(' updates if object with id already present in the state', () => {
+    it(' updates if object with slug already present in the state', () => {
      mutations[types.UPDATE_PORTAL_ENTRY](state, {
-        id: 2,
+        slug: 2,
        name: 'Updated name',
      });
      expect(state.portals.byId[2].name).toEqual('Updated name');
@@ -62,7 +62,7 @@ describe('#mutations', () => {
  });

  describe('[types.REMOVE_PORTAL_ENTRY]', () => {
-    it('does not remove object entry if no id is passed', () => {
+    it('does not remove object entry if no slug is passed', () => {
      mutations[types.REMOVE_PORTAL_ENTRY](state, undefined);
      expect(state).toEqual({ ...portal });
    });
@@ -73,7 +73,7 @@ describe('#mutations', () => {
  });

  describe('[types.REMOVE_PORTAL_ID]', () => {
-    it('removes id from state', () => {
+    it('removes slug from state', () => {
      mutations[types.REMOVE_PORTAL_ID](state, 2);
      expect(state.portals.allIds).toEqual([1, 12]);
    });
@@ -82,12 +82,12 @@ describe('#mutations', () => {
  describe('[types.SET_HELP_PORTAL_UI_FLAG]', () => {
    it('sets correct flag in state', () => {
      mutations[types.SET_HELP_PORTAL_UI_FLAG](state, {
-        portalId: 1,
+        portalSlug: 'domain',
        uiFlags: { isFetching: true },
      });
-      expect(state.portals.uiFlags.byId[1]).toEqual({
+      expect(state.portals.uiFlags.byId.domain).toEqual({
        isFetching: true,
-        isUpdating: true,
+        isUpdating: false,
        isDeleting: false,
      });
    });
@@ -99,9 +99,7 @@ describe('#mutations', () => {
      expect(state.portals.allIds).toEqual([]);
      expect(state.portals.byId).toEqual({});
      expect(state.portals.uiFlags).toEqual({
-        byId: {
-          '1': { isFetching: true, isUpdating: true, isDeleting: false },
-        },
+        byId: {},
      });
    });
  });
@@ -118,11 +116,4 @@ describe('#mutations', () => {
      });
    });
  });
-
-  describe('#SET_SELECTED_PORTAL_ID', () => {
-    it('set selected portal id', () => {
-      mutations[types.SET_SELECTED_PORTAL_ID](state, 4);
-      expect(state.portals.selectedPortalId).toEqual(4);
-    });
-  });
 });