Merge branch 'feat/articles-store-integration' of https://github.com/chatwoot/chatwoot into feat/articles-store-integration

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: {
@@ -177,6 +186,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 ' ';
     },
@@ -194,6 +333,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

@@ -27,8 +27,8 @@
 import { mapGetters } from 'vuex';
 
 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: {