feat: Opening and closing portal switch (#5126)

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

@@ -4,7 +4,18 @@
       "FILTER": "Filter by",
       "SORT": "Sort by",
       "SETTINGS_BUTTON": "Settings",
-      "NEW_BUTTON": "New Article"
+      "NEW_BUTTON": "New Article",
+      "DROPDOWN_OPTIONS": {
+        "PUBLISHED": "Published",
+        "DRAFT": "Draft",
+        "ARCHIVED": "Archived"
+      },
+      "TITLES": {
+        "ALL_ARTICLES": "All Articles",
+        "MINE": "My Articles",
+        "DRAFT": "Draft Articles",
+        "ARCHIVED": "Archived Articles"
+      }
     },
     "EDIT_HEADER": {
       "PUBLISH_BUTTON": "Publish",
@@ -27,11 +38,59 @@
         "CANCEL_BUTTON_LABEL": "Cancel",
         "CHOOSE_LOCALE_BUTTON": "Choose Locale"
       }
-    }
     },
     "TABLE": {
+      "LOADING_MESSAGE": "Loading articles...",
+      "404": "No articles matches your search 🔍",
+      "NO_ARTICLES": "There are no available articles",
+      "HEADERS": {
+        "TITLE": "Title",
+        "CATEGORY": "Category",
+        "READ_COUNT": "Read count",
+        "STATUS": "Status",
+        "LAST_EDITED": "Last edited"
+      },
       "COLUMNS": {
         "BY": "by"
       }
+    },
+    "EDIT_ARTICLE": {
+      "TITLE_PLACEHOLDER": "Article title goes here",
+      "CONTENT_PLACEHOLDER": "Write your article here"
+    },
+    "SIDEBAR": {
+      "SEARCH": {
+        "PLACEHOLDER": "Search for articles"
+      }
+    },
+    "CATEGORY": {
+      "ADD": {
+        "TITLE": "Create a category",
+        "SUB_TITLE": "The category will be used in the public facing portal to categorize articles.",
+        "PORTAL": "Portal",
+        "LOCALE": "Locale",
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Category name",
+          "HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
+          "ERROR": "Name is required"
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Category slug for urls",
+          "HELP_TEXT": "app.chatwoot.com/portal/my-portal/en-US/categories/my-slug",
+          "ERROR": "Slug is required"
+        },
+        "DESCRIPTION": {
+          "LABEL": "Description",
+          "PLACEHOLDER": "Give a short description about the category.",
+          "ERROR": "Description is required"
+        },
+        "BUTTONS": {
+          "CREATE": "Create category",
+          "CANCEL": "Cancel"
+        }
+      }
+    }
   }
 }

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

@@ -12,6 +12,7 @@
         sub-title="English"
         :accessible-menu-items="accessibleMenuItems"
         :additional-secondary-menu-items="additionalSecondaryMenuItems"
+        @open-popover="openPortalPopover"
       />
     </div>
     <section class="app-content columns">
@@ -26,6 +27,11 @@
         v-if="showNotificationPanel"
         @close="closeNotificationPanel"
       />
+      <portal-popover
+        v-if="showPortalPopover"
+        :portals="portals"
+        @close-popover="closePortalPopover"
+      />
     </section>
   </div>
 </template>
@@ -34,7 +40,8 @@ import { mapGetters } from 'vuex';
 
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar';
-import HelpCenterSidebar from 'dashboard/components/helpCenter/Sidebar/Sidebar';
+import PortalPopover from 'dashboard/routes/dashboard/helpcenter/components/PortalPopover';
+import HelpCenterSidebar from 'dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar';
 import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
@@ -46,11 +53,13 @@ export default {
     CommandBar,
     WootKeyShortcutModal,
     NotificationPanel,
+    PortalPopover,
   },
   data() {
     return {
       showShortcutModal: false,
       showNotificationPanel: false,
+      showPortalPopover: false,
     };
   },
   computed: {
@@ -171,6 +180,136 @@ export default {
         },
       ];
     },
+    portals() {
+      return [
+        {
+          name: 'Chatwoot Help Center',
+          id: 1,
+          color: null,
+          custom_domain: 'doc',
+          articles_count: 123,
+          header_text: null,
+          homepage_link: null,
+          page_title: null,
+          slug: 'first_portal',
+          archived: false,
+          config: {
+            allowed_locales: [
+              {
+                code: 'en',
+                name: 'English',
+                articles_count: 123,
+              },
+              {
+                code: 'fr',
+                name: 'Français',
+                articles_count: 123,
+              },
+              {
+                code: 'de',
+                name: 'Deutsch',
+                articles_count: 32,
+              },
+              {
+                code: 'es',
+                name: 'Español',
+                articles_count: 12,
+              },
+              {
+                code: 'it',
+                name: 'Italiano',
+                articles_count: 8,
+              },
+            ],
+          },
+          locales: [
+            {
+              name: 'English',
+              code: 'en',
+              articles_count: 12,
+            },
+            {
+              name: 'Español',
+              code: 'es',
+              articles_count: 42,
+            },
+            {
+              name: 'French',
+              code: 'fr',
+              articles_count: 29,
+            },
+            {
+              name: 'Italian',
+              code: 'it',
+              articles_count: 4,
+            },
+            {
+              name: 'German',
+              code: 'de',
+              articles_count: 66,
+            },
+          ],
+        },
+        {
+          name: 'Chatwoot Docs',
+          id: 2,
+          color: null,
+          custom_domain: 'doc',
+          articles_count: 124,
+          header_text: null,
+          homepage_link: null,
+          page_title: null,
+          slug: 'second_portal',
+          archived: false,
+          config: {
+            allowed_locales: [
+              {
+                code: 'en',
+                name: 'English',
+                articles_count: 123,
+              },
+              {
+                code: 'fr',
+                name: 'Français',
+                articles_count: 123,
+              },
+              {
+                code: 'de',
+                name: 'Deutsch',
+                articles_count: 32,
+              },
+              {
+                code: 'es',
+                name: 'Español',
+                articles_count: 12,
+              },
+              {
+                code: 'it',
+                name: 'Italiano',
+                articles_count: 8,
+              },
+            ],
+          },
+          locales: [
+            {
+              name: 'English',
+              code: 'en',
+              articles_count: 12,
+            },
+            {
+              name: 'Japanese',
+              code: 'jp',
+              articles_count: 4,
+            },
+            {
+              name: 'Mandarin',
+              code: 'CH',
+              articles_count: 6,
+            },
+          ],
+        },
+      ];
+    },
     currentRoute() {
       return ' ';
     },
@@ -188,6 +327,12 @@ export default {
     closeNotificationPanel() {
       this.showNotificationPanel = false;
     },
+    openPortalPopover() {
+      this.showPortalPopover = !this.showPortalPopover;
+    },
+    closePortalPopover() {
+      this.showPortalPopover = false;
+    },
   },
 };
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="portal-popover__container">
+  <div v-on-clickaway="closePortalPopover" class="portal-popover__container">
     <header>
       <div class="actions">
         <h2 class="block-title">
@@ -24,7 +24,7 @@
       />
     </div>
     <footer>
-      <woot-button variant="link">
+      <woot-button variant="link" @click="closePortalPopover">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.CANCEL_BUTTON_LABEL') }}
       </woot-button>
       <woot-button>
@@ -35,22 +35,32 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import PortalSwitch from './PortalSwitch.vue';
 export default {
   components: {
     PortalSwitch,
   },
+  mixins: [clickaway],
   props: {
     portals: {
       type: Array,
       default: () => [],
     },
   },
+  methods: {
+    closePortalPopover() {
+      this.$emit('close-popover');
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .portal-popover__container {
+  position: absolute;
+  overflow: scroll;
+  max-height: 96vh;
   padding: var(--space-normal);
   background-color: var(--white);
   border-radius: var(--border-radius-normal);

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

@@ -4,26 +4,23 @@
       :thumbnail-src="thumbnailSrc"
       :header-title="headerTitle"
       :sub-title="subTitle"
+      @open-popover="openPortalPopover"
     />
     <sidebar-search @input="onSearch" />
-    <!-- <transition-group name="menu-list" tag="ul" class="menu vertical"> -->
+    <transition-group name="menu-list" tag="ul" class="menu vertical">
-    <div name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
         :menu-item="menuItem"
         :is-help-center-sidebar="true"
       />
-    </div>
-    <div name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in additionalSecondaryMenuItems"
         :key="menuItem.key"
         :menu-item="menuItem"
         :is-help-center-sidebar="true"
       />
-    </div>
+    </transition-group>
-    <!-- </transition-group> -->
   </div>
 </template>
 
@@ -67,6 +64,9 @@ export default {
     onSearch(value) {
       this.$emit('input', value);
     },
+    openPortalPopover() {
+      this.$emit('open-popover');
+    },
   },
 };
 </script>

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

@@ -13,18 +13,29 @@
       </div>
     </div>
     <div class="header-right--side">
+      <woot-button
+        variant="link"
+        color-scheme="secondary"
+        @click="popOutHelpCenter"
+      >
         <fluent-icon
           icon="arrow-up-right"
           size="28px"
           class="pop-out--icon"
           @click="popOutHelpCenter"
         />
+      </woot-button>
+      <woot-button
+        variant="link"
+        color-scheme="secondary"
+        @click="openPortalPopover"
+      >
         <fluent-icon
           icon="arrow-swap"
           size="28px"
           class="portal-switch--icon"
-        @click="openSwitchPortalModal"
         />
+      </woot-button>
     </div>
   </div>
 </template>
@@ -53,8 +64,8 @@ export default {
     popOutHelpCenter() {
       this.$emit('pop-out');
     },
-    openSwitchPortalModal() {
+    openPortalPopover() {
-      this.$emit('open');
+      this.$emit('open-popover');
     },
   },
 };

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleHeader.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import ArticleHeader from './ArticleHeader';
+import ArticleHeader from '../Header/ArticleHeader';
 
 export default {
   title: 'Components/Help Center/Header',

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/EditArticleHeader.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import EditArticleHeader from './EditArticleHeader';
+import EditArticleHeader from '../Header/EditArticleHeader';
 
 export default {
   title: 'Components/Help Center/Header',

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js

@@ -26,7 +26,44 @@ Primary.args = {
   portals: [
     {
       name: 'Chatwoot Help Center',
-      articles_count: 124,
+      id: 1,
+      color: null,
+      custom_domain: 'doc',
+      articles_count: 123,
+      header_text: null,
+      homepage_link: null,
+      page_title: null,
+      slug: 'first_portal',
+      archived: false,
+      config: {
+        allowed_locales: [
+          {
+            code: 'en',
+            name: 'English',
+            articles_count: 123,
+          },
+          {
+            code: 'fr',
+            name: 'Français',
+            articles_count: 123,
+          },
+          {
+            code: 'de',
+            name: 'Deutsch',
+            articles_count: 32,
+          },
+          {
+            code: 'es',
+            name: 'Español',
+            articles_count: 12,
+          },
+          {
+            code: 'it',
+            name: 'Italiano',
+            articles_count: 8,
+          },
+        ],
+      },
       locales: [
         {
           name: 'English',
@@ -57,7 +94,44 @@ Primary.args = {
     },
     {
       name: 'Chatwoot Docs',
-      articles_count: 16,
+      id: 2,
+      color: null,
+      custom_domain: 'doc',
+      articles_count: 124,
+      header_text: null,
+      homepage_link: null,
+      page_title: null,
+      slug: 'second_portal',
+      archived: false,
+      config: {
+        allowed_locales: [
+          {
+            code: 'en',
+            name: 'English',
+            articles_count: 123,
+          },
+          {
+            code: 'fr',
+            name: 'Français',
+            articles_count: 123,
+          },
+          {
+            code: 'de',
+            name: 'Deutsch',
+            articles_count: 32,
+          },
+          {
+            code: 'es',
+            name: 'Español',
+            articles_count: 12,
+          },
+          {
+            code: 'it',
+            name: 'Italiano',
+            articles_count: 8,
+          },
+        ],
+      },
       locales: [
         {
           name: 'English',

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/Sidebar.stories.js

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import Sidebar from './Sidebar';
+import Sidebar from '../Sidebar/Sidebar';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 
 export default {

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
+import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
 import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
 export default {
   components: {

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

@@ -23,8 +23,8 @@
 </template>
 <script>
 import Spinner from 'shared/components/Spinner.vue';
-import ArticleHeader from 'dashboard/components/helpCenter/Header/ArticleHeader';
+import ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import EmptyState from 'dashboard/components/widgets/EmptyState';
 import ArticleTable from '../../components/ArticleTable';
 export default {
   components: {

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

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
+import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
 import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
 export default {
   components: {