From c0141f23c54e58146c5d04af2ecae9abfeb19cb8 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 26 Oct 2023 17:28:23 +0300
Subject: [PATCH] Add tour to fvm

---
 packages/playground/package.json              |  3 +-
 packages/playground/public/intro/fvm.yaml     | 52 +++++++++++++++++++
 .../src/components/dynamic_tabs.vue           |  3 +-
 .../src/components/expandable_layout.vue      |  2 +
 packages/playground/src/utils/intro.ts        | 38 ++++++++++++++
 packages/playground/src/weblets/full_vm.vue   | 39 ++++++--------
 6 files changed, 111 insertions(+), 26 deletions(-)
 create mode 100644 packages/playground/public/intro/fvm.yaml
 create mode 100644 packages/playground/src/utils/intro.ts

diff --git a/packages/playground/package.json b/packages/playground/package.json
index 8584da2b36..6486765444 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -31,7 +31,8 @@
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
     "web-ssh-keygen": "^0.1.2",
-    "intro.js": "^7.2.0"
+    "intro.js": "^7.2.0",
+    "js-yaml": "^4.1.0"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.0",
diff --git a/packages/playground/public/intro/fvm.yaml b/packages/playground/public/intro/fvm.yaml
new file mode 100644
index 0000000000..9be5f19be2
--- /dev/null
+++ b/packages/playground/public/intro/fvm.yaml
@@ -0,0 +1,52 @@
+disableInteraction: false
+exitOnEsc: false
+exitOnOverlayClick: false
+steps:
+  - element: .fvm-config
+    title: Configuration Tab
+    intro: Fill required configuration in order to be able to deploy full virtual machine on tfgrid.
+
+  - element: .fvm-name
+    title: Instance Name
+    intro: "Choose a name for your instance or leave the auto-generated name.<br /><br />Note: only lower-case letters and numbers allowed."
+
+  - element: .vm-image
+    title: Choose Virtual Machine Image
+    intro: "You can choose a supported VM image or import a custom fList.<br /><br /><a class='app-link' target='_blank' href='https://manual.grid.tf/playground/fullVm.html'>Find More</a>"
+
+  - element: .vm-capacity
+    title: Select you instance capacity
+    intro: "You can choose a preconfigured capacity settings or set your own custom capacity."
+
+  - element: .select-networks
+    title: Network Options
+    intro: "Select a network for your workload connection."
+
+  - element: .fvm-gpu
+    title: Nodes With GPU
+    intro: "Selecting a Node with GPU. 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."
+
+  - element: .fvm-dedicated
+    title: Dedicated Nodes
+    intro: "<a class='app-link' target='_blank' href='https://manual.grid.tf/dashboard/portal/dashboard_portal_dedicated_nodes.html'>Find More</a>"
+
+  - element: .fvm-certified
+    title: Certified Nodes
+    intro: Renting capacity on certified nodes is charged 25% extra.
+
+  - element: .select-node
+    title: Select Node
+    intro: "Select a node ID to deploy on."
+
+  - element: .fvm-disks
+    triggerClick: true
+    title: Disks Tab
+    intro: "Config your VM's disks as needed."
+
+  - element: .expandable-plus
+    title: Add a disk
+    intro: "Click the + button to add a disk to your deployment. This is optional for full VM."
+
+  - element: .fvm-deloy
+    title: Deploy
+    intro: "Once you're ready, click deploy."
diff --git a/packages/playground/src/components/dynamic_tabs.vue b/packages/playground/src/components/dynamic_tabs.vue
index bf5a1a818b..d156025482 100644
--- a/packages/playground/src/components/dynamic_tabs.vue
+++ b/packages/playground/src/components/dynamic_tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <v-tabs v-show="!hideTabs" v-model="activeTab" align-tabs="center" color="primary" class="mb-6">
-    <v-tab v-for="tab in tabs" :key="tab.value" :disabled="disabled">
+    <v-tab v-for="tab in tabs" :key="tab.value" :disabled="disabled" :class="($props.prefix || '') + '-' + tab.value">
       <v-icon :icon="tab.icon" class="mr-2" v-if="tab.icon" />
       <img
         :src="baseUrl + tab.imgPath"
@@ -54,6 +54,7 @@ const props = defineProps<{
   disabled?: boolean;
   destroy?: boolean;
   hideTabs?: boolean;
+  prefix?: string;
 }>();
 const emits = defineEmits<{
   (event: "update:modelValue", value: number): void;
diff --git a/packages/playground/src/components/expandable_layout.vue b/packages/playground/src/components/expandable_layout.vue
index 4092d6718e..bc94ecb453 100644
--- a/packages/playground/src/components/expandable_layout.vue
+++ b/packages/playground/src/components/expandable_layout.vue
@@ -12,6 +12,7 @@
             @click="$emit('add')"
             v-bind="props"
             :disabled="disabled"
+            class="expandable-plus"
           />
         </template>
       </v-tooltip>
@@ -32,6 +33,7 @@
                 @click="remove(index)"
                 v-if="!required.includes(index)"
                 v-bind="props"
+                class="expandable-remove"
               />
             </template>
           </v-tooltip>
diff --git a/packages/playground/src/utils/intro.ts b/packages/playground/src/utils/intro.ts
new file mode 100644
index 0000000000..9cb224ca43
--- /dev/null
+++ b/packages/playground/src/utils/intro.ts
@@ -0,0 +1,38 @@
+import introJs from "intro.js";
+import type { IntroStep } from "intro.js/src/core/steps";
+import type { Options } from "intro.js/src/option";
+import yaml from "js-yaml";
+
+function wait(time = 1000): Promise<void> {
+  return new Promise(res => setTimeout(res, time));
+}
+
+export async function startGuide(file: `${string}.yaml` | `${string}.json`) {
+  const res = await fetch(`/intro/${file}`);
+
+  let options: Partial<Options>;
+
+  if (file.endsWith(".json")) {
+    options = await res.json();
+  } else {
+    const text = await res.text();
+    options = yaml.load(text) as Partial<Options>;
+  }
+
+  type Step = Partial<IntroStep & { triggerClick: boolean }>;
+
+  const steps = options.steps as Step[];
+
+  const intro = introJs().setOptions(options);
+
+  intro.onchange(async el => {
+    const step = steps[intro.currentStep()];
+    if (step.triggerClick) {
+      el.click();
+      step.triggerClick = false;
+    }
+  });
+
+  await wait(); // to await changes in ui
+  return intro.start();
+}
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index af4cab48bd..73fee04829 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -9,9 +9,10 @@
     :dedicated="dedicated"
     title-image="images/icons/vm.png"
   >
-    <template #title> Deploy a Full Virtual Machine <v-btn @click="triggerIntro"> Trigger Intro</v-btn> </template>
+    <template #title> Deploy a Full Virtual Machine </template>
 
     <d-tabs
+      prefix="fvm"
       :tabs="[
         { title: 'Config', value: 'config' },
         { title: 'Disks', value: 'disks' },
@@ -152,7 +153,7 @@
             #="{ props }"
           >
             <input-tooltip tooltip="Disk name.">
-              <v-text-field label="Name" v-model="disks[index].name" v-bind="props" />
+              <v-text-field class="fvm-diskname" label="Name" v-model="disks[index].name" v-bind="props" />
             </input-tooltip>
           </input-validator>
           <input-validator
@@ -166,7 +167,13 @@
             #="{ props }"
           >
             <input-tooltip tooltip="Disk Size.">
-              <v-text-field label="Size (GB)" type="number" v-model.number="disks[index].size" v-bind="props" />
+              <v-text-field
+                class="fvm-disksize"
+                label="Size (GB)"
+                type="number"
+                v-model.number="disks[index].size"
+                v-bind="props"
+              />
             </input-tooltip>
           </input-validator>
         </ExpandableLayout>
@@ -187,8 +194,7 @@
 </template>
 
 <script lang="ts" setup>
-import introJs from "intro.js";
-import { type Ref, ref, watch } from "vue";
+import { onMounted, type Ref, ref, watch } from "vue";
 
 import Network from "../components/networks.vue";
 import SelectFarmManager from "../components/select_farm_manager.vue";
@@ -199,6 +205,7 @@ import { type Farm, type Flist, ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
+import { startGuide } from "../utils/intro";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
@@ -206,25 +213,9 @@ 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();
-}
+onMounted(async () => {
+  await startGuide("fvm.yaml");
+});
 
 const images: VmImage[] = [
   {