working implementation

client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderDatasetPermissions.vue

@@ -1,21 +1,51 @@
 <template>
     <div>
-        <div v-if="dataset">
-            <b-button variant="primary" :to="{ path: `/${this.folder_id}` }">
-                <font-awesome-icon icon="angle-double-left">1</font-awesome-icon>
-            </b-button>
-            <div>
-                <div class="header text-center">{{ dataset.name }}</div>
-            </div>
-        </div>
-        <LibraryPermissionsWarning :is_admin="is_admin" />
-        <hr class="my-4" />
         <b-container fluid>
+            <div v-if="dataset">
+                <b-breadcrumb>
+                    <b-breadcrumb-item title="Return to the list of libraries" :href="`${root}library/list`">
+                        Libraries
+                    </b-breadcrumb-item>
+                    <template v-for="path_item in this.dataset.full_path">
+                        <b-breadcrumb-item
+                            :key="path_item[0]"
+                            :to="{ path: `/${path_item[0]}` }"
+                            :active="path_item[0] === dataset_id"
+                            href="#"
+                            >{{ path_item[1] }}</b-breadcrumb-item
+                        >
+                    </template>
+                </b-breadcrumb>
+                <b-row>
+                    <b-col>
+                        <b-button
+                            data-toggle="tooltip"
+                            data-placement="top"
+                            title="Go to Dataset Details"
+                            variant="secondary"
+                            type="button"
+                            :href="`${root}library/list#folders/${folder_id}/datasets/${dataset_id}`"
+                        >
+                            <font-awesome-icon :icon="['far', 'file']" />
+                            &nbsp;Dataset Details
+                        </b-button>
+                    </b-col>
+                    <b-col>
+                        <div>
+                            <div class="header text-center">{{ dataset.name }}</div>
+                        </div>
+                    </b-col>
+                    <b-col />
+                </b-row>
+            </div>
+
+            <LibraryPermissionsWarning :is_admin="is_admin" />
+            <hr class="my-4" />
             <h2 class="text-center">Library-related permissions</h2>
             <PermissionsInputField
                 v-if="modify_item_roles"
                 :id="dataset_id"
-                :permission_type="manage_type"
+                :permission_type="modify_item_roles_type"
                 :initial_value="modify_item_roles"
                 title="Roles that can modify the library item"
                 :apiRootUrl="apiRootUrl"
@@ -31,7 +61,7 @@
             <PermissionsInputField
                 v-if="access_dataset_roles"
                 :id="dataset_id"
-                :permission_type="manage_type"
+                :permission_type="access_dataset_roles_type"
                 :initial_value="access_dataset_roles"
                 :apiRootUrl="apiRootUrl"
                 title="Roles that can access the dataset"
@@ -43,7 +73,7 @@
             <PermissionsInputField
                 v-if="manage_dataset_roles"
                 :id="dataset_id"
-                :permission_type="manage_type"
+                :permission_type="manage_dataset_roles_type"
                 :initial_value="manage_dataset_roles"
                 :apiRootUrl="apiRootUrl"
                 title="Roles that can manage permissions on the dataset"
@@ -51,6 +81,17 @@
                         If you remove yourself you will lose the ability manage this dataset unless you are an admin."
                 @input="setUserPermissionsPreferences"
             />
+            <b-button
+                data-toggle="tooltip"
+                data-placement="top"
+                title="Save modifications"
+                class="toolbtn_save_permissions"
+                variant="secondary"
+                @click="postPermissions"
+            >
+                <font-awesome-icon :icon="['far', 'save']" />
+                &nbsp;Save
+            </b-button>
         </b-container>
     </div>
 </template>
@@ -64,7 +105,7 @@ import { Toast } from "ui/toast";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
 import PermissionsInputField from "./PermissionsInputField.vue";
-import { initManageFolderIcons } from "components/LibraryFolder/icons";
+import { initPermissionsIcons } from "components/LibraryFolder/icons";
 import LibraryPermissionsWarning from "components/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue";
 import { extractRoles } from "./utils";
 
@@ -73,7 +114,7 @@ import VueObserveVisibility from "vue-observe-visibility";
 
 Vue.use(VueObserveVisibility);
 Vue.use(BootstrapVue);
-initManageFolderIcons();
+initPermissionsIcons();
 
 export default {
     props: {
@@ -99,9 +140,9 @@ export default {
             access_dataset_roles: undefined,
             modify_item_roles: undefined,
             manage_dataset_roles: undefined,
-            add_type: "add_type",
-            manage_type: "manage_type",
-            modify_type: "modify_type",
+            access_dataset_roles_type: "access_dataset_roles",
+            modify_item_roles_type: "modify_item_roles",
+            manage_dataset_roles_type: "manage_dataset_roles",
             apiRootUrl: `${getAppRoot()}api/libraries/datasets`,
         };
     },
@@ -125,17 +166,26 @@ export default {
             return `${this.root}library/folders/${this.folder_id}`;
         },
         setUserPermissionsPreferences(ids, permission_type) {
-            switch (permission_type) {
-                case "manage_type":
-                    this.manage_folder_role_list = ids;
-                    break;
-                case "add_type":
-                    this.add_library_item_role_list = ids;
-                    break;
-                case "modify_type":
-                    this.modify_folder_role_list = ids;
-                    break;
-            }
+            this[permission_type] = ids;
+        },
+        postPermissions() {
+            this.services.setPermissions(
+                this.apiRootUrl,
+                this.dataset_id,
+                [
+                    { "access_ids[]": this.access_dataset_roles },
+                    { "modify_ids[]": this.modify_item_roles },
+                    { "manage_ids[]": this.manage_dataset_roles },
+                ],
+                (fetched_permissions) => {
+                    Toast.success("Permissions saved.");
+                    this.permissions = fetched_permissions;
+                },
+                (error) => {
+                    Toast.error("An error occurred while attempting to set folder permissions.");
+                    console.error(error);
+                }
+            );
         },
     },
 };

client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue

@@ -2,8 +2,8 @@
     <div>
         <div>
             <div v-if="folder">
-                <b-button variant="primary" :to="{ path: `/${this.folder.parent_id}` }">
-                    <font-awesome-icon icon="angle-double-left">1</font-awesome-icon>
+                <b-button variant="primary" title="back to parent folder" :to="{ path: `/${this.folder.parent_id}` }">
+                    <font-awesome-icon icon="angle-double-left" />
                 </b-button>
                 <div>
                     <div class="header text-center">{{ folder.name }}</div>
@@ -76,10 +76,10 @@ import PermissionsInputField from "./PermissionsInputField.vue";
 import LibraryPermissionsWarning from "components/LibraryFolder/LibraryFolderPermissions/LibraryPermissionsWarning.vue";
 import { extractRoles } from "./utils";
 
-import { initManageFolderIcons } from "components/LibraryFolder/icons";
+import { initPermissionsIcons } from "components/LibraryFolder/icons";
 
 Vue.use(BootstrapVue);
-initManageFolderIcons();
+initPermissionsIcons();
 
 export default {
     props: {
@@ -101,9 +101,9 @@ export default {
             add_library_item_role_list: undefined,
             modify_folder_role_list: undefined,
             manage_folder_role_list: undefined,
-            add_type: "add_type",
-            manage_type: "manage_type",
-            modify_type: "modify_type",
+            add_type: "add_library_item_role_list",
+            manage_type: "manage_folder_role_list",
+            modify_type: "modify_folder_role_list",
             apiRootUrl: `${getAppRoot()}api/folders`,
         };
     },
@@ -127,24 +127,17 @@ export default {
             return `${this.root}library/folders/${this.folder.parent_id}`;
         },
         setUserPermissionsPreferences(ids, permission_type) {
-            switch (permission_type) {
-                case "manage_type":
-                    this.manage_folder_role_list = ids;
-                    break;
-                case "add_type":
-                    this.add_library_item_role_list = ids;
-                    break;
-                case "modify_type":
-                    this.modify_folder_role_list = ids;
-                    break;
-            }
+            this[permission_type] = ids;
         },
         postPermissions() {
             this.services.setPermissions(
+                this.apiRootUrl,
                 this.folder_id,
-                this.add_library_item_role_list,
-                this.manage_folder_role_list,
-                this.modify_folder_role_list,
+                [
+                    { "add_ids[]": this.add_library_item_role_list },
+                    { "manage_ids[]": this.manage_folder_role_list },
+                    { "modify_ids[]": this.modify_folder_role_list },
+                ],
                 (fetched_permissions) => {
                     Toast.success("Permissions saved.");
                     this.permissions = fetched_permissions;

client/src/components/LibraryFolder/LibraryFolderPermissions/services.js

@@ -54,24 +54,18 @@ export class Services {
         }
     }
 
-    async setPermissions(id, add_ids, manage_ids, modify_ids, onSuccess, onError) {
+    async setPermissions(apiRootUrl, id, new_roles_ids, onSuccess, onError) {
         var formData = new FormData();
-        formData.append(
-            "add_ids[]",
-            add_ids.map((a) => a.id)
-        );
-        formData.append(
-            "manage_ids[]",
-            manage_ids.map((a) => a.id)
-        );
-        formData.append(
-            "modify_ids[]",
-            modify_ids.map((a) => a.id)
-        );
+        new_roles_ids.forEach((permissionType) => {
+            Object.keys(permissionType).map(function (k) {
+                const ids = permissionType[k].map((a) => a.id);
+                formData.append(k, ids);
+            });
+        });
 
         axios({
             method: "post",
-            url: `${getAppRoot()}api/folders/${id}/permissions?action=set_permissions`,
+            url: `${apiRootUrl}/${id}/permissions?action=set_permissions`,
             data: formData,
             headers: { "Content-Type": "multipart/form-data" },
         })

client/src/components/LibraryFolder/icons.js

@@ -38,7 +38,7 @@ const tableIcons = [
     faMinusSquare,
 ];
 
-const manageIcons = [faAngleDoubleLeft, faSave];
+const manageIcons = [faAngleDoubleLeft, faSave, faFile];
 const topBarIcons = [faHome, faPlus, faInfoCircle, faTrash, faDownload, faBook];
 
 export function initFolderTableIcons() {
@@ -47,7 +47,7 @@ export function initFolderTableIcons() {
     });
 }
 
-export function initManageFolderIcons() {
+export function initPermissionsIcons() {
     manageIcons.forEach((icon) => {
         library.add(icon);
     });