From 8677325510142793de31938b55396ad3426cdc6b Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Sun, 1 Dec 2024 19:20:42 +0000
Subject: [PATCH 1/2] Add http and custom metadata edit

---
 packages/dashboard/src/appUtils.js            |  5 +-
 .../src/components/files/FileOptions.vue      | 86 +++++++++++++++++++
 .../src/components/main/LeftSidebar.vue       | 17 ++--
 .../src/pages/files/FileContextMenu.vue       |  6 ++
 .../src/pages/files/FilesFolderPage.vue       |  4 +-
 packages/worker/package.json                  |  2 +-
 .../worker/src/modules/buckets/putMetadata.ts |  2 +
 7 files changed, 112 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard/src/appUtils.js b/packages/dashboard/src/appUtils.js
index c692378..bb30241 100644
--- a/packages/dashboard/src/appUtils.js
+++ b/packages/dashboard/src/appUtils.js
@@ -133,14 +133,15 @@ export const apiHandler = {
 			newKey: encode(newKey),
 		});
 	},
-	updateMetadata: async (bucket, key, metadata) => {
+	updateMetadata: async (bucket, key, customMetadata, httpMetadata = {}) => {
 		let prefix = "";
 		if (key.includes("/")) {
 			prefix = key.replace(key.split("/").pop(), "");
 		}
 
 		const resp = await api.post(`/buckets/${bucket}/${encode(key)}`, {
-			customMetadata: metadata,
+			customMetadata: customMetadata,
+			httpMetadata: httpMetadata,
 		});
 
 		if (resp.status === 200) {
diff --git a/packages/dashboard/src/components/files/FileOptions.vue b/packages/dashboard/src/components/files/FileOptions.vue
index dacb3fe..b3fae7a 100644
--- a/packages/dashboard/src/components/files/FileOptions.vue
+++ b/packages/dashboard/src/components/files/FileOptions.vue
@@ -30,6 +30,44 @@
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="updateMetadataModal" @hide="reset">
+    <q-card style="min-width: 300px;">
+      <q-card-section class="row column" v-if="row">
+        <h6 class="q-mt-none q-mb-sm flex">HTTP Metadata <q-btn class="q-mr-none q-ml-auto" round size="sm" color="primary" icon="add" @click="updateHttpMetadata.push({key: '', value: ''})" /></h6>
+        <div class="flex row" v-for="(val, index) in updateHttpMetadata" :key="index">
+          <div>
+            <q-input v-model="updateHttpMetadata[index].key" label="Key" />
+          </div>
+          <div>
+            <q-input v-model="updateHttpMetadata[index].value" label="Value" />
+          </div>
+          <div class="flex">
+            <q-btn class="q-my-auto" round size="sm" color="orange" icon="remove" @click="updateHttpMetadata.splice(index, 1)" />
+          </div>
+        </div>
+
+        <h6 class="q-mt-xl q-mb-sm flex">Custom Metadata <q-btn class="q-mr-none q-ml-auto" round size="sm" color="primary" icon="add" @click="updateCustomMetadata.push({key: '', value: ''})" /></h6>
+        <div class="flex row" v-for="(val, index) in updateCustomMetadata" :key="index">
+          <div>
+            <q-input v-model="updateCustomMetadata[index].key" label="Key" />
+          </div>
+          <div>
+            <q-input v-model="updateCustomMetadata[index].value" label="Value" />
+          </div>
+          <div class="flex">
+            <q-btn class="q-my-auto" round size="sm" color="orange" icon="remove" @click="updateCustomMetadata.splice(index, 1)" />
+          </div>
+        </div>
+
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" color="primary" v-close-popup />
+        <q-btn flat label="Update Metadata" color="orange" :loading="loading" @click="updateConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script>
@@ -45,9 +83,12 @@ export default defineComponent({
 		deleteFolderContents: [],
 		deleteModal: false,
 		renameModal: false,
+		updateMetadataModal: false,
 		deleteFolderInnerFilesCount: null,
 		newFolderName: "",
 		renameInput: "",
+		updateCustomMetadata: [],
+		updateHttpMetadata: [],
 		loading: false,
 	}),
 	methods: {
@@ -69,6 +110,24 @@ export default defineComponent({
 			// console.log(row)
 			this.renameInput = row.name;
 		},
+		updateMetadataObject: async function (row) {
+			this.updateMetadataModal = true;
+			this.row = row;
+			if (row.httpMetadata) {
+				this.updateHttpMetadata = Object.entries(row.httpMetadata).map(
+					([key, value]) => {
+						return { key: key, value: value };
+					},
+				);
+			}
+			if (row.customMetadata) {
+				this.updateCustomMetadata = Object.entries(row.customMetadata).map(
+					([key, value]) => {
+						return { key: key, value: value };
+					},
+				);
+			}
+		},
 		renameConfirm: async function () {
 			if (this.renameInput.length === 0) {
 				return;
@@ -91,6 +150,30 @@ export default defineComponent({
 				timeout: 2500, // we will timeout it in 2.5s
 			});
 		},
+		updateConfirm: async function () {
+			this.loading = true;
+			await apiHandler.updateMetadata(
+				this.selectedBucket,
+				this.row.key,
+				this.updateCustomMetadata.reduce(
+					(a, v) => ({ ...a, [v.key]: v.value }),
+					{},
+				),
+				this.updateHttpMetadata.reduce(
+					(a, v) => ({ ...a, [v.key]: v.value }),
+					{},
+				),
+			);
+			this.$bus.emit("fetchFiles");
+			this.reset();
+			this.q.notify({
+				group: false,
+				icon: "done", // we add an icon
+				spinner: false, // we reset the spinner setting so the icon can be displayed
+				message: "File Updated!",
+				timeout: 2500, // we will timeout it in 2.5s
+			});
+		},
 		deleteConfirm: async function () {
 			if (this.row.type === "folder") {
 				// When deleting folders, first must copy the objects, because the popup close forces a reset on properties
@@ -145,7 +228,10 @@ export default defineComponent({
 			this.loading = false;
 			this.deleteModal = false;
 			this.renameModal = false;
+			this.updateMetadataModal = false;
 			this.renameInput = "";
+			this.updateCustomMetadata = [];
+			this.updateHttpMetadata = [];
 			this.row = null;
 			this.deleteFolderInnerFilesCount = null;
 			this.deleteFolderContents = [];
diff --git a/packages/dashboard/src/components/main/LeftSidebar.vue b/packages/dashboard/src/components/main/LeftSidebar.vue
index 6c2a60d..8160468 100644
--- a/packages/dashboard/src/components/main/LeftSidebar.vue
+++ b/packages/dashboard/src/components/main/LeftSidebar.vue
@@ -144,11 +144,18 @@ export default defineComponent({
 		const resp = await fetch(
 			"https://api.github.com/repos/G4brym/R2-Explorer/releases/latest",
 		);
-		const parsed = await resp.json();
-		const latestVersion = parsed.tag_name.replace("v", "");
-		if (this.isUpdateAvailable(this.mainStore.version, latestVersion)) {
-			this.latestVersion = latestVersion;
-			this.updateAvailable = true;
+		if (!resp.ok) {
+			console.log("Unable to retrieve latest r2-explorer updates :(");
+			console.log(
+				"Manually check them here: https://github.com/G4brym/R2-Explorer/releases",
+			);
+		} else {
+			const parsed = await resp.json();
+			const latestVersion = parsed.tag_name.replace("v", "");
+			if (this.isUpdateAvailable(this.mainStore.version, latestVersion)) {
+				this.latestVersion = latestVersion;
+				this.updateAvailable = true;
+			}
 		}
 	},
 	setup() {
diff --git a/packages/dashboard/src/pages/files/FileContextMenu.vue b/packages/dashboard/src/pages/files/FileContextMenu.vue
index bcb2da7..6c5d1a9 100644
--- a/packages/dashboard/src/pages/files/FileContextMenu.vue
+++ b/packages/dashboard/src/pages/files/FileContextMenu.vue
@@ -9,6 +9,9 @@
     <q-item clickable v-close-popup @click="renameObject" v-if="prop.row.type === 'file'">
       <q-item-section>Rename</q-item-section>
     </q-item>
+    <q-item clickable v-close-popup @click="updateMetadataObject" v-if="prop.row.type === 'file'">
+      <q-item-section>Update Metadata</q-item-section>
+    </q-item>
     <q-item clickable v-close-popup @click="shareObject">
       <q-item-section>Get sharable link</q-item-section>
     </q-item>
@@ -45,6 +48,9 @@ export default {
 		renameObject: function () {
 			this.$emit("renameObject", this.prop.row);
 		},
+		updateMetadataObject: function () {
+			this.$emit("updateMetadataObject", this.prop.row);
+		},
 		openObject: function () {
 			this.$emit("openObject", this.prop.row);
 		},
diff --git a/packages/dashboard/src/pages/files/FilesFolderPage.vue b/packages/dashboard/src/pages/files/FilesFolderPage.vue
index 23e5f94..9a7b9c5 100644
--- a/packages/dashboard/src/pages/files/FilesFolderPage.vue
+++ b/packages/dashboard/src/pages/files/FilesFolderPage.vue
@@ -54,7 +54,7 @@
               touch-position
               context-menu
             >
-              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" />
+              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" @updateMetadataObject="$refs.options.updateMetadataObject"  />
             </q-menu>
           </template>
 
@@ -62,7 +62,7 @@
             <td class="text-right">
               <q-btn round flat icon="more_vert" size="sm">
                 <q-menu>
-                  <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" />
+                  <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="$refs.options.renameObject" @updateMetadataObject="$refs.options.updateMetadataObject" />
                 </q-menu>
               </q-btn>
             </td>
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 904ca24..8a505a2 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "r2-explorer",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"description": "A Google Drive Interface for your Cloudflare R2 Buckets",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
diff --git a/packages/worker/src/modules/buckets/putMetadata.ts b/packages/worker/src/modules/buckets/putMetadata.ts
index fbc6179..7cb782a 100644
--- a/packages/worker/src/modules/buckets/putMetadata.ts
+++ b/packages/worker/src/modules/buckets/putMetadata.ts
@@ -18,6 +18,7 @@ export class PutMetadata extends OpenAPIRoute {
 						schema: z
 							.object({
 								customMetadata: z.record(z.string(), z.any()),
+								httpMetadata: z.record(z.string(), z.any()),
 							})
 							.openapi("Object metadata"),
 					},
@@ -43,6 +44,7 @@ export class PutMetadata extends OpenAPIRoute {
 		const object = await bucket.get(filePath);
 		return await bucket.put(filePath, object.body, {
 			customMetadata: data.body.customMetadata,
+			httpMetadata: data.body.httpMetadata,
 		});
 	}
 }

From fe8e5dec5e8527c0ebb55ff27246f9b7f2d59184 Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Thu, 19 Dec 2024 17:58:54 +0000
Subject: [PATCH 2/2] Add pre SPA loading screen

---
 packages/dashboard/index.html           | 52 +++++++++++++++++++++++++
 packages/dashboard/quasar.config.js     |  2 +-
 packages/dashboard/src/router/routes.js | 19 +++++----
 3 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 3761294..8aad1c2 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -17,8 +17,60 @@
     <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
     <link rel="icon" type="image/ico" href="favicon.ico">
+    <style>
+      .initialLoading {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background-color: #f5f5f5;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      }
+
+      .initialLoading .loading-container {
+        text-align: center;
+        padding: 2rem;
+      }
+
+      .initialLoading .spinner {
+        width: 50px;
+        height: 50px;
+        border: 5px solid #f3f3f3;
+        border-top: 5px solid #3498db;
+        border-radius: 50%;
+        animation: initialLoadingSpin 1s linear infinite;
+        margin: 0 auto 1rem;
+      }
+
+      @keyframes initialLoadingSpin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      .initialLoading .loading-text {
+        color: #333;
+        font-size: 1.2rem;
+        margin-bottom: 0.5rem;
+      }
+    </style>
   </head>
   <body>
     <!-- quasar:entry-point -->
   </body>
+
+  <script>
+    window.addEventListener('load', () => {
+      var elem = document.getElementById('q-app')
+      elem.innerHTML = `
+<div class="initialLoading">
+  <div class="loading-container" id="loadingContainer">
+    <div class="spinner"></div>
+    <p class="loading-text">Loading R2 Explorer</p>
+    <p style="color: #666; font-size: 0.9rem;">Please wait while the application initializes...</p>
+  </div>
+</div>` + elem.innerHTML;
+    });
+  </script>
 </html>
diff --git a/packages/dashboard/quasar.config.js b/packages/dashboard/quasar.config.js
index 6cc3194..e302494 100644
--- a/packages/dashboard/quasar.config.js
+++ b/packages/dashboard/quasar.config.js
@@ -21,7 +21,7 @@ module.exports = configure((/* ctx */) => ({
 	// },
 
 	// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
-	// preFetch: true,
+	preFetch: true,
 
 	// app boot file (/src/boot)
 	// --> boot files are part of "main.js"
diff --git a/packages/dashboard/src/router/routes.js b/packages/dashboard/src/router/routes.js
index f3ad4a3..30919e7 100644
--- a/packages/dashboard/src/router/routes.js
+++ b/packages/dashboard/src/router/routes.js
@@ -1,3 +1,8 @@
+import MainLayout from "layouts/MainLayout.vue";
+import HomePage from "pages/HomePage.vue";
+import EmailFolderPage from "pages/email/EmailFolderPage.vue";
+import FilesFolderPage from "pages/files/FilesFolderPage.vue";
+
 const routes = [
 	{
 		path: "/auth",
@@ -12,38 +17,38 @@ const routes = [
 	},
 	{
 		path: "/",
-		component: () => import("layouts/MainLayout.vue"),
+		component: MainLayout,
 		children: [
 			{
 				path: "/",
 				name: "home",
-				component: () => import("pages/HomePage.vue"),
+				component: HomePage,
 			},
 			{
 				path: "/:bucket/files",
 				name: "files-home",
-				component: () => import("pages/files/FilesFolderPage.vue"),
+				component: FilesFolderPage,
 			},
 			{
 				path: "/:bucket/files/:folder",
 				name: "files-folder",
-				component: () => import("pages/files/FilesFolderPage.vue"),
+				component: FilesFolderPage,
 			},
 			{
 				path: "/:bucket/files/:folder/:file",
 				name: "files-file",
-				component: () => import("pages/files/FilesFolderPage.vue"),
+				component: FilesFolderPage,
 			},
 
 			{
 				path: "/:bucket/email",
 				name: "email-home",
-				component: () => import("pages/email/EmailFolderPage.vue"),
+				component: EmailFolderPage,
 			},
 			{
 				path: "/:bucket/email/:folder",
 				name: "email-folder",
-				component: () => import("pages/email/EmailFolderPage.vue"),
+				component: EmailFolderPage,
 			},
 			{
 				path: "/:bucket/email/:folder/:file",