Bugfix/multiple bug fixes for modals

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

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) {
@@ -23,6 +24,7 @@ export function toggleCopyFolderModal(folderName, sourceProjectId) {
   if(sourceProjectId) {
     store.commit("setSourceProjectId", sourceProjectId);
   }
+  modifyBrowserPageStyles();
 }
 
 export function modifyBrowserPageStyles() {

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 " +

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>

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%;

swift_browser_ui_frontend/src/components/CopyFolderModal.vue

@@ -1,53 +1,55 @@
 <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
         size="large"
         @click="cancelCopy"
       >
-        Cancel
+        {{ $t("message.cancel") }}
       </c-button>
       <c-button
         size="large"
@@ -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;

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"
@@ -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 {