Feat: Add tour

cypress/e2e/file-browser.cy.js

@@ -3,6 +3,7 @@ import content from "../fixtures/content:get.json";
 import ghConfig from "../fixtures/gh-config.json";
 import files from "../fixtures/files:get.json";
 import { GITHUB_HOST_REGEX } from "../enums";
+import { checkTour } from "../helper";
 
 const dummySession = {
   url: "https://api.github.com/repos/",
@@ -66,9 +67,16 @@ describe("File browser related tests", () => {
     ).as("getFiles");
   });
 
+  // Test to check if the tour is rendered and close the tour
+  it("Tour check and click next button", () => {
+    cy.visit("/123");
+    cy.wait("@getFiles");
+    cy.wait(1000);
+    checkTour();
+  });
+
   // Test to check if the files list is rendered correctly
   it("Render files list", () => {
-    cy.visit("/123");
     cy.get(".navbar .v-btn.session-file-btn").click();
     cy.get(".files-browse-list", { timeout: 12000 }).should(
       "have.length",
@@ -98,6 +106,7 @@ describe("File browser related tests", () => {
   // Test to check if the existing file is edited correctly
   it("Edit existing file", () => {
     editSession = true;
+    checkTour();
     cy.get(".navbar .v-btn.session-file-btn").click();
     cy.get(".files-browse-list").eq(6).click();
     cy.get(".current-session-btn").click();

cypress/e2e/file.cy.js

@@ -2,6 +2,7 @@
 import ghConfig from "../fixtures/gh-config.json";
 import { GITHUB_HOST, GITHUB_HOST_REGEX } from "../enums";
 import content from "../fixtures/content:get.json";
+import { checkTour } from "../helper";
 
 describe("File related tests", () => {
   // Track content change states
@@ -38,8 +39,8 @@ describe("File related tests", () => {
     ).as("getContent");
   });
 
-  // Test resizing/hiding/showing the preview
-  it("Resize Preview", () => {
+  // Test to check if the tour is rendered and close the tour
+  it("Tour check and click next button", () => {
     // Visit a file with a preview
     cy.wait(1000);
     cy.visit(
@@ -50,6 +51,12 @@ describe("File related tests", () => {
     cy.wait("@pullsUpdate");
     cy.wait("@getContent");
 
+    cy.wait(1000);
+    checkTour();
+  });
+
+  // Test resizing/hiding/showing the preview
+  it("Resize Preview", () => {
     // Check if the file is loaded
     cy.get("eox-jsonform").should("exist");
 
@@ -154,6 +161,7 @@ describe("File related tests", () => {
 
   // Test renaming a file
   it("Rename file", () => {
+    checkTour();
     // Rename the file
     isRenameFile = true;
     cy.get("#rename-file-btn").click();

cypress/e2e/files-list.cy.js

@@ -4,6 +4,7 @@ import ghConfig from "../fixtures/gh-config.json";
 import files from "../fixtures/files:get.json";
 import content from "../fixtures/content:get.json";
 import pullsData from "../fixtures/pulls:get.json";
+import { checkTour } from "../helper";
 
 // State flags to control test behavior
 let sessionName = false;
@@ -131,10 +132,16 @@ describe("Files list related tests", () => {
       });
   });
 
-  // Test that files list renders correctly
-  it("Render files list", () => {
+  // Test to check if the tour is rendered and close the tour
+  it("Tour check and click next button", () => {
     cy.visit("/123");
     cy.wait("@getFiles");
+    cy.wait(1000);
+    checkTour();
+  });
+
+  // Test that files list renders correctly
+  it("Render files list", () => {
     cy.get(".files-list", { timeout: 12000 }).should(
       "have.length",
       files.length,
@@ -305,7 +312,7 @@ describe("Files list related tests", () => {
   it("Check preview link exists", () => {
     cy.window().then((win) => {
       expect(win.gitClerkConfig).to.exist;
-      cy.get("#deployed-preview-btn").should(($btn) => {
+      cy.get("#deployed-preview-btn a").should(($btn) => {
         if (win.gitClerkConfig.deployedPreviewLink)
           expect($btn.attr("href")).to.equal(
             win.gitClerkConfig.deployedPreviewLink(pullsData),

cypress/e2e/sessions.cy.js

@@ -6,6 +6,7 @@ import { GITHUB_HOST } from "../enums";
 import sessionsList from "../fixtures/sessions-list:graphql.json";
 import openCount from "../fixtures/open-count:graphql.json";
 import closeCount from "../fixtures/closed-count:graphql.json";
+import { checkTour } from "../helper";
 
 const mockQuery = {
   issueCount: `
@@ -157,6 +158,12 @@ describe("Session list related tests", () => {
     );
   });
 
+  // Test to check if the tour is rendered and close the tour
+  it("Tour check and click next button", () => {
+    cy.wait(1000);
+    checkTour();
+  });
+
   // Test that session titles match expected values
   it("Validate sessions list items with title name", () => {
     cy.get(".session-title").each((titleElement, index) => {

cypress/helper.js

@@ -0,0 +1,9 @@
+export function checkTour() {
+  cy.get("body").then(($body) => {
+    if ($body.find(".driver-popover", { timeout: 120000 }).length > 0) {
+      cy.get(".driver-popover-close-btn").click();
+    } else {
+      cy.log("Tour not found");
+    }
+  });
+}

src/App.vue

@@ -5,6 +5,8 @@ import { onMounted, provide, ref } from "vue";
 import useOctokitStore from "@/stores/octokit.js";
 import { initOctokit } from "@/api/index.js";
 import { useLoader } from "@/helpers/index.js";
+import "../../EOxElements/elements/tour/src/main.js";
+import "../../EOxElements/elements/tour/dist/eox-tour.css";
 
 const navButtonConfig = ref({});
 const navPaginationItems = ref([
@@ -17,9 +19,11 @@ const navPaginationItems = ref([
 const fileBrowserDrawer = ref(false);
 const snackbar = ref(false);
 const isOctokitInitialised = ref(false);
+const tourConfig = ref(null);
 provide("set-nav-button-config", navButtonConfig);
 provide("set-nav-pagination-items", navPaginationItems);
 provide("set-snackbar", snackbar);
+provide("set-tour-config", tourConfig);
 provide("set-file-browser-drawer", fileBrowserDrawer);
 
 onMounted(async () => {
@@ -48,5 +52,6 @@ onMounted(async () => {
       >
       </v-snackbar>
     </v-main>
+    <eox-tour v-if="tourConfig" :config="tourConfig" />
   </v-app>
 </template>

src/assets/main.css

@@ -88,3 +88,43 @@ html {
   font-size: 1rem;
   font-weight: 700;
 }
+
+.driver-popover .driver-popover-close-btn {
+  right: 8px;
+  top: 6px;
+  display: flex;
+  color: rgb(var(--eox-theme-light-primary));
+}
+
+.driver-popover footer > .driver-popover-progress-text {
+  font-size: 12px;
+  font-weight: 600;
+  opacity: 0.5;
+}
+
+.driver-popover .driver-popover-arrow {
+  display: none;
+}
+
+.driver-popover .driver-popover-next-btn,
+.driver-popover .driver-popover-prev-btn {
+  background-color: rgb(var(--eox-theme-light-primary));
+  color: white;
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.driver-popover .driver-popover-btn-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.driver-popover .driver-popover-footer nav {
+  width: 100%;
+  justify-content: end;
+}

src/components/file/ActionTabFileEditor.vue

@@ -33,15 +33,17 @@ const props = defineProps({
 
 <template>
   <ActionTab>
-    <Github :file="file" />
-    <DeleteFile
-      text="Delete File"
-      size="x-large"
-      :file="file"
-      :session="session"
-      :callBack="() => router.push(`/${session.number}`)"
-    />
-    <RenameFile text="Rename File" size="x-large" :file :session />
+    <div id="file-actions" class="d-flex align-center justify-center">
+      <Github :file="file" />
+      <DeleteFile
+        text="Delete File"
+        size="x-large"
+        :file="file"
+        :session="session"
+        :callBack="() => router.push(`/${session.number}`)"
+      />
+      <RenameFile text="Rename File" size="x-large" :file :session />
+    </div>
     <v-divider v-if="previewURL" inset vertical></v-divider>
     <PreviewBtn
       :togglePreview="togglePreview"

src/components/file/Preview.vue

@@ -9,6 +9,7 @@ const props = defineProps({
 <template>
   <v-btn
     v-if="previewURL"
+    id="preview-toggle-btn"
     :color="showPreview ? 'primary' : 'blue-grey-darken-4'"
     :icon="
       $vuetify?.display?.smAndDown

src/components/global/Navbar.vue

@@ -58,6 +58,7 @@ const click = () => {
 
     <v-col class="button-nav flex-grow-0">
       <v-btn
+        id="primary-action-btn"
         v-if="navButtonConfig.text && navButtonConfig.click"
         size="large"
         :prepend-icon="navButtonConfig.icon"
@@ -74,6 +75,7 @@ const click = () => {
       >
         <template v-slot:activator="{ props }">
           <v-btn
+            id="primary-action-menu-btn"
             size="large"
             :prepend-icon="navButtonConfig.icon"
             variant="flat"

src/components/session/ActionTabSession.vue

@@ -41,6 +41,7 @@ const props = defineProps({
     <v-divider inset vertical></v-divider>
     <v-btn
       v-if="!props.session.draft && props.session.state !== 'closed'"
+      id="review-btn"
       target="_blank"
       color="primary"
       :icon="
@@ -54,6 +55,7 @@ const props = defineProps({
       disabled
     ></v-btn>
     <ReviewSession
+      id="review-btn"
       v-else-if="props.session.draft && props.session.check"
       tab
       text="Submit for Review"
@@ -69,6 +71,7 @@ const props = defineProps({
       :session="props.session"
       :state="props.session.state"
       tab
+      id="deployed-preview-btn"
       size="x-large"
     />
     <v-spacer></v-spacer>

src/components/session/DeployedPreview.vue

@@ -2,6 +2,10 @@
 import { defineProps, ref, watch } from "vue";
 
 const props = defineProps({
+  id: {
+    type: String,
+    default: "",
+  },
   session: {
     type: Object,
     default: {},
@@ -46,30 +50,30 @@ watch([props], ([newProps]) => {
 
 <template>
   <!-- Mobile -->
-  <v-btn
-    v-if="tab"
-    :href="session.deployedPreviewLink"
-    target="_blank"
-    color="blue-grey-darken-4"
-    icon="mdi-arrow-top-right"
-    :size="size"
-    variant="outlined"
-    class="d-flex d-md-none border-black border-md border-opacity-100"
-    id="deployed-preview-btn"
-    :disabled="disabled"
-  ></v-btn>
-  <!-- Non-mobile -->
-  <v-btn
-    v-if="tab"
-    :href="session.deployedPreviewLink"
-    target="_blank"
-    color="blue-grey-darken-4"
-    prepend-icon="mdi-arrow-top-right"
-    :size="size"
-    :text="text"
-    variant="outlined"
-    class="text-capitalize font-weight-medium d-none d-md-flex border-black border-md border-opacity-100"
-    id="deployed-preview-btn"
-    :disabled="disabled"
-  ></v-btn>
+  <div :id="id">
+    <v-btn
+      v-if="tab"
+      :href="session.deployedPreviewLink"
+      target="_blank"
+      color="blue-grey-darken-4"
+      icon="mdi-arrow-top-right"
+      :size="size"
+      variant="outlined"
+      class="d-flex d-md-none border-black border-md border-opacity-100"
+      :disabled="disabled"
+    ></v-btn>
+    <!-- Non-mobile -->
+    <v-btn
+      v-if="tab"
+      :href="session.deployedPreviewLink"
+      target="_blank"
+      color="blue-grey-darken-4"
+      prepend-icon="mdi-arrow-top-right"
+      :size="size"
+      :text="text"
+      variant="outlined"
+      class="text-capitalize font-weight-medium d-none d-md-flex border-black border-md border-opacity-100"
+      :disabled="disabled"
+    ></v-btn>
+  </div>
 </template>

src/components/session/Review.vue

@@ -6,6 +6,10 @@ import { reviewBySessionNumber } from "@/api/index.js";
 import { watch } from "vue";
 
 const props = defineProps({
+  id: {
+    type: String,
+    default: "",
+  },
   session: {
     type: Object,
     default: {},
@@ -94,6 +98,7 @@ watch([props], ([newProps]) => {
       :disabled="disabled"
       @click="reviewSession = props.session"
       :class="`text-capitalize font-weight-medium ${props.class}`"
+      :id="id"
     >
       <template v-if="error" v-slot:append>
         <v-icon

src/components/session/SessionsStateFilter.vue

@@ -25,6 +25,7 @@ const props = defineProps({
     text="Open"
     color="blue-grey-darken-4 open-session-btn"
     id="session-action-menu"
+    class="open-session-filter"
     :disabled="!props.sessions"
     @click="changeSessionState('open')"
   >
@@ -46,6 +47,7 @@ const props = defineProps({
     text="Closed"
     color="blue-grey-darken-4 closed-session-btn"
     id="session-action-menu"
+    class="closed-session-filter"
     :disabled="!props.sessions"
     @click="changeSessionState('closed')"
   >

src/helpers/index.js

@@ -12,4 +12,5 @@ export { getSchemaDetails, getFileSchema } from "./schema";
 export { stringifyIfNeeded, parseIfNeeded } from "./transform";
 export { runAutomation } from "./automation";
 export { default as preventListItemClick } from "./prevent-list-item-click";
+export { default as getTourConfig } from "./tour";
 export { default as createSession } from "./create-session";