Fetch s3 keys with data repository architecture

#67

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

@@ -119,7 +119,7 @@ function modalClosed() {
               class="form-control"
               id="bucketDescriptionInput"
               required
-              rows="5"
+              rows="3"
               minlength="32"
               maxlength="65536"
               v-model="bucket.description"

src/stores/s3keys.ts

+import { defineStore } from "pinia";
+import { useAuthStore } from "@/stores/users";
+import type { S3Key } from "@/client/s3proxy";
+import { S3KeyService } from "@/client/s3proxy";
+
+export const useS3KeyStore = defineStore({
+  id: "s3keys",
+  state: () =>
+    ({
+      keyMapping: {},
+    }) as {
+      keyMapping: Record<string, S3Key>;
+    },
+  getters: {
+    keys(): S3Key[] {
+      const tempList = Object.values(this.keyMapping);
+      tempList.sort((keyA, keyB) =>
+        keyA.access_key > keyB.access_key ? 1 : -1,
+      );
+      return tempList;
+    },
+  },
+  actions: {
+    fetchS3Keys(uid: string, onFinally?: () => void): Promise<S3Key[]> {
+      if (this.keys.length > 0) {
+        onFinally?.();
+      }
+      return S3KeyService.s3KeyGetUserKeys(uid)
+        .then((keys) => {
+          const newMapping: Record<string, S3Key> = {};
+          for (const key of keys) {
+            newMapping[key.access_key] = key;
+          }
+          this.keyMapping = newMapping;
+          return keys;
+        })
+        .finally(onFinally);
+    },
+    deleteS3Key(access_id: string): Promise<void> {
+      const userRepository = useAuthStore();
+      return S3KeyService.s3KeyDeleteUserKey(
+        access_id,
+        userRepository.currentUID,
+      ).then(() => {
+        delete this.keyMapping[access_id];
+      });
+    },
+    createS3Key(): Promise<S3Key> {
+      const userRepository = useAuthStore();
+      return S3KeyService.s3KeyCreateUserKey(userRepository.currentUID).then(
+        (key) => {
+          this.keyMapping[key.access_key] = key;
+          return key;
+        },
+      );
+    },
+  },
+});

src/stores/users.ts

 import { defineStore } from "pinia";
 import type { User } from "@/client/auth";
 import { UserService, RoleEnum } from "@/client/auth";
-import { S3KeyService } from "@/client/s3proxy";
-import type { S3Key } from "@/client/s3proxy";
 import { OpenAPI as S3ProxyOpenAPI } from "@/client/s3proxy";
 import { OpenAPI as AuthOpenAPI } from "@/client/auth";
 import { OpenAPI as WorkflowOpenAPI } from "@/client/workflow";
 import { useWorkflowExecutionStore } from "@/stores/workflowExecutions";
 import { useBucketStore } from "@/stores/buckets";
 import { useWorkflowStore } from "@/stores/workflows";
+import { useS3KeyStore } from "@/stores/s3keys";
 
 type DecodedToken = {
   exp: number;
@@ -21,7 +20,6 @@ export type RootState = {
   token: string | null;
   decodedToken: DecodedToken | null;
   user: User | null;
-  s3key: S3Key | null;
   userMapping: Record<string, string>;
 };
 
@@ -48,7 +46,6 @@ export const useAuthStore = defineStore({
       token: null,
       decodedToken: null,
       user: null,
-      s3key: null,
       userMapping: {},
     }) as RootState,
   getters: {
@@ -105,28 +102,17 @@ export const useAuthStore = defineStore({
         this.user = null;
       }
     },
-    setS3Key(key: S3Key | null) {
-      this.s3key = key;
-    },
     updateUser(user: User) {
       this.user = user;
-      S3KeyService.s3KeyGetUserKeys(user.uid)
-        .then((keys) => {
-          if (keys.length > 0) {
-            this.setS3Key(keys[0]);
-          } else {
-            this.setS3Key(null);
-          }
-        })
-        .catch(() => {
-          this.setS3Key(null);
-        });
+      const keyRepository = useS3KeyStore();
+      keyRepository.fetchS3Keys(user.uid);
     },
     logout() {
       this.$reset();
       useWorkflowExecutionStore().$reset();
       useBucketStore().$reset();
       useWorkflowStore().$reset();
+      useS3KeyStore().$reset();
     },
     fetchUsernames(uids: string[]): Promise<User[]> {
       const filteredIds = uids

src/views/object-storage/BucketView.vue

@@ -32,9 +32,11 @@ import { awsAuthMiddlewareOptions } from "@aws-sdk/middleware-signing";
 import { useAuthStore } from "@/stores/users";
 import { useBucketStore } from "@/stores/buckets";
 import { environment } from "@/environment";
+import { useS3KeyStore } from "@/stores/s3keys";
 
 const authStore = useAuthStore();
 const bucketRepository = useBucketStore();
+const keyRepository = useS3KeyStore();
 
 const middleware = [
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -49,39 +51,20 @@ const middleware = [
   },
 ];
 
-let client = new S3Client({
-  region: "us-east-1",
-  endpoint: environment.S3_URL,
-  forcePathStyle: true,
-  credentials: {
-    accessKeyId: authStore.s3key?.access_key ?? "",
-    secretAccessKey: authStore.s3key?.secret_key ?? "",
-  },
-});
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-client.middlewareStack.addRelativeTo(middleware[0], middleware[1]);
-
-// If S3 Key changes
-authStore.$onAction(({ name, args }) => {
-  if (name === "setS3Key") {
-    if (args[0] === null) {
-      console.error("There are no S3 Keys");
-    } else {
-      client = new S3Client({
-        region: "us-east-1",
-        endpoint: environment.S3_URL,
-        forcePathStyle: true,
-        credentials: {
-          accessKeyId: args[0].access_key,
-          secretAccessKey: args[0].secret_key,
-        },
-      });
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      client.middlewareStack.addRelativeTo(middleware[0], middleware[1]);
-    }
-  }
+const client = computed<S3Client>(() => {
+  const client = new S3Client({
+    region: "us-east-1",
+    endpoint: environment.S3_URL,
+    forcePathStyle: true,
+    credentials: {
+      accessKeyId: keyRepository.keys[0]?.access_key ?? "",
+      secretAccessKey: keyRepository.keys[0]?.secret_key ?? "",
+    },
+  });
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  client.middlewareStack.addRelativeTo(middleware[0], middleware[1]);
+  return client;
 });
 
 // Constants
@@ -427,7 +410,7 @@ function confirmedDeleteObject(key: string) {
     Bucket: props.bucketName,
     Key: key,
   });
-  client
+  client.value
     .send(command)
     .then(() => {
       bucketRepository.fetchBucket(props.bucketName);
@@ -453,7 +436,7 @@ async function downloadObject(key: string, bucket: string) {
     Bucket: bucket,
     Key: key,
   });
-  const url = await getSignedUrl(client, command, { expiresIn: 30 });
+  const url = await getSignedUrl(client.value, command, { expiresIn: 30 });
   //creating an invisible element
   const element = document.createElement("a");
   element.setAttribute("href", url);
@@ -483,7 +466,7 @@ function confirmedDeleteFolder(folderPath: string) {
         }),
     },
   });
-  client
+  client.value
     .send(command)
     .then(() => {
       bucketRepository.fetchBucket(props.bucketName);

src/views/object-storage/S3KeysView.vue

@@ -2,42 +2,37 @@
 import S3KeyView from "@/views/object-storage/S3KeyView.vue";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import { reactive, onMounted, computed } from "vue";
-import type { S3Key } from "@/client/s3proxy";
-import { S3KeyService } from "@/client/s3proxy";
 import { useAuthStore } from "@/stores/users";
 import { Toast, Tooltip } from "bootstrap";
+import { useS3KeyStore } from "@/stores/s3keys";
 
 const authStore = useAuthStore();
+const keyRepository = useS3KeyStore();
 
 let successToast: Toast | null = null;
 let refreshTimeout: NodeJS.Timeout | undefined = undefined;
 
 const keyState = reactive<{
-  keys: S3Key[];
   activeKey: number;
   initialLoading: boolean;
   deletedKey: string;
 }>({
-  keys: [],
   activeKey: 0,
   initialLoading: true,
   deletedKey: "",
 });
 
-const allowKeyDeletion = computed<boolean>(() => keyState.keys.length > 1);
+const allowKeyDeletion = computed<boolean>(() => keyRepository.keys.length > 1);
 
 function fetchKeys() {
-  S3KeyService.s3KeyGetUserKeys(authStore.currentUID)
+  keyRepository
+    .fetchS3Keys(authStore.currentUID, () => (keyState.initialLoading = false))
     .then((keys) => {
       if (keyState.activeKey >= keys.length) {
         keyState.activeKey = keys.length - 1;
       }
-      keyState.keys = keys;
     })
-    .catch((err) => console.error(err))
-    .finally(() => {
-      keyState.initialLoading = false;
-    });
+    .catch((err) => console.error(err));
 }
 
 function refreshKeys() {
@@ -49,14 +44,11 @@ function refreshKeys() {
 
 function deleteKey(accessKey: string) {
   if (allowKeyDeletion.value && authStore.authenticated) {
-    S3KeyService.s3KeyDeleteUserKey(accessKey, authStore.currentUID)
+    keyRepository
+      .deleteS3Key(accessKey)
       .then(() => {
-        keyState.deletedKey = accessKey;
         keyState.activeKey = 0;
-        keyState.keys = keyState.keys.filter(
-          (s3key) => s3key.access_key !== accessKey,
-        );
-        authStore.setS3Key(keyState.keys[0]);
+        keyState.deletedKey = accessKey;
         successToast?.show();
       })
       .catch((err) => console.error(err));
@@ -65,14 +57,7 @@ function deleteKey(accessKey: string) {
 
 function createKey() {
   if (authStore.authenticated) {
-    S3KeyService.s3KeyCreateUserKey(authStore.currentUID)
-      .then((s3key) => {
-        keyState.keys.push(s3key);
-        keyState.keys = [...keyState.keys].sort((keyA, keyB) =>
-          keyA.access_key > keyB.access_key ? 1 : -1,
-        );
-      })
-      .catch((err) => console.error(err));
+    keyRepository.createS3Key().catch((err) => console.error(err));
   }
 }
 
@@ -153,7 +138,7 @@ onMounted(() => {
       </div>
       <div v-else class="d-grid gap-3">
         <button
-          v-for="(s3key, index) in keyState.keys"
+          v-for="(s3key, index) in keyRepository.keys"
           :key="s3key.access_key"
           class="btn fs-5 text-truncate border hover-shadow"
           type="button"
@@ -170,11 +155,11 @@ onMounted(() => {
     </div>
     <div class="col-7 offset-md-1">
       <s3-key-view
-        v-if="keyState.keys.length > 0 || keyState.initialLoading"
+        v-if="keyRepository.keys.length > 0 || keyState.initialLoading"
         :s3key="
           keyState.initialLoading
             ? { user: '', access_key: '', secret_key: '' }
-            : keyState.keys[keyState.activeKey]
+            : keyRepository.keys[keyState.activeKey] ?? keyRepository.keys[0]
         "
         :deletable="allowKeyDeletion"
         :loading="keyState.initialLoading"