From 58886076fe3ca3ad91c539f4bcfccde01cc430df Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@csc.fi>
Date: Fri, 10 Mar 2023 08:30:41 +0200
Subject: [PATCH 1/7] Change buefy.dialogs to csc-ui modals

---
 .../src/common/globalFunctions.js             |  10 ++
 swift_browser_ui_frontend/src/common/store.js |   8 +
 .../src/components/ContainerTable.vue         |  29 +---
 .../src/components/Containers.vue             |  10 ++
 .../src/components/DeleteModal.vue            | 160 ++++++++++++++++++
 .../src/components/ObjectDeleteButton.vue     |  77 ---------
 .../src/components/ObjectTable.vue            |  60 +------
 swift_browser_ui_frontend/src/entries/main.js |  10 ++
 .../src/pages/BrowserPage.vue                 |   5 +
 9 files changed, 209 insertions(+), 160 deletions(-)
 create mode 100644 swift_browser_ui_frontend/src/components/DeleteModal.vue
 delete mode 100644 swift_browser_ui_frontend/src/components/ObjectDeleteButton.vue

diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
index 70eaa2b53..1f33938f3 100644
--- a/swift_browser_ui_frontend/src/common/globalFunctions.js
+++ b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -30,6 +30,16 @@ export function toggleCopyFolderModal(folderName, sourceProjectId) {
   modifyBrowserPageStyles();
 }
 
+export function toggleDeleteModal(objects, containerName) {
+  store.commit("toggleDeleteModal", true);
+  if (objects) {
+    store.commit("setDeletableObjects", objects);
+  }
+  if (containerName) {
+    store.commit("setFolderName", containerName);
+  }
+}
+
 export function modifyBrowserPageStyles() {
   const element = document.getElementById("mainContainer");
   element.classList.toggle("mainContainer-additionalStyles");
diff --git a/swift_browser_ui_frontend/src/common/store.js b/swift_browser_ui_frontend/src/common/store.js
index 8f62eda2a..a7fba7359 100644
--- a/swift_browser_ui_frontend/src/common/store.js
+++ b/swift_browser_ui_frontend/src/common/store.js
@@ -54,6 +54,8 @@ const store = new Vuex.Store({
     openEditTagsModal: false,
     selectedObjectName: "",
     openCopyFolderModal: false,
+    openDeleteModal: false,
+    deletableObjects: [],
     isFolderCopied: false,
     sourceProjectId: "",
     uploadAbort: undefined,
@@ -239,6 +241,12 @@ const store = new Vuex.Store({
     toggleCopyFolderModal(state, payload) {
       state.openCopyFolderModal = payload;
     },
+    toggleDeleteModal(state, payload) {
+      state.openDeleteModal = payload;
+    },
+    setDeletableObjects(state, payload) {
+      state.deletableObjects = payload;
+    },
     setFolderCopiedStatus(state, payload) {
       state.isFolderCopied = payload;
     },
diff --git a/swift_browser_ui_frontend/src/components/ContainerTable.vue b/swift_browser_ui_frontend/src/components/ContainerTable.vue
index 7a5cdf006..0404a4d23 100644
--- a/swift_browser_ui_frontend/src/components/ContainerTable.vue
+++ b/swift_browser_ui_frontend/src/components/ContainerTable.vue
@@ -31,8 +31,8 @@ import {
   getAccessDetails,
   toggleCopyFolderModal,
   modifyBrowserPageStyles,
+  toggleDeleteModal,
 } from "@/common/globalFunctions";
-import {swiftDeleteContainer} from "@/common/api";
 
 export default {
   name: "ContainerTable",
@@ -397,34 +397,9 @@ export default {
             + container,
         );
       } else {
-        this.$buefy.dialog.confirm({
-          title: this.$t("message.container_ops.deleteConfirm"),
-          message: this.$t("message.container_ops.deleteConfirmMessage"),
-          confirmText: this.$t("message.container_ops.deleteConfirm"),
-          type: "is-danger",
-          hasIcon: true,
-          onConfirm: () => {this.deleteContainer(container);},
-        });
+        toggleDeleteModal(null, container);
       }
     },
-    deleteContainer: function(container) {
-      this.$buefy.toast.open({
-        message: this.$t("message.container_ops.deleteSuccess"),
-        type: "is-success",
-      });
-      const projectID = this.$store.state.active.id;
-      swiftDeleteContainer(
-        projectID,
-        container,
-      ).then(async () => {
-        await this.$store.state.db.containers
-          .where({
-            projectID,
-            name: container,
-          })
-          .delete();
-      });
-    },
     handlePaginationText() {
       this.paginationOptions.textOverrides = this.locale === "fi"
         ? this.paginationTextOverrides
diff --git a/swift_browser_ui_frontend/src/components/Containers.vue b/swift_browser_ui_frontend/src/components/Containers.vue
index c46ec5b5e..31eda984d 100644
--- a/swift_browser_ui_frontend/src/components/Containers.vue
+++ b/swift_browser_ui_frontend/src/components/Containers.vue
@@ -20,6 +20,7 @@
       :conts="renderingContainers"
       :disable-pagination="hidePagination"
       :hide-tags="hideTags"
+      :key="tableKey"
     />
   </div>
 </template>
@@ -52,6 +53,7 @@ export default {
       abortController: null,
       containers: [],
       renderingContainers: [],
+      tableKey: 1,
     };
   },
   computed: {
@@ -64,6 +66,9 @@ export default {
       },
       set() {},
     },
+    openDeleteModal() {
+      return this.$store.state.openDeleteModal;
+    },
     isFolderCopied() {
       return this.$store.state.isFolderCopied;
     },
@@ -80,6 +85,11 @@ export default {
         this.fetchContainers();
       }
     },
+    openDeleteModal: function () {
+      if (!this.openDeleteModal) {
+        this.tableKey++;
+      }
+    },
     currentProject: function() {
       const savedDisplayOptions = this.currentProject.displayOptions;
       if (savedDisplayOptions) {
diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
new file mode 100644
index 000000000..399c53119
--- /dev/null
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -0,0 +1,160 @@
+<template>
+  <c-card class="delete-modal">
+    <c-card-title>{{ title }}</c-card-title>
+
+    <c-card-content>
+      <c-row gap="10px" align="center">
+        <i class="mdi mdi-alert-circle"></i>
+        {{ message }}
+      </c-row>
+    </c-card-content>
+
+    <c-card-actions justify="end">
+      <c-button 
+        @click="toggleDeleteModal"
+        @keyup.enter="toggleDeleteModal"
+        outlined
+      >
+        Cancel</c-button>
+      <c-button 
+        @click="isObject ? deleteObjects() : deleteContainer()"
+        @keyup.enter="isObject ? deleteObjects() : deleteContainer()"
+      >
+        {{ confirmText }}
+      </c-button>
+    </c-card-actions>
+  </c-card>
+</template>
+
+<script>
+import { 
+  swiftDeleteObjects,
+  swiftDeleteContainer,
+} from "@/common/api";
+
+export default {
+  name: "DeleteModal",
+  data: function () {
+    return {
+      isObject: false,
+    };
+  },
+  computed: {
+    title() {
+      return this.isObject 
+        ? this.$t("message.objects.deleteObjects")
+        : this.$t("message.container_ops.deleteConfirm");
+    },
+    message() {
+      return this.isObject 
+        ? this.$t("message.objects.deleteObjectsMessage")
+        : this.$t("message.container_ops.deleteConfirmMessage");
+    },
+    confirmText() {
+      return this.isObject 
+        ? this.$t("message.objects.deleteConfirm")
+        : this.$t("message.container_ops.deleteConfirm");
+    },
+    selectedObjects() {
+      return this.$store.state.deletableObjects.length > 0
+        ? this.$store.state.deletableObjects
+        : [];
+    },
+    selectedFolderName() {
+      return this.$store.state.selectedFolderName.length > 0
+        ? this.$store.state.selectedFolderName
+        : "";
+    },
+  },
+  watch: {
+    selectedObjects: function () {
+      if (this.selectedObjects && this.selectedObjects.length > 0) {
+        this.isObject = true;
+      } else {
+        this.isObject = false;
+      }
+    },
+  },
+  methods: {
+    toggleDeleteModal: function() {
+      this.$store.commit("toggleDeleteModal", false);
+      this.$store.commit("setDeletableObjects", []);
+      this.$store.commit("setFolderName", "");
+    },
+    deleteContainer: function() {
+      this.$buefy.toast.open({
+        message: this.$t("message.container_ops.deleteSuccess"),
+        type: "is-success",
+      });
+
+      const projectID = this.$route.params.project;
+      swiftDeleteContainer(
+        projectID,
+        this.selectedFolderName,
+      ).then(async () => {
+        await this.$store.state.db.containers
+          .where({
+            projectID,
+            name: this.selectedFolderName,
+          })
+          .delete();
+
+        this.toggleDeleteModal();
+      });
+    },
+    deleteObjects: function () {
+      this.$buefy.toast.open({
+        message: this.$t("message.objects.deleteSuccess"),
+        type: "is-success",
+      });
+
+      let to_remove = new Array;
+      for (let object of this.selectedObjects) {
+        to_remove.push(object.name);
+      }
+      if(this.$route.name !== "SharedObjects") {
+        const objIDs = this.selectedObjects.reduce(
+          (prev, obj) => [...prev, obj.id], [],
+        );
+        this.$store.state.db.objects.bulkDelete(objIDs);
+      }
+      swiftDeleteObjects(
+        this.$route.params.project,
+        this.$route.params.container,
+        to_remove,
+      ).then(async () => {
+        if (this.$route.name === "SharedObjects") {
+          await this.$store.dispatch(
+            "updateSharedObjects",
+            {
+              project: this.$route.params.project,
+              owner: this.$route.params.owner,
+              container: {
+                name: this.$route.params.container,
+                id: 0,
+              },
+            },
+          );
+        }
+
+        this.toggleDeleteModal();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/prod.scss";
+
+.mdi-alert-circle {
+  font-size: 2.0em;
+  color: $csc-red;
+}
+
+.delete-modal {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+</style>
\ No newline at end of file
diff --git a/swift_browser_ui_frontend/src/components/ObjectDeleteButton.vue b/swift_browser_ui_frontend/src/components/ObjectDeleteButton.vue
deleted file mode 100644
index 3c8963e2b..000000000
--- a/swift_browser_ui_frontend/src/components/ObjectDeleteButton.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="contents">
-    <c-button
-      text
-      size="small"
-      title="Delete"
-      @click="confirmDelete ()"
-      @keyup.enter="confirmDelete ()"
-    >
-      {{ $t('message.delete') }}
-    </c-button>
-  </div>
-</template>
-
-<script>
-import {swiftDeleteObjects} from "@/common/api";
-
-export default {
-  name: "DeleteObjectsButton",
-  props: [
-    "disabled",
-    "inverted",
-    "size",
-    "objects",
-  ],
-  methods: {
-    confirmDelete: function () {
-      this.$buefy.dialog.confirm({
-        title: this.$t("message.objects.deleteObjects"),
-        message: this.$t("message.objects.deleteObjectsMessage"),
-        confirmText: this.$t("message.objects.deleteConfirm"),
-        type: "is-danger",
-        hasIcon: true,
-        onConfirm: () => {this.deleteObjects();},
-      });
-    },
-    deleteObjects: function () {
-      this.$buefy.toast.open({
-        message: this.$t("message.objects.deleteSuccess"),
-        type: "is-success",
-      });
-      let to_remove = new Array;
-      if (typeof(this.$props.objects) == "string") {
-        to_remove.push(this.$props.objects);
-      } else {
-        for (let object of this.$props.objects) {
-          to_remove.push(object.name);
-        }
-      }
-      if(this.$route.name !== "SharedObjects") {
-        const objIDs = this.$props.objects.reduce(
-          (prev, obj) => [...prev, obj.id], [],
-        );
-        this.$store.state.db.objects.bulkDelete(objIDs);
-      }
-      swiftDeleteObjects(
-        this.$route.params.project,
-        this.$route.params.container,
-        to_remove,
-      ).then(async () => {
-        if (this.$route.name === "SharedObjects") {
-          await this.$store.dispatch(
-            "updateSharedObjects",
-            {
-              project: this.$route.params.project,
-              container: {
-                name: this.$route.params.container,
-                id: 0,
-              },
-            },
-          );
-        }
-      });
-    },
-  },
-};
-</script>
diff --git a/swift_browser_ui_frontend/src/components/ObjectTable.vue b/swift_browser_ui_frontend/src/components/ObjectTable.vue
index 6dc7f9c25..306a97fb7 100644
--- a/swift_browser_ui_frontend/src/components/ObjectTable.vue
+++ b/swift_browser_ui_frontend/src/components/ObjectTable.vue
@@ -107,17 +107,17 @@
       :checked-rows="checkedRows"
       @change-folder="changeFolder"
       @selected-rows="handleSelection"
-      @delete-object="confirmDelete([$event])"
+      @delete-object="toggleDeleteModal([$event])"
     />
   </div>
 </template>
 
 <script>
-import { swiftDeleteObjects } from "@/common/api";
 import { getHumanReadableSize, truncate } from "@/common/conv";
 import {
   getSharedContainers,
   getAccessDetails,
+  toggleDeleteModal,
 } from "@/common/globalFunctions";
 import { liveQuery } from "dexie";
 import { useObservable } from "@vueuse/rxjs";
@@ -339,6 +339,7 @@ export default {
       this.$store.commit("toggleShareModal", true);
       this.$store.commit("setFolderName", this.containerName);
     },
+    toggleDeleteModal,
     updateObjects: async function () {
       if (
         this.containerName === undefined
@@ -599,58 +600,6 @@ export default {
     displayTags: function (name) {
       return this.showTags && !(this.renderFolders && !this.isFile(name));
     },
-    confirmDelete: function (deletables) {
-      this.$buefy.dialog.confirm({
-        title: this.$t("message.objects.deleteObjects"),
-        message: this.$t("message.objects.deleteObjectsMessage"),
-        confirmText: this.$t("message.objects.deleteConfirm"),
-        type: "is-danger",
-        hasIcon: true,
-        onConfirm: () => {this.deleteObjects(deletables);},
-        ariaModal: true,
-        ariaRole: "alertdialog",
-      });
-    },
-    deleteObjects: function (deletables) {
-      this.clearSelections();
-      this.$buefy.toast.open({
-        message: this.$t("message.objects.deleteSuccess"),
-        type: "is-success",
-      });
-      let to_remove = new Array;
-      if (typeof(deletables) == "string") {
-        to_remove.push(deletables);
-      } else {
-        for (let object of deletables) {
-          to_remove.push(object.name);
-        }
-      }
-      if(this.$route.name !== "SharedObjects") {
-        const objIDs = deletables.reduce(
-          (prev, obj) => [...prev, obj.id], [],
-        );
-        this.$store.state.db.objects.bulkDelete(objIDs);
-      }
-      swiftDeleteObjects(
-        this.ownerProject,
-        this.$route.params.container,
-        to_remove,
-      ).then(async () => {
-        if (this.$route.name === "SharedObjects") {
-          await this.$store.dispatch(
-            "updateSharedObjects",
-            {
-              project: this.$route.params.project,
-              owner: this.ownerProject,
-              container: {
-                name: this.$route.params.container,
-                id: 0,
-              },
-            },
-          );
-        }
-      });
-    },
     handleSelection(selection) {
       const objects = this.oList;
       this.checkedRows = objects.filter(
@@ -725,7 +674,7 @@ export default {
         {
           label: this.$t("message.table.deleteSelected"),
           icon: "mdi-trash-can-outline",
-          action: () => this.confirmDelete(this.checkedRows),
+          action: () => toggleDeleteModal(this.checkedRows, null),
         },
         {
           label: this.$t("message.table.clearSelected"),
@@ -825,5 +774,4 @@ export default {
     padding: .5rem 0;
   }
 }
-
 </style>
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index 0d2204d56..8ff6c5b0c 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -13,6 +13,7 @@ import UploadModal from "@/components/UploadModal";
 import EditTagsModal from "@/components/EditTagsModal";
 import ShareModal from "@/components/ShareModal";
 import CopyFolderModal from "@/components/CopyFolderModal";
+import DeleteModal from "@/components/DeleteModal";
 
 // CSC UI things
 import cModel from "@/common/csc-ui.js";
@@ -135,6 +136,7 @@ new Vue({
     EditTagsModal,
     ShareModal,
     CopyFolderModal,
+    DeleteModal,
   },
   data: function () {
     return {
@@ -219,6 +221,14 @@ new Vue({
         return newState;
       },
     },
+    openDeleteModal: {
+      get() {
+        return this.$store.state.openDeleteModal;
+      },
+      set(newState) {
+        return newState;
+      },
+    },
     openShareModal: {
       get() {
         return this.$store.state.openShareModal;
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 889e4861d..2b45e6c26 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -45,6 +45,11 @@
       >
         <CopyFolderModal />
       </c-modal>
+      <c-modal
+        v-csc-model="openDeleteModal"
+      >
+        <DeleteModal />
+      </c-modal>
       <router-view class="content-wrapper" />
       <b-loading
         :is-full-page="isFullPage"

From c31562bc3c3ceae07a5b23fe9746aab477b7631e Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@aalto.fi>
Date: Fri, 10 Mar 2023 08:48:46 +0200
Subject: [PATCH 2/7] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1b0af463..b942a3532 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -67,6 +67,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GL #944) Replace buefy b-select with c-select from `csc-ui`
 - (GL #944) Replace buefy b-loading with c-loader from `csc-ui` and remove unused b-loading
 - (GL #944) Replace buefy b-table with c-data-table from `csc-ui`
+- (GL #944) Replace buefy dialogs with c-modal from `csc-ui`
 
 ### Fixed
 

From 351d6ac6403da735a873ce8b8da75d0586fc18ee Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@csc.fi>
Date: Fri, 10 Mar 2023 09:00:54 +0200
Subject: [PATCH 3/7] Fix style issues

---
 .../src/components/Containers.vue                    |  2 +-
 .../src/components/DeleteModal.vue                   | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/Containers.vue b/swift_browser_ui_frontend/src/components/Containers.vue
index 4147c8cff..2a11a717b 100644
--- a/swift_browser_ui_frontend/src/components/Containers.vue
+++ b/swift_browser_ui_frontend/src/components/Containers.vue
@@ -17,10 +17,10 @@
       </c-menu>
     </c-row>
     <ContainerTable
+      :key="tableKey"
       :conts="renderingContainers"
       :disable-pagination="hidePagination"
       :hide-tags="hideTags"
-      :key="tableKey"
     />
     <c-toasts
       id="container-toasts"
diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
index dec837219..70c3d1017 100644
--- a/swift_browser_ui_frontend/src/components/DeleteModal.vue
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -3,19 +3,23 @@
     <c-card-title>{{ title }}</c-card-title>
 
     <c-card-content>
-      <c-row gap="10px" align="center">
-        <i class="mdi mdi-alert-circle"></i>
+      <c-row 
+        gap="10px"
+        align="center"
+      >
+        <i class="mdi mdi-alert-circle" />
         {{ message }}
       </c-row>
     </c-card-content>
 
     <c-card-actions justify="end">
       <c-button 
+        outlined
         @click="toggleDeleteModal"
         @keyup.enter="toggleDeleteModal"
-        outlined
       >
-        Cancel</c-button>
+        Cancel
+      </c-button>
       <c-button 
         @click="isObject ? deleteObjects() : deleteContainer()"
         @keyup.enter="isObject ? deleteObjects() : deleteContainer()"

From 6e916037a872f672b6ed63a3842009caa52ed118 Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@csc.fi>
Date: Fri, 10 Mar 2023 11:37:16 +0200
Subject: [PATCH 4/7] Change modal to look similar to design, and remove key

---
 .../src/components/Containers.vue             |  7 ---
 .../src/components/DeleteModal.vue            | 48 ++++++++-----------
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/Containers.vue b/swift_browser_ui_frontend/src/components/Containers.vue
index 2a11a717b..fa3486374 100644
--- a/swift_browser_ui_frontend/src/components/Containers.vue
+++ b/swift_browser_ui_frontend/src/components/Containers.vue
@@ -17,7 +17,6 @@
       </c-menu>
     </c-row>
     <ContainerTable
-      :key="tableKey"
       :conts="renderingContainers"
       :disable-pagination="hidePagination"
       :hide-tags="hideTags"
@@ -57,7 +56,6 @@ export default {
       abortController: null,
       containers: [],
       renderingContainers: [],
-      tableKey: 1,
     };
   },
   computed: {
@@ -89,11 +87,6 @@ export default {
         this.fetchContainers();
       }
     },
-    openDeleteModal: function () {
-      if (!this.openDeleteModal) {
-        this.tableKey++;
-      }
-    },
     currentProject: function() {
       const savedDisplayOptions = this.currentProject.displayOptions;
       if (savedDisplayOptions) {
diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
index 70c3d1017..edeecbbd0 100644
--- a/swift_browser_ui_frontend/src/components/DeleteModal.vue
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -1,32 +1,26 @@
 <template>
   <c-card class="delete-modal">
-    <c-card-title>{{ title }}</c-card-title>
+    <c-alert type="error">
+      <div slot="title">{{ title }}</div>
 
-    <c-card-content>
-      <c-row 
-        gap="10px"
-        align="center"
-      >
-        <i class="mdi mdi-alert-circle" />
-        {{ message }}
-      </c-row>
-    </c-card-content>
+      {{ message }}
 
-    <c-card-actions justify="end">
-      <c-button 
-        outlined
-        @click="toggleDeleteModal"
-        @keyup.enter="toggleDeleteModal"
-      >
-        Cancel
-      </c-button>
-      <c-button 
-        @click="isObject ? deleteObjects() : deleteContainer()"
-        @keyup.enter="isObject ? deleteObjects() : deleteContainer()"
-      >
-        {{ confirmText }}
-      </c-button>
-    </c-card-actions>
+      <c-card-actions justify="end">
+        <c-button 
+          outlined
+          @click="toggleDeleteModal"
+          @keyup.enter="toggleDeleteModal"
+        >
+          Cancel
+        </c-button>
+        <c-button 
+          @click="isObject ? deleteObjects() : deleteContainer()"
+          @keyup.enter="isObject ? deleteObjects() : deleteContainer()"
+        >
+          {{ confirmText }}
+        </c-button>
+      </c-card-actions>
+    </c-alert>
   </c-card>
 </template>
 
@@ -159,8 +153,6 @@ export default {
 }
 
 .delete-modal {
-  position: absolute;
-  left: 0;
-  right: 0;
+  padding: 0px;
 }
 </style>
\ No newline at end of file

From a6c557cb0daa1fefc975a5b400abe647882aa8f6 Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@csc.fi>
Date: Fri, 10 Mar 2023 12:11:22 +0200
Subject: [PATCH 5/7] Fix style issue

---
 swift_browser_ui_frontend/src/components/Containers.vue  | 3 ---
 swift_browser_ui_frontend/src/components/DeleteModal.vue | 4 +++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/Containers.vue b/swift_browser_ui_frontend/src/components/Containers.vue
index fa3486374..e75fd92fb 100644
--- a/swift_browser_ui_frontend/src/components/Containers.vue
+++ b/swift_browser_ui_frontend/src/components/Containers.vue
@@ -68,9 +68,6 @@ export default {
       },
       set() {},
     },
-    openDeleteModal() {
-      return this.$store.state.openDeleteModal;
-    },
     isFolderCopied() {
       return this.$store.state.isFolderCopied;
     },
diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
index edeecbbd0..26712c24e 100644
--- a/swift_browser_ui_frontend/src/components/DeleteModal.vue
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -1,7 +1,9 @@
 <template>
   <c-card class="delete-modal">
     <c-alert type="error">
-      <div slot="title">{{ title }}</div>
+      <div slot="title">
+        {{ title }}
+      </div>
 
       {{ message }}
 

From fe9fb451bd974a860a298f7603aa3b7b47ab0bca Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@csc.fi>
Date: Fri, 10 Mar 2023 13:52:38 +0200
Subject: [PATCH 6/7] Enable deleting shared objects

---
 swift_browser_ui_frontend/src/components/DeleteModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
index 26712c24e..6cb81bd5e 100644
--- a/swift_browser_ui_frontend/src/components/DeleteModal.vue
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -121,7 +121,7 @@ export default {
         this.$store.state.db.objects.bulkDelete(objIDs);
       }
       swiftDeleteObjects(
-        this.$route.params.project,
+        this.$route.params.owner || this.$route.params.project,
         this.$route.params.container,
         to_remove,
       ).then(async () => {

From 3d5c6fb4c586351925d4c83e2670971d6a8fc827 Mon Sep 17 00:00:00 2001
From: Emmi Rehn <emmi.rehn@csc.fi>
Date: Fri, 10 Mar 2023 17:36:58 +0200
Subject: [PATCH 7/7] Calling modifyBrowserPageStyles and retrieving cancel
 message from lang.js

---
 swift_browser_ui_frontend/src/common/globalFunctions.js  | 1 +
 swift_browser_ui_frontend/src/components/DeleteModal.vue | 6 +++++-
 swift_browser_ui_frontend/src/components/ObjectTable.vue | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
index 6ffbce311..9731a26f3 100644
--- a/swift_browser_ui_frontend/src/common/globalFunctions.js
+++ b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -39,6 +39,7 @@ export function toggleDeleteModal(objects, containerName) {
   if (containerName) {
     store.commit("setFolderName", containerName);
   }
+  modifyBrowserPageStyles();
 }
 
 export function modifyBrowserPageStyles() {
diff --git a/swift_browser_ui_frontend/src/components/DeleteModal.vue b/swift_browser_ui_frontend/src/components/DeleteModal.vue
index 6cb81bd5e..6e532cd7f 100644
--- a/swift_browser_ui_frontend/src/components/DeleteModal.vue
+++ b/swift_browser_ui_frontend/src/components/DeleteModal.vue
@@ -13,7 +13,7 @@
           @click="toggleDeleteModal"
           @keyup.enter="toggleDeleteModal"
         >
-          Cancel
+          {{ $t("message.cancel") }}
         </c-button>
         <c-button 
           @click="isObject ? deleteObjects() : deleteContainer()"
@@ -31,6 +31,9 @@ import {
   swiftDeleteObjects,
   swiftDeleteContainer,
 } from "@/common/api";
+import {
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
 
 export default {
   name: "DeleteModal",
@@ -80,6 +83,7 @@ export default {
       this.$store.commit("toggleDeleteModal", false);
       this.$store.commit("setDeletableObjects", []);
       this.$store.commit("setFolderName", "");
+      modifyBrowserPageStyles();
     },
     deleteContainer: function() {
       document.querySelector("#container-toasts").addToast(
diff --git a/swift_browser_ui_frontend/src/components/ObjectTable.vue b/swift_browser_ui_frontend/src/components/ObjectTable.vue
index cc2a183a2..245a83d1e 100644
--- a/swift_browser_ui_frontend/src/components/ObjectTable.vue
+++ b/swift_browser_ui_frontend/src/components/ObjectTable.vue
@@ -695,7 +695,7 @@ export default {
         {
           label: this.$t("message.table.deleteSelected"),
           icon: "mdi-trash-can-outline",
-          action: () => toggleDeleteModal(this.checkedRows, null),
+          action: () => toggleDeleteModal(this.checkedRows),
         },
         {
           label: this.$t("message.table.clearSelected"),