initial impl

client/package.json

@@ -82,7 +82,8 @@
     "vueisotope": "^3.1.2",
     "vuex": "^3.4.0",
     "vuex-cache": "^3.2.0",
-    "vuex-persist": "^3.1.3"
+    "vuex-persist": "^3.1.3",
+    "vue-observe-visibility": "^1.0.0"
   },
   "scripts": {
     "watch": "gulp && yarn run save-build-hash && yarn run webpack-watch",

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

@@ -0,0 +1,143 @@
+<template>
+    <div>
+        <div>
+            <a :href="getParentLink">
+                <button
+                    data-toggle="tooltip"
+                    data-placement="top"
+                    title="Go back to the parent folder"
+                    class="btn btn-secondary primary-button"
+                    type="button"
+                >
+                    <span class="fa fa-caret-left fa-lg" />
+                    &nbsp;Parent folder
+                </button>
+            </a>
+        </div>
+
+        <h1>Folder: {{ folder.name }}</h1>
+
+        <div class="alert alert-warning">
+            <div v-if="is_admin">
+                You are logged in as an <strong>administrator</strong> therefore you can manage any folder on this
+                Galaxy instance. Please make sure you understand the consequences.
+            </div>
+            <div v-else>
+                You can assign any number of roles to any of the following permission types. However please read
+                carefully the implications of such actions.
+            </div>
+        </div>
+
+        <div class="dataset_table">
+            <h2>Folder permissions</h2>
+            <h4>
+                Roles that can manage permissions on this folder
+            </h4>
+
+            <multiselect
+                v-if="options.roles.length > 0"
+                v-model="value"
+                :options="options.roles"
+                :clear-on-select="true"
+                :preserve-search="true"
+                :multiple="true"
+                label="name"
+                track-by="id"
+            >
+            </multiselect>
+
+            <div class="alert alert-info roles-selection">
+                User with <strong>any</strong> of these roles can manage permissions on this folder.
+            </div>
+            <h4>
+                Roles that can add items to this folder
+            </h4>
+            <div id="add_perm" class="add_perm roles-selection"></div>
+            <div class="alert alert-info roles-selection">
+                User with <strong>any</strong> of these roles can add items to this folder (folders and datasets).
+            </div>
+            <h4>
+                Roles that can modify this folder
+            </h4>
+            <div id="modify_perm" class="modify_perm roles-selection"></div>
+            <div class="alert alert-info roles-selection">
+                User with <strong>any</strong> of these roles can modify this folder (name, etc.).
+            </div>
+            <button
+                data-toggle="tooltip"
+                data-placement="top"
+                title="Save modifications"
+                class="btn btn-secondary toolbtn_save_permissions primary-button"
+                type="button"
+            >
+                <span class="fa fa-floppy-o" />
+                &nbsp;Save
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { getAppRoot } from "onload/loadConfig";
+import BootstrapVue from "bootstrap-vue";
+import { Services } from "./services";
+import Utils from "utils/utils";
+import { Toast } from "ui/toast";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { getGalaxyInstance } from "app";
+import Multiselect from "vue-multiselect";
+import "vue-multiselect/dist/vue-multiselect.min.css";
+
+Vue.use(BootstrapVue);
+
+export default {
+    props: {
+        folder_id: {
+            type: String,
+            required: true,
+        },
+    },
+    components: {
+        Multiselect,
+    },
+    data() {
+        return {
+            permissisons: undefined,
+            folder: undefined,
+            is_admin: undefined,
+            options: { roles: [] },
+            value: null,
+        };
+    },
+    created() {
+        const Galaxy = getGalaxyInstance();
+        this.root = getAppRoot();
+        this.services = new Services({ root: this.root });
+        this.is_admin = Galaxy.user.attributes.is_admin;
+
+        this.services.getFolderPermissions(this.folder_id).then((response) => {
+            this.permissisons = response;
+        });
+        this.services.getFolder(this.folder_id).then((response) => {
+            this.folder = response;
+        });
+        this.getSelectOptions();
+    },
+    methods: {
+        getSelectOptions() {
+            this.services.getSelectOptions(this.folder_id, true, 1).then((response) => {
+                console.log(response)
+                if (this.options.page > 1) {
+                    this.options.roles.concat(response.roles);
+                } else {
+                    this.options = response;
+                }
+            });
+        },
+        getParentLink() {
+            return `${this.root}library/folders/${this.folder.parent_id}`;
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,38 @@
+import axios from "axios";
+import { rethrowSimple } from "utils/simple-error";
+import { getAppRoot } from "onload/loadConfig";
+
+export class Services {
+    constructor(options = {}) {
+        this.root = options.root || getAppRoot();
+    }
+
+    async getFolderPermissions(id) {
+        const url = `${this.root}api/folders/${id}/permissions?scope=current`;
+        try {
+            const response = await axios.get(url);
+            return response.data;
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+    async getFolder(id) {
+        const url = `${this.root}api/folders/${id}`;
+        try {
+            const response = await axios.get(url);
+            return response.data;
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+    async getSelectOptions(id, is_library_access, page, query) {
+        const page_limit = 10;
+        const url = `${this.root}api/folders/${id}/permissions?scope=available&is_library_access=${is_library_access}&page_limit=${page_limit}&page=${page}`;
+        try {
+            const response = await axios.get(url);
+            return response.data;
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+}

client/src/entry/analysis/AnalysisRouter.js

@@ -30,6 +30,7 @@ import TrsImport from "components/Workflow/TrsImport.vue";
 import TrsSearch from "components/Workflow/TrsSearch.vue";
 import InteractiveTools from "components/InteractiveTools/InteractiveTools.vue";
 import LibraryFolder from "components/LibraryFolder/LibraryFolder.vue";
+import LibraryFolderPermissions from "components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue";
 import WorkflowList from "components/Workflow/WorkflowList.vue";
 import HistoryImport from "components/HistoryImport.vue";
 import { HistoryExport } from "components/HistoryExport/index";
@@ -99,6 +100,7 @@ export const getAnalysisRouter = (Galaxy) =>
             "(/)datasets/error": "show_dataset_error",
             "(/)interactivetool_entry_points(/)list": "show_interactivetool_list",
             "(/)library/folders(/)(:folder_id)": "show_library_folder",
+            "(/)library/folders-permissions(/)(:folder_id)": "manage_library_folder",
         },
 
         require_login: ["show_user", "show_user_form", "show_workflows", "show_cloud_auth", "show_external_ids"],
@@ -155,6 +157,12 @@ export const getAnalysisRouter = (Galaxy) =>
             this._display_vue_helper(LibraryFolder, { folder_id: folder_id });
         },
 
+        manage_library_folder: function (folder_id) {
+            this.page.toolPanel?.component.hide(0);
+            this.page.panels.right.hide();
+            this._display_vue_helper(LibraryFolderPermissions, { folder_id: folder_id });
+        },
+
         show_cloud_auth: function () {
             this._display_vue_helper(CloudAuth);
         },

client/yarn.lock

@@ -15291,6 +15291,11 @@ vue-multiselect@^2.1.0:
   resolved "https://registry.yarnpkg.com/vue-multiselect/-/vue-multiselect-2.1.6.tgz#5be5d811a224804a15c43a4edbb7485028a89c7f"
   integrity sha512-s7jmZPlm9FeueJg1RwJtnE9KNPtME/7C8uRWSfp9/yEN4M8XcS/d+bddoyVwVnvFyRh9msFo0HWeW0vTL8Qv+w==
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-router@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.1.tgz#7d0545dd8ebf4f45494ca185b7eccb38d67689c1"

lib/galaxy/webapps/galaxy/buildapp.py

@@ -192,6 +192,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route('/custom_builds')
     webapp.add_client_route('/interactivetool_entry_points/list')
     webapp.add_client_route('/library/folders/{folder_id}')
+    webapp.add_client_route('/library/folders-permissions/{folder_id}')
 
     # ==== Done
     # Indicate that all configuration settings have been provided