Feat: Welcome screen improvement and harmanize the flow with file browser (#165)

* feat: added welcome screen improvement

* feat: added all the flow for new Create Session and welcome screen

* fix: test fixed as per structural flow change for create session and files

* chores: show open and close if any of the value exist

* chores: requested changes updated

* Test fail fix

* chore: update wording

---------

Co-authored-by: silvester-pari <[email protected]>

Author: srijitcoder

cypress/e2e/file-browser.cy.js

@@ -80,11 +80,10 @@ describe("File browser related tests", () => {
   it("Add new file", () => {
     cy.get(".add-file-btn").click();
     cy.get(".v-list-item").eq(0).click();
-    cy.get(".new-session-btn").click();
     cy.get(".session-create-field .v-field__input").type(dummySession.title, {
       delay: 100,
     });
-    cy.get(".session-create-btn").click();
+    cy.get(".new-session-btn").click();
     cy.wait("@createPulls");
     cy.get(".add-file-field").type("newFile.txt", { delay: 100 });
     cy.get(".add-file-button").click();

cypress/e2e/files-list.cy.js

@@ -56,7 +56,7 @@ describe("Files list related tests", () => {
         // Add uploaded file if flag is set
         if (isUploadFile) {
           tempData.push({
-            filename: "hello/code.js",
+            filename: "eo-missions/code.js",
             status: "added",
             additions: 34,
             deletions: 0,
@@ -262,13 +262,13 @@ describe("Files list related tests", () => {
 
   // Test adding new manual content
   it("Add new manual content", () => {
-    cy.get(".navbar .v-btn.action-button").click();
-    cy.get(".v-list.button-list .v-list-item").eq(1).click();
-    cy.get(".session-create-field .v-field__input").type("manual-file.txt", {
-      delay: 100,
-    });
+    cy.get(".navbar .v-btn.session-file-btn").click();
+    cy.get(".add-file-btn").click();
+    cy.get(".v-list-item").eq(0).click();
+    cy.get(".current-session-btn").click();
+    cy.get(".add-file-field").type("manual-file.txt", { delay: 100 });
     isManualContent = true;
-    cy.get(".session-create-field .mdi-plus").click();
+    cy.get(".add-file-button").click();
     cy.location("pathname", { timeout: 10000 }).should(
       "eq",
       "/123/bWFudWFsLWZpbGUudHh0",
@@ -283,14 +283,11 @@ describe("Files list related tests", () => {
   // Test file upload functionality
   it("Upload a file", () => {
     cy.wait(2000);
-    cy.get(".navbar .v-btn.action-button").click();
-    cy.get(".v-list.button-list .v-list-item").eq(2).click();
-    cy.get(".create-file .session-create-field .v-field__input").type(
-      "hello/",
-      {
-        delay: 100,
-      },
-    );
+    cy.get(".navbar .v-btn.session-file-btn").click();
+    cy.get(".files-browse-list").eq(2).click();
+    cy.get(".add-file-btn").click();
+    cy.get(".v-list-item").eq(1).click();
+    cy.get(".current-session-btn").click();
     cy.get('input[type="file"]').selectFile("cypress/fixtures/code.js", {
       force: true,
     });
@@ -301,7 +298,7 @@ describe("Files list related tests", () => {
     cy.get(".files-list")
       .eq(files.length)
       .find(".file-title")
-      .should("have.text", "hello/code.js");
+      .should("have.text", "eo-missions/code.js");
   });
 
   // Test to check if deployed preview link exists

public/img/proposed-changes.svg

@@ -1,5 +1,9 @@
 <script setup>
 import ActionTab from "@/components/global/ActionTab.vue";
+import { ref, watch, inject } from "vue";
+
+const fileBrowserDrawer = inject("set-file-browser-drawer");
+const actionBtnState = ref(true);
 
 const props = defineProps({
   updatedFilePathArr: {
@@ -15,6 +19,13 @@ const props = defineProps({
     default: () => {},
   },
 });
+
+watch(fileBrowserDrawer, (newVal) => {
+  if (newVal) {
+    if (newVal === "propose") actionBtnState.value = false;
+    else actionBtnState.value = true;
+  } else actionBtnState.value = true;
+});
 </script>
 <template>
   <ActionTab class="action-tab-file-browser position-sticky top-0">
@@ -41,7 +52,7 @@ const props = defineProps({
       </v-hover>
     </v-chip>
 
-    <v-menu attach location="bottom">
+    <v-menu v-if="actionBtnState" attach location="bottom">
       <template v-slot:activator="{ props }">
         <v-btn
           color="primary"

src/components/file-browser/Actions.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, onMounted, watch, inject } from "vue";
 import { CreateSession } from "@/components/session/index.js";
-import { SessionCheck } from "./";
 import { useLoader } from "@/helpers/index.js";
 import { createAndUpdateFile, getSessionDetails } from "@/api/index.js";
 import { encodeString } from "@/helpers/index.js";
@@ -11,7 +10,7 @@ const router = useRouter();
 const snackbar = inject("set-snackbar");
 const fileBrowserDrawer = inject("set-file-browser-drawer");
 
-const updateInNewSession = ref(false);
+const updateInNewSession = ref(true);
 const addNewFile = ref(false);
 const sessionNumber = ref(null);
 const newFileName = ref(null);
@@ -36,6 +35,7 @@ const props = defineProps({
 });
 
 const addNewSessionNumber = (newSessionNumber) => {
+  updateInNewSession.value = false;
   sessionNumber.value = newSessionNumber;
   addNewFile.value = true;
 };
@@ -45,7 +45,6 @@ watch(props.session, (newSession) => {
 });
 
 onMounted(() => {
-  updateInNewSession.value = props.session ? false : true;
   sessionNumber.value = props.session ? props.session.number : null;
 });
 
@@ -86,60 +85,70 @@ const createFile = async () => {
     await router.push(`/${sessionNumber.value}/${encodeString(fullFilePath)}`);
   }
 };
+
+const clearInput = (success) => {
+  updateInNewSession.value = false;
+  if (success) {
+    fileBrowserDrawer.value = false;
+    props.resetOperation(true);
+  } else props.resetOperation(false);
+};
+
+const currentSession = () => {
+  addNewFile.value = true;
+  updateInNewSession.value = false;
+};
 </script>
 
 <template>
-  <v-card
-    max-width="400"
-    prepend-icon="mdi-file-plus-outline"
-    title="Add a new file"
+  <CreateSession
+    v-if="updateInNewSession"
+    :createNewSession="true"
+    :fromFileBrowser="true"
+    :filePath="filePath"
+    :clearInput="clearInput"
+    :session="session"
+    :currentSession="currentSession"
+    :noRedirectCallback="addNewSessionNumber"
+  />
+  <v-dialog
+    v-if="!updateInNewSession && addNewFile && sessionNumber"
+    v-model="addNewFile"
+    @update:modelValue="!$event && clearInput()"
+    width="auto"
+    style="z-index: 999999"
   >
-    <template v-slot:text>
-      <div v-if="addNewFile && sessionNumber">
-        <p class="py-6">
+    <v-card max-width="480" class="rounded-lg">
+      <template v-slot:text>
+        <h2 class="text-center pl-3 pr-3">Add a new file</h2>
+        <p class="text-center px-4">
           Provide a name for the new file. (Note - File will be added to the
           path: <strong>{{ updatedFilePath }}</strong
           >)
         </p>
         <v-text-field
-          v-model="newFileName"
+          density="compact"
           label="File Name"
-          placeholder="File Name"
-          variant="outlined"
-          class="add-file-field"
-        />
-        <v-btn
-          color="primary"
-          size="large"
-          variant="flat"
-          class="add-file-button"
-          block
-          @click="createFile"
-        >
-          Add File
-        </v-btn>
-      </div>
-      <div v-else-if="updateInNewSession">
-        <p class="py-6">
-          Create a new session to add a new file to the path:
-          <strong>{{ updatedFilePath }}</strong
-          >. Please provide a name for the new session.
-        </p>
-        <CreateSession
-          :createNewSession="true"
-          :fromFileBrowser="true"
-          :noRedirectCallback="addNewSessionNumber"
-        />
-      </div>
-      <SessionCheck
-        @currentSession="addNewFile = true"
-        @newSession="updateInNewSession = true"
-        v-else
-      >
-        Do you want to add a new file to
-        <strong>{{ updatedFilePath }}</strong> in a
-        <strong>new session</strong> or <strong>current session</strong>?
-      </SessionCheck>
-    </template>
-  </v-card>
+          variant="solo"
+          hide-details
+          single-line
+          flat="true"
+          v-model="newFileName"
+          class="rounded border-md my-3 add-file-field"
+        ></v-text-field>
+        <div class="d-flex ga-2 justify-center align-center">
+          <v-btn
+            color="primary"
+            variant="flat"
+            prepend-icon="mdi-file-plus-outline"
+            :disabled="!newFileName"
+            @click="createFile"
+            class="add-file-button"
+          >
+            Add New File
+          </v-btn>
+        </div>
+      </template>
+    </v-card>
+  </v-dialog>
 </template>