feat: Adds the ability to add new locale in portal (#5363)

app/javascript/dashboard/api/helpCenter/portals.js

@@ -6,8 +6,8 @@ class PortalsAPI extends ApiClient {
     super('portals', { accountScoped: true });
   }
 
-  updatePortal({ portalSlug, params }) {
+  updatePortal({ portalSlug, portalObj }) {
-    return axios.patch(`${this.url}/${portalSlug}`, params);
+    return axios.patch(`${this.url}/${portalSlug}`, portalObj);
   }
 
   deletePortal(portalSlug) {

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -5,10 +5,6 @@
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
       <div v-if="isHelpCenterSidebar" class="submenu-icons">
-        <!-- Hidden since this is in V2
-        <div class="submenu-icon">
-          <fluent-icon icon="search" size="16" />
-        </div> -->
         <div class="submenu-icon" @click="onClickOpen">
           <fluent-icon icon="add" size="16" />
         </div>

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -210,6 +210,24 @@
           "ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.",
           "ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again."
         }
+      },
+      "ADD_LOCALE": {
+        "TITLE": "Add a new locale",
+        "SUB_TITLE": "This adds a new locale to your available translation list.",
+        "PORTAL": "Portal",
+        "LOCALE": {
+          "LABEL": "Locale",
+          "PLACEHOLDER": "Choose a locale",
+          "ERROR": "Locale is required"
+        },
+        "BUTTONS": {
+          "CREATE": "Create locale",
+          "CANCEL": "Cancel"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Locale added successfully",
+          "ERROR_MESSAGE": "Unable to add locale. Try again."
+        }
       }
     },
     "TABLE": {

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

@@ -0,0 +1,137 @@
+<template>
+  <modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header
+      :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
+      :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
+    />
+    <form class="row" @submit.prevent="onCreate">
+      <div class="medium-12 columns">
+        <label :class="{ error: $v.selectedLocale.$error }">
+          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
+          <select v-model="selectedLocale">
+            <option
+              v-for="locale in locales"
+              :key="locale.name"
+              :value="locale.id"
+            >
+              {{ locale.name }}-{{ locale.code }}
+            </option>
+          </select>
+          <span v-if="$v.selectedLocale.$error" class="message">
+            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
+          </span>
+        </label>
+
+        <div class="medium-12 columns">
+          <div class="modal-footer justify-content-end w-full">
+            <woot-button class="button clear" @click.prevent="onClose">
+              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
+            </woot-button>
+            <woot-button>
+              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </modal>
+</template>
+
+<script>
+import Modal from 'dashboard/components/Modal';
+import alertMixin from 'shared/mixins/alertMixin';
+import { required } from 'vuelidate/lib/validators';
+import allLocales from 'shared/constants/locales.js';
+export default {
+  components: {
+    Modal,
+  },
+  mixins: [alertMixin],
+  props: {
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    portal: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      selectedLocale: '',
+      isUpdating: false,
+    };
+  },
+  computed: {
+    addedLocales() {
+      const { allowed_locales: allowedLocales } = this.portal.config;
+      return allowedLocales.map(locale => locale.code);
+    },
+    locales() {
+      const addedLocales = this.portal.config.allowed_locales.map(
+        locale => locale.code
+      );
+      return Object.keys(allLocales)
+        .map(key => {
+          return {
+            id: key,
+            name: allLocales[key],
+            code: key,
+          };
+        })
+        .filter(locale => {
+          return !addedLocales.includes(locale.code);
+        });
+    },
+  },
+  validations: {
+    selectedLocale: {
+      required,
+    },
+  },
+  methods: {
+    async onCreate() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      const updatedLocales = this.addedLocales;
+      updatedLocales.push(this.selectedLocale);
+      this.isUpdating = true;
+      try {
+        await this.$store.dispatch('portals/update', {
+          portalSlug: this.portal.slug,
+          config: { allowed_locales: updatedLocales },
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.PORTAL.ADD_LOCALE.API.SUCCESS_MESSAGE'
+        );
+        this.onClose();
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t('HELP_CENTER.PORTAL.ADD_LOCALE.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+        this.isUpdating = false;
+      }
+    },
+    onClose() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.input-container::v-deep {
+  margin: 0 0 var(--space-normal);
+
+  input {
+    margin-bottom: 0;
+  }
+  .message {
+    margin-top: 0;
+  }
+}
+</style>

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

@@ -1,185 +0,0 @@
-<template>
-  <modal :show.sync="show" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.PORTAL.ADD.TITLE')"
-      :header-content="$t('HELP_CENTER.PORTAL.ADD.SUB_TITLE')"
-    />
-    <form class="row" @submit.prevent="onCreate">
-      <div class="medium-12 columns">
-        <woot-input
-          v-model="name"
-          :class="{ error: $v.name.$error }"
-          class="medium-12 columns"
-          :error="$v.name.$error ? $t('HELP_CENTER.PORTAL.ADD.NAME.ERROR') : ''"
-          :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
-          @blur="$v.name.$touch"
-          @input="onNameChange"
-        />
-        <woot-input
-          v-model="slug"
-          :class="{ error: $v.slug.$error }"
-          class="medium-12 columns"
-          :error="$v.slug.$error ? $t('HELP_CENTER.PORTAL.ADD.SLUG.ERROR') : ''"
-          :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.SLUG.HELP_TEXT')"
-          @blur="$v.slug.$touch"
-        />
-
-        <woot-input
-          v-model="pageTitle"
-          class="medium-12 columns"
-          :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
-        />
-        <woot-input
-          v-model="headerText"
-          class="medium-12 columns"
-          :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
-        />
-
-        <woot-input
-          v-model="domain"
-          class="medium-12 columns"
-          :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT')"
-        />
-        <woot-input
-          v-model="homePageLink"
-          class="medium-12 columns"
-          :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT')"
-        />
-
-        <div class="medium-12 columns">
-          <div class="modal-footer justify-content-end w-full">
-            <woot-button
-              class="button clear"
-              :is-loading="uiFlags.isCreating"
-              @click.prevent="onClose"
-            >
-              {{ $t('HELP_CENTER.PORTAL.ADD.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button>
-              {{ $t('HELP_CENTER.PORTAL.ADD.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </modal>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import Modal from 'dashboard/components/Modal';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
-import { convertToPortalSlug } from 'dashboard/helper/commons.js';
-
-export default {
-  components: {
-    Modal,
-  },
-  mixins: [alertMixin],
-  props: {
-    show: {
-      type: Boolean,
-      default: true,
-    },
-    portalName: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      name: '',
-      slug: '',
-      domain: '',
-      homePageLink: '',
-      pageTitle: '',
-      headerText: '',
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-  },
-  validations: {
-    name: {
-      required,
-    },
-    slug: {
-      required,
-    },
-  },
-  methods: {
-    onNameChange() {
-      this.slug = convertToPortalSlug(this.name);
-    },
-    async onCreate() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-
-      try {
-        await this.$store.dispatch('portals/create', {
-          portal: {
-            name: this.name,
-            slug: this.slug,
-            custom_domain: this.domain,
-            // TODO: add support for choosing color
-            color: '#1f93ff',
-            homepage_link: this.homePageLink,
-            page_title: this.pageTitle,
-            header_text: this.headerText,
-            config: {
-              // TODO: add support for choosing locale
-              allowed_locales: ['en'],
-            },
-          },
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE'
-        );
-        this.$emit('cancel');
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.input-container::v-deep {
-  margin: 0 0 var(--space-normal);
-
-  input {
-    margin-bottom: 0;
-  }
-  .message {
-    margin-top: 0;
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -28,6 +28,7 @@
       </woot-button>
       <!-- Hidden since this is in V2
       <woot-button
+        v-if="shouldShowAddLocaleButton"
         class-names="article--buttons"
         icon="add"
         color-scheme="secondary"
@@ -88,6 +89,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    shouldShowAddLocaleButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

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

@@ -234,7 +234,7 @@ export default {
   },
   methods: {
     addLocale() {
-      this.$emit('add');
+      this.$emit('add-locale', this.portal.id);
     },
     openSite() {
       this.$emit('open-site');

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

@@ -6,7 +6,6 @@
       :sub-title="subTitle"
       @open-popover="openPortalPopover"
     />
-    <sidebar-search @input="onSearch" />
     <transition-group name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
@@ -28,13 +27,11 @@
 
 <script>
 import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem';
-import SidebarSearch from './SidebarSearch';
 import SidebarHeader from './SidebarHeader';
 
 export default {
   components: {
     SecondaryNavItem,
-    SidebarSearch,
     SidebarHeader,
   },
   props: {

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

@@ -15,6 +15,7 @@
         :key="portal.id"
         :portal="portal"
         :status="portalStatus"
+        @add-locale="addLocale"
       />
       <div v-if="isFetching" class="portals--loader">
         <spinner />
@@ -25,8 +26,15 @@
         :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
       />
     </div>
-    <woot-modal :show.sync="isAddModalOpen" :on-close="closeModal">
+    <woot-modal
-      <add-portal :show="isAddModalOpen" @cancel="closeModal" />
+      :show.sync="isAddLocaleModalOpen"
+      :on-close="closeAddLocaleModal"
+    >
+      <add-locale
+        :show="isAddLocaleModalOpen"
+        :portal="selectedPortal"
+        @cancel="closeAddLocaleModal"
+      />
     </woot-modal>
   </div>
 </template>
@@ -37,18 +45,19 @@ import alertMixin from 'shared/mixins/alertMixin';
 import PortalListItem from '../../components/PortalListItem';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState';
-import AddPortal from '../../components/AddPortal';
+import AddLocale from '../../components/AddLocale';
 export default {
   components: {
     PortalListItem,
     EmptyState,
     Spinner,
-    AddPortal,
+    AddLocale,
   },
   mixins: [alertMixin],
   data() {
     return {
-      isAddModalOpen: false,
+      isAddLocaleModalOpen: false,
+      selectedPortal: {},
     };
   },
   computed: {
@@ -68,8 +77,13 @@ export default {
     addPortal() {
       this.$router.push({ name: 'new_portal_information' });
     },
-    closeModal() {
+    closeAddLocaleModal() {
-      this.isAddModalOpen = false;
+      this.isAddLocaleModalOpen = false;
+      this.selectedPortal = {};
+    },
+    addLocale(portalId) {
+      this.isAddLocaleModalOpen = true;
+      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
     },
   },
 };

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

@@ -36,8 +36,7 @@ export const actions = {
     }
   },
 
-  update: async ({ commit }, { portalObj }) => {
+  update: async ({ commit }, { portalSlug, ...portalObj }) => {
-    const portalSlug = portalObj.slug;
     commit(types.SET_HELP_PORTAL_UI_FLAG, {
       uiFlags: { isUpdating: true },
       portalSlug,

app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js

@@ -69,7 +69,10 @@ describe('#actions', () => {
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
       axios.patch.mockResolvedValue({ data: apiResponse.payload[1] });
-      await actions.update({ commit }, { portalObj: apiResponse.payload[1] });
+      await actions.update(
+        { commit },
+        { portalObj: apiResponse.payload[1], portalSlug: 'campaign' }
+      );
       expect(commit.mock.calls).toEqual([
         [
           types.SET_HELP_PORTAL_UI_FLAG,
@@ -85,7 +88,10 @@ describe('#actions', () => {
     it('sends correct actions if API is error', async () => {
       axios.patch.mockRejectedValue({ message: 'Incorrect header' });
       await expect(
-        actions.update({ commit }, { portalObj: apiResponse.payload[1] })
+        actions.update(
+          { commit },
+          { portalObj: apiResponse.payload[1], portalSlug: 'campaign' }
+        )
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
         [