Respect file prefix in bucket permissions in bucket view

#71

src/components/object-storage/BucketListItem.vue

@@ -11,6 +11,7 @@ import { Tooltip } from "bootstrap";
 import { useBucketStore } from "@/stores/buckets";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/users";
+import type { FolderTree } from "@/types/PseudoFolder";
 
 const props = defineProps<{
   active: boolean;
@@ -27,6 +28,13 @@ const router = useRouter();
 const permission = computed<BucketPermissionOut | undefined>(
   () => permissionRepository.ownPermissions[props.bucket.name],
 );
+const subFolder = computed<FolderTree>(() => {
+  const subFolders: Record<string, FolderTree> = {};
+  if (permission.value?.file_prefix != null) {
+    subFolders[permission.value.file_prefix] = { subFolders: {}, files: [] };
+  }
+  return { subFolders: subFolders, files: [] };
+});
 
 const emit = defineEmits<{
   (e: "delete-bucket", bucketName: string): void;
@@ -50,7 +58,7 @@ onMounted(() => {
     v-if="permission != undefined && props.active"
     :modalID="'view-permission-modal' + randomIDSuffix"
     :bucket-name="props.bucket.name"
-    :sub-folders="{ subFolders: {}, files: [] }"
+    :sub-folders="subFolder"
     :edit-user-permission="permission"
     :readonly="true"
     :editable="false"

src/components/object-storage/modals/PermissionModal.vue

@@ -160,7 +160,7 @@ function findSubFolders(
     const subFolderString =
       (parentFolders.length > 0 ? parentFolders.join("/") + "/" : "") +
       subFolder +
-      "/";
+      (subFolder.endsWith("/") ? "" : "/");
     arr.push(
       subFolderString,
       ...findSubFolders(

src/stores/s3objects.ts

@@ -39,12 +39,12 @@ export const useS3ObjectStore = defineStore({
     },
   getters: {
     getPresignedUrl(): (bucketName: string, key: string) => Promise<string> {
-      return async (bucketName, key) => {
+      return (bucketName, key) => {
         const command = new GetObjectCommand({
           Bucket: bucketName,
           Key: key,
         });
-        return await getSignedUrl(this.client, command, {
+        return getSignedUrl(this.client, command, {
           expiresIn: 30,
         });
       };
@@ -78,14 +78,15 @@ export const useS3ObjectStore = defineStore({
     },
     async fetchS3Objects(
       bucketName: string,
+      prefix?: string,
       onFinally?: () => void,
     ): Promise<S3Object[]> {
-      if ((this.objectMapping[bucketName] ?? []).length > 0) {
+      if (this.objectMapping[bucketName] != undefined) {
         onFinally?.();
       }
       const pag = paginateListObjectsV2(
         { client: this.client },
-        { Bucket: bucketName },
+        { Bucket: bucketName, Prefix: prefix },
       );
       const objs: S3Object[] = [];
       try {

src/stores/users.ts

@@ -8,7 +8,7 @@ import { useWorkflowExecutionStore } from "@/stores/workflowExecutions";
 import { useBucketStore } from "@/stores/buckets";
 import { useWorkflowStore } from "@/stores/workflows";
 import { useS3KeyStore } from "@/stores/s3keys";
-import {useS3ObjectStore} from "@/stores/s3objects";
+import { useS3ObjectStore } from "@/stores/s3objects";
 
 type DecodedToken = {
   exp: number;

src/views/object-storage/BucketView.vue

 <script setup lang="ts">
 import { onMounted, reactive, watch, computed } from "vue";
-import type { BucketPermissionOut } from "@/client/s3proxy";
 import type {
   FolderTree,
   S3PseudoFolder,
@@ -34,14 +33,14 @@ const s3KeyRepository = useS3KeyStore();
 const props = defineProps<{
   bucketName: string;
   subFolders: string[] | string;
-  permission?: BucketPermissionOut;
 }>();
+
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
 let successToast: Toast | null = null;
+let refreshTimeout: NodeJS.Timeout | undefined = undefined;
 
 // Reactive State
 // -----------------------------------------------------------------------------
-
 const deleteObjectsState = reactive<{
   deletedItem: string;
   potentialObjectToDelete: string;
@@ -57,7 +56,6 @@ const objectState = reactive<{
   filterString: string;
   bucketNotFoundError: boolean;
   bucketPermissionError: boolean;
-  createdPermission: undefined | BucketPermissionOut;
   editObjectKey: string;
   copyObject: S3Object;
   viewDetailObject: S3Object;
@@ -66,7 +64,6 @@ const objectState = reactive<{
   filterString: "",
   bucketNotFoundError: false,
   bucketPermissionError: false,
-  createdPermission: undefined,
   editObjectKey: "",
   copyObject: {
     Key: "",
@@ -213,9 +210,18 @@ const subFolderInUrl = computed<boolean>(
 const errorLoadingObjects = computed<boolean>(
   () => objectState.bucketPermissionError || objectState.bucketNotFoundError,
 );
-const writableBucket = computed<boolean>(() =>
-  bucketRepository.writableBucket(props.bucketName),
-);
+const writableBucket = computed<boolean>(() => {
+  // Allow only upload in bucket folder with respect to permission prefix
+  let prefixWritable = true;
+  if (
+    bucketRepository.ownPermissions[props.bucketName]?.file_prefix != undefined
+  ) {
+    prefixWritable =
+      bucketRepository.ownPermissions[props.bucketName]?.file_prefix ===
+      currentSubFolders.value.join("/") + "/";
+  }
+  return bucketRepository.writableBucket(props.bucketName) && prefixWritable;
+});
 const readableBucket = computed<boolean>(() =>
   bucketRepository.readableBucket(props.bucketName),
 );
@@ -227,7 +233,9 @@ watch(
   (newBucketName, oldBucketName) => {
     if (oldBucketName !== newBucketName) {
       // If bucket is changed, update the objects
-      updateObjects(newBucketName);
+      objectState.bucketPermissionError = false;
+      objectState.bucketNotFoundError = false;
+      fetchObjects();
       objectState.filterString = "";
     }
   },
@@ -251,9 +259,17 @@ watch(
 // Lifecycle Hooks
 // -----------------------------------------------------------------------------
 onMounted(() => {
-  s3KeyRepository.fetchS3Keys(authStore.currentUID).then(() => {
-    updateObjects(props.bucketName);
-  });
+  let counter = 0;
+  const onFinally = () => {
+    counter++;
+    if (counter > 1) {
+      fetchObjects();
+    }
+  };
+  // wait till s3keys and ownPermissions are available before fetching objects
+  s3KeyRepository.fetchS3Keys(authStore.currentUID, onFinally);
+  bucketRepository.fetchOwnPermissions(onFinally);
+
   document
     .querySelectorAll(".tooltip-container")
     .forEach(
@@ -303,25 +319,33 @@ function calculateFolderLastModified(folder: FolderTree): string {
 }
 
 /**
- * Load the meta information about objects from a bucket
- * @param bucketName Name of a bucket
+ * Fetch object from bucket with loading animation
  */
-async function updateObjects(bucketName: string) {
+function fetchObjects() {
   objectState.loading = true;
-  objectRepository.fetchS3Objects(bucketName, () => {
-    objectState.loading = false;
-  });
-  /*
-
-  } catch {
-    objectState.bucketNotFoundError = true;
-
-    if (error.status === 404) {
-        objectState.bucketNotFoundError = true;
-      } else if (error.status == 403) {
+  const prefix: string | undefined =
+    bucketRepository.ownPermissions[props.bucketName]?.file_prefix ?? undefined;
+  objectRepository
+    .fetchS3Objects(props.bucketName, prefix, () => {
+      objectState.loading = false;
+    })
+    .catch((error) => {
+      if (error.Code == "AccessDenied") {
         objectState.bucketPermissionError = true;
+      } else {
+        objectState.bucketNotFoundError = true;
       }
-  */
+    });
+}
+
+/**
+ * Fetch the meta information about objects from a bucket
+ */
+function refreshObjects() {
+  clearTimeout(refreshTimeout);
+  refreshTimeout = setTimeout(() => {
+    fetchObjects();
+  }, 500);
 }
 
 function isS3Object(
@@ -465,7 +489,7 @@ function getObjectFileName(key: string): string {
   <!-- Inputs on top -->
   <!-- Search bucket text input -->
   <div class="row">
-    <div class="col-8">
+    <div class="col-5 me-auto">
       <div class="input-group mt-2 rounded shadow-sm">
         <span class="input-group-text" id="objects-search-wrapping"
           ><font-awesome-icon icon="fa-solid fa-magnifying-glass"
@@ -483,6 +507,17 @@ function getObjectFileName(key: string): string {
     </div>
     <!-- Upload object button -->
     <div id="BucketViewButtons" class="col-auto">
+      <button
+        type="button"
+        class="btn btn-light me-4 tooltip-container border shadow-sm"
+        :disabled="errorLoadingObjects"
+        data-bs-toggle="tooltip"
+        data-bs-title="Refresh Objects"
+        @click="refreshObjects"
+      >
+        <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
+        <span class="visually-hidden">Refresh Objects</span>
+      </button>
       <button
         type="button"
         class="btn btn-light me-2 tooltip-container border shadow-sm"
@@ -503,7 +538,7 @@ function getObjectFileName(key: string): string {
       <!-- Add folder button -->
       <button
         type="button"
-        class="btn btn-light m-2 tooltip-container border shadow-sm"
+        class="btn btn-light me-4 tooltip-container border shadow-sm"
         :disabled="errorLoadingObjects || !writableBucket"
         data-bs-toggle="modal"
         data-bs-title="Create Folder"
@@ -523,7 +558,7 @@ function getObjectFileName(key: string): string {
         v-if="!authStore.foreignUser"
         :hidden="!bucketRepository.permissionFeatureAllowed(props.bucketName)"
         type="button"
-        class="btn btn-light m-2 tooltip-container border shadow-sm"
+        class="btn btn-light me-2 tooltip-container border shadow-sm"
         :disabled="errorLoadingObjects"
         data-bs-toggle="modal"
         data-bs-title="Create Bucket Permission"
@@ -547,7 +582,7 @@ function getObjectFileName(key: string): string {
         v-if="!authStore.foreignUser"
         :hidden="!bucketRepository.permissionFeatureAllowed(props.bucketName)"
         type="button"
-        class="btn btn-light m-2 tooltip-container border shadow-sm"
+        class="btn btn-light tooltip-container border shadow-sm"
         :disabled="errorLoadingObjects"
         data-bs-title="List Bucket Permission"
         data-bs-toggle="modal"
@@ -558,6 +593,7 @@ function getObjectFileName(key: string): string {
       </button>
       <permission-list-modal
         v-if="
+          objectState.loading == false &&
           bucketRepository.ownPermissions[props.bucketName] == undefined &&
           !authStore.foreignUser
         "