From 2f508d3ea68823051721e9384c5a008d840ab4b7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 13:28:21 +0100
Subject: [PATCH 01/15] Replace icons in history sharing component with
 fontawesome

---
 client/src/components/Sharing.vue | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index e44dfce69a5..09df290f98d 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -21,13 +21,12 @@
                 <div>
                     <p>Anyone can view and import this {{ model_class_lc }} by visiting the following URL:</p>
                     <blockquote>
-                        <a id="item-url" :href="item_url" target="_top">{{ item_url }}</a>
+                        <font-awesome-icon icon="edit" id="edit-identifier" title="Edit URL" />
+                        <font-awesome-icon :icon="['far', 'clipboard']" class="ml-1" @click="onCopy"/>
+                        <a id="item-url" :href="item_url" target="_top" class="ml-2">{{ item_url }}</a>
                         <span id="item-url-text" style="display: none;">
                             {{ item_url_parts[0] }}<span id="item-identifier">{{ item_url_parts[1] }}</span>
                         </span>
-                        <a href="javascript:void(0)" id="edit-identifier"
-                            ><img :src="pencil_url" alt="Edit Share Url"
-                        /></a>
                     </blockquote>
                     <div v-if="item.published">
                         <p>
@@ -136,17 +135,26 @@
 </template>
 
 <script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faClipboard, faEdit } from "@fortawesome/free-regular-svg-icons";
 import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import axios from "axios";
 import async_save_text from "utils/async-save-text";
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
 
 Vue.use(BootstrapVue);
 
+library.add(faClipboard);
+library.add(faEdit);
+
 export default {
+    components: {
+        FontAwesomeIcon,
+    },
     props: {
         id: {
             type: String,
@@ -224,7 +232,10 @@ export default {
         this.createSlugHandler();
     },
     methods: {
-        getModel: function () {
+        onCopy() {
+            alert("Copy");
+        },
+        getModel() {
             this.ready = false;
             axios
                 .get(`${getAppRoot()}api/${this.plural_name_lc}/${this.id}/sharing`)
@@ -234,7 +245,7 @@ export default {
                 })
                 .catch((error) => (this.err_msg = error.response.data.err_msg));
         },
-        setUsername: function () {
+        setUsername() {
             const Galaxy = getGalaxyInstance();
             axios
                 .put(`${getAppRoot()}api/users/${Galaxy.user.id}/information/inputs`, {
@@ -247,7 +258,7 @@ export default {
                 })
                 .catch((error) => (this.err_msg = error.response.data.err_msg));
         },
-        setSharing: function (action, user_id) {
+        setSharing(action, user_id) {
             const data = {
                 action: action,
                 user_id: user_id,
@@ -265,7 +276,7 @@ export default {
                 })
                 .catch((error) => (this.err_msg = error.response.data.err_msg));
         },
-        createSlugHandler: function () {
+        createSlugHandler() {
             const on_start = function (text_elt) {
                 // Replace URL with URL text.
                 $("#item-url").hide();

From 8a19b83bf5979838ed447e2814dae97e4a2b6e5c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 13:38:20 +0100
Subject: [PATCH 02/15] Remove legacy pencil image link, use es6 style for
 methods, introduce reactive flag to hide edit field

---
 client/src/components/Sharing.vue | 46 +++++++++++++++----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 09df290f98d..ba13d031540 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -21,10 +21,10 @@
                 <div>
                     <p>Anyone can view and import this {{ model_class_lc }} by visiting the following URL:</p>
                     <blockquote>
-                        <font-awesome-icon icon="edit" id="edit-identifier" title="Edit URL" />
-                        <font-awesome-icon :icon="['far', 'clipboard']" class="ml-1" @click="onCopy"/>
-                        <a id="item-url" :href="item_url" target="_top" class="ml-2">{{ item_url }}</a>
-                        <span id="item-url-text" style="display: none;">
+                        <font-awesome-icon icon="edit" id="edit-identifier" role="button" title="Edit URL" />
+                        <font-awesome-icon :icon="['far', 'clipboard']" class="ml-1" role="button" @click="onCopy" />
+                        <a v-if="showUrl" id="item-url" :href="item_url" target="_top" class="ml-2">{{ item_url }}</a>
+                        <span v-else id="item-url-text">
                             {{ item_url_parts[0] }}<span id="item-identifier">{{ item_url_parts[1] }}</span>
                         </span>
                     </blockquote>
@@ -169,6 +169,25 @@ export default {
             required: true,
         },
     },
+    data() {
+        const Galaxy = getGalaxyInstance();
+        return {
+            ready: false,
+            has_username: Galaxy.user.get("username"),
+            new_username: "",
+            err_msg: null,
+            item: {
+                title: "title",
+                username_and_slug: "username_and_slug",
+                importable: false,
+                published: false,
+                users_shared_with: [],
+            },
+            share_fields: ["email", { key: "id", label: "" }],
+            make_members_public: false,
+            showUrl: true,
+        };
+    },
     computed: {
         model_class_lc() {
             return this.model_class.toLowerCase();
@@ -206,25 +225,6 @@ export default {
             return this.err_msg !== null;
         },
     },
-    data() {
-        const Galaxy = getGalaxyInstance();
-        return {
-            ready: false,
-            has_username: Galaxy.user.get("username"),
-            new_username: "",
-            err_msg: null,
-            pencil_url: `${getAppRoot()}static/images/fugue/pencil.png`,
-            item: {
-                title: "title",
-                username_and_slug: "username_and_slug",
-                importable: false,
-                published: false,
-                users_shared_with: [],
-            },
-            share_fields: ["email", { key: "id", label: "" }],
-            make_members_public: false,
-        };
-    },
     created: function () {
         this.getModel();
     },

From 1534ae213c60af63a0fc725976c619b968ce7446 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 14:41:54 +0100
Subject: [PATCH 03/15] Add Vue component to edit slugs

---
 client/src/components/Common/SlugInput.vue | 39 ++++++++++++++++
 client/src/components/Sharing.vue          | 52 +++++++++++++---------
 2 files changed, 69 insertions(+), 22 deletions(-)
 create mode 100644 client/src/components/Common/SlugInput.vue

diff --git a/client/src/components/Common/SlugInput.vue b/client/src/components/Common/SlugInput.vue
new file mode 100644
index 00000000000..b93f69229f8
--- /dev/null
+++ b/client/src/components/Common/SlugInput.vue
@@ -0,0 +1,39 @@
+<template>
+    <b-input
+        v-model="slugInput"
+        @change="onChange"
+        @keydown.esc="onCancel"
+        class="d-inline w-auto h-auto px-1 py-0"
+        ref="input"
+    />
+</template>
+<script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+
+Vue.use(BootstrapVue);
+
+export default {
+    props: {
+        slug: {
+            type: String,
+        },
+    },
+    data() {
+        return {
+            slugInput: this.slug,
+        };
+    },
+    mounted() {
+        this.$refs.input.select();
+    },
+    methods: {
+        onChange() {
+            this.$emit("onChange", this.slugInput);
+        },
+        onCancel() {
+            this.$emit("onChange", this.slug);
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index ba13d031540..a5fff65ee1e 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="ready">
         <h2>Share or Publish {{ model_class }} `{{ item.title }}`</h2>
-        <b-alert :show="show_danger" variant="danger" dismissible> {{ err_msg }} </b-alert>
+        <b-alert :show="showDanger" variant="danger" dismissible> {{ err_msg }} </b-alert>
         <br />
         <div v-if="!has_username">
             <div>
@@ -21,11 +21,11 @@
                 <div>
                     <p>Anyone can view and import this {{ model_class_lc }} by visiting the following URL:</p>
                     <blockquote>
-                        <font-awesome-icon icon="edit" id="edit-identifier" role="button" title="Edit URL" />
-                        <font-awesome-icon :icon="['far', 'clipboard']" class="ml-1" role="button" @click="onCopy" />
-                        <a v-if="showUrl" id="item-url" :href="item_url" target="_top" class="ml-2">{{ item_url }}</a>
+                        <font-awesome-icon role="button" icon="edit" title="Edit URL" @click="onEdit" />
+                        <font-awesome-icon role="button" :icon="['far', 'clipboard']" class="ml-1" @click="onCopy" />
+                        <a v-if="showUrl" id="item-url" :href="itemUrl" target="_top" class="ml-2">{{ itemUrl }}</a>
                         <span v-else id="item-url-text">
-                            {{ item_url_parts[0] }}<span id="item-identifier">{{ item_url_parts[1] }}</span>
+                            {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange"/>
                         </span>
                     </blockquote>
                     <div v-if="item.published">
@@ -140,6 +140,7 @@ import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faClipboard, faEdit } from "@fortawesome/free-regular-svg-icons";
+import SlugInput from "components/Common/SlugInput";
 import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
@@ -154,6 +155,7 @@ library.add(faEdit);
 export default {
     components: {
         FontAwesomeIcon,
+        SlugInput,
     },
     props: {
         id: {
@@ -198,14 +200,19 @@ export default {
         item_status() {
             return this.item.published ? "accessible via link and published" : "accessible via link";
         },
-        item_url() {
+        itemUrl() {
             const port = window.location.port ? `:${window.location.port}` : "";
             return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}${
                 this.item.username_and_slug
             }`;
         },
-        item_url_parts() {
-            const str = this.item_url;
+        itemSlugParts() {
+            const str = this.item.username_and_slug;
+            const index = str.lastIndexOf("/");
+            return [str.substring(0, index + 1), str.substring(index + 1)];
+        },
+        itemUrlParts() {
+            const str = this.itemUrl;
             const index = str.lastIndexOf("/");
             return [str.substring(0, index + 1), str.substring(index + 1)];
         },
@@ -215,26 +222,30 @@ export default {
         share_url() {
             return `${getAppRoot()}${this.model_class_lc}/share/?id=${this.id}`;
         },
-        slug_url() {
+        slugUrl() {
             return `${getAppRoot()}${this.model_class_lc}/set_slug_async/?id=${this.id}`;
         },
         has_possible_members() {
             return ["history"].indexOf(this.model_class_lc) > -1;
         },
-        show_danger() {
+        showDanger() {
             return this.err_msg !== null;
         },
     },
     created: function () {
         this.getModel();
     },
-    updated: function () {
-        this.createSlugHandler();
-    },
     methods: {
         onCopy() {
             alert("Copy");
         },
+        onEdit() {
+            this.showUrl = false;
+        },
+        onChange(newSlug) {
+            this.showUrl = true;
+            this.item.username_and_slug = `${this.itemSlugParts[0]}${newSlug}`;
+        },
         getModel() {
             this.ready = false;
             axios
@@ -278,9 +289,7 @@ export default {
         },
         createSlugHandler() {
             const on_start = function (text_elt) {
-                // Replace URL with URL text.
-                $("#item-url").hide();
-                $("#item-url-text").show();
+                this.showUrl = false;
 
                 // Allow only lowercase alphanumeric and '-' characters in slug.
                 text_elt.keyup(function () {
@@ -295,19 +304,18 @@ export default {
             };
             const on_finish = function (text_elt) {
                 // Replace URL text with URL.
-                $("#item-url-text").hide();
-                $("#item-url").show();
+                this.showUrl = true;
 
                 // Set URL to new value.
                 const new_url = $("#item-url-text").text();
-                const item_url_obj = $("#item-url");
-                item_url_obj.attr("href", new_url);
-                item_url_obj.text(new_url);
+                const itemUrlObj = $("#item-url");
+                itemUrlObj.attr("href", new_url);
+                itemUrlObj.text(new_url);
             };
             async_save_text(
                 "edit-identifier",
                 "item-identifier",
-                this.slug_url,
+                this.slugUrl,
                 "new_slug",
                 null,
                 false,

From 5ee938743fc6cc98dc80120d5f72512072deab8d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 14:45:22 +0100
Subject: [PATCH 04/15] Fix naming convention, add enter key handler to slug
 edit field

---
 client/src/components/Common/SlugInput.vue |  1 +
 client/src/components/Sharing.vue          | 56 +++++++++++-----------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Common/SlugInput.vue b/client/src/components/Common/SlugInput.vue
index b93f69229f8..8fb413ed2fd 100644
--- a/client/src/components/Common/SlugInput.vue
+++ b/client/src/components/Common/SlugInput.vue
@@ -3,6 +3,7 @@
         v-model="slugInput"
         @change="onChange"
         @keydown.esc="onCancel"
+        @keydown.enter="onCancel"
         class="d-inline w-auto h-auto px-1 py-0"
         ref="input"
     />
diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index a5fff65ee1e..5cfa0adc65d 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -5,7 +5,7 @@
         <br />
         <div v-if="!has_username">
             <div>
-                To make a {{ model_class_lc }} accessible via link or publish it, you must create a public username:
+                To make a {{ modelClassLower }} accessible via link or publish it, you must create a public username:
             </div>
             <form class="form-group" @submit.prevent="setUsername()">
                 <label /> <input class="form-control" type="text" v-model="new_username" />
@@ -16,10 +16,10 @@
             <br />
             <h3>Make {{ model_class }} Accessible via Link and Publish It</h3>
             <div v-if="item.importable">
-                This {{ model_class_lc }} is currently <strong>{{ item_status }}</strong
+                This {{ modelClassLower }} is currently <strong>{{ itemStatus }}</strong
                 >.
                 <div>
-                    <p>Anyone can view and import this {{ model_class_lc }} by visiting the following URL:</p>
+                    <p>Anyone can view and import this {{ modelClassLower }} by visiting the following URL:</p>
                     <blockquote>
                         <font-awesome-icon role="button" icon="edit" title="Edit URL" @click="onEdit" />
                         <font-awesome-icon role="button" :icon="['far', 'clipboard']" class="ml-1" @click="onCopy" />
@@ -30,7 +30,7 @@
                     </blockquote>
                     <div v-if="item.published">
                         <p>
-                            This {{ model_class_lc }} is publicly listed and searchable in Galaxy's
+                            This {{ modelClassLower }} is publicly listed and searchable in Galaxy's
                             <a :href="published_url" target="_top">Published {{ plural_name }}</a> section.
                         </p>
                         <p>You can:</p>
@@ -41,13 +41,13 @@
                     <b-button @click="setSharing('disable_link_access')"
                         >Disable Access to {{ model_class }} Link</b-button
                     >
-                    <div class="toolParamHelp">Disables {{ model_class_lc }}'s link so that it is not accessible.</div>
+                    <div class="toolParamHelp">Disables {{ modelClassLower }}'s link so that it is not accessible.</div>
                     <br />
                     <b-button id="make_accessible_and_publish" @click="setSharing('publish')"
                         >Publish {{ model_class }}</b-button
                     >
                     <div class="toolParamHelp">
-                        Publishes the {{ model_class_lc }} to Galaxy's
+                        Publishes the {{ modelClassLower }} to Galaxy's
                         <a :href="published_url" target="_top">Published {{ plural_name }}</a> section, where it is
                         publicly listed and searchable.
                     </div>
@@ -61,15 +61,15 @@
                         >Disable Access to {{ model_class }} via Link and Unpublish</b-button
                     >
                     <div class="toolParamHelp">
-                        Disables this {{ model_class_lc }}'s link so that it is not accessible and removes
-                        {{ model_class_lc }} from Galaxy's
+                        Disables this {{ modelClassLower }}'s link so that it is not accessible and removes
+                        {{ modelClassLower }} from Galaxy's
                         <a :href="published_url" target="_top">Published {{ plural_name }}</a> section so that it is not
                         publicly listed or searchable.
                     </div>
                     <br />
                     <b-button @click="setSharing('unpublish')">Unpublish {{ model_class }}</b-button>
                     <div class="toolParamHelp">
-                        Removes this {{ model_class_lc }} from Galaxy's
+                        Removes this {{ modelClassLower }} from Galaxy's
                         <a :href="published_url" target="_top">Published {{ plural_name }}</a> section so that it is not
                         publicly listed or searchable.
                     </div>
@@ -77,31 +77,31 @@
             </div>
             <div v-else>
                 <p>
-                    This {{ model_class_lc }} is currently restricted so that only you and the users listed below can
+                    This {{ modelClassLower }} is currently restricted so that only you and the users listed below can
                     access it. You can:
                 </p>
                 <b-button @click="setSharing('make_accessible_via_link')"
                     >Make {{ model_class }} Accessible via Link</b-button
                 >
-                <p v-if="has_possible_members" class="mt-2">
+                <p v-if="hasPossibleMembers" class="mt-2">
                     Also make all objects within the {{ model_class }} accessible.
                     <input type="checkbox" v-model="make_members_public" id="chk_make_members_public" />
                 </p>
                 <div class="toolParamHelp">
                     Generates a web link that you can share with other people so that they can view and import the
-                    {{ model_class_lc }}.
+                    {{ modelClassLower }}.
                 </div>
                 <br />
                 <b-button id="make_accessible_and_publish" @click="setSharing('make_accessible_and_publish')"
                     >Make {{ model_class }} Accessible and Publish</b-button
                 >
-                <p v-if="has_possible_members" class="mt-2">
+                <p v-if="hasPossibleMembers" class="mt-2">
                     Also make all objects within the {{ model_class }} accessible.
                     <input type="checkbox" v-model="make_members_public" id="chk_make_members_public" />
                 </p>
                 <div class="toolParamHelp">
-                    Makes the {{ model_class_lc }} accessible via link (see above) and publishes the
-                    {{ model_class_lc }} to Galaxy's
+                    Makes the {{ modelClassLower }} accessible via link (see above) and publishes the
+                    {{ modelClassLower }} to Galaxy's
                     <a :href="published_url" target="_top">Published {{ plural_name }}</a> section, where it is publicly
                     listed and searchable.
                 </div>
@@ -112,7 +112,7 @@
                 <div v-if="item.users_shared_with && item.users_shared_with.length > 0">
                     <b-table small caption-top :fields="share_fields" :items="item.users_shared_with">
                         <template v-slot:table-caption>
-                            The following users will see this {{ model_class_lc }} in their {{ model_class_lc }} list
+                            The following users will see this {{ modelClassLower }} in their {{ modelClassLower }} list
                             and will be able to view, import and run it.
                         </template>
                         <template v-slot:cell(id)="cell">
@@ -126,7 +126,7 @@
                     </b-table>
                 </div>
                 <div v-else>
-                    <p>You have not shared this {{ model_class_lc }} with any users.</p>
+                    <p>You have not shared this {{ modelClassLower }} with any users.</p>
                 </div>
                 <b-button :href="share_url" id="share_with_a_user"> <span>Share with a user</span> </b-button>
             </div>
@@ -191,13 +191,13 @@ export default {
         };
     },
     computed: {
-        model_class_lc() {
+        modelClassLower() {
             return this.model_class.toLowerCase();
         },
-        plural_name_lc() {
+        pluralNameLower() {
             return this.plural_name.toLowerCase();
         },
-        item_status() {
+        itemStatus() {
             return this.item.published ? "accessible via link and published" : "accessible via link";
         },
         itemUrl() {
@@ -217,16 +217,16 @@ export default {
             return [str.substring(0, index + 1), str.substring(index + 1)];
         },
         published_url() {
-            return `${getAppRoot()}${this.plural_name_lc}/list_published`;
+            return `${getAppRoot()}${this.pluralNameLower}/list_published`;
         },
         share_url() {
-            return `${getAppRoot()}${this.model_class_lc}/share/?id=${this.id}`;
+            return `${getAppRoot()}${this.modelClassLower}/share/?id=${this.id}`;
         },
         slugUrl() {
-            return `${getAppRoot()}${this.model_class_lc}/set_slug_async/?id=${this.id}`;
+            return `${getAppRoot()}${this.modelClassLower}/set_slug_async/?id=${this.id}`;
         },
-        has_possible_members() {
-            return ["history"].indexOf(this.model_class_lc) > -1;
+        hasPossibleMembers() {
+            return ["history"].indexOf(this.modelClassLower) > -1;
         },
         showDanger() {
             return this.err_msg !== null;
@@ -249,7 +249,7 @@ export default {
         getModel() {
             this.ready = false;
             axios
-                .get(`${getAppRoot()}api/${this.plural_name_lc}/${this.id}/sharing`)
+                .get(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/sharing`)
                 .then((response) => {
                     this.item = response.data;
                     this.ready = true;
@@ -274,11 +274,11 @@ export default {
                 action: action,
                 user_id: user_id,
             };
-            if (this.has_possible_members) {
+            if (this.hasPossibleMembers) {
                 data.make_members_public = this.make_members_public;
             }
             axios
-                .post(`${getAppRoot()}api/${this.plural_name_lc}/${this.id}/sharing`, data)
+                .post(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/sharing`, data)
                 .then((response) => {
                     Object.assign(this.item, response.data);
                     if (response.data.skipped) {

From 8d1bd4a63c01e968807922660fe291561c277497 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 15:20:38 +0100
Subject: [PATCH 05/15] Remove jquery from sharing component

---
 client/src/components/Common/SlugInput.vue |  2 +-
 client/src/components/Sharing.vue          | 47 +++-------------------
 2 files changed, 6 insertions(+), 43 deletions(-)

diff --git a/client/src/components/Common/SlugInput.vue b/client/src/components/Common/SlugInput.vue
index 8fb413ed2fd..38357c8257d 100644
--- a/client/src/components/Common/SlugInput.vue
+++ b/client/src/components/Common/SlugInput.vue
@@ -2,8 +2,8 @@
     <b-input
         v-model="slugInput"
         @change="onChange"
+        @keydown.enter="onChange"
         @keydown.esc="onCancel"
-        @keydown.enter="onCancel"
         class="d-inline w-auto h-auto px-1 py-0"
         ref="input"
     />
diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 5cfa0adc65d..90024d812e0 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -25,7 +25,7 @@
                         <font-awesome-icon role="button" :icon="['far', 'clipboard']" class="ml-1" @click="onCopy" />
                         <a v-if="showUrl" id="item-url" :href="itemUrl" target="_top" class="ml-2">{{ itemUrl }}</a>
                         <span v-else id="item-url-text">
-                            {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange"/>
+                            {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange" />
                         </span>
                     </blockquote>
                     <div v-if="item.published">
@@ -128,7 +128,7 @@
                 <div v-else>
                     <p>You have not shared this {{ modelClassLower }} with any users.</p>
                 </div>
-                <b-button :href="share_url" id="share_with_a_user"> <span>Share with a user</span> </b-button>
+                <b-button :href="shareUrl" id="share_with_a_user"> <span>Share with a user</span> </b-button>
             </div>
         </div>
     </div>
@@ -141,11 +141,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faClipboard, faEdit } from "@fortawesome/free-regular-svg-icons";
 import SlugInput from "components/Common/SlugInput";
-import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import axios from "axios";
-import async_save_text from "utils/async-save-text";
 
 Vue.use(BootstrapVue);
 
@@ -219,7 +217,7 @@ export default {
         published_url() {
             return `${getAppRoot()}${this.pluralNameLower}/list_published`;
         },
-        share_url() {
+        shareUrl() {
             return `${getAppRoot()}${this.modelClassLower}/share/?id=${this.id}`;
         },
         slugUrl() {
@@ -245,6 +243,8 @@ export default {
         onChange(newSlug) {
             this.showUrl = true;
             this.item.username_and_slug = `${this.itemSlugParts[0]}${newSlug}`;
+            const requestUrl = `${this.slugUrl}&new_slug=${newSlug}`;
+            axios.get(requestUrl).catch((error) => (this.err_msg = error.response.data.err_msg));
         },
         getModel() {
             this.ready = false;
@@ -287,43 +287,6 @@ export default {
                 })
                 .catch((error) => (this.err_msg = error.response.data.err_msg));
         },
-        createSlugHandler() {
-            const on_start = function (text_elt) {
-                this.showUrl = false;
-
-                // Allow only lowercase alphanumeric and '-' characters in slug.
-                text_elt.keyup(function () {
-                    text_elt.val(
-                        $(this)
-                            .val()
-                            .replace(/\s+/g, "-")
-                            .replace(/[^a-zA-Z0-9-]/g, "")
-                            .toLowerCase()
-                    );
-                });
-            };
-            const on_finish = function (text_elt) {
-                // Replace URL text with URL.
-                this.showUrl = true;
-
-                // Set URL to new value.
-                const new_url = $("#item-url-text").text();
-                const itemUrlObj = $("#item-url");
-                itemUrlObj.attr("href", new_url);
-                itemUrlObj.text(new_url);
-            };
-            async_save_text(
-                "edit-identifier",
-                "item-identifier",
-                this.slugUrl,
-                "new_slug",
-                null,
-                false,
-                0,
-                on_start,
-                on_finish
-            );
-        },
     },
 };
 </script>

From 6e714a6d1bbd619b29c45bbeadef8514d64a17cb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 15:45:55 +0100
Subject: [PATCH 06/15] Add clipboard copy function to sharing component

---
 client/src/components/Sharing.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 90024d812e0..43b4b660218 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -140,9 +140,9 @@ import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faClipboard, faEdit } from "@fortawesome/free-regular-svg-icons";
-import SlugInput from "components/Common/SlugInput";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
+import SlugInput from "components/Common/SlugInput";
 import axios from "axios";
 
 Vue.use(BootstrapVue);
@@ -198,11 +198,12 @@ export default {
         itemStatus() {
             return this.item.published ? "accessible via link and published" : "accessible via link";
         },
-        itemUrl() {
+        itemRoot() {
             const port = window.location.port ? `:${window.location.port}` : "";
-            return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}${
-                this.item.username_and_slug
-            }`;
+            return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}`;
+        },
+        itemUrl() {
+            return `${this.itemRoot}${this.item.username_and_slug}`;
         },
         itemSlugParts() {
             const str = this.item.username_and_slug;
@@ -235,7 +236,12 @@ export default {
     },
     methods: {
         onCopy() {
-            alert("Copy");
+            const clipboard = document.createElement('input');
+            document.body.appendChild(clipboard);
+            clipboard.value = this.itemUrl;
+            clipboard.select();
+            document.execCommand('copy');
+            document.body.removeChild(clipboard);
         },
         onEdit() {
             this.showUrl = false;

From 8ea22aa1ee2af73d195cbcee1f0b8713a350cedc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 16:11:04 +0100
Subject: [PATCH 07/15] Add changing tooltip to copy operation in sharing
 component

---
 client/src/components/Sharing.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 43b4b660218..32004539910 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -21,9 +21,18 @@
                 <div>
                     <p>Anyone can view and import this {{ modelClassLower }} by visiting the following URL:</p>
                     <blockquote>
-                        <font-awesome-icon role="button" icon="edit" title="Edit URL" @click="onEdit" />
-                        <font-awesome-icon role="button" :icon="['far', 'clipboard']" class="ml-1" @click="onCopy" />
-                        <a v-if="showUrl" id="item-url" :href="itemUrl" target="_top" class="ml-2">{{ itemUrl }}</a>
+                        <b-button title="Edit URL" @click="onEdit" v-b-tooltip.hover variant="link" size="sm">
+                            <font-awesome-icon icon="edit" />
+                        </b-button>
+                        <b-button id="tooltip-clipboard" @click="onCopy" variant="link" size="sm">
+                            <font-awesome-icon :icon="['far', 'clipboard']" />
+                        </b-button>
+                        <b-tooltip target="tooltip-clipboard" triggers="hover">
+                            {{ tooltipClipboard }}
+                        </b-tooltip>
+                        <a v-if="showUrl" id="item-url" :href="itemUrl" target="_top" class="ml-2">
+                            {{ itemUrl }}
+                        </a>
                         <span v-else id="item-url-text">
                             {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange" />
                         </span>
@@ -186,6 +195,7 @@ export default {
             share_fields: ["email", { key: "id", label: "" }],
             make_members_public: false,
             showUrl: true,
+            tooltipClipboard: "Copy URL",
         };
     },
     computed: {
@@ -236,18 +246,20 @@ export default {
     },
     methods: {
         onCopy() {
-            const clipboard = document.createElement('input');
+            const clipboard = document.createElement("input");
             document.body.appendChild(clipboard);
             clipboard.value = this.itemUrl;
             clipboard.select();
-            document.execCommand('copy');
+            document.execCommand("copy");
             document.body.removeChild(clipboard);
+            this.tooltipClipboard = "Copied!";
         },
         onEdit() {
             this.showUrl = false;
         },
         onChange(newSlug) {
             this.showUrl = true;
+            this.tooltipClipboard = "Copy URL";
             this.item.username_and_slug = `${this.itemSlugParts[0]}${newSlug}`;
             const requestUrl = `${this.slugUrl}&new_slug=${newSlug}`;
             axios.get(requestUrl).catch((error) => (this.err_msg = error.response.data.err_msg));

From cb0e11e83712998bb9b0db77aefa174f0ab23f0b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 16:30:26 +0100
Subject: [PATCH 08/15] Properly format slug, use camelcase where suitable

---
 client/src/components/Common/SlugInput.vue |  6 ++-
 client/src/components/Sharing.vue          | 46 +++++++++++-----------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Common/SlugInput.vue b/client/src/components/Common/SlugInput.vue
index 38357c8257d..6b102344fec 100644
--- a/client/src/components/Common/SlugInput.vue
+++ b/client/src/components/Common/SlugInput.vue
@@ -30,7 +30,11 @@ export default {
     },
     methods: {
         onChange() {
-            this.$emit("onChange", this.slugInput);
+            const slugFormatted = this.slugInput
+                .replace(/\s+/g, "-")
+                .replace(/[^a-zA-Z0-9-]/g, "")
+                .toLowerCase();
+            this.$emit("onChange", slugFormatted);
         },
         onCancel() {
             this.$emit("onChange", this.slug);
diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 32004539910..05a78b86291 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -3,12 +3,12 @@
         <h2>Share or Publish {{ model_class }} `{{ item.title }}`</h2>
         <b-alert :show="showDanger" variant="danger" dismissible> {{ err_msg }} </b-alert>
         <br />
-        <div v-if="!has_username">
+        <div v-if="!hasUsername">
             <div>
                 To make a {{ modelClassLower }} accessible via link or publish it, you must create a public username:
             </div>
             <form class="form-group" @submit.prevent="setUsername()">
-                <label /> <input class="form-control" type="text" v-model="new_username" />
+                <label /> <input class="form-control" type="text" v-model="newUsername" />
             </form>
             <b-button type="submit" variant="primary" @click="setUsername()">Set Username</b-button>
         </div>
@@ -24,7 +24,7 @@
                         <b-button title="Edit URL" @click="onEdit" v-b-tooltip.hover variant="link" size="sm">
                             <font-awesome-icon icon="edit" />
                         </b-button>
-                        <b-button id="tooltip-clipboard" @click="onCopy" variant="link" size="sm">
+                        <b-button id="tooltip-clipboard" @click="onCopy" @mouseout="onCopyOut" variant="link" size="sm">
                             <font-awesome-icon :icon="['far', 'clipboard']" />
                         </b-button>
                         <b-tooltip target="tooltip-clipboard" triggers="hover">
@@ -94,7 +94,7 @@
                 >
                 <p v-if="hasPossibleMembers" class="mt-2">
                     Also make all objects within the {{ model_class }} accessible.
-                    <input type="checkbox" v-model="make_members_public" id="chk_make_members_public" />
+                    <input type="checkbox" v-model="makeMembersPublic" />
                 </p>
                 <div class="toolParamHelp">
                     Generates a web link that you can share with other people so that they can view and import the
@@ -106,7 +106,7 @@
                 >
                 <p v-if="hasPossibleMembers" class="mt-2">
                     Also make all objects within the {{ model_class }} accessible.
-                    <input type="checkbox" v-model="make_members_public" id="chk_make_members_public" />
+                    <input type="checkbox" v-model="makeMembersPublic" />
                 </p>
                 <div class="toolParamHelp">
                     Makes the {{ modelClassLower }} accessible via link (see above) and publishes the
@@ -119,7 +119,7 @@
             <h3>Share {{ model_class }} with Individual Users</h3>
             <div>
                 <div v-if="item.users_shared_with && item.users_shared_with.length > 0">
-                    <b-table small caption-top :fields="share_fields" :items="item.users_shared_with">
+                    <b-table small caption-top :fields="shareFields" :items="item.users_shared_with">
                         <template v-slot:table-caption>
                             The following users will see this {{ modelClassLower }} in their {{ modelClassLower }} list
                             and will be able to view, import and run it.
@@ -182,9 +182,9 @@ export default {
         const Galaxy = getGalaxyInstance();
         return {
             ready: false,
-            has_username: Galaxy.user.get("username"),
-            new_username: "",
-            err_msg: null,
+            hasUsername: Galaxy.user.get("username"),
+            newUsername: "",
+            errMsg: null,
             item: {
                 title: "title",
                 username_and_slug: "username_and_slug",
@@ -192,8 +192,8 @@ export default {
                 published: false,
                 users_shared_with: [],
             },
-            share_fields: ["email", { key: "id", label: "" }],
-            make_members_public: false,
+            shareFields: ["email", { key: "id", label: "" }],
+            makeMembersPublic: false,
             showUrl: true,
             tooltipClipboard: "Copy URL",
         };
@@ -238,7 +238,7 @@ export default {
             return ["history"].indexOf(this.modelClassLower) > -1;
         },
         showDanger() {
-            return this.err_msg !== null;
+            return this.errMsg !== null;
         },
     },
     created: function () {
@@ -254,15 +254,17 @@ export default {
             document.body.removeChild(clipboard);
             this.tooltipClipboard = "Copied!";
         },
+        onCopyOut() {
+            this.tooltipClipboard = "Copy URL";
+        },
         onEdit() {
             this.showUrl = false;
         },
         onChange(newSlug) {
             this.showUrl = true;
-            this.tooltipClipboard = "Copy URL";
             this.item.username_and_slug = `${this.itemSlugParts[0]}${newSlug}`;
             const requestUrl = `${this.slugUrl}&new_slug=${newSlug}`;
-            axios.get(requestUrl).catch((error) => (this.err_msg = error.response.data.err_msg));
+            axios.get(requestUrl).catch((error) => (this.errMsg = error.response.data.err_msg));
         },
         getModel() {
             this.ready = false;
@@ -272,20 +274,20 @@ export default {
                     this.item = response.data;
                     this.ready = true;
                 })
-                .catch((error) => (this.err_msg = error.response.data.err_msg));
+                .catch((error) => (this.errMsg = error.response.data.err_msg));
         },
         setUsername() {
             const Galaxy = getGalaxyInstance();
             axios
                 .put(`${getAppRoot()}api/users/${Galaxy.user.id}/information/inputs`, {
-                    username: this.new_username || "",
+                    username: this.newUsername || "",
                 })
                 .then((response) => {
-                    this.err_msg = null;
-                    this.has_username = true;
+                    this.errMsg = null;
+                    this.hasUsername = true;
                     this.getModel();
                 })
-                .catch((error) => (this.err_msg = error.response.data.err_msg));
+                .catch((error) => (this.errMsg = error.response.data.err_msg));
         },
         setSharing(action, user_id) {
             const data = {
@@ -293,17 +295,17 @@ export default {
                 user_id: user_id,
             };
             if (this.hasPossibleMembers) {
-                data.make_members_public = this.make_members_public;
+                data.make_members_public = this.makeMembersPublic;
             }
             axios
                 .post(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/sharing`, data)
                 .then((response) => {
                     Object.assign(this.item, response.data);
                     if (response.data.skipped) {
-                        this.err_msg = "Some of the items within this object were not published due to an error.";
+                        this.errMsg = "Some of the items within this object were not published due to an error.";
                     }
                 })
-                .catch((error) => (this.err_msg = error.response.data.err_msg));
+                .catch((error) => (this.errMsg = error.response.data.err_msg));
         },
     },
 };

From 21776e42ab5d2509ea8175077cbccb62d6d80ee5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 17:57:21 +0100
Subject: [PATCH 09/15] Remove redundant title

---
 client/src/components/Sharing.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 05a78b86291..e9e29282392 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -13,8 +13,6 @@
             <b-button type="submit" variant="primary" @click="setUsername()">Set Username</b-button>
         </div>
         <div v-else>
-            <br />
-            <h3>Make {{ model_class }} Accessible via Link and Publish It</h3>
             <div v-if="item.importable">
                 This {{ modelClassLower }} is currently <strong>{{ itemStatus }}</strong
                 >.

From 7e4ee13fd5eca8dd884477ed8f486028051d446e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 17:59:30 +0100
Subject: [PATCH 10/15] By default make objects within shared objects
 accessible

---
 lib/galaxy/webapps/base/controller.py | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/galaxy/webapps/base/controller.py b/lib/galaxy/webapps/base/controller.py
index 6abcffd9620..ec11105714b 100644
--- a/lib/galaxy/webapps/base/controller.py
+++ b/lib/galaxy/webapps/base/controller.py
@@ -1424,18 +1424,18 @@ class SharableMixin:
             action = payload.get("action")
             if action == "make_accessible_via_link":
                 self._make_item_accessible(trans.sa_session, item)
-                if hasattr(item, "has_possible_members") and item.has_possible_members and payload.get("make_members_public", False):
-                    shared, skipped = self._make_members_public(trans, item)
+                if hasattr(item, "has_possible_members") and item.has_possible_members:
+                    skipped = self._make_members_public(trans, item)
             elif action == "make_accessible_and_publish":
                 self._make_item_accessible(trans.sa_session, item)
-                if hasattr(item, "has_possible_members") and item.has_possible_members and payload.get("make_members_public", False):
-                    shared, skipped = self._make_members_public(trans, item)
+                if hasattr(item, "has_possible_members") and item.has_possible_members:
+                    skipped = self._make_members_public(trans, item)
                 item.published = True
             elif action == "publish":
                 if item.importable:
                     item.published = True
-                    if hasattr(item, "has_possible_members") and item.has_possible_members and payload.get("make_members_public", False):
-                        shared, skipped = self._make_members_public(trans, item)
+                    if hasattr(item, "has_possible_members") and item.has_possible_members:
+                        skipped = self._make_members_public(trans, item)
                 else:
                     raise exceptions.MessageException("%s not importable." % class_name)
             elif action == "disable_link_access":
@@ -1482,7 +1482,7 @@ class SharableMixin:
                 else:
                     log.warning("User without permissions tried to make dataset with id: %s public", dataset.id)
                     skipped = True
-        return item, skipped
+        return skipped
 
     # -- Abstract methods. --
 

From 9f4e2fb71aadc250a06acf22d7dd47684b2b1fd7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 18:00:25 +0100
Subject: [PATCH 11/15] Strip option to share objects without sharing the
 objects within

---
 client/src/components/Sharing.vue | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index e9e29282392..85ec59adb00 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -90,10 +90,6 @@
                 <b-button @click="setSharing('make_accessible_via_link')"
                     >Make {{ model_class }} Accessible via Link</b-button
                 >
-                <p v-if="hasPossibleMembers" class="mt-2">
-                    Also make all objects within the {{ model_class }} accessible.
-                    <input type="checkbox" v-model="makeMembersPublic" />
-                </p>
                 <div class="toolParamHelp">
                     Generates a web link that you can share with other people so that they can view and import the
                     {{ modelClassLower }}.
@@ -102,10 +98,6 @@
                 <b-button id="make_accessible_and_publish" @click="setSharing('make_accessible_and_publish')"
                     >Make {{ model_class }} Accessible and Publish</b-button
                 >
-                <p v-if="hasPossibleMembers" class="mt-2">
-                    Also make all objects within the {{ model_class }} accessible.
-                    <input type="checkbox" v-model="makeMembersPublic" />
-                </p>
                 <div class="toolParamHelp">
                     Makes the {{ modelClassLower }} accessible via link (see above) and publishes the
                     {{ modelClassLower }} to Galaxy's
@@ -232,9 +224,6 @@ export default {
         slugUrl() {
             return `${getAppRoot()}${this.modelClassLower}/set_slug_async/?id=${this.id}`;
         },
-        hasPossibleMembers() {
-            return ["history"].indexOf(this.modelClassLower) > -1;
-        },
         showDanger() {
             return this.errMsg !== null;
         },
@@ -292,9 +281,6 @@ export default {
                 action: action,
                 user_id: user_id,
             };
-            if (this.hasPossibleMembers) {
-                data.make_members_public = this.makeMembersPublic;
-            }
             axios
                 .post(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/sharing`, data)
                 .then((response) => {

From 823247d169c9169e97111b37d812d3565056b019 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 19:14:11 +0100
Subject: [PATCH 12/15] Replace buttons with switch input fields

---
 client/src/components/Sharing.vue | 131 +++++++++++-------------------
 1 file changed, 48 insertions(+), 83 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 85ec59adb00..48abb4c7b8a 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -1,23 +1,31 @@
 <template>
     <div v-if="ready">
-        <h2>Share or Publish {{ model_class }} `{{ item.title }}`</h2>
-        <b-alert :show="showDanger" variant="danger" dismissible> {{ err_msg }} </b-alert>
+        <h3>Share or Publish {{ model_class }} `{{ item.title }}`</h3>
+        <b-alert :show="showDanger" variant="danger" dismissible> {{ errMsg }} </b-alert>
         <br />
         <div v-if="!hasUsername">
-            <div>
-                To make a {{ modelClassLower }} accessible via link or publish it, you must create a public username:
-            </div>
+            <div>To make a {{ model_class }} accessible via link or publish it, you must create a public username:</div>
             <form class="form-group" @submit.prevent="setUsername()">
-                <label /> <input class="form-control" type="text" v-model="newUsername" />
+                <input class="form-control" type="text" v-model="newUsername" />
             </form>
             <b-button type="submit" variant="primary" @click="setUsername()">Set Username</b-button>
         </div>
         <div v-else>
-            <div v-if="item.importable">
-                This {{ modelClassLower }} is currently <strong>{{ itemStatus }}</strong
-                >.
-                <div>
-                    <p>Anyone can view and import this {{ modelClassLower }} by visiting the following URL:</p>
+            <b-form-checkbox switch v-model="item.importable" @change="onImportable">
+                Make {{ model_class }} accessible via link.
+            </b-form-checkbox>
+            <b-form-checkbox switch v-model="item.published" @change="onPublish">
+                Make {{ model_class }} publicly available in
+                <a :href="published_url" target="_top">Published {{ plural_name }}</a> section.
+            </b-form-checkbox>
+            <br />
+            <div>
+                <div v-if="item.importable">
+                    <div>
+                        This {{ model_class }} is currently <strong>{{ itemStatus }}</strong
+                        >.
+                    </div>
+                    <p>Anyone can view and import this {{ model_class }} by visiting the following URL:</p>
                     <blockquote>
                         <b-button title="Edit URL" @click="onEdit" v-b-tooltip.hover variant="link" size="sm">
                             <font-awesome-icon icon="edit" />
@@ -35,84 +43,20 @@
                             {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange" />
                         </span>
                     </blockquote>
-                    <div v-if="item.published">
-                        <p>
-                            This {{ modelClassLower }} is publicly listed and searchable in Galaxy's
-                            <a :href="published_url" target="_top">Published {{ plural_name }}</a> section.
-                        </p>
-                        <p>You can:</p>
-                    </div>
-                </div>
-                <div v-if="!item.published">
-                    <!-- Item is importable but not published. User can disable importable or publish. -->
-                    <b-button @click="setSharing('disable_link_access')"
-                        >Disable Access to {{ model_class }} Link</b-button
-                    >
-                    <div class="toolParamHelp">Disables {{ modelClassLower }}'s link so that it is not accessible.</div>
-                    <br />
-                    <b-button id="make_accessible_and_publish" @click="setSharing('publish')"
-                        >Publish {{ model_class }}</b-button
-                    >
-                    <div class="toolParamHelp">
-                        Publishes the {{ modelClassLower }} to Galaxy's
-                        <a :href="published_url" target="_top">Published {{ plural_name }}</a> section, where it is
-                        publicly listed and searchable.
-                    </div>
-                    <br />
                 </div>
                 <div v-else>
-                    <!-- Item is importable and published. User can unpublish or disable import and unpublish. -->
-                    <b-button
-                        id="disable_link_access_and_unpublish"
-                        @click="setSharing('disable_link_access_and_unpublish')"
-                        >Disable Access to {{ model_class }} via Link and Unpublish</b-button
-                    >
-                    <div class="toolParamHelp">
-                        Disables this {{ modelClassLower }}'s link so that it is not accessible and removes
-                        {{ modelClassLower }} from Galaxy's
-                        <a :href="published_url" target="_top">Published {{ plural_name }}</a> section so that it is not
-                        publicly listed or searchable.
-                    </div>
-                    <br />
-                    <b-button @click="setSharing('unpublish')">Unpublish {{ model_class }}</b-button>
-                    <div class="toolParamHelp">
-                        Removes this {{ modelClassLower }} from Galaxy's
-                        <a :href="published_url" target="_top">Published {{ plural_name }}</a> section so that it is not
-                        publicly listed or searchable.
-                    </div>
+                    Access to this {{ model_class }} is currently restricted so that only you and the users listed below
+                    can access it. Note that sharing a History will also allow access to all of its datasets. 
                 </div>
             </div>
-            <div v-else>
-                <p>
-                    This {{ modelClassLower }} is currently restricted so that only you and the users listed below can
-                    access it. You can:
-                </p>
-                <b-button @click="setSharing('make_accessible_via_link')"
-                    >Make {{ model_class }} Accessible via Link</b-button
-                >
-                <div class="toolParamHelp">
-                    Generates a web link that you can share with other people so that they can view and import the
-                    {{ modelClassLower }}.
-                </div>
-                <br />
-                <b-button id="make_accessible_and_publish" @click="setSharing('make_accessible_and_publish')"
-                    >Make {{ model_class }} Accessible and Publish</b-button
-                >
-                <div class="toolParamHelp">
-                    Makes the {{ modelClassLower }} accessible via link (see above) and publishes the
-                    {{ modelClassLower }} to Galaxy's
-                    <a :href="published_url" target="_top">Published {{ plural_name }}</a> section, where it is publicly
-                    listed and searchable.
-                </div>
-            </div>
-            <br /><br />
-            <h3>Share {{ model_class }} with Individual Users</h3>
+            <br />
+            <h4>Share {{ model_class }} with Individual Users</h4>
             <div>
                 <div v-if="item.users_shared_with && item.users_shared_with.length > 0">
                     <b-table small caption-top :fields="shareFields" :items="item.users_shared_with">
                         <template v-slot:table-caption>
-                            The following users will see this {{ modelClassLower }} in their {{ modelClassLower }} list
-                            and will be able to view, import and run it.
+                            The following users will see this {{ model_class }} in their {{ model_class }} list and will
+                            be able to view, import and run it.
                         </template>
                         <template v-slot:cell(id)="cell">
                             <b-button
@@ -125,7 +69,7 @@
                     </b-table>
                 </div>
                 <div v-else>
-                    <p>You have not shared this {{ modelClassLower }} with any users.</p>
+                    <p>You have not shared this {{ model_class }} with any users.</p>
                 </div>
                 <b-button :href="shareUrl" id="share_with_a_user"> <span>Share with a user</span> </b-button>
             </div>
@@ -253,6 +197,28 @@ export default {
             const requestUrl = `${this.slugUrl}&new_slug=${newSlug}`;
             axios.get(requestUrl).catch((error) => (this.errMsg = error.response.data.err_msg));
         },
+        onImportable(importable) {
+            if (importable) {
+                this.setSharing("make_accessible_via_link");
+                if (this.item.published) {
+                    this.setSharing('publish');
+                } else {
+                    this.setSharing('unpublish');
+                }
+            } else {
+                this.item.published = false;
+                this.setSharing("disable_link_access");
+                this.setSharing('unpublish');
+            }
+        },
+        onPublish(published) {
+            if (published) {
+                this.item.importable = true;
+                this.setSharing("make_accessible_and_publish");
+            } else {
+                this.setSharing('unpublish');
+            }
+        },
         getModel() {
             this.ready = false;
             axios
@@ -284,7 +250,6 @@ export default {
             axios
                 .post(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/sharing`, data)
                 .then((response) => {
-                    Object.assign(this.item, response.data);
                     if (response.data.skipped) {
                         this.errMsg = "Some of the items within this object were not published due to an error.";
                     }

From 4bc129373067530bc67782837b8a44808ce5c1bc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 18 Nov 2020 19:23:13 +0100
Subject: [PATCH 13/15] Run make client-format, replace clipboard icon with
 chain/link icon

---
 client/src/components/Sharing.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 48abb4c7b8a..1b389f6825f 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -31,7 +31,7 @@
                             <font-awesome-icon icon="edit" />
                         </b-button>
                         <b-button id="tooltip-clipboard" @click="onCopy" @mouseout="onCopyOut" variant="link" size="sm">
-                            <font-awesome-icon :icon="['far', 'clipboard']" />
+                            <font-awesome-icon icon="link" />
                         </b-button>
                         <b-tooltip target="tooltip-clipboard" triggers="hover">
                             {{ tooltipClipboard }}
@@ -46,7 +46,7 @@
                 </div>
                 <div v-else>
                     Access to this {{ model_class }} is currently restricted so that only you and the users listed below
-                    can access it. Note that sharing a History will also allow access to all of its datasets. 
+                    can access it. Note that sharing a History will also allow access to all of its datasets.
                 </div>
             </div>
             <br />
@@ -82,7 +82,7 @@ import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faClipboard, faEdit } from "@fortawesome/free-regular-svg-icons";
+import { faLink, faEdit } from "@fortawesome/free-solid-svg-icons";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import SlugInput from "components/Common/SlugInput";
@@ -90,7 +90,7 @@ import axios from "axios";
 
 Vue.use(BootstrapVue);
 
-library.add(faClipboard);
+library.add(faLink);
 library.add(faEdit);
 
 export default {
@@ -201,14 +201,14 @@ export default {
             if (importable) {
                 this.setSharing("make_accessible_via_link");
                 if (this.item.published) {
-                    this.setSharing('publish');
+                    this.setSharing("publish");
                 } else {
-                    this.setSharing('unpublish');
+                    this.setSharing("unpublish");
                 }
             } else {
                 this.item.published = false;
                 this.setSharing("disable_link_access");
-                this.setSharing('unpublish');
+                this.setSharing("unpublish");
             }
         },
         onPublish(published) {
@@ -216,7 +216,7 @@ export default {
                 this.item.importable = true;
                 this.setSharing("make_accessible_and_publish");
             } else {
-                this.setSharing('unpublish');
+                this.setSharing("unpublish");
             }
         },
         getModel() {

From b72be5dea561d38b780a4375c36878f6423a5fb2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 19 Nov 2020 19:47:07 +0100
Subject: [PATCH 14/15] Hide publish option if not importable

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

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 1b389f6825f..9bb93352d47 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -14,7 +14,7 @@
             <b-form-checkbox switch v-model="item.importable" @change="onImportable">
                 Make {{ model_class }} accessible via link.
             </b-form-checkbox>
-            <b-form-checkbox switch v-model="item.published" @change="onPublish">
+            <b-form-checkbox v-if="item.importable" switch v-model="item.published" @change="onPublish">
                 Make {{ model_class }} publicly available in
                 <a :href="published_url" target="_top">Published {{ plural_name }}</a> section.
             </b-form-checkbox>

From e9f214362d63ecf0dd6788cb9b4caaeed190b846 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 19 Nov 2020 20:04:01 +0100
Subject: [PATCH 15/15] Modify label, control access through a single switch

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

diff --git a/client/src/components/Sharing.vue b/client/src/components/Sharing.vue
index 9bb93352d47..d9c97a05a04 100644
--- a/client/src/components/Sharing.vue
+++ b/client/src/components/Sharing.vue
@@ -12,7 +12,7 @@
         </div>
         <div v-else>
             <b-form-checkbox switch v-model="item.importable" @change="onImportable">
-                Make {{ model_class }} accessible via link.
+                Make {{ model_class }} accessible.
             </b-form-checkbox>
             <b-form-checkbox v-if="item.importable" switch v-model="item.published" @change="onPublish">
                 Make {{ model_class }} publicly available in