From 7a684be96b93d13f7a1bb404d2ef316bc8ee92a1 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 26 Oct 2023 14:28:26 +0300
Subject: [PATCH] Add intro.js and it's initial configs

---
 packages/playground/package.json              |  3 +-
 .../src/assets/styles/introjs-vuetify.scss    | 89 +++++++++++++++++++
 .../playground/src/components/networks.vue    |  7 +-
 .../playground/src/components/select_node.vue |  3 +-
 .../src/components/select_solution_flavor.vue |  1 +
 .../src/components/select_vm_image.vue        |  1 +
 packages/playground/src/main.ts               |  3 +
 packages/playground/src/weblets/full_vm.vue   | 64 +++++++++++--
 yarn.lock                                     |  5 ++
 9 files changed, 167 insertions(+), 9 deletions(-)
 create mode 100644 packages/playground/src/assets/styles/introjs-vuetify.scss

diff --git a/packages/playground/package.json b/packages/playground/package.json
index 98647628ec..8584da2b36 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -30,7 +30,8 @@
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
-    "web-ssh-keygen": "^0.1.2"
+    "web-ssh-keygen": "^0.1.2",
+    "intro.js": "^7.2.0"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.0",
diff --git a/packages/playground/src/assets/styles/introjs-vuetify.scss b/packages/playground/src/assets/styles/introjs-vuetify.scss
new file mode 100644
index 0000000000..9fa060db8b
--- /dev/null
+++ b/packages/playground/src/assets/styles/introjs-vuetify.scss
@@ -0,0 +1,89 @@
+.introjs-tooltip {
+  background-color: rgb(var(--v-theme-on-surface-variant));
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.introjs-button,
+.introjs-button:hover,
+.introjs-button:focus,
+.introjs-button:active,
+.introjs-disabled,
+.introjs-disabled:focus,
+.introjs-disabled:hover {
+  outline: none;
+  background-image: none;
+  background-color: transparent;
+  color: rgb(var(--v-theme-on-surface));
+  border: 1px solid transparent;
+  border-radius: 50px;
+  box-shadow: none;
+  outline: none;
+  text-shadow: none;
+}
+
+.introjs-button:hover,
+.introjs-button:focus,
+.introjs-button:active {
+  border: 1px solid rgb(var(--v-theme-on-surface));
+}
+
+.introjs-button {
+  color: rgb(var(--v-theme-primary)) !important;
+}
+
+.introjs-disabled,
+.introjs-disabled:focus,
+.introjs-disabled:hover {
+  color: rgb(var(--v-theme-on-surface)) !important;
+  opacity: var(--v-medium-emphasis-opacity);
+  border: 1px solid transparent;
+}
+
+.introjs-arrow {
+  border: 10px solid rgb(var(--v-theme-on-surface));
+}
+.introjs-arrow.top,
+.introjs-arrow.top-middle,
+.introjs-arrow.top-right {
+  border-color: transparent transparent rgb(var(--v-theme-on-surface-variant));
+  top: -20px;
+  left: 20px;
+}
+
+.introjs-arrow.bottom,
+.introjs-arrow.bottom-middle,
+.introjs-arrow.bottom-right {
+  border-color: rgb(var(--v-theme-on-surface-variant)) transparent transparent;
+  bottom: -20px;
+  left: 20px;
+}
+
+.introjs-arrow.left,
+.introjs-arrow.right {
+  top: 20px;
+}
+
+.introjs-arrow.left-bottom,
+.introjs-arrow.right-bottom {
+  bottom: 20px;
+}
+
+.introjs-arrow.left,
+.introjs-arrow.left-bottom {
+  left: -20px;
+  border-color: transparent rgb(var(--v-theme-on-surface-variant)) transparent transparent;
+}
+
+.introjs-arrow.right,
+.introjs-arrow.right-bottom {
+  right: -20px;
+  border-color: transparent transparent transparent rgb(var(--v-theme-on-surface-variant));
+}
+
+.introjs-skipbutton {
+  color: rgb(var(--v-theme-error)) !important;
+}
+
+.introjs-tooltipbuttons {
+  border-color: rgba(var(--v-theme-on-surface), var(--v-border-opacity)) !important;
+}
diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 03a0d758c9..66d831bcfb 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -1,7 +1,12 @@
 <template>
   <input-tooltip tooltip="Enable the network options to be able access your deployment">
     <v-expansion-panels variant="inset" class="mb-4">
-      <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
+      <v-expansion-panel
+        class="select-networks"
+        expand-icon="mdi-menu-down"
+        collapse-icon="mdi-menu-up"
+        :disabled="$props.disabled"
+      >
         <template v-slot:title>
           <span class="text-h6">Network</span>
           <v-chip v-if="error" variant="text">
diff --git a/packages/playground/src/components/select_node.vue b/packages/playground/src/components/select_node.vue
index 9dacfee496..e5a60f0802 100644
--- a/packages/playground/src/components/select_node.vue
+++ b/packages/playground/src/components/select_node.vue
@@ -20,6 +20,7 @@
     >
       <input-tooltip tooltip="Select a node ID to deploy on.">
         <v-autocomplete
+          class="select-node"
           select
           label="Node"
           :items="availableNodes"
@@ -81,7 +82,7 @@
 
 <script lang="ts" setup>
 import type { GridClient } from "@threefold/grid_client";
-import { onMounted, type PropType, type Ref, ref, watch } from "vue";
+import { type PropType, type Ref, ref, watch } from "vue";
 
 import { ValidatorStatus } from "@/hooks/form_validator";
 
diff --git a/packages/playground/src/components/select_solution_flavor.vue b/packages/playground/src/components/select_solution_flavor.vue
index 10ce0b002b..6ba876a7c6 100644
--- a/packages/playground/src/components/select_solution_flavor.vue
+++ b/packages/playground/src/components/select_solution_flavor.vue
@@ -4,6 +4,7 @@
       tooltip="Choosing the appropriate computing resources and performance capabilities for a virtual instance or server. When provisioning a virtual machine or cloud instance, the 'Select instance capacity' step allows users to specify the desired CPU, memory, storage, and network resources for their virtual environment."
     >
       <v-select
+        class="vm-capacity"
         label="Select instance capacity"
         v-bind="props"
         :items="packages"
diff --git a/packages/playground/src/components/select_vm_image.vue b/packages/playground/src/components/select_vm_image.vue
index 26f318148f..811a2e7f4c 100644
--- a/packages/playground/src/components/select_vm_image.vue
+++ b/packages/playground/src/components/select_vm_image.vue
@@ -3,6 +3,7 @@
     tooltip="A virtual machine (VM) image is a snapshot or template of a virtual machine that contains the necessary components to create and run a virtual instance of an operating system. It includes the operating system, installed applications, configurations, and any additional files or data required for the virtual machine, also you can put your own image/flist by choosing the other option."
   >
     <v-autocomplete
+      class="vm-image"
       label="VM Image"
       :items="[...$props.images, { name: 'Other' }]"
       return-object
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
index 090498d9fe..ecead198c0 100644
--- a/packages/playground/src/main.ts
+++ b/packages/playground/src/main.ts
@@ -1,3 +1,6 @@
+import "intro.js/minified/introjs.min.css";
+import "./assets/styles/introjs-vuetify.scss";
+
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 615adc2c4a..af4cab48bd 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -9,7 +9,7 @@
     :dedicated="dedicated"
     title-image="images/icons/vm.png"
   >
-    <template #title> Deploy a Full Virtual Machine </template>
+    <template #title> Deploy a Full Virtual Machine <v-btn @click="triggerIntro"> Trigger Intro</v-btn> </template>
 
     <d-tabs
       :tabs="[
@@ -32,7 +32,7 @@
           #="{ props }"
         >
           <input-tooltip tooltip="Instance name.">
-            <v-text-field label="Name" v-model="name" v-bind="props" />
+            <v-text-field class="fvm-name" label="Name" v-model="name" v-bind="props" />
           </input-tooltip>
         </input-validator>
 
@@ -61,18 +61,42 @@
           When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard.
           "
         >
-          <v-switch color="primary" inset label="GPU" v-model="hasGPU" :disabled="loadingFarm" hide-details />
+          <v-switch
+            class="fvm-gpu"
+            color="primary"
+            inset
+            label="GPU"
+            v-model="hasGPU"
+            :disabled="loadingFarm"
+            hide-details
+          />
         </input-tooltip>
         <input-tooltip
           inline
           tooltip="Click to know more about dedicated nodes."
           href="https://manual.grid.tf/dashboard/portal/dashboard_portal_dedicated_nodes.html"
         >
-          <v-switch color="primary" inset label="Dedicated" v-model="dedicated" :disabled="loadingFarm" hide-details />
+          <v-switch
+            class="fvm-dedicated"
+            color="primary"
+            inset
+            label="Dedicated"
+            v-model="dedicated"
+            :disabled="loadingFarm"
+            hide-details
+          />
         </input-tooltip>
 
         <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" :disabled="loadingFarm" hide-details />
+          <v-switch
+            class="fvm-certified"
+            color="primary"
+            inset
+            label="Certified"
+            v-model="certified"
+            :disabled="loadingFarm"
+            hide-details
+          />
         </input-tooltip>
 
         <SelectFarmManager>
@@ -150,12 +174,20 @@
     </d-tabs>
 
     <template #footer-actions>
-      <v-btn color="primary" variant="tonal" @click="deploy" :disabled="tabs?.invalid || network?.error">Deploy </v-btn>
+      <v-btn
+        class="fvm-deloy"
+        color="primary"
+        variant="tonal"
+        @click="deploy"
+        :disabled="tabs?.invalid || network?.error"
+        >Deploy
+      </v-btn>
     </template>
   </weblet-layout>
 </template>
 
 <script lang="ts" setup>
+import introJs from "intro.js";
 import { type Ref, ref, watch } from "vue";
 
 import Network from "../components/networks.vue";
@@ -174,6 +206,26 @@ const tabs = ref();
 const profileManager = useProfileManager();
 const solution = ref() as Ref<SolutionFlavor>;
 
+function triggerIntro() {
+  introJs()
+    .setOptions({
+      exitOnEsc: false,
+      exitOnOverlayClick: false,
+      steps: [
+        { element: ".fvm-name", title: "title", intro: "intro" },
+        { element: ".vm-image", title: "title", intro: "intro" },
+        { element: ".vm-capacity", title: "title", intro: "intro" },
+        { element: ".select-networks", title: "title", intro: "intro" },
+        { element: ".fvm-gpu", title: "title", intro: "intro" },
+        { element: ".fvm-dedicated", title: "title", intro: "intro" },
+        { element: ".fvm-certified", title: "title", intro: "intro" },
+        { element: ".select-node", title: "title", intro: "intro" },
+        { element: ".fvm-deloy", title: "title", intro: "intro" },
+      ],
+    })
+    .start();
+}
+
 const images: VmImage[] = [
   {
     name: "Ubuntu-22.04",
diff --git a/yarn.lock b/yarn.lock
index eaccb75a8a..559eb07f5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11282,6 +11282,11 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+intro.js@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/intro.js/-/intro.js-7.2.0.tgz#e58e8fee4f6b43d6e0fcb264c9ca8a0f0565026d"
+  integrity sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==
+
 ip-address@^6.1.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-6.4.0.tgz#8f7d43e76002a1c3c230792c748f5d8c143f908a"