[ui] Add product tour for first time users

Redirects to the '/product-tour' route the first
time the UI is loaded on a device. The tour uses
vue-shepherd to display a series of tooltips that describe
some of the website's features and can be skipped any time.
When the tour is finished or skipped it is saved as
viewed on a cookie to avoid loading it again.

Signed-off-by: Eva Millán <[email protected]>

Author: evamillan

releases/unreleased/new-user-onboarding.yml

@@ -0,0 +1,9 @@
+---
+title: New user onboarding
+category: added
+author: Eva Millan <[email protected]>
+issue: null
+notes: >
+  Loading the user interface for the fist time
+  takes users to an optional tour explaining
+  SortingHat's most relevant features.

ui/package.json

@@ -24,6 +24,7 @@
     "vue": "^2.7.14",
     "vue-apollo": "^3.1.0",
     "vue-router": "^3.4.9",
+    "vue-shepherd": "0.3.0",
     "vuetify": "^2.6.10",
     "vuex": "^3.1.3",
     "yargs": "^17.0.1"

ui/public/images/affiliate.gif

@@ -114,7 +114,7 @@
       :items-per-page="itemsPerPage"
       :loading="loading"
     >
-      <template v-slot:item="{ item, expand, isExpanded }">
+      <template v-slot:item="{ item, expand, isExpanded, index }">
         <individual-entry
           draggable
           :name="item.name"
@@ -144,6 +144,7 @@
           @lock="handleLock(item.uuid, $event)"
           @enroll="confirmEnroll(item, $event)"
           @openMatchesModal="openMatchesModal(item.uuid)"
+          :ref="`indv_entry_${index}`"
         />
       </template>
       <template v-if="isExpandable" v-slot:expanded-item="{ item }">
@@ -160,7 +161,7 @@
           @unmerge="unmerge($event)"
           @withdraw="removeAffiliation($event, item.uuid)"
           @updateEnrollment="updateEnrollmentDate"
-          @openEnrollmentModal="confirmEnroll"
+          @openEnrollmentModal="confirmEnroll(item, $event)"
           @openTeamModal="openTeamModal"
         />
       </template>

ui/public/images/lock.gif

@@ -64,7 +64,7 @@
       :page.sync="page"
       :loading="loading"
     >
-      <template v-slot:item="{ item, expand, isExpanded }">
+      <template v-slot:item="{ item, expand, isExpanded, index }">
         <organization-entry
           :name="item.name"
           :enrollments="getEnrolledIndividuals(item.enrollments)"
@@ -79,6 +79,7 @@
           @delete="confirmDelete(item.name)"
           @getEnrollments="$emit('getEnrollments', { enrollment: item.name })"
           @addTeam="createTeam(item.name, $event)"
+          :ref="`org_entry_${index}`"
         />
       </template>
       <template v-slot:expanded-item="{ item }">

ui/public/images/merge.gif

@@ -12,6 +12,7 @@ import Cookies from "js-cookie";
 import { ApolloLink } from "apollo-link";
 import Logger from "./plugins/logger";
 import GetErrorMessage from "./plugins/errors";
+import VueShepherd from "vue-shepherd";
 
 const API_URL = process.env.VUE_APP_API_URL || `${process.env.BASE_URL}api/`;
 
@@ -54,6 +55,7 @@ fetch(API_URL, { credentials: "include" }).then(() => {
   Vue.use(VueRouter);
   Vue.use(Logger);
   Vue.use(GetErrorMessage);
+  Vue.use(VueShepherd);
 
   const apolloProvider = new VueApollo({
     defaultClient: apolloClient,

ui/public/images/workspace.gif

@@ -6,7 +6,7 @@ const routes = [
     path: "/",
     name: "Dashboard",
     component: () => import("../views/Dashboard"),
-    meta: { requiresAuth: true, title: "Sorting Hat" },
+    meta: { requiresAuth: true, showTour: true, title: "Sorting Hat" },
   },
   {
     path: "/individual/:mk",
@@ -50,6 +50,12 @@ const routes = [
     component: () => import("../views/Organization"),
     meta: { requiresAuth: true, title: "Sorting Hat" },
   },
+  {
+    path: "/product-tour",
+    name: "ProductTour",
+    component: () => import("../views/ProductTour"),
+    meta: { requiresAuth: true, title: "Sorting Hat" },
+  },
 ];
 
 const router = new Router({
@@ -60,11 +66,19 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
   const isAuthenticated = store.getters.isAuthenticated;
+  const showTour =
+    to.matched.some((record) => record.meta.showTour) &&
+    store.getters.shouldShowTour;
+
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!isAuthenticated) {
       next({
         path: "/login",
       });
+    } else if (showTour) {
+      next({
+        path: "/product-tour",
+      });
     } else {
       next();
     }