From 5086bb12df0987ac8ae970eb0d20ff4fa88b303c Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Mon, 14 Nov 2022 16:55:00 +0200
Subject: [PATCH 1/6] Fix for Create Folder Modal

---
 .../src/components/CreateFolderModal.vue                   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index 6f027054c..c8969ee9e 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -110,7 +110,8 @@ export default {
   },
   watch: {
     selectedFolderName: function () {
-      if (this.selectedFolderName && this.selectedFolderName.length > 0) {
+      if (this.selectedFolderName && this.selectedFolderName.length > 0
+        && this.$store.state.openCreateFolderModal) {
         this.create = false;
         this.getContainer();
       }
@@ -219,10 +220,8 @@ export default {
 }
 
 c-card-content {
-  background-color: $csc-primary-lighter;
   color: var(--csc-dark-grey);
-  margin-top: 1rem;
-  padding: 1.5rem;
+  padding: 1.5rem 0 0 0;
 }
 
 c-card-actions {

From 007b30ba762ee66323b4eb14f48b0f01ba6dea23 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Tue, 15 Nov 2022 18:17:54 +0200
Subject: [PATCH 2/6] Fix for Copy folder modal

---
 .../src/common/globalFunctions.js             |   1 +
 .../src/components/CopyFolderModal.vue        | 128 +++++++++++-------
 2 files changed, 82 insertions(+), 47 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
index 281fb75d6..a572079c8 100644
--- a/swift_browser_ui_frontend/src/common/globalFunctions.js
+++ b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -23,6 +23,7 @@ export function toggleCopyFolderModal(folderName, sourceProjectId) {
   if(sourceProjectId) {
     store.commit("setSourceProjectId", sourceProjectId);
   }
+  modifyBrowserPageStyles();
 }
 
 export function modifyBrowserPageStyles() {
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index e22ee7ccc..9cd1ddc36 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -1,46 +1,48 @@
 <template>
   <c-card class="copy-folder">
-    <h3 class="title is-3 has-text-dark">
-      {{
-        $t("message.replicate.copy_folder") + selectedFolderName
-      }}
-    </h3>
-    <c-card-content>
-      <c-alert
-        v-show="folderExists"
-        type="warning"
-      >
-        <p class="has-text-dark">
-          {{ $t("message.replicate.destinationExists") }}
-        </p>
-      </c-alert>
-      <b-field
-        custom-class="has-text-dark"
-        :label="$t('message.replicate.name_newFolder')"
-      >
-        <b-input
-          v-model="folderName"
-          name="foldername"
+    <div class="modal-content-wrapper">
+      <h3 class="title is-3 has-text-dark">
+        {{
+          $t("message.replicate.copy_folder") + selectedFolderName
+        }}
+      </h3>
+      <c-card-content>
+        <c-alert
+          v-show="folderExists"
+          type="warning"
+        >
+          <p class="has-text-dark">
+            {{ $t("message.replicate.destinationExists") }}
+          </p>
+        </c-alert>
+        <b-field
           custom-class="has-text-dark"
-        />
-      </b-field>
-      <b-field
-        custom-class="has-text-dark"
-        :label="$t('message.tagName')"
-      >
-        <b-taginput
-          v-model="tags"
-          ellipsis
-          maxlength="20"
-          has-counter
-          rounded
-          type="is-primary"
-          :placeholder="$t('message.tagPlaceholder')"
-          :confirm-keys="taginputConfirmKeys"
-          :on-paste-separators="taginputConfirmKeys"
-        />
-      </b-field>
-    </c-card-content>
+          :label="$t('message.replicate.name_newFolder')"
+        >
+          <b-input
+            v-model="folderName"
+            name="foldername"
+            custom-class="has-text-dark"
+          />
+        </b-field>
+        <b-field
+          custom-class="has-text-dark"
+          :label="$t('message.tagName')"
+        >
+          <b-taginput
+            v-model="tags"
+            ellipsis
+            maxlength="20"
+            has-counter
+            rounded
+            type="is-primary"
+            :placeholder="$t('message.tagPlaceholder')"
+            :confirm-keys="taginputConfirmKeys"
+            :on-paste-separators="taginputConfirmKeys"
+          />
+        </b-field>
+      </c-card-content>
+    </div>
     <c-card-actions justify="space-between">
       <c-button
         outlined
@@ -68,6 +70,7 @@ import {
   updateContainerMeta,
 } from "@/common/api";
 
+import { modifyBrowserPageStyles } from "@/common/globalFunctions";
 import escapeRegExp from "lodash/escapeRegExp";
 import { useObservable } from "@vueuse/rxjs";
 import { liveQuery } from "dexie";
@@ -76,7 +79,7 @@ export default {
   name: "CopyFolderModal",
   data() {
     return {
-      folderExists: true,
+      folderExists: false,
       folderName: "",
       tags: [],
       taginputConfirmKeys,
@@ -99,8 +102,9 @@ export default {
   watch: {
     selectedFolderName: function () {
       if (this.selectedFolderName && this.selectedFolderName.length > 0) {
-        this.folderName = this.selectedFolderName;
-        this.fetchFolders().then(() => this.checkSelectedFolder());
+        this.fetchFolders().then(() => {
+          this.getCopyFolder(this.selectedFolderName);
+        });
       }
     },
     folderName: debounce(function () {
@@ -128,6 +132,39 @@ export default {
         signal: null,
       });
     },
+    getCopyFolder: function (origFolderName) {
+      if (this.folders.value) {
+        // Check if current folder is a copy
+        const reg = new RegExp("\\b(copy)\\s(\\d+)\\b$", "i");
+        const isCopied = origFolderName.match(reg);
+
+        // Use a var to keep the folder as a copy name without copy version
+        let copiedFolder = "";
+        if (isCopied) {
+          copiedFolder = `${origFolderName.slice(0, isCopied["index"])}copy`;
+        } else {
+          copiedFolder = `${origFolderName} copy`;
+        }
+
+        const existingCopiedFolders = [];
+        for (let folder of this.folders.value) {
+          // Check if folder is one of the copy versions
+          // which ends in the form 'copy + number'
+          const copiedReg = new RegExp(`\\b${copiedFolder}\\s(\\d+)\\b$`, "gi");
+          folder.name.match(copiedReg) ?
+            existingCopiedFolders.push(folder.name) : null;
+        }
+
+        if (existingCopiedFolders.length > 0) {
+          // Sort the array in asc, the last item is the latest copy
+          // then extract the copy version from it
+          existingCopiedFolders.sort();
+          const latestVer= existingCopiedFolders[
+            existingCopiedFolders.length-1].match(reg);
+          this.folderName = !isCopied ? `${copiedFolder} ${+latestVer[2] + 1}` : origFolderName.replace(/\d+$/, +latestVer[2]+1);
+        }
+      }
+    },
     checkSelectedFolder: function () {
       // request parameter should be sanitized first
       const safeKey = escapeRegExp(this.folderName).trim();
@@ -148,6 +185,7 @@ export default {
       this.$store.commit("setFolderName", "");
       this.folderName = "";
       this.tags = [];
+      modifyBrowserPageStyles();
     },
     replicateContainer: function () {
       // Initiate the container replication operation
@@ -227,10 +265,6 @@ export default {
   }
 }
 
-h3 {
-  margin: 0 !important;
-}
-
 c-card-content {
   color: var(--csc-dark-grey);
   padding: 0;

From e868ec4dff8f3ba285d679af72330332647a31ae Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Wed, 16 Nov 2022 14:10:19 +0200
Subject: [PATCH 3/6] Hide Advanced options in Upload modal by default

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

diff --git a/swift_browser_ui_frontend/src/components/UploadModal.vue b/swift_browser_ui_frontend/src/components/UploadModal.vue
index aa5268ef7..6321482ac 100644
--- a/swift_browser_ui_frontend/src/components/UploadModal.vue
+++ b/swift_browser_ui_frontend/src/components/UploadModal.vue
@@ -64,7 +64,7 @@
           {{ $t("message.container_ops.viewProjectMembers") }}
           <i class="mdi mdi-open-in-new" />
         </c-link>
-        <c-accordion :value="$t('message.encrypt.advancedOptions')">
+        <c-accordion value="advancedOptions">
           <c-accordion-item
             :heading="$t('message.encrypt.advancedOptions')"
             :value="$t('message.encrypt.advancedOptions')"

From 6f1968e786c6886f82539820e5dfab4a74f606a0 Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Wed, 16 Nov 2022 14:56:24 +0200
Subject: [PATCH 4/6] Fix for Support links not working

---
 .../src/components/BrowserMainNavbar.vue      | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
index 120c5ef4e..f6fec5e37 100644
--- a/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
@@ -24,8 +24,8 @@
           :items.prop="item.subs.map(subItem => ({
             name: subItem.title,
             action: () => {
-              subItem.route && handleItemRoute(subItem)
-              subItem.action && subItem.action()
+              (subItem.route || subItem.href) && handleItemRoute(subItem);
+              subItem.action && subItem.action();
             },
             icon: subItem.href && extLinkIcon,
           }))"
@@ -66,8 +66,8 @@
             :target="subItem.href && '_blank'"
             :data-testid="subItem.testid"
             @click="() => {
-              subItem.route && handleItemRoute(subItem)
-              subItem.action && subItem.action()
+              (subItem.route || subItem.href) && handleItemRoute(subItem);
+              subItem.action && subItem.action();
             }"
           >
             {{ subItem.title }}
@@ -158,7 +158,7 @@ export default {
           icon: "mdi-web",
           testid: "language-selector",
           subs: this.langs.map(lang => ({
-            title: lang.ph, 
+            title: lang.ph,
             action: () => {
               this.$i18n.locale = lang.value;
               this.currentLang = lang.ph;
@@ -179,13 +179,13 @@ export default {
               href: "https://research.csc.fi/pricing#buc",
             },
             {
-              title: this.$t("message.supportMenu.sharing"), 
-              route: {name: "TokensView", params: {        
-                user: this.uname, 
+              title: this.$t("message.supportMenu.sharing"),
+              route: {name: "TokensView", params: {
+                user: this.uname,
                 project: this.active.id}},
             },
             {
-              title: this.$t("message.supportMenu.about"), 
+              title: this.$t("message.supportMenu.about"),
               href: "https://research.csc.fi/sensitive-data",
             },
           ],
@@ -245,27 +245,27 @@ export default {
     padding: 0 1rem;
     box-shadow: rgba(0, 0, 0, 0.16) 2px 4px 10px;
   }
-  
+
   .app-name {
     color: $csc-grey;
     font-size: 20px;
   }
-  
+
   .desktop-menu {
     display: flex;
     align-items: center;
   }
-  
+
   @media screen and (max-width: 767px) {
     .desktop-menu {
       display: none;
     }
   }
-  
+
   @media screen and (min-width: 768px) {
     c-navigationbutton {
       display: none;
     }
   }
-  
+
   </style>
\ No newline at end of file

From 4b439b9a9f432ef3cfd182ba45719e4552b3a35f Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Wed, 16 Nov 2022 15:03:10 +0200
Subject: [PATCH 5/6] Fix for page scrolling after opening/closing modals

---
 .../src/common/globalFunctions.js                    |  1 +
 swift_browser_ui_frontend/src/common/lang.js         | 12 ++++++++----
 .../src/components/BrowserSecondaryNavbar.vue        |  7 +++----
 .../src/components/CopyFolderModal.vue               |  2 +-
 .../src/components/CreateFolderModal.vue             |  2 +-
 .../src/components/EditTagsModal.vue                 |  2 +-
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/globalFunctions.js b/swift_browser_ui_frontend/src/common/globalFunctions.js
index a572079c8..e25dd90b8 100644
--- a/swift_browser_ui_frontend/src/common/globalFunctions.js
+++ b/swift_browser_ui_frontend/src/common/globalFunctions.js
@@ -5,6 +5,7 @@ export function toggleCreateFolderModal(folderName) {
   if (folderName) {
     store.commit("setFolderName", folderName);
   }
+  modifyBrowserPageStyles();
 }
 
 export function toggleEditTagsModal(object) {
diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 6804a0505..c76fe1060 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -289,6 +289,7 @@ let default_translations = {
       remove: "Remove",
       edit: "Edit",
       editTags: "Edit tags",
+      cancel: "Cancel",
       save: "Save",
       options: "Options",
       createContainerButton: "Create folder",
@@ -363,8 +364,9 @@ let default_translations = {
           "megabytes, which can lead to a failure in encryption. " +
           "Try uploading files in smaller batches, or encrypt " +
           "them before uploading normally.",
-        enNotAvail: "ServiceWorker function not available in this browser. " +
-                    "Recommended browsers are Firefox and Chrome.",
+        enNotAvail:
+          "ServiceWorker function not available in this browser. " +
+          "Recommended browsers are Firefox and Chrome.",
         enFiles: "Encrypt files before upload",
         fsWriteFail:
           "Failed to copy files into temporary file system. " +
@@ -726,6 +728,7 @@ let default_translations = {
       remove: "Poista",
       edit: "Muokkaa",
       editTags: "Muokkaa tägejä",
+      cancel: "Peruuta",
       save: "Tallenna",
       options: "Valinnat",
       createContainerButton: "Luo säiliö",
@@ -795,8 +798,9 @@ let default_translations = {
           "salausratkaisun rajoitteiden vuoksi. Lähetä tiedostot " +
           "pienemmissä erissä tai salaa ne ennen lähettämistä " +
           "tavallisesti.",
-        enNotAvail: "Selaimestasi ei löydy ServiceWorker -ominaisuutta. " +
-                    "Suositellut selaimet ovat Chrome ja Firefox.",
+        enNotAvail:
+          "Selaimestasi ei löydy ServiceWorker -ominaisuutta. " +
+          "Suositellut selaimet ovat Chrome ja Firefox.",
         enFiles: "Salaa tiedostot ennen lähetystä",
         fsWriteFail:
           "Tiedostojen kopiointi väliaikaiseen tallennustilaan " +
diff --git a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
index a064b4bd0..1051252aa 100644
--- a/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserSecondaryNavbar.vue
@@ -108,7 +108,6 @@ export default {
     },
     toggleCreateFolderModal: function (folderName) {
       toggleCreateFolderModal(folderName);
-      modifyBrowserPageStyles();
     },
     toggleUploadModal: function () {
       this.$store.commit("toggleUploadModal", true);
@@ -147,11 +146,11 @@ export default {
 
 <style scoped lang="scss">
   @import "@/css/prod.scss";
-  
+
   #secondary-navbar {
     border-bottom: 6px solid $csc-primary-light;
   }
-  
+
   .container {
     display: flex;
     padding: 0.5rem 1rem !important;
@@ -174,7 +173,7 @@ export default {
   c-select {
     flex: 1;
   }
-  
+
   @media screen and (max-width: 767px) {
     .select-project {
       width: 100%;
diff --git a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
index 9cd1ddc36..cdbb795ce 100644
--- a/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CopyFolderModal.vue
@@ -49,7 +49,7 @@
         size="large"
         @click="cancelCopy"
       >
-        Cancel
+        {{ $t("message.cancel") }}
       </c-button>
       <c-button
         size="large"
diff --git a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
index c8969ee9e..52863ce72 100644
--- a/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
+++ b/swift_browser_ui_frontend/src/components/CreateFolderModal.vue
@@ -61,7 +61,7 @@
         size="large"
         @click="toggleCreateFolderModal"
       >
-        Cancel
+        {{ $t("message.cancel") }}
       </c-button>
       <c-button
         size="large"
diff --git a/swift_browser_ui_frontend/src/components/EditTagsModal.vue b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
index 8e6556cb5..6ee85eedb 100644
--- a/swift_browser_ui_frontend/src/components/EditTagsModal.vue
+++ b/swift_browser_ui_frontend/src/components/EditTagsModal.vue
@@ -27,7 +27,7 @@
         size="large"
         @click="toggleEditTagsModal"
       >
-        Cancel
+         {{ $t("message.cancel") }}
       </c-button>
       <c-button
         size="large"

From 7e34c2ef486988881644ad267b69c9c0b9f9c6bb Mon Sep 17 00:00:00 2001
From: HangLe <hannyle91@gmail.com>
Date: Thu, 17 Nov 2022 09:45:15 +0200
Subject: [PATCH 6/6] Update Changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 995767700..e8c092b27 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- (GH #858) Fixed for multiple bugs related to modals and background page's scrolling effect
 - (GH #853) Fix Node 18 needing python for npm install
 - (GH #827) Fixed for updating folder's items count and size when deleting objects inside it
 - (GH #788) Fixed for objects of a copied folder rendering their tags correctly