Frontend corrections: Fix job details display, file management bugs, and authentication state

src/components/JobDetailsTree.vue

@@ -4,10 +4,10 @@
       <!-- Check if value is an object to decide on recursive rendering -->
       <div v-if="isObject(value)" @click="toggle(key)" class="tree-item-label">
         <span class="toggle-icon">{{ isExpanded(key) ? '-' : '+' }}</span>
-        <strong>{{ key }}:</strong>
+        <strong>{{ prettifyKey(key) }}:</strong>
       </div>
       <div v-else class="tree-item-row">
-        <strong>{{ key }}:</strong>
+        <strong>{{ prettifyKey(key) }}:</strong>
         <div class="tree-item-value">{{ value }}</div>
       </div>
       <!-- Recursive call for object values -->
@@ -39,6 +39,14 @@
       isExpanded(key) {
         return !!this.expandedNodes[key];
       },
+      prettifyKey(key) {
+        // Convert snake_case and camelCase to human readable format
+        return key
+          .replace(/([A-Z])/g, ' $1') // Insert space before capital letters
+          .replace(/_/g, ' ') // Replace underscores with spaces
+          .replace(/\b\w/g, l => l.toUpperCase()) // Capitalize first letter of each word
+          .trim();
+      },
     },
   };
 </script>

src/components/NavBar.vue

@@ -12,10 +12,10 @@
               <router-link class="nav-link" to="/">Home</router-link>
             </li>
             <li class="nav-item">
-              <router-link class="nav-link" to="/files">Files</router-link>
+              <a class="nav-link" @click="goToFiles">Files</a>
             </li>
             <li class="nav-item">
-              <router-link class="nav-link" to="/jobs">Jobs</router-link>
+              <a class="nav-link" @click="goToJobs">Jobs</a>
             </li>
             <li class="nav-item">
               <router-link class="nav-link" to="/profile">Profile</router-link>
@@ -56,6 +56,22 @@ export default defineComponent({
     async logout () {
       await this.$store.dispatch('logOut');
       this.$router.push('/login');
+    },
+    goToFiles() {
+      // Force reload the Files page by navigating away and back
+      if (this.$route.path === '/files') {
+        window.location.reload();
+      } else {
+        this.$router.push('/files');
+      }
+    },
+    goToJobs() {
+      // Force reload the Jobs page by navigating away and back
+      if (this.$route.path === '/jobs') {
+        window.location.reload();
+      } else {
+        this.$router.push('/jobs');
+      }
     }
   },
 });

src/main.js

@@ -47,6 +47,16 @@ async function initializeApp() {
     const app = createApp(App);
     app.use(router);
     app.use(store);
+
+    // Check if user is already authenticated on app startup
+    try {
+      await Auth.currentAuthenticatedUser();
+      await store.dispatch('viewMe');
+    } catch (error) {
+      // User is not authenticated, this is fine
+      console.log('No authenticated user found on startup');
+    }
+
     app.mount("#app");
   } catch (error) {
     console.error("Error during app initialization:", error);

src/views/FilesView.vue

@@ -78,14 +78,13 @@ export default defineComponent({
       }
       this.fetchFiles();
     },
-    createFolder() {
-      fileService.createFolder(this.path + 'new')
-        .then(() => {
-          this.fetchFiles();
-        })
-        .catch(error => {
-          this.errorMessage = "Error creating folder: " + error.message;
-        });
+    async createFolder() {
+      try {
+        await fileService.createFolder(this.path + 'new');
+        await this.fetchFiles(); // Wait for the files to be fetched before continuing
+      } catch (error) {
+        this.errorMessage = "Error creating folder: " + error.message;
+      }
     },
     uploadSingleFile() {
       document.getElementById('fileInput').click();
@@ -134,6 +133,12 @@ export default defineComponent({
         });
     },
     renameItem(path, newName) {
+      // Check if the original item is a directory and ensure the new name has trailing slash
+      const originalItem = this.files.find(file => file.path === path);
+      if (originalItem && originalItem.type === 'directory' && !newName.endsWith('/')) {
+        newName += '/';
+      }
+
       let newPath = this.path.trimEnd("/") + '/' + newName;
       fileService.renameItem(path, newPath)
         .then(() => {

src/views/JobCreationView.vue

@@ -69,7 +69,7 @@
             <option disabled value="">Select environment</option>
             <option value="cloud">cloud</option>
             <option value="local">local</option>
-            <option value=null>any</option>
+            <option :value="null">any</option>
             </select>
         </div>
         <div class="sub-group">
@@ -152,9 +152,13 @@
             },
             async fetchInputFiles() {
                 const response_cfg = await fileService.getFiles("config/");
-                this.configFiles = response_cfg.data.map(file => file.path.replace('config/', ''));
+                this.configFiles = response_cfg.data
+                    .filter(file => file.type === 'directory')
+                    .map(file => file.path.replace('config/', ''));
                 const response_data = await fileService.getFiles("data/");
-                this.dataFiles = response_data.data.map(file => file.path.replace('data/', ''));
+                this.dataFiles = response_data.data
+                    .filter(file => file.type === 'directory')
+                    .map(file => file.path.replace('data/', ''));
                 const response_art = await fileService.getFiles("artifact/");
                 this.artifactFiles = response_art.data.map(file => file.path.replace('artifact/', ''));
             },

vue.config.js

@@ -1,4 +1,3 @@
-const { defineConfig } = require('@vue/cli-service')
 module.exports = {
   publicPath: process.env.PUBLIC_PATH || '/DECODE_Cloud_UserFrontend/',
   transpileDependencies: true