Add intro.js and it's initial configs

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",

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;
+}

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">

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";
 

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"

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

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";
 

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",

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"