feat: Init HelpCenter Routes (#5034)

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -11,6 +11,7 @@
       @open-notification-panel="openNotificationPanel"
     />
     <secondary-sidebar
+      v-if="showSecondarySidebar"
       :account-id="accountId"
       :inboxes="inboxes"
       :labels="labels"
@@ -50,6 +51,12 @@ export default {
     SecondarySidebar,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
+  props: {
+    showSecondarySidebar: {
+      type: Boolean,
+      default: true,
+    },
+  },
   data() {
     return {
       showOptionsMenu: false,

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -4,9 +4,11 @@ import conversation from './conversation/conversation.routes';
 import { routes as contactRoutes } from './contacts/routes';
 import { routes as notificationRoutes } from './notifications/routes';
 import { frontendURL } from '../../helper/URLHelper';
+import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
 export default {
   routes: [
+    ...helpcenterRoutes.routes,
     {
       path: frontendURL('accounts/:account_id'),
       component: AppContainer,

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="row app-wrapper">
+    <sidebar
+      :route="currentRoute"
+      @open-notification-panel="openNotificationPanel"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+    />
+
+    <!-- TO BE REPLACED WITH HELPCENTER SIDEBAR -->
+    <div class="margin-right-small">
+      {{ `Place the help center sidebar here.  ` }}
+    </div>
+    <!-- END: TO BE REPLACED WITH HELPCENTER SIDEBAR -->
+
+    <section class="app-content columns">
+      <router-view />
+      <command-bar />
+      <woot-key-shortcut-modal
+        v-if="showShortcutModal"
+        @close="closeKeyShortcutModal"
+        @clickaway="closeKeyShortcutModal"
+      />
+      <notification-panel
+        v-if="showNotificationPanel"
+        @close="closeNotificationPanel"
+      />
+    </section>
+  </div>
+</template>
+<script>
+import Sidebar from 'dashboard/components/layout/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';
+
+export default {
+  components: {
+    Sidebar,
+    CommandBar,
+    WootKeyShortcutModal,
+    NotificationPanel,
+  },
+  data() {
+    return {
+      showShortcutModal: false,
+      showNotificationPanel: false,
+    };
+  },
+  computed: {
+    currentRoute() {
+      return ' ';
+    },
+  },
+  methods: {
+    toggleKeyShortcutModal() {
+      this.showShortcutModal = true;
+    },
+    closeKeyShortcutModal() {
+      this.showShortcutModal = false;
+    },
+    openNotificationPanel() {
+      this.showNotificationPanel = true;
+    },
+    closeNotificationPanel() {
+      this.showNotificationPanel = false;
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -0,0 +1,134 @@
+import HelpCenterLayout from './components/HelpCenterLayout';
+import { getPortalRoute } from './helpers/routeHelper';
+
+const ListAllPortals = () => import('./pages/portals/ListAllPortals');
+const NewPortal = () => import('./pages/portals/NewPortal');
+const EditPortal = () => import('./pages/portals/EditPortal');
+const ShowPortal = () => import('./pages/portals/ShowPortal');
+
+const ListAllCategories = () => import('./pages/categories/ListAllCategories');
+const NewCategory = () => import('./pages/categories/NewCategory');
+const EditCategory = () => import('./pages/categories/EditCategory');
+const ShowCategory = () => import('./pages/categories/ShowCategory');
+const ListCategoryArticles = () =>
+  import('./pages/articles/ListCategoryArticles');
+
+const ListAllArticles = () => import('./pages/articles/ListAllArticles');
+const ListArchivedArticles = () =>
+  import('./pages/articles/ListArchivedArticles');
+const ListDraftArticles = () => import('./pages/articles/ListDraftArticles');
+const ListMyArticles = () => import('./pages/articles/ListMyArticles');
+const NewArticle = () => import('./pages/articles/NewArticle');
+const EditArticle = () => import('./pages/articles/EditArticle');
+
+const portalRoutes = [
+  {
+    path: getPortalRoute(''),
+    name: 'list_all_portals',
+    roles: ['administrator', 'agent'],
+    component: ListAllPortals,
+  },
+  {
+    path: getPortalRoute('new'),
+    name: 'new_portal',
+    roles: ['administrator', 'agent'],
+    component: NewPortal,
+  },
+  {
+    path: getPortalRoute(':portalSlug'),
+    name: 'edit_portal',
+    roles: ['administrator', 'agent'],
+    component: ShowPortal,
+  },
+  {
+    path: getPortalRoute(':portalSlug/edit'),
+    name: 'edit_portal',
+    roles: ['administrator', 'agent'],
+    component: EditPortal,
+  },
+];
+
+const articleRoutes = [
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles'),
+    name: 'list_all_locale_articles',
+    roles: ['administrator', 'agent'],
+    component: ListAllArticles,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/archived'),
+    name: 'list_archived_articles',
+    roles: ['administrator', 'agent'],
+    component: ListArchivedArticles,
+  },
+
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/draft'),
+    name: 'list_draft_articles',
+    roles: ['administrator', 'agent'],
+    component: ListDraftArticles,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/mine'),
+    name: 'list_all_locale_articles',
+    roles: ['administrator', 'agent'],
+    component: ListMyArticles,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/new'),
+    name: 'new_article',
+    roles: ['administrator', 'agent'],
+    component: NewArticle,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
+    name: 'edit_article',
+    roles: ['administrator', 'agent'],
+    component: EditArticle,
+  },
+];
+
+const categoryRoutes = [
+  {
+    path: getPortalRoute(':portalSlug/:locale/categories'),
+    name: 'list_all_locale_categories',
+    roles: ['administrator', 'agent'],
+    component: ListAllCategories,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/categories/new'),
+    name: 'new_category_in_locale',
+    roles: ['administrator', 'agent'],
+    component: NewCategory,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
+    name: 'show_category',
+    roles: ['administrator', 'agent'],
+    component: ShowCategory,
+  },
+  {
+    path: getPortalRoute(
+      ':portalSlug/:locale/categories/:categorySlug/articles'
+    ),
+    name: 'show_category',
+    roles: ['administrator', 'agent'],
+    component: ListCategoryArticles,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
+    name: 'edit_category',
+    roles: ['administrator', 'agent'],
+    component: EditCategory,
+  },
+];
+
+export default {
+  routes: [
+    {
+      path: getPortalRoute(),
+      component: HelpCenterLayout,
+      children: [...portalRoutes, ...articleRoutes, ...categoryRoutes],
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js

@@ -0,0 +1,6 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+export const getPortalRoute = (path = '') => {
+  const slugToBeAdded = path ? `/${path}` : '';
+  return frontendURL(`accounts/:accountId/portals${slugToBeAdded}`);
+};

app/javascript/dashboard/routes/dashboard/helpcenter/helpers/specs/routeHelper.spec.js

@@ -0,0 +1,10 @@
+import { getPortalRoute } from '../routeHelper';
+
+describe('', () => {
+  it('returns correct portal URL', () => {
+    expect(getPortalRoute('')).toEqual('/app/accounts/:accountId/portals');
+    expect(getPortalRoute(':portalSlug')).toEqual(
+      '/app/accounts/:accountId/portals/:portalSlug'
+    );
+  });
+});

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to edit an article</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list all articles in a given locale in a portal</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list archived articles in a portal</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list articles in a category in a portal</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list all drafts articles in a portal</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list my articles in a portal</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component for New Article</div>
+</template>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to edit a category</div>
+</template>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list all categories</div>
+</template>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to create a category</div>
+</template>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to show details of a category</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to edit portal</div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to list all portals</div>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Component to create a new portal
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+  <div>Component to view details of portal</div>
+</template>