feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -55,8 +55,8 @@ const primaryMenuItems = accountId => [
     label: 'HELP_CENTER.TITLE',
     featureFlag: FEATURE_FLAGS.HELP_CENTER,
     alwaysVisibleOnChatwootInstances: true,
-    toState: frontendURL(`accounts/${accountId}/portals`),
-    toStateName: 'default_portal_articles',
+    toState: frontendURL(`accounts/${accountId}/portals/portal_articles_index`),
+    toStateName: 'portals_index',
   },
   {
     icon: 'settings',

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

@@ -82,6 +82,7 @@ export default {
       />
       <PrimaryNavItem
         v-for="menuItem in menuItems"
+        :id="menuItem.key"
         :key="menuItem.toState"
         :icon="menuItem.icon"
         :name="menuItem.label"
@@ -94,7 +95,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         v-tooltip.right="$t(`SIDEBAR.DOCS`)"
         :href="helpDocsURL"
-        class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
         rel="noopener noreferrer nofollow"
         target="_blank"
       >

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

@@ -1,10 +1,23 @@
 <script>
+import { OnClickOutside } from '@vueuse/components';
+import { HELP_CENTER_MENU_ITEMS } from 'dashboard/helper/portalHelper';
+
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
 export default {
+  components: {
+    DropdownMenu,
+    OnClickOutside,
+  },
   props: {
     to: {
       type: String,
       default: '',
     },
+    id: {
+      type: String,
+      default: '',
+    },
     name: {
       type: String,
       default: '',
@@ -26,15 +39,89 @@ export default {
       default: false,
     },
   },
+
+  data() {
+    return {
+      helpCenterMenu: HELP_CENTER_MENU_ITEMS,
+      showHelpCenterMenu: false,
+    };
+  },
+  computed: {
+    helpCenterMenuItems() {
+      return this.helpCenterMenu.map(item => ({
+        ...item,
+        isSelected: this.isSelectedMenuItem(item),
+      }));
+    },
+    isHelpCenter() {
+      return this.id === 'helpcenter';
+    },
+    isHelpCenterSelected() {
+      const routes = [
+        'portals_new',
+        'portals_index',
+        'portals_articles_index',
+        'portals_articles_new',
+        'portals_articles_edit',
+        'portals_categories_index',
+        'portals_categories_articles_index',
+        'portals_categories_articles_edit',
+        'portals_locales_index',
+        'portals_settings_index',
+      ];
+      return routes.includes(this.$route.name);
+    },
+  },
+  methods: {
+    isSelectedMenuItem(menuItem) {
+      return menuItem.value.includes(this.$route.name);
+    },
+    toggleHelpCenterMenu() {
+      this.showHelpCenterMenu = !this.showHelpCenterMenu;
+    },
+    handleHelpCenterAction({ action }) {
+      this.$router.push({
+        name: 'portals_index',
+        params: {
+          navigationPath: action,
+        },
+      });
+    },
+  },
 };
 </script>
 
 <template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+  <OnClickOutside v-if="isHelpCenter" @trigger="showHelpCenterMenu = false">
+    <button
+      v-tooltip.top="$t(`SIDEBAR.${name}`)"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isHelpCenterSelected,
+      }"
+      @click="toggleHelpCenterMenu"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isHelpCenterSelected,
+        }"
+      />
+      <DropdownMenu
+        v-if="showHelpCenterMenu && isHelpCenter"
+        :menu-items="helpCenterMenuItems"
+        class="ltr:left-10 rtl:right-10 w-36 z-[100] top-0 overflow-y-auto max-h-52"
+        @action="handleHelpCenterAction"
+      />
+    </button>
+  </OnClickOutside>
+
+  <router-link v-else v-slot="{ href, isActive, navigate }" :to="to" custom>
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,
@@ -52,7 +139,7 @@ export default {
       <span class="sr-only">{{ name }}</span>
       <span
         v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+        class="absolute bg-yellow-500 text-black-900 -top-1 -right-1"
       >
         {{ count }}
       </span>

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -46,6 +46,10 @@ export default {
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
+    autofocus: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
   setup() {
@@ -86,7 +90,9 @@ export default {
     this.createEditorView();
 
     editorView.updateState(state);
-    this.focusEditorInputField();
+    if (this.autofocus) {
+      this.focusEditorInputField();
+    }
   },
   methods: {
     contentFromEditor() {