Merge pull request #965 from CSCfi/feature/share-modal

Show notification when changing permission in share modal

Author: csc-felipe

.github/config/.finnishwords.txt

@@ -238,6 +238,7 @@ mutta
 muussa
 muutaman
 muutamia
+muutettiin
 muuttaa
 muuttaaksesi
 näkyvissä

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Show notification when changing permission in share modal
 - Use OIDC as the default Keystone login provider for SSO
 - (GH #864) Vault c4ghtransit integration - Uploads object headers to Vault in addition to Object Storage
 - (GH #781) Render full details of Folders you have shared and Folders shared with you

swift_browser_ui_frontend/src/common/lang.js

@@ -203,6 +203,7 @@ let default_translations = {
         write_perm: "Read and write",
         shared_successfully: "Folder was shared successfully!",
         remove_permission: "Permission was removed successfully!",
+        update_permission: "Permission was changed successfully.",
         shared_table_title: "Project's folder has been shared with",
         field_label: "Project Identifiers to share with",
         field_placeholder: "Add Share IDs",
@@ -663,6 +664,7 @@ let default_translations = {
         write_perm: "Salli säiliöön kirjoitus",
         shared_successfully: "Kansion jakaminen onnistui!",
         remove_permission: "Lupa poistettiin onnistuneesti!",
+        update_permission: "Lupa muutettiin onnistuneesti.",
         shared_table_title: "Projektin kansio on jaettu",
         project_id: "Projektin tunnus",
         field_label: "Jaa projektitunnisteille",

swift_browser_ui_frontend/src/components/ShareModal.vue

@@ -16,7 +16,7 @@
         {{ $t("message.share.close") }}
       </c-button>
     </header>
-    <c-card-content>
+    <c-card-content id="share-card-modal-content">
       <h6 class="subtitle is-6 has-text-dark">
         {{ $t("message.share.share_subtitle") }}
       </h6>
@@ -86,12 +86,13 @@
         </c-flex>
       </c-container>
       <c-alert
-        v-show="isShared || isPermissionRemoved"
+        v-show="isShared || isPermissionRemoved || isPermissionUpdated"
         type="success"
       >
         <div class="shared-notification">
           {{ isShared ? $t('message.share.shared_successfully')
-            : $t('message.share.remove_permission')
+            : isPermissionUpdated ? $t('message.share.update_permission') 
+              : $t('message.share.remove_permission')
           }}
           <c-button
             text
@@ -111,6 +112,7 @@
           :folder-name="folderName"
           :access-rights="accessRights"
           @removeSharedFolder="removeSharedFolder"
+          @updateSharedFolder="updateSharedFolder"
         />
       </c-container>
     </c-card-content>
@@ -143,6 +145,7 @@ export default {
       isShared: false,
       sharedDetails: [],
       isPermissionRemoved: false,
+      isPermissionUpdated: false,
       timeout: null,
     };
   },
@@ -207,18 +210,10 @@ export default {
         (ret) => {
           this.loading = false;
           if (ret) {
-            this.isShared = true;
             this.getSharedDetails();
-
-            if (this.timeout !== null) {
-              clearTimeout(this.timeout);
-              this.timeout = null;
-              if(this.isPermissionRemoved) {
-                this.isPermissionRemoved = false;
-              }
-            }
-            this.timeout = setTimeout(
-              () => this.closeSharedNotification(), 3000);
+            this.closeSharedNotification();
+            this.isShared = true;
+            this.closeSharedNotificationWithTimeout();
           }
         },
       );
@@ -302,8 +297,18 @@ export default {
       this.isShared = false;
       this.isPermissionRemoved = false;
     },
+    closeSharedNotificationWithTimeout() {
+      document.getElementById("share-card-modal-content").scrollTo(0, 0);
+      this.timeout = setTimeout(() => this.closeSharedNotification(), 3000);
+    },
     closeSharedNotification: function () {
-      this.isShared ? this.isShared = false : this.isPermissionRemoved = false;
+      if (this.timeout !== null) {
+        clearTimeout(this.timeout);
+      }
+
+      this.isShared = false;
+      this.isPermissionRemoved = false;
+      this.isPermissionUpdated = false;
     },
     getSharedDetails: function () {
       this.$store.state.client.getShareDetails(
@@ -314,21 +319,19 @@ export default {
         this.tags = [];
       });
     },
+    updateSharedFolder: function () {
+      this.closeSharedNotification();
+      this.isPermissionUpdated = true;
+      this.closeSharedNotificationWithTimeout();
+    },
     removeSharedFolder: function (folderData) {
+      this.closeSharedNotification();
       this.sharedDetails = this.sharedDetails.filter(
         item => {
           return item.sharedTo !== folderData.projectId.value;
         });
       this.isPermissionRemoved = true;
-
-      if (this.timeout !== null) {
-        clearTimeout(this.timeout);
-        this.timeout = null;
-        if (this.isShared) {
-          this.isShared = false;
-        }
-      }
-      this.timeout = setTimeout(() => this.isPermissionRemoved = false, 3000);
+      this.closeSharedNotificationWithTimeout();
     },
   },
 };

swift_browser_ui_frontend/src/components/ShareModalTable.vue

@@ -133,6 +133,7 @@ export default {
         [sharedProjectId],
         rights,
       );
+      this.$emit("updateSharedFolder");
     },
     deleteFolderShare: function (folderData) {
       removeAccessControlMeta(