From dfe3a13424668142b972bb3d7c93b64e553777f9 Mon Sep 17 00:00:00 2001
From: Sebin Song <songxevin@gmail.com>
Date: Sat, 30 Mar 2024 15:00:15 +1300
Subject: [PATCH] PR for the Step 1 of #1619 (#1899)

* add a button for global-dashboard in GroupsList.vue

* add GlobalDashboard.vue with boilerplate content

* make vue-router work with global-dashboard settings

* configure GlobalDashboard.vue to update the content based on the route path

* add dummy posts and render them with card UI

* use markdown pkg to render the post content

* fix for some cypress tests

* move the settings data to router.js

* move the export back to misc.js

* move the settings object to GlobalDashboard.vue file
---
 frontend/assets/style/_icons.scss             |   3 +-
 .../style/components/_custom-markdowns.scss   |   5 +-
 frontend/controller/router.js                 |  11 ++
 .../global-dashboard/DirectMessages.vue       |  14 ++
 .../global-dashboard/NewsAndUpdates.vue       | 101 +++++++++++++
 .../containers/navigation/GroupsList.vue      |  36 ++++-
 .../containers/navigation/Navigation.vue      | 140 ++++++++++--------
 frontend/views/pages/DesignSystem.vue         |   1 +
 frontend/views/pages/GlobalDashboard.vue      |  53 +++++++
 frontend/views/utils/convert-to-markdown.js   |   2 +-
 test/cypress/integration/group-chat.spec.js   |   6 +-
 .../integration/group-member-removal.spec.js  |   2 +-
 .../cypress/integration/notifications.spec.js |   2 +-
 13 files changed, 305 insertions(+), 71 deletions(-)
 create mode 100644 frontend/views/containers/global-dashboard/DirectMessages.vue
 create mode 100644 frontend/views/containers/global-dashboard/NewsAndUpdates.vue
 create mode 100644 frontend/views/pages/GlobalDashboard.vue

diff --git a/frontend/assets/style/_icons.scss b/frontend/assets/style/_icons.scss
index 56b36265a7..2a95223e62 100644
--- a/frontend/assets/style/_icons.scss
+++ b/frontend/assets/style/_icons.scss
@@ -69,7 +69,8 @@ $icons: (
   magnifying-minus: "\f010",
   magnifying-plus: "\f00e",
   paper-clip: "\f0c6",
-  file: "\f15c"
+  file: "\f15c",
+  newspaper: "\f1ea"
 );
 
 @font-face {
diff --git a/frontend/assets/style/components/_custom-markdowns.scss b/frontend/assets/style/components/_custom-markdowns.scss
index 4b57cc4d18..79687e1f7d 100644
--- a/frontend/assets/style/components/_custom-markdowns.scss
+++ b/frontend/assets/style/components/_custom-markdowns.scss
@@ -77,8 +77,7 @@
     }
   }
 
-  a {
-    color: $primary_0;
-    text-decoration: underline;
+  .link {
+    border-bottom-color: currentColor;
   }
 }
diff --git a/frontend/controller/router.js b/frontend/controller/router.js
index 4828ee60a6..857375470d 100644
--- a/frontend/controller/router.js
+++ b/frontend/controller/router.js
@@ -18,6 +18,7 @@ const lazyContributions = lazyPage(() => import('@pages/Contributions.vue'))
 const lazyDesignSystem = lazyPage(() => import('@pages/DesignSystem.vue'))
 const lazyGroupChat = lazyPage(() => import('@pages/GroupChat.vue'))
 const lazyGroupDashboard = lazyPage(() => import('@pages/GroupDashboard.vue'))
+const lazyGlobalDashboard = lazyPage(() => import('@pages/GlobalDashboard.vue'))
 const lazyGroupSettings = lazyPage(() => import('@pages/GroupSettings.vue'))
 const lazyPayments = lazyPage(() => import('@pages/Payments.vue'))
 const lazyPendingApproval = lazyPage(() => import('@pages/PendingApproval.vue'))
@@ -98,6 +99,16 @@ const router: any = new Router({
       meta: { title: L('Group Dashboard') },
       beforeEnter: createEnterGuards(loginGuard, groupGuard, pendingApprovalGuard)
     },
+    {
+      path: '/global-dashboard/:id',
+      component: lazyGlobalDashboard,
+      name: 'GlobalDashboard',
+      meta: { title: L('Global Dashboard') },
+      beforeEnter: createEnterGuards(loginGuard, groupGuard)
+    },
+    {
+      path: '/global-dashboard', redirect: '/global-dashboard/news-and-updates'
+    },
     {
       path: '/contributions',
       component: lazyContributions,
diff --git a/frontend/views/containers/global-dashboard/DirectMessages.vue b/frontend/views/containers/global-dashboard/DirectMessages.vue
new file mode 100644
index 0000000000..f6b8c7f74b
--- /dev/null
+++ b/frontend/views/containers/global-dashboard/DirectMessages.vue
@@ -0,0 +1,14 @@
+<template lang='pug'>
+.c-news-and-updates-container
+  i18n(tag='p') Direct Messages: Coming soon!
+</template>
+
+<script>
+export default ({
+  name: 'NewAndUpdates'
+}: Object)
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/style/_variables.scss";
+</style>
diff --git a/frontend/views/containers/global-dashboard/NewsAndUpdates.vue b/frontend/views/containers/global-dashboard/NewsAndUpdates.vue
new file mode 100644
index 0000000000..3cab5a7707
--- /dev/null
+++ b/frontend/views/containers/global-dashboard/NewsAndUpdates.vue
@@ -0,0 +1,101 @@
+<template lang='pug'>
+.c-news-and-updates-container
+  .c-post-block(v-for='post in dummyPosts' :key='post.id')
+    .c-post-created-date {{ humanDate(post.createdAt, { month: 'long', year: 'numeric', day: 'numeric' }) }}
+
+    .card.c-post-card
+      .c-post-img-container
+        avatar.c-post-img(
+          src='/assets/images/group-income-icon-transparent-circle.png'
+          alt='GI Logo'
+          size='xs'
+        )
+      .c-post-content
+        h3.is-title-4 {{ post.title }}
+        p(v-safe-html:a='convertToMarkdown(post.content)')
+</template>
+
+<script>
+import { humanDate } from '@model/contracts/shared/time.js'
+import { convertToMarkdown } from '@view-utils/convert-to-markdown.js'
+import Avatar from '@components/Avatar.vue'
+
+const dummyPosts = [
+  {
+    id: 'dummy-post-1',
+    createdAt: new Date('2023-06-08'),
+    title: 'The Prototype is Ready',
+    content: "It's been quite a journey, but we're finally here. A new kind of software is ready for testing. " +
+      "If you have a group of friends/family that's interested in supporting one another using monetary and non-monetary means, " +
+      "you're a perfect fit to try out the Group Income prototype, and we want to hear from you! Read more on our blog: " +
+      '[https://groupincome.org/2023/06/the-prototype-is-ready/](https://groupincome.org/2023/06/the-prototype-is-ready/)'
+  },
+  {
+    id: 'dummy-post-2',
+    createdAt: new Date('2021-06-08'),
+    title: 'Roadmap Updates',
+    content: "Some say it's not the destination that matters so much, but the journey and friends you meet along the way. " +
+    "I couldn't agree more. But also, destinations aren't to be underestimated either! Back in 2019, during the Before Times, " +
+    'our team — a mixture of independent contractors and volunteers — got together. Read more on our blog: ' +
+    '[https://groupincome.org/2021/06/bulgaria-hackathon-2019-roadmap-updates-hiring/](https://groupincome.org/2021/06/bulgaria-hackathon-2019-roadmap-updates-hiring/)'
+  }
+]
+
+export default ({
+  name: 'NewAndUpdates',
+  components: {
+    Avatar
+  },
+  data () {
+    return {
+      dummyPosts
+    }
+  },
+  methods: {
+    humanDate,
+    convertToMarkdown
+  }
+}: Object)
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/style/_variables.scss";
+
+.c-post-block {
+  position: relative;
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+.c-post-created-date {
+  padding-left: 1rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.c-post-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  .c-post-img-container {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
+    background-color: $general_2;
+    flex-shrink: 0;
+  }
+
+  .c-post-content {
+    flex-grow: 1;
+
+    h3 {
+      margin-bottom: 0.25rem;
+    }
+  }
+}
+</style>
diff --git a/frontend/views/containers/navigation/GroupsList.vue b/frontend/views/containers/navigation/GroupsList.vue
index 2846bbf38b..de53f006db 100644
--- a/frontend/views/containers/navigation/GroupsList.vue
+++ b/frontend/views/containers/navigation/GroupsList.vue
@@ -1,10 +1,20 @@
 <template lang='pug'>
 ul.c-group-list(v-if='groupsByName.length' data-test='groupsList')
+  li.c-group-list-item.group-badge(:class='{ "is-active": isInGlobalDashboard }')
+    tooltip(
+      direction='right'
+      :text='L("Global dashboard")'
+    )
+      button.c-group-picture.is-unstyled.c-global-dashboard-logo(@click='onGlobalDashboardClick')
+        avatar.c-avatar(
+          src='/assets/images/group-income-icon-transparent-circle.png'
+          alt='Global dashboard logo'
+        )
+
   li.c-group-list-item.group-badge(
     v-for='(group, index) in groupsByName'
     :key='`group-${index}`'
-    tag='button'
-    :class='{ "is-active": currentGroupId === group.contractID}'
+    :class='{ "is-active": !isInGlobalDashboard && currentGroupId === group.contractID}'
   )
     tooltip(
       direction='right'
@@ -64,6 +74,9 @@ export default ({
           this.groupUnreadMessages(group.contractID) + this.unreadGroupNotificationCountFor(group.contractID) > 0
         ]))
       )
+    },
+    isInGlobalDashboard () {
+      return this.$route.path.startsWith('/global-dashboard')
     }
   },
   methods: {
@@ -72,6 +85,13 @@ export default ({
     },
     handleMenuSelect (id) {
       id && this.changeGroup(id)
+
+      if (this.isInGlobalDashboard) {
+        this.$router.push('/dashboard')
+      }
+    },
+    onGlobalDashboardClick () {
+      this.$router.push(({ path: '/global-dashboard' }))
     },
     changeGroup (hash) {
       const path = this.$route.path
@@ -174,5 +194,17 @@ export default ({
 
 .c-group-picture {
   display: flex;
+
+  &.c-global-dashboard-logo {
+    background-color: $background_0;
+    border-radius: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+
+    ::v-deep img.c-avatar {
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+  }
 }
 </style>
diff --git a/frontend/views/containers/navigation/Navigation.vue b/frontend/views/containers/navigation/Navigation.vue
index f182ac0a2c..a28f5b6925 100644
--- a/frontend/views/containers/navigation/Navigation.vue
+++ b/frontend/views/containers/navigation/Navigation.vue
@@ -5,77 +5,93 @@ nav.c-navigation(
 )
   toggle(@toggle='toggleMenu' element='navigation' :aria-expanded='ephemeral.isActive' data-test='NavigationToggleBtn')
     badge.c-toggle-badge(v-if='totalUnreadNotificationCount' data-test='dashboardBadge') {{ totalUnreadNotificationCount }}
-  groups-list(v-if='groupsByName.length > 1' :inert='isInert')
+  groups-list(v-if='groupsByName.length >= 1' :inert='isInert')
 
   .c-navigation-wrapper(:inert='isInert')
-    .c-navigation-header
-      h1.sr-only Main Menu
+    template(v-if='isInGlobalDashboard')
+      .c-navigation-header
+        i18n.sr-only(tag='h1') Global Dashboard Menu
 
-      router-link(to='/home')
         img.c-logo(:src='logo' alt='GroupIncome\'s logo')
 
-      notification-bell(v-if='!notApprovedToGroupYet' data-test='notificationBell')
+      .c-navigation-body
+        .c-navigation-body-top
+          ul.c-menu-list
+            list-item(v-for='entry in config.globalDashboard'
+              tag='router-link'
+              :key='entry.id'
+              :icon='entry.icon'
+              :to='entry.routeTo'
+              :data-test='"global-dashboard_" + entry.id'
+            ) {{ entry.title }}
 
-    .c-navigation-body(
-      @click.self='enableTimeTravel'
-      v-if='!notApprovedToGroupYet && groupsByName.length'
-    )
-      .c-navigation-body-top
-        ul.c-menu-list
-          list-item(tag='router-link' icon='columns' to='/dashboard' data-test='dashboard')
-            i18n Dashboard
-          list-item(tag='router-link' icon='chart-pie' to='/contributions' data-test='contributionsLink')
-            i18n Contributions
-          list-item(tag='router-link' icon='tag' to='/payments' data-test='paymentsLink')
-            i18n Payments
-          list-item(
-            tag='router-link'
-            icon='comments'
-            to='/group-chat'
-            :badgeCount='currentGroupUnreadMessagesCount'
-            data-test='groupChatLink'
-          )
-            i18n Chat
-          list-item(tag='router-link' icon='cog' to='/group-settings' data-test='groupSettingsLink')
-            i18n Group Settings
+    template(v-else)
+      .c-navigation-header
+        i18n.sr-only(tag='h1') Main Menu
 
-        .c-navigation-separator(v-if='groupsByName.length < 2')
-          button(
-            class='is-small is-outlined'
-            @click='openModal("GroupCreationModal")'
-            data-test='createGroup'
-            :aria-label='L("Add a group")'
-          )
-            i.icon-plus.is-prefix
-            i18n Add a group
+        router-link(to='/home')
+          img.c-logo(:src='logo' alt='GroupIncome\'s logo')
 
-      .c-navigation-bottom
-        ul.c-menu-list-bottom
-          i18n(
-            tag='a'
-            :href='ALLOWED_URLS.BLOG_PAGE'
-            target='_blank'
-            rel='noopener noreferrer'
-          ) Blog
+        notification-bell(v-if='!notApprovedToGroupYet' data-test='notificationBell')
 
-          i18n(
-            tag='a'
-            :href='ALLOWED_URLS.COMMUNITY_PAGE'
-            target='_blank'
-            rel='noopener noreferrer'
-          ) Help &amp; Feedback
+      .c-navigation-body(
+        @click.self='enableTimeTravel'
+        v-if='!notApprovedToGroupYet && groupsByName.length'
+      )
+        .c-navigation-body-top
+          ul.c-menu-list
+            list-item(tag='router-link' icon='columns' to='/dashboard' data-test='dashboard')
+              i18n Dashboard
+            list-item(tag='router-link' icon='chart-pie' to='/contributions' data-test='contributionsLink')
+              i18n Contributions
+            list-item(tag='router-link' icon='tag' to='/payments' data-test='paymentsLink')
+              i18n Payments
+            list-item(
+              tag='router-link'
+              icon='comments'
+              to='/group-chat'
+              :badgeCount='currentGroupUnreadMessagesCount'
+              data-test='groupChatLink'
+            )
+              i18n Chat
+            list-item(tag='router-link' icon='cog' to='/group-settings' data-test='groupSettingsLink')
+              i18n Group Settings
 
-          i18n(
-            tag='a'
-            :href='ALLOWED_URLS.DONATE_PAGE'
-            target='_blank'
-            rel='noopener noreferrer'
-          ) Donate
+          .c-navigation-separator(v-if='groupsByName.length < 2')
+            button(
+              class='is-small is-outlined'
+              @click='openModal("GroupCreationModal")'
+              data-test='createGroup'
+              :aria-label='L("Add a group")'
+            )
+              i.icon-plus.is-prefix
+              i18n Add a group
+
+        .c-navigation-bottom
+          ul.c-menu-list-bottom
+            i18n(
+              tag='a'
+              :href='ALLOWED_URLS.BLOG_PAGE'
+              target='_blank'
+              rel='noopener noreferrer'
+            ) Blog
+
+            i18n(
+              tag='a'
+              :href='ALLOWED_URLS.COMMUNITY_PAGE'
+              target='_blank'
+              rel='noopener noreferrer'
+            ) Help &amp; Feedback
+
+            i18n(
+              tag='a'
+              :href='ALLOWED_URLS.DONATE_PAGE'
+              target='_blank'
+              rel='noopener noreferrer'
+            ) Donate
 
-    //- .c-navigation-footer(v-if='groupsByName.length')
     .c-navigation-footer(v-if='showNav')
       profile
-  //- component(:is='ephemeral.timeTravelComponentName')
 </template>
 
 <script>
@@ -90,6 +106,7 @@ import { mapState, mapGetters } from 'vuex'
 import { OPEN_MODAL } from '@utils/events.js'
 import { DESKTOP } from '@view-utils/breakpoints.js'
 import { showNavMixin } from '@view-utils/misc.js'
+import { GLOBAL_DASHBOARD_SETTINGS } from '@pages/GlobalDashboard.vue'
 import { debounce } from '@model/contracts/shared/giLodash.js'
 
 export default ({
@@ -106,7 +123,9 @@ export default ({
   data () {
     return {
       config: {
-        debounceResize: debounce(this.checkIsTouch, 250)
+        debounceResize: debounce(this.checkIsTouch, 250),
+        globalDashboard: Object.entries(GLOBAL_DASHBOARD_SETTINGS)
+          .map(([key, entry]) => ({ ...entry, id: key }))
       },
       ephemeral: {
         isActive: false,
@@ -154,6 +173,9 @@ export default ({
     notApprovedToGroupYet () {
       // TODO: once the relevant work is implemented on back-end, this check logic needs to be updated accordingly
       return this.$route.path === '/pending-approval'
+    },
+    isInGlobalDashboard () {
+      return this.$route.path.startsWith('/global-dashboard')
     }
   },
   methods: {
diff --git a/frontend/views/pages/DesignSystem.vue b/frontend/views/pages/DesignSystem.vue
index 26e3d2b231..8fff502087 100644
--- a/frontend/views/pages/DesignSystem.vue
+++ b/frontend/views/pages/DesignSystem.vue
@@ -202,6 +202,7 @@ page(
               i.icon-link icon-link
               i.icon-lock icon-lock
               i.icon-minus-circle icon-minus-circle
+              i.icon-newspaper newspaper
               i.icon-paper-plane icon-paper-plane
               i.icon-pencil-alt icon-pencil-alt
               i.icon-plus icon-plus
diff --git a/frontend/views/pages/GlobalDashboard.vue b/frontend/views/pages/GlobalDashboard.vue
new file mode 100644
index 0000000000..84ce9e2faf
--- /dev/null
+++ b/frontend/views/pages/GlobalDashboard.vue
@@ -0,0 +1,53 @@
+<template lang="pug">
+page(
+  pageTestName='GlobalDashboard'
+  pageTestHeaderName='pageHeaderName'
+)
+  template(#title='') {{ currentTabSetting.title }}
+
+  component(:is='currentContent' :key='$route.params.id')
+</template>
+
+<script>
+import { L } from '@common/common.js'
+import Page from '@components/Page.vue'
+import NewsAndUpdates from '@containers/global-dashboard/NewsAndUpdates.vue'
+import DirectMessages from '@containers/global-dashboard/DirectMessages.vue'
+
+export const GLOBAL_DASHBOARD_SETTINGS: {[string]: Object } = {
+  'news-and-updates': {
+    title: L('News & Updates'),
+    routeTo: '/global-dashboard/news-and-updates',
+    icon: 'newspaper'
+  },
+  'direct-messages': {
+    title: L('Direct Messages'),
+    routeTo: '/global-dashboard/direct-messages',
+    icon: 'comment'
+  }
+}
+
+const contentComponentsMap = {
+  'news-and-updates': NewsAndUpdates,
+  'direct-messages': DirectMessages
+}
+
+export default ({
+  name: 'GlobalDashboard',
+  components: {
+    Page
+  },
+  computed: {
+    currentTabSetting () {
+      return GLOBAL_DASHBOARD_SETTINGS[this.$route.params.id || 'news-and-updates']
+    },
+    currentContent () {
+      return contentComponentsMap[this.$route.params.id || 'news-and-updates']
+    }
+  }
+}: Object)
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/style/_variables.scss";
+</style>
diff --git a/frontend/views/utils/convert-to-markdown.js b/frontend/views/utils/convert-to-markdown.js
index 45c8222580..18487bacb7 100644
--- a/frontend/views/utils/convert-to-markdown.js
+++ b/frontend/views/utils/convert-to-markdown.js
@@ -7,7 +7,7 @@ marked.use({
       level: 'inline',
       renderer (token) {
         // custom renderer for <a> tag for setting target='_blank' to the output HTML
-        return `<a href='${token.href}' target='_blank'>${token.text}</a>`
+        return `<a class='link' href='${token.href}' target='_blank'>${token.text}</a>`
       }
     }
   ]
diff --git a/test/cypress/integration/group-chat.spec.js b/test/cypress/integration/group-chat.spec.js
index ebcc08fbd9..5ca594e5e4 100644
--- a/test/cypress/integration/group-chat.spec.js
+++ b/test/cypress/integration/group-chat.spec.js
@@ -332,18 +332,18 @@ describe('Group Chat Basic Features (Create & Join & Leave & Close)', () => {
     cy.giCheckIfJoinedChatroom(CHATROOM_GENERAL_NAME, me)
 
     // Switch from group2 to group1 on the group chat page
-    cy.getByDT('groupsList').find('li:first-child button').click()
+    cy.getByDT('groupsList').find('li:nth-child(2) button').click()
     cy.giWaitUntilMessagesLoaded()
     cy.giCheckIfJoinedChatroom(CHATROOM_GENERAL_NAME, user2)
     switchChannel(channelsOf2For1[0])
 
     // Switch from group1 to group2 on the group chat page
-    cy.getByDT('groupsList').find('li:nth-child(2) button').click()
+    cy.getByDT('groupsList').find('li:nth-child(3) button').click()
     cy.giWaitUntilMessagesLoaded()
     cy.getByDT('channelName').should('contain', CHATROOM_GENERAL_NAME)
 
     // Switch from group2 to group1 on the group chat page
-    cy.getByDT('groupsList').find('li:first-child button').click()
+    cy.getByDT('groupsList').find('li:nth-child(2) button').click()
     cy.giWaitUntilMessagesLoaded()
     cy.getByDT('channelName').should('contain', channelsOf2For1[0])
   })
diff --git a/test/cypress/integration/group-member-removal.spec.js b/test/cypress/integration/group-member-removal.spec.js
index 53509fac2f..2c90b6a68b 100644
--- a/test/cypress/integration/group-member-removal.spec.js
+++ b/test/cypress/integration/group-member-removal.spec.js
@@ -198,7 +198,7 @@ describe('Group - Removing a member', () => {
     cy.giSwitchUser(`user2-${userId}`)
 
     // Change from groupB to groupA dashboard
-    cy.getByDT('groupsList').find('li:nth-child(1) button').click()
+    cy.getByDT('groupsList').find('li:nth-child(2) button').click()
 
     getProposalItems().eq(0).within(() => {
       cy.getByDT('typeDescription').should('contain', `Remove userbot-${userId} from the group.`)
diff --git a/test/cypress/integration/notifications.spec.js b/test/cypress/integration/notifications.spec.js
index 3c45d81ee7..353843d5ac 100644
--- a/test/cypress/integration/notifications.spec.js
+++ b/test/cypress/integration/notifications.spec.js
@@ -184,7 +184,7 @@ describe('Notifications', () => {
     cy.giCreateGroup(dreamersGroupName, { bypassUI: true })
     cy.giCreateGroup(turtlesGroupName, { bypassUI: true })
     // The sidebar should now be visible and have two group buttons and one "+" button.
-    cy.getByDT('groupsList').find('button').should('have.length', 3)
+    cy.getByDT('groupsList').find('button').should('have.length', 4)
   })
 
   it('should not display any red badge yet', () => {