[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

@@ -52,6 +52,26 @@
           </v-list-item>
         </v-list>
       </v-menu>
+      <v-menu v-if="user" offset-y left>
+        <template v-slot:activator="{ on }">
+          <v-btn depressed small color="primary" v-on="on">
+            <v-icon small left> mdi-help-circle </v-icon>
+            Help
+            <v-icon small right> mdi-chevron-down </v-icon>
+          </v-btn>
+        </template>
+        <v-list color="primary" dark dense>
+          <v-list-item
+            href="https://chaoss.github.io/grimoirelab-tutorial/sortinghat"
+            target="_blank"
+          >
+            <v-list-item-title>Documentation</v-list-item-title>
+          </v-list-item>
+          <v-list-item to="/product-tour">
+            <v-list-item-title>Product tour</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-app-bar>
     <transition name="fade" mode="out-in">
       <router-view />

ui/public/images/lock.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 }">

ui/public/images/merge.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/workspace.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,