From 099dbb753ea5a3f8db63a21f9c6f7332b5aa9681 Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Mon, 18 Dec 2023 09:49:38 +0000
Subject: [PATCH] Add folder deletion and bump itty-router-openapi

---
 packages/dashboard-v2/src/appUtils.js         |  78 +++++++++++
 .../src/components/files/FileOptions.vue      | 131 ++++++++++++++++++
 .../src/pages/files/FilesFolderPage.vue       |  99 +++----------
 worker/package-lock.json                      |   8 +-
 worker/package.json                           |   2 +-
 worker/src/buckets/api/listObjects.ts         |   8 +-
 .../src/buckets/api/multipart/createUpload.ts |   4 +-
 worker/src/buckets/api/putObject.ts           |   4 +-
 8 files changed, 241 insertions(+), 93 deletions(-)
 create mode 100644 packages/dashboard-v2/src/components/files/FileOptions.vue

diff --git a/packages/dashboard-v2/src/appUtils.js b/packages/dashboard-v2/src/appUtils.js
index 6ef4a53..dd91d24 100644
--- a/packages/dashboard-v2/src/appUtils.js
+++ b/packages/dashboard-v2/src/appUtils.js
@@ -1,4 +1,5 @@
 import { api } from "boot/axios";
+import { useMainStore } from "stores/main-store";
 
 export const ROOT_FOLDER = "IA=="  // IA== is a space
 
@@ -147,4 +148,81 @@ export const apiHandler = {
       onUploadProgress: callback
     })
   },
+  fetchFile: async (bucket, prefix, delimiter = '/') => {
+    const mainStore = useMainStore();
+    let truncated = true
+    let cursor = null
+    let contentFiles = []
+    let contentFolders = []
+
+    while (truncated) {
+      const response = await api.get(`/buckets/${bucket}?include=customMetadata&include=httpMetadata`, {
+        params: {
+          delimiter: delimiter,
+          prefix: prefix && prefix !== '/' ? encode(prefix) : '',
+          cursor: cursor
+        }
+      })
+
+      truncated = response.data.truncated
+      cursor = response.data.cursor
+
+      if (response.data.objects) {
+        const files = response.data.objects.filter(function(obj) {
+          return !(obj.key.endsWith('/') && delimiter !== '') && obj.key !== prefix  // Remove selected folder when delimiter is defined
+        }).map(function(obj) {
+          const date = new Date(obj.uploaded)
+
+          return {
+            ...obj,
+            hash: encode(obj.key),
+            name: obj.key.replace(prefix, ''),
+            lastModified: timeSince(date),
+            timestamp: date.getTime(),
+            size: bytesToSize(obj.size),
+            sizeRaw: obj.size,
+            type: 'file',
+            icon: 'article',
+            color: 'grey',
+          }
+        }).filter(obj => {
+          // Remove hidden files
+          return !(mainStore.showHiddenFiles !== true && obj.name.startsWith('.'))
+        })
+
+        for (const f of files) {
+          contentFiles.push(f)
+        }
+      }
+
+      if (response.data.delimitedPrefixes) {
+        const folders = response.data.delimitedPrefixes.map(function (obj) {
+          return {
+            name: obj.replace(prefix, ''),
+            hash: encode(obj.key),
+            key: obj,
+            lastModified: '--',
+            timestamp: 0,
+            size: '--',
+            sizeRaw: 0,
+            type: 'folder',
+            icon: 'folder',
+            color: 'orange',
+          }
+        }).filter(obj => {
+          // Remove hidden files
+          return !(mainStore.showHiddenFiles !== true && obj.name.startsWith('.'))
+        })
+
+        for (const f of folders) {
+          contentFolders.push(f)
+        }
+      }
+    }
+
+    return [
+      ...contentFolders,
+      ...contentFiles
+    ]
+  }
 }
diff --git a/packages/dashboard-v2/src/components/files/FileOptions.vue b/packages/dashboard-v2/src/components/files/FileOptions.vue
new file mode 100644
index 0000000..74ed684
--- /dev/null
+++ b/packages/dashboard-v2/src/components/files/FileOptions.vue
@@ -0,0 +1,131 @@
+<template>
+  <q-dialog v-model="deleteModal" @hide="deleteReset">
+    <q-card>
+      <q-card-section class="row column" v-if="deleteRow">
+        <q-avatar class="q-mb-md" icon="delete" color="red" text-color="white" />
+        <span v-if="deleteRow.type === 'folder'" class="q-ml-sm">Are you sure you want to delete the folder <code>{{deleteRow.name}}</code>, and
+          <code v-if="deleteFolderInnerFilesCount !== null">{{deleteFolderInnerFilesCount}}</code>
+          <code v-else><q-spinner color="primary"/></code>
+          files inside?</span>
+        <span v-else class="q-ml-sm">Are you sure you want to delete the file <code>{{deleteRow.name}}</code>?</span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" color="primary" v-close-popup />
+        <q-btn flat label="Delete" color="red" @click="deleteConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { useMainStore } from "stores/main-store";
+import { apiHandler, decode, encode, ROOT_FOLDER } from "src/appUtils";
+import { useQuasar } from "quasar";
+
+export default defineComponent({
+  name: 'FileOptions',
+  data: function () {
+    return {
+      deleteRow: null,
+      deleteFolderContents: [],
+      deleteModal: false,
+      deleteFolderInnerFilesCount: null,
+      newFolderName: ''
+    }
+  },
+  methods: {
+    deleteObject: async function(row) {
+      this.deleteModal = true
+      this.deleteRow = row
+      if (row.type === 'folder') {
+        this.deleteFolderContents = await apiHandler.fetchFile(this.selectedBucket, row.key, '')
+        this.deleteFolderInnerFilesCount = this.deleteFolderContents.length
+      }
+    },
+    deleteConfirm: async function() {
+      this.deleteModal = false
+
+      if (this.deleteRow.type === 'folder') {
+        const notif = this.q.notify({
+          group: false,
+          spinner: true,
+          message: 'Deleting files...',
+          caption: '0%',
+          timeout: 0
+        })
+
+        console.log(this.deleteFolderContents)
+        for (const [i, innerFile] of this.deleteFolderContents.entries()) {
+          if (innerFile.key) {
+            await apiHandler.deleteObject(innerFile.key, this.selectedBucket)
+          }
+          notif({
+            caption: `${parseInt(i*100/(this.deleteFolderInnerFilesCount+1))}%`  // +1 because still needs to delete the folder
+          })
+        }
+        await apiHandler.deleteObject(this.deleteRow.key, this.selectedBucket)
+
+        notif({
+          icon: 'done', // we add an icon
+          spinner: false, // we reset the spinner setting so the icon can be displayed
+          caption: '100%',
+          message: 'Folder deleted!',
+          timeout: 2500 // we will timeout it in 2.5s
+        })
+      } else {
+        await apiHandler.deleteObject(this.deleteRow.key, this.selectedBucket)
+        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 deleted!',
+          timeout: 2500 // we will timeout it in 2.5s
+        })
+      }
+
+      this.$bus.emit('fetchFiles')
+      this.deleteReset()
+    },
+    deleteReset: function() {
+      this.deleteModal = false
+      this.deleteRow = null
+      this.deleteFolderInnerFilesCount = null
+      this.deleteFolderContents = []
+    },
+    onSubmit: async function() {
+      await apiHandler.createFolder(this.selectedFolder + this.newFolderName + '/', this.selectedBucket)
+      this.$bus.emit('fetchFiles')
+      this.modal = false
+    },
+    open: function() {
+      this.modal = true
+    }
+  },
+  computed: {
+    selectedBucket: function () {
+      return this.$route.params.bucket
+    },
+    selectedFolder: function () {
+      if (this.$route.params.folder && this.$route.params.folder !== ROOT_FOLDER) {
+        return decode(this.$route.params.folder)
+      }
+      return ''
+    },
+  },
+  setup() {
+    return {
+      mainStore: useMainStore(),
+      q: useQuasar()
+    };
+  },
+})
+</script>
+
+<style scoped>
+code {
+  background-color: #e9e9e9;
+  padding: 0.25em;
+}
+</style>
diff --git a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
index 4446e26..483cdd3 100644
--- a/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
+++ b/packages/dashboard-v2/src/pages/files/FilesFolderPage.vue
@@ -17,8 +17,7 @@
           :hide-pagination="true"
           :rows-per-page-options="[0]"
           column-sort-order="da"
-          :flat="true"
-          @rowClick="rowClick">
+          :flat="true">
 
           <template v-slot:body-cell-name="prop">
             <td class="flex" style="align-items: center">
@@ -27,14 +26,17 @@
             </td>
           </template>
 
-          <template v-slot:body-cell-options="">
+          <template v-slot:body-cell-options="prop">
             <td class="text-right">
               <q-btn round flat icon="more_vert" size="sm">
                 <q-menu>
                   <q-list style="min-width: 100px">
-                    <q-item clickable v-close-popup> <!-- @click="rowClick(prop.row)" -->
+                    <q-item clickable v-close-popup @click="openObject(prop.row)">
                       <q-item-section>Open</q-item-section>
                     </q-item>
+                    <q-item clickable v-close-popup @click="$refs.options.deleteObject(prop.row)">
+                      <q-item-section>Delete</q-item-section>
+                    </q-item>
                     <q-item clickable v-close-popup>
                       <q-item-section>New incognito tab</q-item-section>
                     </q-item>
@@ -52,19 +54,21 @@
   </q-page>
 
   <file-preview ref="preview"/>
+  <file-options ref="options" />
 </template>
 
 <script>
 import { defineComponent } from "vue";
 import { api } from "boot/axios";
 import { useMainStore } from "stores/main-store";
-import { bytesToSize, decode, encode, ROOT_FOLDER, timeSince } from "../../appUtils";
+import { apiHandler, bytesToSize, decode, encode, ROOT_FOLDER, timeSince } from "../../appUtils";
 import FilePreview from "components/preview/FilePreview.vue";
 import DragAndDrop from "components/utils/DragAndDrop.vue";
+import FileOptions from "components/files/FileOptions.vue";
 
 export default defineComponent({
   name: 'FilesIndexPage',
-  components: { DragAndDrop, FilePreview },
+  components: { FileOptions, DragAndDrop, FilePreview },
   data: function () {
     return {
       loading: false,
@@ -177,83 +181,18 @@ export default defineComponent({
         this.$refs.preview.openFile(row)
       }
     },
+    openObject: function(row) {
+      if (row.type === 'folder') {
+        this.$router.push({ name: `files-folder`, params: { bucket: this.selectedBucket, folder: encode(row.key) }})
+      } else {
+        // console.log(row)
+        this.$refs.preview.openFile(row)
+      }
+    },
     fetchFiles: async function () {
-      const self = this
       this.loading = true
-      let truncated = true
-      let cursor = null
-      let contentFiles = []
-      let contentFolders = []
-
-      while (truncated) {
-        const response = await api.get(`/buckets/${this.selectedBucket}?include=customMetadata&include=httpMetadata`, {
-          params: {
-            delimiter: '/',
-            prefix: this.selectedFolder && this.selectedFolder !== '/' ? encode(this.selectedFolder) : '',
-            cursor: cursor
-          }
-        })
-
-        truncated = response.data.truncated
-        cursor = response.data.cursor
-
-        if (response.data.objects) {
-          const files = response.data.objects.filter(function(obj) {
-            return !obj.key.endsWith('/')  // Remove selected folder
-          }).map(function(obj) {
-            const date = new Date(obj.uploaded)
-
-            return {
-              ...obj,
-              hash: encode(obj.key),
-              name: obj.key.replace(self.selectedFolder, ''),
-              lastModified: timeSince(date),
-              timestamp: date.getTime(),
-              size: bytesToSize(obj.size),
-              sizeRaw: obj.size,
-              type: 'file',
-              icon: 'article',
-              color: 'grey',
-            }
-          }).filter(obj => {
-            // Remove hidden files
-            return !(this.mainStore.showHiddenFiles !== true && obj.name.startsWith('.'))
-          })
 
-          for (const f of files) {
-            contentFiles.push(f)
-          }
-        }
-
-        if (response.data.delimitedPrefixes) {
-          const folders = response.data.delimitedPrefixes.map(function (obj) {
-            return {
-              name: obj.replace(self.selectedFolder, ''),
-              hash: encode(obj.key),
-              key: obj,
-              lastModified: '--',
-              timestamp: 0,
-              size: '--',
-              sizeRaw: 0,
-              type: 'folder',
-              icon: 'folder',
-              color: 'orange',
-            }
-          }).filter(obj => {
-            // Remove hidden files
-            return !(this.mainStore.showHiddenFiles !== true && obj.name.startsWith('.'))
-          })
-
-          for (const f of folders) {
-            contentFolders.push(f)
-          }
-        }
-      }
-
-      this.rows = [
-        ...contentFolders,
-        ...contentFiles
-      ]
+      this.rows = await apiHandler.fetchFile(this.selectedBucket, this.selectedFolder, '/')
       this.loading = false
     }
   },
diff --git a/worker/package-lock.json b/worker/package-lock.json
index 6cd2b5d..aa8dccf 100644
--- a/worker/package-lock.json
+++ b/worker/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "@cloudflare/itty-router-openapi": "^1.0.3",
+        "@cloudflare/itty-router-openapi": "^1.0.6",
         "postal-mime": "^1.0.16"
       },
       "bin": {
@@ -58,9 +58,9 @@
       }
     },
     "node_modules/@cloudflare/itty-router-openapi": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@cloudflare/itty-router-openapi/-/itty-router-openapi-1.0.3.tgz",
-      "integrity": "sha512-lNsxqJ+qrk6VPIWZ9FssHnDyPXvk12FAeqdsSCqTk1AI5OIq4DBAOl/JNsc7AN1JrGcvfm31zCSZ6oo8OXNaJA==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@cloudflare/itty-router-openapi/-/itty-router-openapi-1.0.6.tgz",
+      "integrity": "sha512-5s+4QFnOrCzaeoFWAIHgc5Va+gJ6rbOGh/7y2UH+C3tAn3SUkliNVbugSmlMewEGOzk4AhhdJgUvYenneIJ8vw==",
       "dependencies": {
         "@asteasolutions/zod-to-openapi": "^5.3.1",
         "itty-router": "^4.0.22",
diff --git a/worker/package.json b/worker/package.json
index 9f57227..85ac46c 100644
--- a/worker/package.json
+++ b/worker/package.json
@@ -95,7 +95,7 @@
     "wrangler": "^3.6.0"
   },
   "dependencies": {
-    "@cloudflare/itty-router-openapi": "^1.0.3",
+    "@cloudflare/itty-router-openapi": "^1.0.6",
     "postal-mime": "^1.0.16"
   },
   "bin": {
diff --git a/worker/src/buckets/api/listObjects.ts b/worker/src/buckets/api/listObjects.ts
index c3cdc8f..75c348a 100644
--- a/worker/src/buckets/api/listObjects.ts
+++ b/worker/src/buckets/api/listObjects.ts
@@ -11,9 +11,9 @@ export class ListObjects extends OpenAPIRoute {
     parameters: {
       bucket: Path(String),
       limit: Query(Number, {required: false}),
-      prefix: Query(z.string().optional().describe('base64 encoded prefix'),),
-      cursor: Query(z.string().optional()),
-      delimiter: Query(z.string().optional()),
+      prefix: Query(z.string().nullable().optional().describe('base64 encoded prefix'),),
+      cursor: Query(z.string().nullable().optional()),
+      delimiter: Query(z.string().nullable().optional()),
       include: Query(z.string().array().optional()),
     },
   }
@@ -30,7 +30,7 @@ export class ListObjects extends OpenAPIRoute {
       limit: data.query.limit,
       prefix: data.query.prefix ? decodeURIComponent(escape(atob(data.query.prefix))) : undefined,
       cursor: data.query.cursor,
-      delimiter: data.query.delimiter,
+      delimiter: (data.query.delimiter) ? data.query.delimiter : '',
       include: data.query.include,
     })
   }
diff --git a/worker/src/buckets/api/multipart/createUpload.ts b/worker/src/buckets/api/multipart/createUpload.ts
index f60c107..ec03b33 100644
--- a/worker/src/buckets/api/multipart/createUpload.ts
+++ b/worker/src/buckets/api/multipart/createUpload.ts
@@ -11,8 +11,8 @@ export class CreateUpload extends OpenAPIRoute {
     parameters: {
       bucket: Path(String),
       key: Query(z.string().describe('base64 encoded file key')),
-      customMetadata: Query(z.string().optional().describe('base64 encoded json string')),
-      httpMetadata: Query(z.string().optional().describe('base64 encoded json string')),
+      customMetadata: Query(z.string().nullable().optional().describe('base64 encoded json string')),
+      httpMetadata: Query(z.string().nullable().optional().describe('base64 encoded json string')),
     }
   }
 
diff --git a/worker/src/buckets/api/putObject.ts b/worker/src/buckets/api/putObject.ts
index 0834e9a..946a770 100644
--- a/worker/src/buckets/api/putObject.ts
+++ b/worker/src/buckets/api/putObject.ts
@@ -21,8 +21,8 @@ export class PutObject extends OpenAPIRoute {
     parameters: {
       bucket: Path(String),
       key: Query(z.string().describe('base64 encoded file key')),
-      customMetadata: Query(z.string().optional().describe('base64 encoded json string')),
-      httpMetadata: Query(z.string().optional().describe('base64 encoded json string')),
+      customMetadata: Query(z.string().nullable().optional().describe('base64 encoded json string')),
+      httpMetadata: Query(z.string().nullable().optional().describe('base64 encoded json string')),
     },
   }