From 8acc6a8cf0436aff80c3c9fd31137a84ec5a5782 Mon Sep 17 00:00:00 2001
From: Gergely Kiss <aspecter@users.noreply.github.com>
Date: Fri, 3 Mar 2023 12:15:19 +0100
Subject: [PATCH] Support touring with Vue.js 3. (#963)

---
 package-lock.json                          | 100 ++++---------
 package.json                               |   2 +-
 quasar.conf.js                             |   2 +-
 src/App.vue                                |   6 +-
 src/boot/tour.ts                           |  14 ++
 src/components/InitialContent.vue          |   2 +-
 src/components/ZclClusterManager.vue       | 161 ++++++++++-----------
 src/components/ZclEndpointCard.vue         |   2 +-
 src/css/zclTour.scss                       |  67 +++++++++
 src/layouts/ZclLayout.vue                  |  12 +-
 src/tutorials/{VueTour.vue => ZclTour.vue} |  76 ++++++----
 src/tutorials/tutorialConfig.json          |  82 +++--------
 test/ui.test.js                            |   2 +-
 13 files changed, 270 insertions(+), 258 deletions(-)
 create mode 100644 src/boot/tour.ts
 create mode 100644 src/css/zclTour.scss
 rename src/tutorials/{VueTour.vue => ZclTour.vue} (86%)

diff --git a/package-lock.json b/package-lock.json
index ade69309ae..dd7f96225d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@globalhive/vuejs-tour": "^1.3.4",
         "@quasar/extras": "^1.15.6",
         "@types/yargs": "^15.0.5",
         "axios": "^0.26.1",
@@ -44,7 +45,6 @@
         "uuid": "^8.3.2",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6",
-        "vue-tour": "^2.0.0",
         "vuex": "^4.1.0",
         "ws": "^8.5.0",
         "xml2js": "^0.4.23",
@@ -3053,6 +3053,16 @@
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
       "devOptional": true
     },
+    "node_modules/@globalhive/vuejs-tour": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@globalhive/vuejs-tour/-/vuejs-tour-1.3.4.tgz",
+      "integrity": "sha512-5FH/x4lb2SgvnKhts9HHpgGQbczqmZxYD4an2uA8OUPdeTGjmWBihwLoiSn1C5xzhQu4/4+4+P62YxRcBkSuGw==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.6",
+        "jump.js": "^1.0.2",
+        "vue": "^3.2.41"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -17345,7 +17355,8 @@
     "node_modules/hash-sum": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
-      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true
     },
     "node_modules/hasha": {
       "version": "5.2.2",
@@ -32734,41 +32745,6 @@
         "he": "^1.2.0"
       }
     },
-    "node_modules/vue-tour": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vue-tour/-/vue-tour-2.0.0.tgz",
-      "integrity": "sha512-vhKzqdhunQ3EoO1733UxhOB389u3EKv2X8JqYhX4tIq4ilqlZtnY3azPFBYPFmnAqHn5RyZBrP2CpqSaxTs8og==",
-      "dependencies": {
-        "@popperjs/core": "^2.9.1",
-        "hash-sum": "^2.0.0",
-        "jump.js": "^1.0.2",
-        "vue": "^2.6.12"
-      }
-    },
-    "node_modules/vue-tour/node_modules/@vue/compiler-sfc": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
-      "dependencies": {
-        "@babel/parser": "^7.18.4",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/vue-tour/node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-    },
-    "node_modules/vue-tour/node_modules/vue": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
-      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
-      "dependencies": {
-        "@vue/compiler-sfc": "2.7.14",
-        "csstype": "^3.1.0"
-      }
-    },
     "node_modules/vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
@@ -36356,6 +36332,16 @@
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
       "devOptional": true
     },
+    "@globalhive/vuejs-tour": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@globalhive/vuejs-tour/-/vuejs-tour-1.3.4.tgz",
+      "integrity": "sha512-5FH/x4lb2SgvnKhts9HHpgGQbczqmZxYD4an2uA8OUPdeTGjmWBihwLoiSn1C5xzhQu4/4+4+P62YxRcBkSuGw==",
+      "requires": {
+        "@popperjs/core": "^2.11.6",
+        "jump.js": "^1.0.2",
+        "vue": "^3.2.41"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -47452,7 +47438,8 @@
     "hash-sum": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
-      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg=="
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true
     },
     "hasha": {
       "version": "5.2.2",
@@ -59301,43 +59288,6 @@
         "he": "^1.2.0"
       }
     },
-    "vue-tour": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vue-tour/-/vue-tour-2.0.0.tgz",
-      "integrity": "sha512-vhKzqdhunQ3EoO1733UxhOB389u3EKv2X8JqYhX4tIq4ilqlZtnY3azPFBYPFmnAqHn5RyZBrP2CpqSaxTs8og==",
-      "requires": {
-        "@popperjs/core": "^2.9.1",
-        "hash-sum": "^2.0.0",
-        "jump.js": "^1.0.2",
-        "vue": "^2.6.12"
-      },
-      "dependencies": {
-        "@vue/compiler-sfc": {
-          "version": "2.7.14",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-          "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
-          "requires": {
-            "@babel/parser": "^7.18.4",
-            "postcss": "^8.4.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "csstype": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-          "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
-        },
-        "vue": {
-          "version": "2.7.14",
-          "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
-          "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
-          "requires": {
-            "@vue/compiler-sfc": "2.7.14",
-            "csstype": "^3.1.0"
-          }
-        }
-      }
-    },
     "vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
diff --git a/package.json b/package.json
index 24bb59c38e..552a854534 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     "zip": "node ./src-script/7zip-bin-wrapper.js"
   },
   "dependencies": {
+    "@globalhive/vuejs-tour": "^1.3.4",
     "@quasar/extras": "^1.15.6",
     "@types/yargs": "^15.0.5",
     "axios": "^0.26.1",
@@ -150,7 +151,6 @@
     "uuid": "^8.3.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "vue-tour": "^2.0.0",
     "vuex": "^4.1.0",
     "ws": "^8.5.0",
     "xml2js": "^0.4.23",
diff --git a/quasar.conf.js b/quasar.conf.js
index a00992c766..4166f356ed 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -18,7 +18,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/cli-documentation/boot-files
-    boot: ['axios', 'globalapi', 'ws'],
+    boot: ['axios', 'globalapi', 'tour', 'ws'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.sass'],
diff --git a/src/App.vue b/src/App.vue
index df3c04d2a3..eccccbf1fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,14 +26,14 @@ limitations under the License.
     >
       <q-icon name="warning" style="font-size: 2.5em; color: red" />
     </q-btn>
-    <!-- <VueTour /> -->
+    <zcl-tour />
   </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import { QSpinnerGears } from 'quasar'
-// import VueTour from './tutorials/VueTour.vue'
+import ZclTour from './tutorials/ZclTour.vue'
 import CommonMixin from './util/common-mixin'
 const rendApi = require(`../src-shared/rend-api.js`)
 const restApi = require(`../src-shared/rest-api.js`)
@@ -85,7 +85,7 @@ async function initLoad(store) {
 export default defineComponent({
   name: 'App',
   components: {
-    // VueTour,
+    ZclTour,
   },
   mixins: [CommonMixin],
   computed: {
diff --git a/src/boot/tour.ts b/src/boot/tour.ts
new file mode 100644
index 0000000000..d67156d45a
--- /dev/null
+++ b/src/boot/tour.ts
@@ -0,0 +1,14 @@
+import { boot } from 'quasar/wrappers'
+import VueJsTour from '@globalhive/vuejs-tour'
+import '@globalhive/vuejs-tour/dist/style.css'
+import '../css/zclTour.scss'
+
+export let startTour = () => {}
+
+export const setStartTour = (startTourFunction) => {
+  startTour = startTourFunction
+}
+
+export default boot(async ({ app }) => {
+  app.use(VueJsTour)
+})
diff --git a/src/components/InitialContent.vue b/src/components/InitialContent.vue
index 1a9c970a85..3e2de07272 100644
--- a/src/components/InitialContent.vue
+++ b/src/components/InitialContent.vue
@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <template>
-  <div>
+  <div class="q-px-lg">
     <div v-if="uiTheme === 'matter'">
       <h3 id="zcl-advanced-platform">Welcome to Matter</h3>
     </div>
diff --git a/src/components/ZclClusterManager.vue b/src/components/ZclClusterManager.vue
index 3ab4dae83a..6af00fcb38 100644
--- a/src/components/ZclClusterManager.vue
+++ b/src/components/ZclClusterManager.vue
@@ -15,95 +15,90 @@ limitations under the License.
 -->
 
 <template>
-  <div v-show="selectedEndpointTypeId.length != 0">
-    <q-scroll-area style="height: 100vh; max-width: 200vh">
-      <q-card flat square>
-        <div class="row">
-          <q-toolbar>
-            <q-toolbar-title style="font-weight: bolder">
-              <span class="v-step-6"
-                >Endpoint
-                {{ this.endpointId[this.selectedEndpointId] }} Clusters</span
-              >
-            </q-toolbar-title>
-          </q-toolbar>
+  <div v-if="selectedEndpointTypeId.length != 0" class="window-height">
+    <div class="row">
+      <q-toolbar>
+        <q-toolbar-title style="font-weight: bolder">
+          <span class="v-step-6"
+            >Endpoint
+            {{ this.endpointId[this.selectedEndpointId] }} Clusters</span
+          >
+        </q-toolbar-title>
+      </q-toolbar>
+    </div>
+    <div class="row bar align=left section-header">
+      <div class="row">
+        <div
+          style="
+            vertical-align: middle;
+            text-align: center;
+            padding: 10px 0 0 0;
+          "
+        >
+          Show
         </div>
-        <div class="row bar align=left section-header">
-          <div class="row">
-            <div
-              style="
-                vertical-align: middle;
-                text-align: center;
-                padding: 10px 0 0 0;
-              "
-            >
-              Show
-            </div>
-            &nbsp; &nbsp;
+        &nbsp; &nbsp;
 
-            <div class="v-step-7">
-              <q-select
-                outlined
-                :model-value="filter"
-                :options="filterOptions"
-                dense
-                class="col-2"
-                @update:model-value="changeDomainFilter($event)"
-                data-test="filter-input"
-              />
-            </div>
-            &nbsp;
-            <div
-              v-for="actionOption in actionOptions"
-              :key="actionOption.label"
+        <div class="v-step-7">
+          <q-select
+            outlined
+            :model-value="filter"
+            :options="filterOptions"
+            dense
+            class="col-2"
+            @update:model-value="changeDomainFilter($event)"
+            data-test="filter-input"
+          />
+        </div>
+        &nbsp;
+        <div v-for="actionOption in actionOptions" :key="actionOption.label">
+          <q-btn
+            class="full-height"
+            outline
+            @click="doActionFilter(actionOption)"
+            :label="actionOption.label"
+          />
+        </div>
+      </div>
+      <q-space />
+      <q-input
+        dense
+        outlined
+        clearable
+        class="col-4"
+        placeholder="Search Clusters"
+        @update:model-value="changeFilterString($event)"
+        @clear="changeFilterString('')"
+        :model-value="filterString"
+        data-test="search-clusters"
+      >
+        <template v-slot:prepend>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </div>
+    <q-scroll-area style="" class="fit q-px-md">
+      <q-list style="padding-bottom: 250px">
+        <div v-for="(domainName, index) in domainNames" :key="domainName.id">
+          <div v-show="clusterDomains(domainName).length > 0">
+            <q-expansion-item
+              :id="domainName"
+              switch-toggle-side
+              :label="domainName"
+              :ref="domainName + index"
+              @update:model-value="setOpenDomain(domainName, $event)"
+              :model-value="getDomainOpenState(domainName)"
+              data-test="Cluster"
             >
-              <q-btn
-                class="full-height"
-                outline
-                @click="doActionFilter(actionOption)"
-                :label="actionOption.label"
+              <zcl-domain-cluster-view
+                :domainName="domainName"
+                :clusters="clusterDomains(domainName)"
               />
-            </div>
+            </q-expansion-item>
+            <q-separator />
           </div>
-          <q-space />
-          <q-input
-            dense
-            outlined
-            clearable
-            class="col-4"
-            placeholder="Search Clusters"
-            @update:model-value="changeFilterString($event)"
-            @clear="changeFilterString('')"
-            :model-value="filterString"
-            data-test="search-clusters"
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" />
-            </template>
-          </q-input>
         </div>
-        <q-list style="padding-bottom: 250px">
-          <div v-for="(domainName, index) in domainNames" :key="domainName.id">
-            <div v-show="clusterDomains(domainName).length > 0">
-              <q-expansion-item
-                :id="domainName"
-                switch-toggle-side
-                :label="domainName"
-                :ref="domainName + index"
-                @update:model-value="setOpenDomain(domainName, $event)"
-                :model-value="getDomainOpenState(domainName)"
-                data-test="Cluster"
-              >
-                <zcl-domain-cluster-view
-                  :domainName="domainName"
-                  :clusters="clusterDomains(domainName)"
-                />
-              </q-expansion-item>
-              <q-separator />
-            </div>
-          </div>
-        </q-list>
-      </q-card>
+      </q-list>
     </q-scroll-area>
   </div>
 </template>
diff --git a/src/components/ZclEndpointCard.vue b/src/components/ZclEndpointCard.vue
index 867b2b25de..f84f26d9e1 100644
--- a/src/components/ZclEndpointCard.vue
+++ b/src/components/ZclEndpointCard.vue
@@ -17,7 +17,7 @@ limitations under the License.
 <template>
   <div>
     <q-card
-      class="v-step-5"
+      :class="{ 'v-step-5': isSelectedEndpoint }"
       :bordered="isSelectedEndpoint"
       @click="setSelectedEndpointType(endpointReference)"
     >
diff --git a/src/css/zclTour.scss b/src/css/zclTour.scss
new file mode 100644
index 0000000000..adfeb780e2
--- /dev/null
+++ b/src/css/zclTour.scss
@@ -0,0 +1,67 @@
+.body--light {
+  --tour-dialog-background-color-primary: white;
+  --tour-dialog-background-color-secondary: #f2f2f2;
+  --tour-dialog-text-color: black;
+
+  .vjt-actions button {
+    border: 1px solid var(--tour-dialog-background-color-secondary);
+  }
+}
+
+.body--dark {
+  --tour-dialog-background-color-primary: #23241f;
+  --tour-dialog-background-color-secondary: #33332f;
+  --tour-dialog-text-color: white;
+
+  .vjt-actions button {
+    border: 2px solid var(--tour-dialog-background-color-secondary);
+  }
+}
+
+#vjt-tooltip {
+  background-color: var(--tour-dialog-background-color-primary);
+  color: var(--tour-dialog-text-color);
+  border: 2px solid var(--q-primary);
+  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
+    0 3px 1px -2px rgb(0 0 0 / 12%);
+  border-radius: 12px;
+  padding: 12px !important;
+}
+
+#vjt-arrow:before {
+  background-color: var(--tour-dialog-background-color-primary);
+}
+
+#vjt-tooltip[data-popper-placement^='top'] #vjt-arrow:before {
+  border-right: 2px solid var(--q-primary);
+  border-bottom: 2px solid var(--q-primary);
+  border-top: 2px solid var(--tour-dialog-background-color-primary);
+  border-left: 2px solid var(--tour-dialog-background-color-primary);
+}
+#vjt-tooltip[data-popper-placement^='bottom'] #vjt-arrow:before {
+  border-top: 2px solid var(--q-primary);
+  border-left: 2px solid var(--q-primary);
+  border-bottom: 2px solid var(--tour-dialog-background-color-primary);
+  border-right: 2px solid var(--tour-dialog-background-color-primary);
+}
+#vjt-tooltip[data-popper-placement^='left'] #vjt-arrow:before {
+  border-top: 2px solid var(--q-primary);
+  border-right: 2px solid var(--q-primary);
+  border-bottom: 2px solid var(--tour-dialog-background-color-primary);
+  border-left: 2px solid var(--tour-dialog-background-color-primary);
+}
+#vjt-tooltip[data-popper-placement^='right'] #vjt-arrow:before {
+  border-bottom: 2px solid var(--q-primary);
+  border-left: 2px solid var(--q-primary);
+  border-top: 2px solid var(--tour-dialog-background-color-primary);
+  border-right: 2px solid var(--tour-dialog-background-color-primary);
+}
+
+.vjt-actions button {
+  color: var(--tour-dialog-text-color);
+}
+
+.vjt-actions button:hover {
+  background-color: var(--tour-dialog-background-color-secondary);
+  color: var(--tour-dialog-text-color);
+}
diff --git a/src/layouts/ZclLayout.vue b/src/layouts/ZclLayout.vue
index 66c7b0b301..90aad1dd91 100644
--- a/src/layouts/ZclLayout.vue
+++ b/src/layouts/ZclLayout.vue
@@ -64,9 +64,9 @@ limitations under the License.
           <q-tooltip> Preferences </q-tooltip>
         </q-btn>
         <q-btn
-          v-if="this.$store.state.zap.showDevTools && false"
+          v-if="this.$store.state.zap.showDevTools"
           flat
-          @click="showTutorial"
+          @click="startTour"
           icon="psychology_alt"
         >
           <q-tooltip> Tutorial </q-tooltip>
@@ -120,7 +120,7 @@ limitations under the License.
                 </q-expansion-item>
               </q-scroll-area>
             </q-tab-panel>
-            <q-tab-panel :name="restApi.uiMode.ZIGBEE">
+            <q-tab-panel :name="restApi.uiMode.ZIGBEE" class="q-pa-none">
               <zcl-configurator-layout />
             </q-tab-panel>
           </q-tab-panels>
@@ -184,6 +184,8 @@ import ZclConfiguratorLayout from './ZclConfiguratorLayout.vue'
 import SqlQuery from '../components/SqlQuery.vue'
 import About from '../pages/AboutPage.vue'
 import CommonMixin from '../util/common-mixin'
+import { startTour } from '../boot/tour'
+
 const restApi = require(`../../src-shared/rest-api.js`)
 const rendApi = require(`../../src-shared/rend-api.js`)
 const observable = require('../util/observable.js')
@@ -193,9 +195,7 @@ export default {
   mixins: [CommonMixin],
   methods: {
     // This function will start vue tour steps
-    showTutorial() {
-      // this.$tours['ZclTour'].start()
-    },
+    startTour,
     togglePreviewTab() {
       this.$store.commit('zap/togglePreviewTab')
     },
diff --git a/src/tutorials/VueTour.vue b/src/tutorials/ZclTour.vue
similarity index 86%
rename from src/tutorials/VueTour.vue
rename to src/tutorials/ZclTour.vue
index 9557e3c34c..f4f15f4e17 100644
--- a/src/tutorials/VueTour.vue
+++ b/src/tutorials/ZclTour.vue
@@ -16,10 +16,10 @@ limitations under the License.
 <template>
   <div>
     <v-tour
-      name="ZclTour"
+      ref="zcl-tour"
       :steps="tutorialSteps"
-      :callbacks="{ onFinish: disableTutorial, onSkip: disableTutorial }"
-    ></v-tour>
+      @onTourEnd="disableTutorial"
+    />
     <q-dialog
       v-model="deletingTutorialEndpoint"
       class="background-color:transparent"
@@ -48,8 +48,10 @@ limitations under the License.
 <script>
 import tutorialConfig from './tutorialConfig.json'
 import CommonMixin from '../util/common-mixin'
+import { setStartTour } from '../boot/tour'
+
 export default {
-  name: 'VueTour',
+  name: 'ZclTour',
   computed: {
     endpoints: {
       get() {
@@ -76,6 +78,9 @@ export default {
     },
   },
   methods: {
+    startTour() {
+      this.$refs['zcl-tour'].resetTour()
+    },
     // This function will create a endpoint for tutorial
     createNewEndpointForTour(resolve) {
       if (this.endpoints.length < 1) {
@@ -85,7 +90,11 @@ export default {
             deviceTypeRef: this.zclDeviceTypeOptions[0].deviceTypeRef,
           })
           .then((response) => {
-            let profileId = this.asHex(this.zclDeviceTypes[this.zclDeviceTypeOptions[0].deviceTypeRef].profileId, 4)
+            let profileId = this.asHex(
+              this.zclDeviceTypes[this.zclDeviceTypeOptions[0].deviceTypeRef]
+                .profileId,
+              4
+            )
             this.$store
               .dispatch(`zap/addEndpoint`, {
                 endpointId: parseInt(this.getSmallestUnusedEndpointId()),
@@ -160,7 +169,7 @@ export default {
     },
     // This function will disable tutorial
     disableTutorial() {
-      if (this.$router.currentRoute.path === '/') {
+      if (this.$route.path === '/') {
         this.$store.commit('zap/toggleTutorial', false)
         this.$store.commit('zap/triggerExpanded', false)
         this.endpoints.length > 0 ? this.handleDeletionDialog() : ''
@@ -242,7 +251,7 @@ export default {
     // This function will move user to the home page
     comeBackToHomePage() {
       return new Promise((resolve) => {
-        if (this.$router.currentRoute.path !== '/') {
+        if (this.$route.path !== '/') {
           this.$router.push({ name: 'Home' }).then(() => {
             this.$store.commit('zap/triggerExpanded', true)
             resolve()
@@ -255,7 +264,7 @@ export default {
     // This function will open the cluster configuration page
     openConfigure() {
       return new Promise((resolve) => {
-        if (this.$router.currentRoute.path === '/') {
+        if (this.$route.path === '/') {
           this.$store.commit('zap/triggerExpanded', false)
           this.$store
             .dispatch('zap/updateSelectedCluster', this.tourCluster)
@@ -264,7 +273,10 @@ export default {
                 'zap/refreshEndpointTypeCluster',
                 this.selectedEndpointTypeId
               )
-              this.$store.dispatch('zap/setLastSelectedDomain', this.$store.state.zap.domains[0])
+              this.$store.dispatch(
+                'zap/setLastSelectedDomain',
+                this.$store.state.zap.domains[0]
+              )
             })
           this.$router.push({ name: 'cluster' }).then(() => {
             resolve()
@@ -291,7 +303,7 @@ export default {
     // This function will change the tab of configuration page to commands
     openCommandsTabInCluster() {
       return new Promise((resolve) => {
-        if (this.$router.currentRoute.path === '/') {
+        if (this.$route.path === '/') {
           this.$router.push({ name: 'cluster' }).then(() => {
             setTimeout(() => {
               this.$store.commit('zap/openReportTabInCluster', 'commands')
@@ -309,7 +321,7 @@ export default {
     // This function will move user to the home page
     backToHomePage() {
       return new Promise((resolve) => {
-        if (this.$router.currentRoute.path !== '/') {
+        if (this.$route.path !== '/') {
           this.$store.commit('zap/openReportTabInCluster', 'attributes')
           this.$router.push({ name: 'Home' }).then(() => {
             resolve()
@@ -339,27 +351,37 @@ export default {
     }
   },
   mounted() {
-    if (this.$store.state.zap.showDevTools) {
-      this.$tours['ZclTour'].start()
-    }
+    setStartTour(() => this.startTour())
   },
   created() {
     let config = []
-    tutorialConfig.tutorialSteps.forEach((item) => {
+
+    const stepsCount = tutorialConfig.tutorialSteps.length
+    for (let i = 0; i < stepsCount; i++) {
+      const step = tutorialConfig.tutorialSteps[i]
+      const prevStep = i > 0 ? tutorialConfig.tutorialSteps[i - 1].before : null
+      const nextStep =
+        i + 1 < stepsCount ? tutorialConfig.tutorialSteps[i + 1].before : null
       config.push({
-        target: item.target,
-        header: {
-          title: item.title,
-        },
-        params: {
-          placement: item.placement,
-          enableScrolling: item.enableScrolling,
-          highlight: item.highlight,
-        },
-        content: item.content,
-        before: () => (item.before !== '' ? this[item.before]() : ''),
+        target: step.target,
+        // header: {
+        //   title: step.title,
+        // },
+        content: step.title
+          ? '<strong>' + step.title + '</strong><br/>' + step.content
+          : step.content,
+        placement: step.placement,
+        // params: {
+        //   enableScrolling: step.enableScrolling,
+        //   highlight: step.highlight,
+        // },
+        onNext: async () =>
+          nextStep !== null ? await this[nextStep]() : void 0,
+        onPrev: async () =>
+          prevStep !== null ? await this[prevStep]() : void 0,
       })
-    })
+    }
+
     this.tutorialSteps = config
   },
 }
diff --git a/src/tutorials/tutorialConfig.json b/src/tutorials/tutorialConfig.json
index 07749b6ff8..b5b752fffd 100644
--- a/src/tutorials/tutorialConfig.json
+++ b/src/tutorials/tutorialConfig.json
@@ -5,162 +5,126 @@
       "title": "Adding Endpoints",
       "content": "A Zigbee application can have multiple endpoints. Each endpoint contains a device configuration made up of Clusters on that endpoint. Add a new endpoint to your application by clicking <strong>ADD NEW ENDPOINT</strong> in the top left corner of the Zigbee Cluster Configurator interface.",
       "before": "startTutorialAndCloseTheEndpointModal",
-      "placement": "bottom",
-      "enableScrolling": true,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-1",
       "title": "",
       "content": "To change the number of the endpoint on which you would like this device to appear, change the <strong>Endpoint</strong> setting.",
       "before": "openEndpointModal",
-      "placement": "left",
-      "enableScrolling": true,
-      "highlight": false
+      "placement": "left"
     },
     {
       "target": ".v-step-2",
       "title": "",
       "content": "From here you can select whether you would like the endpoint to represent something like a Light or a Door Lock. You can find the Zigbee device type by entering the name of the device in the <strong>Device</strong> field.",
-      "before": "",
-      "placement": "left",
-      "enableScrolling": true,
-      "highlight": false
+      "before": null,
+      "placement": "left"
     },
     {
       "target": ".v-step-3",
       "title": "",
       "content": "An endpoint can be assigned a network id that corresponds to which <strong>network</strong> it is on.",
-      "before": "",
-      "placement": "left",
-      "enableScrolling": true,
-      "highlight": false
+      "before": null,
+      "placement": "left"
     },
     {
       "target": ".v-step-4",
       "title": "",
       "content": "Once you have configured the endpoint, click <strong>CREATE</strong> to add the endpoint to your configuration.",
       "before": "createMockEndpoint",
-      "placement": "right",
-      "enableScrolling": true,
-      "highlight": false
+      "placement": "right"
     },
     {
       "target": ".v-step-5",
       "title": "Modifying an Endpoint",
       "content": "To modify an endpoint, click on the endpoint configuration on the left side of the Zigbee Cluster Configurator. A <strong>blue border</strong> corresponds to the endpoint being modified.",
       "before": "generateEndpointCard",
-      "placement": "bottom",
-      "enableScrolling": true,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-6",
       "title": "",
       "content": "The clusters of the highlighted endpoint can be modified on the right side of the Zigbee Cluster Configurator.",
-      "before": "",
-      "placement": "right",
-      "enableScrolling": false,
-      "highlight": false
+      "before": null,
+      "placement": "right"
     },
     {
       "target": ".v-step-7",
       "title": "",
       "content": "The Show dropdown shows all the available clusters for a certain endpoint. Selecting the <strong>Enabled Clusters</strong> option will display only clusters enabled on the endpoint.",
       "before": "showFilter",
-      "placement": "right",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "right"
     },
     {
       "target": ".v-step-8",
       "title": "Configuring a Cluster",
       "content": "You can enable the Client and/or Server sides of a cluster through changing the <strong>Client and Server</strong> settings in the Enable column. In order to remove a cluster from a configuration, select the <strong>Not Enabled</strong> option. Depending on the changes you make, you may be notified that components have been added to your project.",
       "before": "expandCluster",
-      "placement": "left",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "left"
     },
     {
       "target": ".v-step-9",
       "title": "Configuring a Cluster",
       "content": "Each cluster can be configured to implement Zigbee cluster attributes and commands. The Enable Command Discovery toggle in the top interface ribbon allows the list of commands supported by the device to be visible.",
       "before": "comeBackToHomePage",
-      "placement": "left",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "left"
     },
     {
       "target": ".v-step-10",
       "title": "Configuring Attributes",
       "content": "Attribute configurations can be updated in this tab.",
       "before": "openConfigure",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-11",
       "title": "Configuring Attribute Reporting",
       "content": "Default attribute reporting is configured in this tab.",
-      "before": "",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "before": null,
+      "placement": "bottom"
     },
     {
       "target": ".v-step-12",
       "title": "Commands",
       "content": "You can manage the handling of commands for a cluster in this tab.",
-      "before": "",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "before": null,
+      "placement": "bottom"
     },
     {
       "target": ".v-step-13",
       "title": "",
       "content": "To enable or disable an attribute, click on the <strong>On/Off</strong> toggle. The attribute is <strong>ON</strong> when the toggle is shaded blue and to the right, and <strong>OFF</strong> when the toggle is shaded gray and to the left.",
       "before": "backToAttributesTab",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-14",
       "title": "",
       "content": "Default attribute reporting is also controlled through the toggle. If the toggle is on, the attribute is set up to be reported by default.",
       "before": "openReportTabInCluster",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-15",
       "title": "",
       "content": "For instance, in the following example, Endpoint 1 only implements the Server side of the On/Off cluster. Therefore, it is only possible for the cluster to receive the Off command ‘In’, which is in fact enabled for that cluster. With this setting enabled, the Zigbee Cluster Configurator automatically generates command handling code for handling the On/Off cluster’s ‘Off’ command. This will ensure that, when an ‘Off’ command is received, it will be routed to the correct command handling callback.",
       "before": "openCommandsTabInCluster",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-16",
       "title": "Adding Custom Clusters",
       "content": "In Zigbee, the Zigbee Cluster Library (ZCL) allows developers to add their own custom clusters to their applications. The custom ZCL must be described in the Silicon Labs ZCL XML format. For examples of custom ZCL XML, see the file sampleextensions.xml in the <GSDK install location>/app/zcl directory. This XML file can be used as a reference for your custom ZCL XML file. Once you have created your custom ZCL XML file, it can be added to your project through the ZCL EXTENSIONS… interface.",
       "before": "backToHomePage",
-      "placement": "bottom",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "bottom"
     },
     {
       "target": ".v-step-17",
       "title": "",
       "content": "Clicking <strong>ZCL EXTENSIONS…</strong> opens the Custom ZCL page in the Zigbee Cluster Configurator. Click <strong>Add</strong> to add your custom ZCL XML to the project. Browse to the location of the custom ZCL XML, select a file, and click <strong>Open</strong>. Once the custom ZCL XML has been read into the Zigbee Cluster Configurator, your custom clusters, attributes, commands, and so on are accessible to the configuration of your application.",
       "before": "openZclExtensionDialog",
-      "placement": "right",
-      "enableScrolling": false,
-      "highlight": false
+      "placement": "right"
     }
   ]
 }
diff --git a/test/ui.test.js b/test/ui.test.js
index 398a06ee1b..daf6f599d5 100644
--- a/test/ui.test.js
+++ b/test/ui.test.js
@@ -86,7 +86,7 @@ describe('Component mounting test', () => {
           plugins: [ZapStore()],
         },
       })
-      expect(wrapper.html().length).toBeGreaterThan(100)
+      expect(wrapper.html().length).toBeGreaterThan(10)
     },
     timeout.short()
   )