From ed57567988aaec6703a52e9edfed5e2cb8ca3aca Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:50:20 +0200
Subject: [PATCH 01/24] remove useCurrentUser

---
 client/src/composables/hashedUserId.ts |  5 ++--
 client/src/composables/user.ts         | 32 +++-----------------------
 2 files changed, 6 insertions(+), 31 deletions(-)

diff --git a/client/src/composables/hashedUserId.ts b/client/src/composables/hashedUserId.ts
index ead22c34bcbe..1453423a75af 100644
--- a/client/src/composables/hashedUserId.ts
+++ b/client/src/composables/hashedUserId.ts
@@ -1,7 +1,8 @@
 import { useLocalStorage } from "@vueuse/core";
+import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
-import { useCurrentUser } from "./user";
+import { useUserStore } from "@/stores/userStore";
 
 async function hash32(value: string): Promise<string> {
     const valueUtf8 = new TextEncoder().encode(value);
@@ -31,7 +32,7 @@ let unhashedId: string | null = null;
  * One way hashed ID of the current User
  */
 export function useHashedUserId() {
-    const { currentUser } = useCurrentUser(true);
+    const { currentUser } = storeToRefs(useUserStore());
 
     // salt the local store, to make a user untraceable by id across different clients
     const localStorageSalt = useLocalStorage("local-storage-salt", createSalt());
diff --git a/client/src/composables/user.ts b/client/src/composables/user.ts
index fd16e731159e..ecc6bddadcfa 100644
--- a/client/src/composables/user.ts
+++ b/client/src/composables/user.ts
@@ -1,34 +1,8 @@
-import type { Ref } from "vue";
-import { computed, onMounted, ref, unref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 
-// TODO: support computed for "noFetch"
-/**
- * composable user store wrapper
- * @param noFetch when true, the user will not be fetched from the server
- * @param fetchOnce when true, the user will only be fetched from the server if it is not already in the store
- * @returns currentUser computed
- */
-export function useCurrentUser(noFetch: boolean | Ref<boolean> = false, fetchOnce: boolean | Ref<boolean> = false) {
-    // TODO: add store typing
-    const userStore = useUserStore();
-    const currentUser = computed(() => userStore.currentUser);
-    const currentFavorites = computed(() => userStore.currentFavorites);
-    onMounted(() => {
-        if (!unref(noFetch) && !(Object.keys(currentUser).length > 0 && unref(fetchOnce))) {
-            userStore.loadUser();
-        }
-    });
-    const addFavoriteTool = async (toolId: string) => {
-        await userStore.addFavoriteTool(toolId);
-    };
-    const removeFavoriteTool = async (toolId: string) => {
-        await userStore.removeFavoriteTool(toolId);
-    };
-    return { currentUser, currentFavorites, addFavoriteTool, removeFavoriteTool };
-}
-
 export function useCurrentTheme() {
     const userStore = useUserStore();
     const currentTheme = computed(() => userStore.currentTheme);
@@ -48,7 +22,7 @@ const localTags = ref<string[]>([]);
  * Keeps tracks of the tags the current user has used.
  */
 export function useUserTags() {
-    const { currentUser } = useCurrentUser(true);
+    const { currentUser } = storeToRefs(useUserStore());
     const userTags = computed(() => {
         let tags: string[];
         if (currentUser.value && !currentUser.value.isAnonymous) {

From 554f66d243ca9f14928cfbd97438c5473124a626 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 1 Sep 2023 11:54:40 +0200
Subject: [PATCH 02/24] add embedded query param

---
 client/src/entry/analysis/App.vue | 41 ++++++++++++++++++++++++++++---
 client/src/stores/userStore.ts    |  8 ++++++
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index 15e8afd5edd9..d53a37abb86d 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -56,7 +56,8 @@ import Modal from "mvc/ui/ui-modal";
 import { getAppRoot } from "onload";
 import { storeToRefs } from "pinia";
 import { withPrefix } from "utils/redirect";
-import { ref } from "vue";
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router/composables";
 
 import { useHistoryStore } from "@/stores/historyStore";
 import { useNotificationsStore } from "@/stores/notificationsStore";
@@ -83,8 +84,6 @@ export default {
         const { currentTheme } = storeToRefs(userStore);
         const { currentHistory } = storeToRefs(useHistoryStore());
 
-        userStore.loadUser();
-
         const toastRef = ref(null);
         setToastComponentRef(toastRef);
 
@@ -94,7 +93,33 @@ export default {
         const uploadModal = ref(null);
         setGlobalUploadModal(uploadModal);
 
-        return { toastRef, confirmDialogRef, uploadModal, currentTheme, currentHistory };
+        const route = useRoute();
+        const embedded = computed(() => "embed" in route.query && route.query.embed === "true");
+        const showBroadcasts = computed(() => !embedded.value);
+        const showAlerts = computed(() => !embedded.value);
+
+        watch(
+            () => embedded.value,
+            () => {
+                if (embedded.value) {
+                    userStore.$reset();
+                } else {
+                    userStore.loadUser();
+                }
+            },
+            { immediate: true }
+        );
+
+        return {
+            toastRef,
+            confirmDialogRef,
+            uploadModal,
+            currentTheme,
+            currentHistory,
+            embedded,
+            showBroadcasts,
+            showAlerts,
+        };
     },
     data() {
         return {
@@ -109,6 +134,10 @@ export default {
             return fetchMenu(this.config);
         },
         showMasthead() {
+            if (this.embedded) {
+                return false;
+            }
+
             const masthead = this.$route.query.hide_masthead;
             if (masthead !== undefined) {
                 return masthead.toLowerCase() != "true";
@@ -116,6 +145,10 @@ export default {
             return true;
         },
         theme() {
+            if (this.embedded) {
+                return null;
+            }
+
             const themeKeys = Object.keys(this.config.themes);
             if (themeKeys.length > 0) {
                 const foundTheme = themeKeys.includes(this.currentTheme);
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 849cb491f981..8ed03dc9d5f7 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -37,6 +37,12 @@ export const useUserStore = defineStore("userStore", () => {
 
     let loadPromise: Promise<void> | null = null;
 
+    function $reset() {
+        currentUser.value = null;
+        currentPreferences.value = null;
+        loadPromise = null;
+    }
+
     const isAnonymous = computed(() => {
         return !("email" in (currentUser.value || []));
     });
@@ -117,6 +123,7 @@ export const useUserStore = defineStore("userStore", () => {
     function toggleActivityBar() {
         showActivityBar.value = !showActivityBar.value;
     }
+
     function toggleSideBar(currentOpen = "") {
         toggledSideBar.value = toggledSideBar.value === currentOpen ? "" : currentOpen;
     }
@@ -136,5 +143,6 @@ export const useUserStore = defineStore("userStore", () => {
         removeFavoriteTool,
         toggleActivityBar,
         toggleSideBar,
+        $reset,
     };
 });

From a69a0ca8f215a0223f54f4737f85dbb4fdacbab9 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 1 Sep 2023 12:11:07 +0200
Subject: [PATCH 03/24] add optionally passing a user to localStorage

---
 client/src/composables/hashedUserId.ts     | 15 +++++++++++----
 client/src/composables/userLocalStorage.ts |  8 +++++---
 client/src/stores/userStore.ts             | 12 ++++++++----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/src/composables/hashedUserId.ts b/client/src/composables/hashedUserId.ts
index 1453423a75af..fcda4cfde8f0 100644
--- a/client/src/composables/hashedUserId.ts
+++ b/client/src/composables/hashedUserId.ts
@@ -1,8 +1,8 @@
 import { useLocalStorage } from "@vueuse/core";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, type Ref, ref, watch } from "vue";
 
-import { useUserStore } from "@/stores/userStore";
+import { GenericUser, useUserStore } from "@/stores/userStore";
 
 async function hash32(value: string): Promise<string> {
     const valueUtf8 = new TextEncoder().encode(value);
@@ -31,8 +31,15 @@ let unhashedId: string | null = null;
 /**
  * One way hashed ID of the current User
  */
-export function useHashedUserId() {
-    const { currentUser } = storeToRefs(useUserStore());
+export function useHashedUserId(user?: Ref<GenericUser | null>) {
+    let currentUser: Ref<GenericUser | null>;
+
+    if (user) {
+        currentUser = user;
+    } else {
+        const { currentUser: currentUserRef } = storeToRefs(useUserStore());
+        currentUser = currentUserRef;
+    }
 
     // salt the local store, to make a user untraceable by id across different clients
     const localStorageSalt = useLocalStorage("local-storage-salt", createSalt());
diff --git a/client/src/composables/userLocalStorage.ts b/client/src/composables/userLocalStorage.ts
index 0d53d219ca28..b8a85b91845b 100644
--- a/client/src/composables/userLocalStorage.ts
+++ b/client/src/composables/userLocalStorage.ts
@@ -1,5 +1,7 @@
 import { useLocalStorage } from "@vueuse/core";
-import { computed, customRef, ref } from "vue";
+import { computed, customRef, type Ref, ref } from "vue";
+
+import type { GenericUser } from "@/stores/userStore";
 
 import { useHashedUserId } from "./hashedUserId";
 
@@ -8,8 +10,8 @@ import { useHashedUserId } from "./hashedUserId";
  * @param key
  * @param initialValue
  */
-export function useUserLocalStorage<T>(key: string, initialValue: T) {
-    const { hashedUserId } = useHashedUserId();
+export function useUserLocalStorage<T>(key: string, initialValue: T, user?: Ref<GenericUser | null>) {
+    const { hashedUserId } = useHashedUserId(user);
 
     const storedRef = computed(() => {
         if (hashedUserId.value) {
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 8ed03dc9d5f7..3cfbfdb8ad82 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -13,28 +13,32 @@ import {
 
 type QuotaUsageResponse = components["schemas"]["UserQuotaUsage"];
 
-interface User extends QuotaUsageResponse {
+export interface User extends QuotaUsageResponse {
     id: string;
     email: string;
     tags_used: string[];
     isAnonymous: false;
 }
 
-interface AnonymousUser {
+export interface AnonymousUser {
     isAnonymous: true;
 }
 
+export type GenericUser = User | AnonymousUser;
+
 interface Preferences {
     theme: string;
     favorites: { tools: string[] };
 }
 
 export const useUserStore = defineStore("userStore", () => {
-    const toggledSideBar = useUserLocalStorage("user-store-toggled-side-bar", "tools");
-    const showActivityBar = useUserLocalStorage("user-store-show-activity-bar", false);
     const currentUser = ref<User | AnonymousUser | null>(null);
     const currentPreferences = ref<Preferences | null>(null);
 
+    // explicitly pass current User, because userStore might not exist yet
+    const toggledSideBar = useUserLocalStorage("user-store-toggled-side-bar", "tools", currentUser);
+    const showActivityBar = useUserLocalStorage("user-store-show-activity-bar", false, currentUser);
+
     let loadPromise: Promise<void> | null = null;
 
     function $reset() {

From ca20a3c9532b4d714d0c757896d7f6def1d7308c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 1 Sep 2023 13:34:20 +0200
Subject: [PATCH 04/24] add multiple query parameters

---
 .../Published/WorkflowInformation.vue         |  5 +-
 .../Workflow/Published/WorkflowPublished.vue  | 52 ++++++++++++++++---
 client/src/composables/route.ts               | 15 ++++++
 client/src/entry/analysis/App.vue             | 11 ++--
 4 files changed, 68 insertions(+), 15 deletions(-)
 create mode 100644 client/src/composables/route.ts

diff --git a/client/src/components/Workflow/Published/WorkflowInformation.vue b/client/src/components/Workflow/Published/WorkflowInformation.vue
index ba74ff896c47..f923021b5782 100644
--- a/client/src/components/Workflow/Published/WorkflowInformation.vue
+++ b/client/src/components/Workflow/Published/WorkflowInformation.vue
@@ -24,6 +24,7 @@ interface WorkflowInformation {
 
 const props = defineProps<{
     workflowInfo: WorkflowInformation;
+    embedded?: boolean;
 }>();
 
 const gravatarSource = computed(
@@ -51,7 +52,9 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${p
 
             <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
 
-            <router-link :to="publishedByUser"> All published Workflows by {{ workflowInfo.owner }} </router-link>
+            <router-link :to="publishedByUser" :target="props.embedded ? '_blank' : ''">
+                All published Workflows by {{ workflowInfo.owner }}
+            </router-link>
         </div>
 
         <div v-if="workflowInfo?.creator" class="workflow-info-box">
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 7452a4b62b58..8a2d614e1767 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -7,6 +7,7 @@ import { computed, ref, watch } from "vue";
 
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { useRouteQueryBool } from "@/composables/route";
 import { usePanels } from "@/composables/usePanels";
 import { provideScopedWorkflowStores } from "@/composables/workflowStores";
 import { useUserStore } from "@/stores/userStore";
@@ -102,12 +103,19 @@ function logInTitle(title: string) {
         return title;
     }
 }
+
+const embedded = useRouteQueryBool("embed");
+const showButtons = useRouteQueryBool("buttons", true);
+const showAbout = useRouteQueryBool("about", true);
+const showHeading = useRouteQueryBool("heading", true);
+
+const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`));
 </script>
 
 <template>
     <div id="columns" class="d-flex">
-        <ActivityBar v-if="showActivityBar" />
-        <FlexPanel v-if="showToolbox" side="left">
+        <ActivityBar v-if="!embedded && showActivityBar" />
+        <FlexPanel v-if="!embedded && showToolbox" side="left">
             <ToolPanel />
         </FlexPanel>
 
@@ -128,21 +136,27 @@ function logInTitle(title: string) {
             </div>
             <div v-else-if="workflowInfo" class="published-workflow">
                 <div class="workflow-preview d-flex flex-column">
-                    <span class="d-flex w-100 flex-gapx-1 flex-wrap justify-content-center align-items-center mb-2">
-                        <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0">Workflow Preview</Heading>
-
-                        <span>
+                    <span
+                        v-if="showHeading || showButtons"
+                        class="d-flex w-100 flex-gapx-1 flex-wrap justify-content-end align-items-center mb-2">
+                        <Heading v-if="showHeading" h1 separator inline size="xl" class="flex-grow-1 mb-0">
+                            <span v-if="showAbout"> Workflow Preview </span>
+                            <span v-else> {{ workflowInfo.name }} </span>
+                        </Heading>
+
+                        <span v-if="showButtons">
                             <b-button :to="downloadUrl" title="Download Workflow" variant="secondary" size="md">
                                 <FontAwesomeIcon icon="fa-download" />
                                 Download
                             </b-button>
 
                             <b-button
+                                v-if="!embedded"
                                 :href="importUrl"
                                 :disabled="userStore.isAnonymous"
                                 :title="logInTitle('Import Workflow')"
                                 data-description="workflow import"
-                                target="blank"
+                                target="_blank"
                                 variant="secondary"
                                 size="md">
                                 <FontAwesomeIcon icon="fa-edit" />
@@ -150,6 +164,7 @@ function logInTitle(title: string) {
                             </b-button>
 
                             <b-button
+                                v-if="!embedded"
                                 :to="runUrl"
                                 :disabled="userStore.isAnonymous"
                                 :title="logInTitle('Run Workflow')"
@@ -158,6 +173,17 @@ function logInTitle(title: string) {
                                 <FontAwesomeIcon icon="fa-play" />
                                 Run
                             </b-button>
+
+                            <b-button
+                                v-if="embedded"
+                                :href="viewUrl"
+                                target="blank"
+                                variant="primary"
+                                size="md"
+                                class="view-button font-weight-bold">
+                                <FontAwesomeIcon :icon="['gxd', 'galaxyLogo']" />
+                                View In Galaxy
+                            </b-button>
                         </span>
                     </span>
 
@@ -170,13 +196,18 @@ function logInTitle(title: string) {
                     </b-card>
                 </div>
 
-                <WorkflowInformation v-if="workflowInfo" :workflow-info="workflowInfo" />
+                <WorkflowInformation
+                    v-if="showAbout && workflowInfo"
+                    :workflow-info="workflowInfo"
+                    :embedded="embedded" />
             </div>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
+@import "theme/blue.scss";
+
 .published-workflow {
     display: flex;
     flex-grow: 1;
@@ -210,4 +241,9 @@ function logInTitle(title: string) {
         }
     }
 }
+
+.view-button {
+    --fa-secondary-color: #{$brand-toggle};
+    --fa-secondary-opacity: 1;
+}
 </style>
diff --git a/client/src/composables/route.ts b/client/src/composables/route.ts
new file mode 100644
index 000000000000..fd8f3bddfe96
--- /dev/null
+++ b/client/src/composables/route.ts
@@ -0,0 +1,15 @@
+import { MaybeComputedRef, resolveUnref } from "@vueuse/core";
+import { computed } from "vue";
+import { useRoute } from "vue-router/composables";
+
+/** use a route query parameter as a boolean computed */
+export function useRouteQueryBool(
+    parameter: MaybeComputedRef<string>,
+    defaultValue: MaybeComputedRef<boolean> = false
+) {
+    const route = useRoute();
+    return computed(() => {
+        const p = resolveUnref(parameter);
+        return p in route.query ? route.query[p] === "true" : resolveUnref(defaultValue);
+    });
+}
diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index d53a37abb86d..927ac0578c8c 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -13,7 +13,7 @@
                 :window-tab="windowTab"
                 @open-url="openUrl" />
             <Alert
-                v-if="config.message_box_visible && config.message_box_content"
+                v-if="showAlerts && config.message_box_visible && config.message_box_content"
                 id="messagebox"
                 class="rounded-0 m-0 p-2"
                 :variant="config.message_box_class || 'info'">
@@ -22,7 +22,7 @@
                 <span v-html="config.message_box_content"></span>
             </Alert>
             <Alert
-                v-if="config.show_inactivity_warning && config.inactivity_box_content"
+                v-if="showAlerts && config.show_inactivity_warning && config.inactivity_box_content"
                 id="inactivebox"
                 class="rounded-0 m-0 p-2"
                 variant="warning">
@@ -38,7 +38,7 @@
         <Toast ref="toastRef" />
         <ConfirmDialog ref="confirmDialogRef" />
         <UploadModal ref="uploadModal" />
-        <BroadcastsOverlay />
+        <BroadcastsOverlay v-if="showBroadcasts" />
         <DragGhost />
     </div>
 </template>
@@ -57,8 +57,8 @@ import { getAppRoot } from "onload";
 import { storeToRefs } from "pinia";
 import { withPrefix } from "utils/redirect";
 import { computed, ref, watch } from "vue";
-import { useRoute } from "vue-router/composables";
 
+import { useRouteQueryBool } from "@/composables/route";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 import { useUserStore } from "@/stores/userStore";
@@ -93,8 +93,7 @@ export default {
         const uploadModal = ref(null);
         setGlobalUploadModal(uploadModal);
 
-        const route = useRoute();
-        const embedded = computed(() => "embed" in route.query && route.query.embed === "true");
+        const embedded = useRouteQueryBool("embed");
         const showBroadcasts = computed(() => !embedded.value);
         const showAlerts = computed(() => !embedded.value);
 

From 07b28b2bda20e820340b45ce35a54da0069a221a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 1 Sep 2023 13:48:58 +0200
Subject: [PATCH 05/24] add parameters for position and zoom

---
 .../Workflow/Editor/WorkflowGraph.vue          | 13 +++++++++----
 .../Workflow/Published/WorkflowPublished.vue   | 18 ++++++++++++++++--
 client/src/composables/route.ts                | 13 +++++++++++++
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 1af61b9fe7db..e6833b3bcde8 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -85,6 +85,7 @@ const props = defineProps({
     highlightId: { type: Number as PropType<number | null>, default: null },
     scrollToId: { type: Number as PropType<number | null>, default: null },
     readonly: { type: Boolean, default: false },
+    initialPosition: { type: Object as PropType<{ x: number; y: number }>, default: () => ({ x: 50, y: 20 }) },
 });
 
 const { stateStore, stepStore } = useWorkflowStores();
@@ -93,10 +94,14 @@ const canvas: Ref<HTMLElement | null> = ref(null);
 
 const elementBounding = useElementBounding(canvas, { windowResize: false, windowScroll: false });
 const scroll = useScroll(canvas);
-const { transform, panBy, setZoom, moveTo } = useD3Zoom(scale.value, minZoom, maxZoom, canvas, scroll, {
-    x: 50,
-    y: 20,
-});
+const { transform, panBy, setZoom, moveTo } = useD3Zoom(
+    scale.value,
+    minZoom,
+    maxZoom,
+    canvas,
+    scroll,
+    props.initialPosition
+);
 const { viewportBoundingBox } = useViewportBoundingBox(elementBounding, scale, transform);
 
 const isDragging = ref(false);
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 8a2d614e1767..ca6a2611fe95 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -7,7 +7,7 @@ import { computed, ref, watch } from "vue";
 
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
-import { useRouteQueryBool } from "@/composables/route";
+import { useRouteQueryBool, useRouteQueryNumber } from "@/composables/route";
 import { usePanels } from "@/composables/usePanels";
 import { provideScopedWorkflowStores } from "@/composables/workflowStores";
 import { useUserStore } from "@/stores/userStore";
@@ -49,7 +49,13 @@ const { datatypesMapper } = useDatatypesMapper();
 
 const { stateStore } = provideScopedWorkflowStores(props.id);
 
-stateStore.setScale(0.75);
+const defaultScale = useRouteQueryNumber("zoom", 0.75);
+
+watch(
+    () => defaultScale.value,
+    () => stateStore.setScale(defaultScale.value),
+    { immediate: true }
+);
 
 watch(
     () => props.id,
@@ -108,6 +114,13 @@ const embedded = useRouteQueryBool("embed");
 const showButtons = useRouteQueryBool("buttons", true);
 const showAbout = useRouteQueryBool("about", true);
 const showHeading = useRouteQueryBool("heading", true);
+const initialX = useRouteQueryNumber("initialX", -20);
+const initialY = useRouteQueryNumber("initialY", -20);
+
+const initialPosition = computed(() => ({
+    x: -initialX.value * defaultScale.value,
+    y: -initialY.value * defaultScale.value,
+}));
 
 const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`));
 </script>
@@ -192,6 +205,7 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
                             v-if="workflow && datatypesMapper"
                             :steps="workflow.steps"
                             :datatypes-mapper="datatypesMapper"
+                            :initial-position="initialPosition"
                             readonly />
                     </b-card>
                 </div>
diff --git a/client/src/composables/route.ts b/client/src/composables/route.ts
index fd8f3bddfe96..36b5bace0d9b 100644
--- a/client/src/composables/route.ts
+++ b/client/src/composables/route.ts
@@ -13,3 +13,16 @@ export function useRouteQueryBool(
         return p in route.query ? route.query[p] === "true" : resolveUnref(defaultValue);
     });
 }
+
+export function useRouteQueryNumber(parameter: MaybeComputedRef<string>, defaultValue: MaybeComputedRef<number> = 1) {
+    const route = useRoute();
+    return computed(() => {
+        const p = resolveUnref(parameter);
+        if (p in route.query) {
+            const v = route.query[p];
+            return typeof v === "string" ? parseFloat(v) : resolveUnref(defaultValue);
+        } else {
+            return resolveUnref(defaultValue);
+        }
+    });
+}

From 4b24b63571ec5911c8d38c4b49bfff950fe90034 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 1 Sep 2023 17:40:13 +0200
Subject: [PATCH 06/24] move errors to separate component

---
 .../src/components/Sharing/ErrorMessage.vue   | 31 ------
 .../src/components/Sharing/ErrorMessages.vue  | 46 +++++++++
 client/src/components/Sharing/Sharing.vue     | 96 +++++++++++--------
 3 files changed, 104 insertions(+), 69 deletions(-)
 delete mode 100644 client/src/components/Sharing/ErrorMessage.vue
 create mode 100644 client/src/components/Sharing/ErrorMessages.vue

diff --git a/client/src/components/Sharing/ErrorMessage.vue b/client/src/components/Sharing/ErrorMessage.vue
deleted file mode 100644
index dd5e92a3c2f0..000000000000
--- a/client/src/components/Sharing/ErrorMessage.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <span>
-        <span v-for="(part, index) in parts" :key="index">
-            {{ part }}
-            <a v-if="index < parts.length - 1" :href="link" class="require-login-link"> logged in </a>
-        </span>
-    </span>
-</template>
-
-<script>
-export default {
-    props: {
-        message: {
-            type: String,
-            required: true,
-        },
-        root: {
-            type: String,
-            required: true,
-        },
-    },
-    computed: {
-        link() {
-            return `${this.root}login?redirect=${encodeURIComponent(window.location)}`;
-        },
-        parts() {
-            return this.message.split("logged in");
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Sharing/ErrorMessages.vue b/client/src/components/Sharing/ErrorMessages.vue
new file mode 100644
index 000000000000..954a7d34db2c
--- /dev/null
+++ b/client/src/components/Sharing/ErrorMessages.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { computed } from "vue";
+
+import { getAppRoot } from "@/onload";
+
+const props = defineProps<{
+    messages: string[];
+}>();
+
+const emit = defineEmits<{
+    (e: "dismissed", index: number): void;
+}>();
+
+const loginLink = computed(() => `${getAppRoot()}login?redirect=${encodeURIComponent(window.location.toString())}`);
+
+function hasLogin(string: string) {
+    return string.includes("logged in");
+}
+
+function splitLoginString(string: string) {
+    return string.split(/(logged in)/g);
+}
+</script>
+
+<template>
+    <div>
+        <BAlert
+            v-for="(message, index) in props.messages"
+            :key="message"
+            show
+            variant="danger"
+            dismissible
+            @dismissed="() => emit('dismissed', index)">
+            <span v-if="hasLogin(message)">
+                <span v-for="(part, i) in splitLoginString(message)" :key="i">
+                    <router-link v-if="hasLogin(part)" :to="loginLink" class="require-login-link">
+                        {{ part }}
+                    </router-link>
+                    <span v-else> {{ part }} </span>
+                </span>
+            </span>
+            <span v-else> {{ message }} </span>
+        </BAlert>
+    </div>
+</template>
diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index 16b1be21a86d..c232f7225e34 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -1,14 +1,11 @@
 <template>
     <div>
-        <h1 class="h-lg">
+        <Heading h1 size="lg" separator>
             Share or Publish {{ modelClass }} <span v-if="ready">`{{ item.title }}`</span>
-        </h1>
-        <div v-for="error in errors" :key="error">
-            <b-alert show variant="danger" dismissible @dismissed="errors = errors.filter((e) => e !== error)">
-                <ErrorMessage :message="error" :root="root()"> </ErrorMessage>
-            </b-alert>
-        </div>
-        <br />
+        </Heading>
+
+        <ErrorMessages :messages="errors" @dismissed="onErrorDismissed"></ErrorMessages>
+
         <div v-if="!hasUsername">
             <div>To make a {{ modelClass }} accessible via link or publish it, you must create a public username:</div>
             <form class="form-group" @submit.prevent="setUsername()">
@@ -17,32 +14,25 @@
             <b-button type="submit" variant="primary" @click="setUsername()">Set Username</b-button>
         </div>
         <div v-else-if="ready">
-            <b-form-checkbox v-model="item.importable" switch class="make-accessible" @change="onImportable">
-                Make {{ modelClass }} accessible
-            </b-form-checkbox>
-            <b-form-checkbox
-                v-if="item.importable"
-                v-model="item.published"
-                class="make-publishable"
-                switch
-                @change="onPublish">
-                Make {{ modelClass }} publicly available in
-                <a :href="published_url" target="_top">Published {{ pluralName }}</a>
-            </b-form-checkbox>
-            <br />
-            <div v-if="item.importable">
+            <div class="mb-3">
+                <b-form-checkbox v-model="item.importable" switch class="make-accessible" @change="onImportable">
+                    Make {{ modelClass }} accessible
+                </b-form-checkbox>
+                <b-form-checkbox
+                    v-if="item.importable"
+                    v-model="item.published"
+                    class="make-publishable"
+                    switch
+                    @change="onPublish">
+                    Make {{ modelClass }} publicly available in
+                    <a :href="published_url" target="_top">Published {{ pluralName }}</a>
+                </b-form-checkbox>
+            </div>
+
+            <div v-if="item.importable" class="mb-4">
                 <div>This {{ modelClass }} is currently {{ itemStatus }}.</div>
                 <p>Anyone can view and import this {{ modelClass }} by visiting the following URL:</p>
                 <blockquote>
-                    <b-button v-b-tooltip.hover title="Edit URL" variant="link" size="sm" @click="onEdit">
-                        <FontAwesomeIcon icon="edit" />
-                    </b-button>
-                    <b-button id="tooltip-clipboard" variant="link" size="sm" @click="onCopy" @mouseout="onCopyOut">
-                        <FontAwesomeIcon :icon="['far', 'copy']" />
-                    </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">
                         url:
                         {{ itemUrl }}
@@ -51,13 +41,34 @@
                         slug:
                         {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange" />
                     </span>
+                    <b-button
+                        id="tooltip-clipboard"
+                        v-b-tooltip.hover
+                        variant="link"
+                        size="md"
+                        class="inline-icon-button"
+                        :title="tooltipClipboard"
+                        @click="onCopy"
+                        @mouseout="onCopyOut"
+                        @blur="onCopyOut">
+                        <FontAwesomeIcon :icon="['far', 'copy']" fixed-width />
+                    </b-button>
+                    <b-button
+                        v-b-tooltip.hover
+                        class="inline-icon-button"
+                        title="Edit URL"
+                        variant="link"
+                        size="md"
+                        @click="onEdit">
+                        <FontAwesomeIcon icon="edit" fixed-width />
+                    </b-button>
                 </blockquote>
             </div>
-            <div v-else>
+            <div v-else class="mb-4">
                 Access to this {{ modelClass }} 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>
-            <br />
+
             <b-card no-body>
                 <b-button
                     v-b-toggle.accordion-1
@@ -268,13 +279,15 @@ import { getAppRoot } from "onload/loadConfig";
 import { mapState } from "pinia";
 import { copy } from "utils/clipboard";
 import { errorMessageAsString } from "utils/simple-error";
-import Vue from "vue";
+import Vue, { ref } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 
-import ErrorMessage from "./ErrorMessage";
+import ErrorMessages from "./ErrorMessages";
+
+import Heading from "../Common/Heading.vue";
 
 Vue.use(BootstrapVue);
 library.add(faCopy, faEdit, faUserPlus, faUserSlash, faCaretDown, faCaretUp);
@@ -287,10 +300,11 @@ const defaultExtra = () => {
 };
 export default {
     components: {
-        ErrorMessage,
+        ErrorMessages,
         FontAwesomeIcon,
         SlugInput,
         Multiselect,
+        Heading,
     },
     props: {
         id: {
@@ -308,7 +322,14 @@ export default {
     },
     setup() {
         const { config, isConfigLoaded } = useConfig(true);
-        return { config, isConfigLoaded };
+
+        const errors = ref([]);
+
+        function onErrorDismissed(index) {
+            errors.value.splice(index, 1);
+        }
+
+        return { config, isConfigLoaded, onErrorDismissed, errors };
     },
     data() {
         const Galaxy = getGalaxyInstance();
@@ -321,7 +342,6 @@ export default {
             threeCharactersEntered: true,
             hasUsername: Galaxy.user.get("username"),
             newUsername: "",
-            errors: [],
             multiselectValues: {
                 sharingCandidates: [],
                 userOptions: [],

From 75532db212e2641670b3afe2445fee9cd571241a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 4 Sep 2023 11:49:37 +0200
Subject: [PATCH 07/24] fix eslint label warning

---
 client/.eslintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 33ad7e890842..8a7dd383bd66 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -47,6 +47,7 @@ const baseRules = {
             required: {
                 some: ["nesting", "id"],
             },
+            allowChildren: true,
         },
     ],
     "vuejs-accessibility/mouse-events-have-key-events": "warn",

From 895de1d7c3d2321c4642765c509b815fd25fc1fe Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 4 Sep 2023 13:27:42 +0200
Subject: [PATCH 08/24] move url editing to separate component

---
 client/src/components/Common/SlugInput.vue    |  44 -----
 client/src/components/Sharing/EditableUrl.vue | 107 +++++++++++
 client/src/components/Sharing/Sharing.vue     | 175 ++++++++----------
 client/src/components/Sharing/SlugInput.vue   |  36 ++++
 4 files changed, 223 insertions(+), 139 deletions(-)
 delete mode 100644 client/src/components/Common/SlugInput.vue
 create mode 100644 client/src/components/Sharing/EditableUrl.vue
 create mode 100644 client/src/components/Sharing/SlugInput.vue

diff --git a/client/src/components/Common/SlugInput.vue b/client/src/components/Common/SlugInput.vue
deleted file mode 100644
index 14f04f889be8..000000000000
--- a/client/src/components/Common/SlugInput.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <b-input
-        ref="input"
-        v-model="slugInput"
-        class="d-inline w-auto h-auto px-1 py-0"
-        @change="onChange"
-        @keydown.enter="onChange"
-        @keydown.esc="onCancel" />
-</template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
-
-Vue.use(BootstrapVue);
-
-export default {
-    props: {
-        slug: {
-            type: String,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            slugInput: this.slug,
-        };
-    },
-    mounted() {
-        this.$refs.input.select();
-    },
-    methods: {
-        onChange() {
-            const slugFormatted = this.slugInput
-                .replace(/\s+/g, "-")
-                .replace(/[^a-zA-Z0-9-]/g, "")
-                .toLowerCase();
-            this.$emit("onChange", slugFormatted);
-        },
-        onCancel() {
-            this.$emit("onChange", this.slug);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Sharing/EditableUrl.vue b/client/src/components/Sharing/EditableUrl.vue
new file mode 100644
index 000000000000..91d8e64383a6
--- /dev/null
+++ b/client/src/components/Sharing/EditableUrl.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheck, faCopy, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed, nextTick, ref } from "vue";
+
+import { copy } from "@/utils/clipboard";
+
+import SlugInput from "./SlugInput.vue";
+
+library.add(faCopy, faEdit, faCheck);
+
+const props = defineProps<{
+    prefix: string;
+    slug: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "change", value: string): void;
+    (e: "submit", value: string): void;
+}>();
+
+const editing = ref(false);
+
+const slugInput = ref<InstanceType<typeof SlugInput>>();
+
+const url = computed(() => props.prefix + props.slug);
+
+async function onEdit() {
+    editing.value = true;
+    await nextTick();
+    (slugInput.value?.$el as HTMLInputElement).focus();
+}
+
+function onChange(value: string) {
+    emit("change", value);
+}
+
+function onSubmit() {
+    editing.value = false;
+    emit("submit", props.slug);
+}
+
+const copied = ref(false);
+const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
+
+function onCopy() {
+    copy(url.value);
+    copied.value = true;
+}
+
+function onCopyOut() {
+    copied.value = false;
+}
+</script>
+
+<template>
+    <div class="editable-url">
+        url:
+        <a v-if="!editing" id="item-url" :href="url" target="_top">{{ url }}</a>
+        <span v-else id="item-url-text">
+            {{ prefix }}
+            <SlugInput
+                ref="slugInput"
+                class="ml-1"
+                :slug="props.slug"
+                @change="onChange"
+                @cancel="onChange"
+                @keyup.enter="onSubmit" />
+        </span>
+
+        <BButton
+            v-if="!editing"
+            v-b-tooltip.hover
+            class="inline-icon-button"
+            title="Edit URL"
+            size="md"
+            @click="onEdit">
+            <FontAwesomeIcon icon="edit" fixed-width />
+        </BButton>
+        <BButton v-else v-b-tooltip.hover class="inline-icon-button" title="Done" size="md" @click="onSubmit">
+            <FontAwesomeIcon icon="check" fixed-width />
+        </BButton>
+
+        <BButton
+            id="tooltip-clipboard"
+            v-b-tooltip.hover
+            size="md"
+            class="inline-icon-button"
+            :title="clipboardTitle"
+            @click="onCopy"
+            @mouseout="onCopyOut"
+            @blur="onCopyOut">
+            <FontAwesomeIcon :icon="['far', 'copy']" fixed-width />
+        </BButton>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.editable-url {
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+</style>
diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index c232f7225e34..7a42cda62451 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -6,13 +6,14 @@
 
         <ErrorMessages :messages="errors" @dismissed="onErrorDismissed"></ErrorMessages>
 
-        <div v-if="!hasUsername">
-            <div>To make a {{ modelClass }} accessible via link or publish it, you must create a public username:</div>
-            <form class="form-group" @submit.prevent="setUsername()">
+        <form v-if="!hasUsername" class="d-flex flex-column flex-gapy-1" @submit.prevent="setUsername()">
+            <label>
+                To make a {{ modelClass }} accessible via link or publish it, you must create a public username:
                 <input v-model="newUsername" class="form-control" type="text" />
-            </form>
-            <b-button type="submit" variant="primary" @click="setUsername()">Set Username</b-button>
-        </div>
+            </label>
+
+            <b-button class="align-self-start" type="submit" variant="primary">Set Username</b-button>
+        </form>
         <div v-else-if="ready">
             <div class="mb-3">
                 <b-form-checkbox v-model="item.importable" switch class="make-accessible" @change="onImportable">
@@ -32,37 +33,11 @@
             <div v-if="item.importable" class="mb-4">
                 <div>This {{ modelClass }} is currently {{ itemStatus }}.</div>
                 <p>Anyone can view and import this {{ modelClass }} by visiting the following URL:</p>
-                <blockquote>
-                    <a v-if="showUrl" id="item-url" :href="itemUrl" target="_top" class="ml-2">
-                        url:
-                        {{ itemUrl }}
-                    </a>
-                    <span v-else id="item-url-text">
-                        slug:
-                        {{ itemUrlParts[0] }}<SlugInput class="ml-1" :slug="itemUrlParts[1]" @onChange="onChange" />
-                    </span>
-                    <b-button
-                        id="tooltip-clipboard"
-                        v-b-tooltip.hover
-                        variant="link"
-                        size="md"
-                        class="inline-icon-button"
-                        :title="tooltipClipboard"
-                        @click="onCopy"
-                        @mouseout="onCopyOut"
-                        @blur="onCopyOut">
-                        <FontAwesomeIcon :icon="['far', 'copy']" fixed-width />
-                    </b-button>
-                    <b-button
-                        v-b-tooltip.hover
-                        class="inline-icon-button"
-                        title="Edit URL"
-                        variant="link"
-                        size="md"
-                        @click="onEdit">
-                        <FontAwesomeIcon icon="edit" fixed-width />
-                    </b-button>
-                </blockquote>
+                <EditableUrl
+                    :prefix="itemUrl.prefix"
+                    :slug="itemUrl.slug"
+                    @change="onChangeSlug"
+                    @submit="onSubmitSlug" />
             </div>
             <div v-else class="mb-4">
                 Access to this {{ modelClass }} is currently restricted so that only you and the users listed below can
@@ -274,12 +249,10 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
 import axios from "axios";
 import BootstrapVue from "bootstrap-vue";
-import SlugInput from "components/Common/SlugInput";
 import { getAppRoot } from "onload/loadConfig";
 import { mapState } from "pinia";
-import { copy } from "utils/clipboard";
 import { errorMessageAsString } from "utils/simple-error";
-import Vue, { ref } from "vue";
+import Vue, { computed, reactive, ref, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useConfig } from "@/composables/config";
@@ -288,6 +261,7 @@ import { useUserStore } from "@/stores/userStore";
 import ErrorMessages from "./ErrorMessages";
 
 import Heading from "../Common/Heading.vue";
+import EditableUrl from "./EditableUrl.vue";
 
 Vue.use(BootstrapVue);
 library.add(faCopy, faEdit, faUserPlus, faUserSlash, faCaretDown, faCaretUp);
@@ -302,9 +276,9 @@ export default {
     components: {
         ErrorMessages,
         FontAwesomeIcon,
-        SlugInput,
         Multiselect,
         Heading,
+        EditableUrl,
     },
     props: {
         id: {
@@ -320,16 +294,79 @@ export default {
             required: true,
         },
     },
-    setup() {
+    setup(props) {
         const { config, isConfigLoaded } = useConfig(true);
 
         const errors = ref([]);
 
+        function addError(newError) {
+            // temporary turning Set into Array, until we update till Vue 3.0, that supports Set reactivity
+            errors.value = Array.from(new Set(errors.value).add(newError));
+        }
+
         function onErrorDismissed(index) {
             errors.value.splice(index, 1);
         }
 
-        return { config, isConfigLoaded, onErrorDismissed, errors };
+        const item = ref({
+            title: "title",
+            username_and_slug: "username/slug",
+            importable: false,
+            published: false,
+            users_shared_with: [],
+            extra: defaultExtra(),
+        });
+
+        const itemRoot = computed(() => {
+            const port = window.location.port ? `:${window.location.port}` : "";
+            return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}`;
+        });
+
+        const itemUrl = reactive({
+            prefix: "",
+            slug: "",
+        });
+
+        watch(
+            () => item.value.username_and_slug,
+            (value) => {
+                const index = value.lastIndexOf("/");
+
+                itemUrl.prefix = itemRoot.value + value.substring(0, index + 1);
+                itemUrl.slug = value.substring(index + 1);
+            },
+            { immediate: true }
+        );
+
+        const slugUrl = computed(() => `${getAppRoot()}api/${props.pluralName.toLowerCase()}/${props.id}/slug`);
+
+        function onChangeSlug(newValue) {
+            itemUrl.slug = newValue;
+        }
+
+        async function onSubmitSlug(newValue) {
+            itemUrl.slug = newValue;
+
+            try {
+                await axios.put(slugUrl.value, { new_slug: newValue });
+            } catch (e) {
+                addError(errorMessageAsString(e));
+            }
+        }
+
+        return {
+            config,
+            isConfigLoaded,
+            onErrorDismissed,
+            errors,
+            addError,
+            item,
+            itemRoot,
+            itemUrl,
+            onChangeSlug,
+            slugUrl,
+            onSubmitSlug,
+        };
     },
     data() {
         const Galaxy = getGalaxyInstance();
@@ -347,14 +384,6 @@ export default {
                 userOptions: [],
                 currentUserSearch: "",
             },
-            item: {
-                title: "title",
-                username_and_slug: "username/slug",
-                importable: false,
-                published: false,
-                users_shared_with: [],
-                extra: defaultExtra(),
-            },
             shareFields: ["email", { key: "id", label: "" }],
             makeMembersPublic: false,
             showUrl: true,
@@ -400,29 +429,9 @@ export default {
         itemStatus() {
             return this.item.published ? "accessible via link and published" : "accessible via link";
         },
-        itemRoot() {
-            const port = window.location.port ? `:${window.location.port}` : "";
-            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;
-            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)];
-        },
         published_url() {
             return `${getAppRoot()}${this.pluralNameLower}/list_published`;
         },
-        slugUrl() {
-            return `${getAppRoot()}api/${this.pluralNameLower}/${this.id}/slug`;
-        },
     },
     created: function () {
         this.getSharing();
@@ -448,20 +457,6 @@ export default {
         onError(axiosError) {
             this.addError(errorMessageAsString(axiosError));
         },
-        addError(newError) {
-            // temporary turning Set into Array, until we update till Vue 3.0, that supports Set reactivity
-            this.errors = Array.from(new Set(this.errors).add(newError));
-        },
-        onCopy() {
-            copy(this.itemUrl);
-            this.tooltipClipboard = "Copied!";
-        },
-        onCopyOut() {
-            this.tooltipClipboard = "Copy URL";
-        },
-        onEdit() {
-            this.showUrl = false;
-        },
         assignItem(newItem, overwriteCandidates) {
             if (newItem.errors) {
                 this.errors = newItem.errors;
@@ -476,16 +471,6 @@ export default {
 
             this.ready = true;
         },
-        onChange(newSlug) {
-            this.showUrl = true;
-            const requestUrl = `${this.slugUrl}`;
-            axios
-                .put(requestUrl, {
-                    new_slug: newSlug,
-                })
-                .then(() => (this.item.username_and_slug = `${this.itemSlugParts[0]}${newSlug}`))
-                .catch(this.onError);
-        },
         onImportable(importable) {
             if (importable) {
                 this.setSharing(this.actions.enable_link_access);
diff --git a/client/src/components/Sharing/SlugInput.vue b/client/src/components/Sharing/SlugInput.vue
new file mode 100644
index 000000000000..fc356dd4ad8f
--- /dev/null
+++ b/client/src/components/Sharing/SlugInput.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { BFormInput } from "bootstrap-vue";
+
+const props = defineProps<{
+    slug: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "change", newValue: string): void;
+}>();
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const initialSlug = props.slug;
+
+function onChange(value: string) {
+    const slugFormatted = value
+        .replace(/\s+/g, "-")
+        .replace(/[^a-zA-Z0-9-]/g, "")
+        .toLowerCase();
+
+    emit("change", slugFormatted);
+}
+
+function onCancel() {
+    emit("change", initialSlug);
+}
+</script>
+
+<template>
+    <BFormInput
+        :value="props.slug"
+        type="text"
+        class="d-inline w-auto h-auto px-1 py-0"
+        @change="onChange"
+        @keydown.esc="onCancel" />
+</template>

From b03d44054db459f5d37bdeb325a62d63674955b6 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 4 Sep 2023 17:04:06 +0200
Subject: [PATCH 09/24] add utility types

---
 .../{utilityTypes.d.ts => utilityTypes.ts}    | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)
 rename client/types/{utilityTypes.d.ts => utilityTypes.ts} (53%)

diff --git a/client/types/utilityTypes.d.ts b/client/types/utilityTypes.ts
similarity index 53%
rename from client/types/utilityTypes.d.ts
rename to client/types/utilityTypes.ts
index eb1d5ac0a366..ebf975fdd7ef 100644
--- a/client/types/utilityTypes.d.ts
+++ b/client/types/utilityTypes.ts
@@ -1,5 +1,5 @@
 /** length of const array or tuple */
-export type Length<T extends any[]> = T["length"];
+export type Length<T extends any[] | readonly any[]> = T["length"];
 
 /** build a tuple with length L, and type T */
 export type Tuple<L extends number, T = any, R extends T[] = []> = R extends { length: L } ? R : Tuple<L, T, [...R, T]>;
@@ -26,3 +26,31 @@ export type First<A extends readonly [...any]> = A[Length<A>];
 export type GetComponentPropTypes<
     T extends import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor
 > = InstanceType<T>["$props"];
+
+/** Convert snake case string literal to camel case string literal */
+export type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}`
+    ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
+    : S;
+
+/** Convert camel case string literal to snake case string literal */
+export type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}`
+    ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${CamelToSnakeCase<U>}`
+    : S;
+
+/** Converts an object type or interface to the same type with camel case keys */
+export type AsCamelCase<T> = T extends Array<any>
+    ? T
+    : T extends object
+    ? {
+          [K in keyof T as SnakeToCamelCase<K & string>]: AsCamelCase<T[K]>;
+      }
+    : T;
+
+/** Converts an object type or interface to the same type with snake case keys */
+export type AsSnakeCase<T> = T extends Array<any>
+    ? T
+    : T extends object
+    ? {
+          [K in keyof T as CamelToSnakeCase<K & string>]: AsSnakeCase<T[K]>;
+      }
+    : T;

From 2e0f7768af9ccd7dd2ee2ef6560b0411e2dde2b8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 5 Sep 2023 15:23:00 +0200
Subject: [PATCH 10/24] add user sharing component

---
 client/src/components/Sharing/Sharing.vue     |  12 +-
 client/src/components/Sharing/UserSharing.vue | 197 ++++++++++++++++++
 client/src/components/Sharing/item.ts         |  12 ++
 client/src/stores/userStore.ts                |   1 +
 client/src/utils/assertions.ts                |   7 +
 5 files changed, 228 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Sharing/UserSharing.vue
 create mode 100644 client/src/components/Sharing/item.ts

diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index 7a42cda62451..8b74bcc82685 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -44,6 +44,14 @@
                 access it. Note that sharing a History will also allow access to all of its datasets.
             </div>
 
+            <Heading h2 size="md"> Share {{ modelClass }} with Individual Users </Heading>
+
+            <UserSharing
+                :item="item"
+                :model-class="modelClass"
+                @share="(users) => setSharing(actions.share_with, users)"
+                @error="onError" />
+
             <b-card no-body>
                 <b-button
                     v-b-toggle.accordion-1
@@ -260,8 +268,9 @@ import { useUserStore } from "@/stores/userStore";
 
 import ErrorMessages from "./ErrorMessages";
 
-import Heading from "../Common/Heading.vue";
 import EditableUrl from "./EditableUrl.vue";
+import UserSharing from "./UserSharing.vue";
+import Heading from "@/components/Common/Heading.vue";
 
 Vue.use(BootstrapVue);
 library.add(faCopy, faEdit, faUserPlus, faUserSlash, faCaretDown, faCaretUp);
@@ -279,6 +288,7 @@ export default {
         Multiselect,
         Heading,
         EditableUrl,
+        UserSharing,
     },
     props: {
         id: {
diff --git a/client/src/components/Sharing/UserSharing.vue b/client/src/components/Sharing/UserSharing.vue
new file mode 100644
index 000000000000..a73a845946b0
--- /dev/null
+++ b/client/src/components/Sharing/UserSharing.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import axios from "axios";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+import Multiselect from "vue-multiselect";
+
+import { useConfig } from "@/composables/config";
+import { getAppRoot } from "@/onload";
+import { useUserStore } from "@/stores/userStore";
+import { assertArray } from "@/utils/assertions";
+
+import type { Item } from "./item";
+
+const props = defineProps<{
+    item: Item;
+    modelClass: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "share", userIds: string[], shareOption?: object): void;
+    (e: "error", error: Error): void;
+}>();
+
+const { currentUser } = storeToRefs(useUserStore());
+const { config, isConfigLoaded } = useConfig(false);
+
+const permissionsChangeRequired = computed(() => {
+    if (props.item.extra) {
+        return props.item.extra.can_change.length > 0 || props.item.extra.cannot_change.length > 0;
+    } else {
+        return false;
+    }
+});
+
+const userIsAdmin = computed(() => currentUser.value && "is_admin" in currentUser.value && currentUser.value.is_admin);
+const exposeEmails = computed(() => config.value.expose_user_email || userIsAdmin.value);
+
+const sharingCandidates = ref<Array<{ email: string }>>([]);
+const sharingCandidatesAsEmails = computed(() => sharingCandidates.value.map(({ email }) => email));
+
+watch(
+    () => props.item.users_shared_with,
+    (users) => {
+        sharingCandidates.value = [...users];
+    },
+    { immediate: true }
+);
+
+const userOptions = ref<Array<{ email: string }>>([]);
+const currentSearch = ref("");
+
+async function onSearchChanged(searchValue: string) {
+    currentSearch.value = searchValue;
+    if (!exposeEmails.value) {
+        userOptions.value = [{ email: searchValue }];
+    } else if (searchValue.length < 3) {
+        userOptions.value = [];
+    } else {
+        try {
+            const response = await axios.get(`${getAppRoot()}api/users?f_email=${searchValue}`);
+            const data = response.data;
+            assertArray(data);
+
+            userOptions.value = (data as Array<{ email: string }>).filter(
+                (value) =>
+                    value &&
+                    typeof value === "object" &&
+                    "email" in value &&
+                    typeof value.email === "string" &&
+                    !sharingCandidatesAsEmails.value.includes(value.email)
+            );
+        } catch (e) {
+            emit("error", e as Error);
+        }
+    }
+}
+
+function onBlur() {
+    const isValueChosen = sharingCandidates.value.some(({ email }) => email === currentSearch.value);
+
+    if (currentSearch.value && !sharingCandidatesAsEmails.value && !isValueChosen) {
+        sharingCandidates.value.push({ email: currentSearch.value });
+    }
+}
+
+function onRemove(user: { email: string }) {
+    const index = sharingCandidates.value.indexOf(user);
+
+    if (index >= 0) {
+        sharingCandidates.value.splice(index, 1);
+    }
+}
+
+const charactersThresholdWarning = "Enter at least 3 characters to see suggestions";
+const elementsNotFoundWarning = "No elements found. Consider changing the search query";
+
+function onCancel() {
+    sharingCandidates.value = [...props.item.users_shared_with];
+}
+
+function onSubmit() {
+    emit("share", sharingCandidatesAsEmails.value);
+}
+
+const noChanges = computed(() => {
+    const candidates = [...sharingCandidatesAsEmails.value];
+    const sharedWith = [...props.item.users_shared_with.map(({ email }) => email)];
+
+    const newCandidates = candidates.filter((email) => !sharedWith.includes(email));
+    const removedShared = sharedWith.filter((email) => !candidates.includes(email));
+
+    return !(newCandidates.length !== 0 || removedShared.length !== 0);
+});
+</script>
+
+<template>
+    <div class="user-sharing">
+        <div v-if="currentUser && isConfigLoaded && !permissionsChangeRequired">
+            <p v-if="props.item.users_shared_with.length === 0">
+                You have not shared this {{ props.modelClass }} with any users.
+            </p>
+            <p v-else>
+                The following users will see this {{ modelClass }} in their {{ modelClass }} list and will be able to
+                view, import and run it.
+            </p>
+
+            <div class="share_with_view">
+                <Multiselect
+                    v-model="sharingCandidates"
+                    :options="userOptions"
+                    :clear-on-select="true"
+                    :multiple="true"
+                    :internal-search="false"
+                    :max-height="exposeEmails ? 300 : 0"
+                    label="email"
+                    tack-by="email"
+                    placeholder="Please specify user email"
+                    @remove="onRemove"
+                    @search-change="onSearchChanged"
+                    @close="onBlur">
+                    <template v-if="!sharingCandidates" slot="caret">
+                        <div></div>
+                    </template>
+
+                    <template v-slot:tag="{ option, remove }">
+                        <span class="multiselect__tag remove_sharing_with" :data-email="option.email">
+                            <span>{{ option.email }}</span>
+                            <i
+                                aria-hidden="true"
+                                tabindex="0"
+                                class="multiselect__tag-icon"
+                                @click="remove(option)"></i>
+                        </span>
+                    </template>
+
+                    <template v-if="sharingCandidates" slot="noResult">
+                        <div v-if="currentSearch.length < 3">
+                            {{ charactersThresholdWarning }}
+                        </div>
+                        <div v-else>
+                            {{ elementsNotFoundWarning }}
+                        </div>
+                    </template>
+
+                    <template slot="noOptions">
+                        <div v-if="currentSearch.length < 3">
+                            {{ charactersThresholdWarning }}
+                        </div>
+                        <div v-else>
+                            {{ elementsNotFoundWarning }}
+                        </div>
+                    </template>
+                </Multiselect>
+
+                <div class="share-with-card-buttons">
+                    <BButton class="cancel-sharing-with" :disabled="noChanges" @click="onCancel"> Cancel </BButton>
+                    <BButton variant="primary" class="submit-sharing-with" :disabled="noChanges" @click="onSubmit">
+                        {{ currentSearch ? `Add` : `Save` }}
+                    </BButton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.user-sharing {
+    // removes content shifting
+    &:deep(.multiselect__input) {
+        padding-left: 0;
+        padding-top: 2px;
+        margin-bottom: 10px;
+        font-size: 14px;
+    }
+}
+</style>
diff --git a/client/src/components/Sharing/item.ts b/client/src/components/Sharing/item.ts
new file mode 100644
index 000000000000..eb5dee581703
--- /dev/null
+++ b/client/src/components/Sharing/item.ts
@@ -0,0 +1,12 @@
+export interface Item {
+    title: string;
+    username_and_slug: `${string}/${string}`;
+    importable: boolean;
+    published: boolean;
+    users_shared_with: Array<{ email: string }>;
+    extra?: {
+        cannot_change: unknown[];
+        can_change: unknown[];
+        can_share: boolean;
+    };
+}
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 3cfbfdb8ad82..e0329a4db7e3 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -18,6 +18,7 @@ export interface User extends QuotaUsageResponse {
     email: string;
     tags_used: string[];
     isAnonymous: false;
+    is_admin?: boolean;
 }
 
 export interface AnonymousUser {
diff --git a/client/src/utils/assertions.ts b/client/src/utils/assertions.ts
index 98ccdd0fe346..02092e1ad0ef 100644
--- a/client/src/utils/assertions.ts
+++ b/client/src/utils/assertions.ts
@@ -24,3 +24,10 @@ export function ensureDefined<T>(value: T, error?: string | Error): NonNullable<
     assertDefined(value, error);
     return value;
 }
+
+export function assertArray(value: unknown, error?: string | Error): asserts value is Array<unknown> {
+    if (!(typeof value === "object" && Array.isArray(value))) {
+        const message = error ?? TypeError(`Value is not an Array`);
+        throw message instanceof Error ? message : TypeError(message);
+    }
+}

From 7fdea56a7e413e2df493eba7901e632c6bb8b525 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 5 Sep 2023 16:21:16 +0200
Subject: [PATCH 11/24] add share options

---
 client/src/components/Sharing/Sharing.vue     |  2 +-
 client/src/components/Sharing/UserSharing.vue | 89 ++++++++++++++++++-
 client/src/components/Sharing/item.ts         |  6 +-
 3 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index 8b74bcc82685..20db536a7e0b 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -49,7 +49,7 @@
             <UserSharing
                 :item="item"
                 :model-class="modelClass"
-                @share="(users) => setSharing(actions.share_with, users)"
+                @share="(users, option) => setSharing(actions.share_with, users, option)"
                 @error="onError" />
 
             <b-card no-body>
diff --git a/client/src/components/Sharing/UserSharing.vue b/client/src/components/Sharing/UserSharing.vue
index a73a845946b0..5897aec3dc98 100644
--- a/client/src/components/Sharing/UserSharing.vue
+++ b/client/src/components/Sharing/UserSharing.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BButton } from "bootstrap-vue";
+import { BAlert, BButton, BCard, BCardHeader, BCol, BCollapse, BListGroup, BListGroupItem, BRow } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import Multiselect from "vue-multiselect";
@@ -10,7 +10,7 @@ import { getAppRoot } from "@/onload";
 import { useUserStore } from "@/stores/userStore";
 import { assertArray } from "@/utils/assertions";
 
-import type { Item } from "./item";
+import type { Item, ShareOption } from "./item";
 
 const props = defineProps<{
     item: Item;
@@ -18,7 +18,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    (e: "share", userIds: string[], shareOption?: object): void;
+    (e: "share", userIds: string[], shareOption?: ShareOption): void;
     (e: "error", error: Error): void;
 }>();
 
@@ -112,6 +112,21 @@ const noChanges = computed(() => {
 
     return !(newCandidates.length !== 0 || removedShared.length !== 0);
 });
+
+const canChangeCount = computed(() => props.item.extra?.can_change.length ?? 0);
+const cannotChangeCount = computed(() => props.item.extra?.cannot_change.length ?? 0);
+
+function onMakePublic() {
+    emit("share", sharingCandidatesAsEmails.value, "make_public");
+}
+
+function onMakePrivate() {
+    emit("share", sharingCandidatesAsEmails.value, "make_accessible_to_shared");
+}
+
+function onShareAnyway() {
+    emit("share", sharingCandidatesAsEmails.value, "no_changes");
+}
 </script>
 
 <template>
@@ -150,7 +165,8 @@ const noChanges = computed(() => {
                                 aria-hidden="true"
                                 tabindex="0"
                                 class="multiselect__tag-icon"
-                                @click="remove(option)"></i>
+                                @click="remove(option)"
+                                @keyup.enter.space="remove(option)"></i>
                         </span>
                     </template>
 
@@ -181,6 +197,71 @@ const noChanges = computed(() => {
                 </div>
             </div>
         </div>
+
+        <BAlert variant="warning" dismissible fade :show="permissionsChangeRequired">
+            {{
+                canChangeCount > 0
+                    ? `${canChangeCount} datasets are exclusively private to you`
+                    : `You are not authorized to share ${cannotChangeCount} datasets`
+            }}
+        </BAlert>
+
+        <BRow v-if="permissionsChangeRequired">
+            <BCol v-if="canChangeCount > 0">
+                <BCard>
+                    <BCardHeader header-tag="header" class="p-1" role="tab">
+                        <BButton v-b-toggle.can-share block variant="warning">
+                            Datasets can be shared by updating their permissions
+                        </BButton>
+                    </BCardHeader>
+
+                    <BCollapse id="can-share" visible accordion="can-share-accordion" role="tabpanel">
+                        <BListGroup>
+                            <BListGroupItem v-for="dataset in props.item.extra?.can_change ?? []" :key="dataset.id">
+                                {{ dataset.name }}
+                            </BListGroupItem>
+                        </BListGroup>
+                    </BCollapse>
+                </BCard>
+            </BCol>
+
+            <BCol v-if="cannotChangeCount > 0">
+                <BCard>
+                    <BCardHeader header-tag="header" class="p-1" role="tab">
+                        <BButton v-b-toggle.cannot-share block variant="danger">
+                            Datasets cannot be shared, you are not authorized to change permissions
+                        </BButton>
+                    </BCardHeader>
+
+                    <BCollapse id="cannot-share" visible accordion="cannot-accordion" role="tabpanel">
+                        <BListGroup>
+                            <BListGroupItem v-for="dataset in props.item.extra?.cannot_change ?? []" :key="dataset.id">
+                                {{ dataset.name }}
+                            </BListGroupItem>
+                        </BListGroup>
+                    </BCollapse>
+                </BCard>
+            </BCol>
+
+            <BCol>
+                <BCard
+                    border-variant="primary"
+                    header="How would you like to proceed?"
+                    header-bg-variant="primary"
+                    header-text-variant="white">
+                    <BButton v-if="canChangeCount > 0" block @click="onMakePublic"> Make datasets public </BButton>
+
+                    <BButton v-if="canChangeCount > 0" block @click="onMakePrivate">
+                        Make datasets private to me and
+                        {{ sharingCandidatesAsEmails.join() }}
+                    </BButton>
+
+                    <BButton block @click="onShareAnyway"> Share Anyway </BButton>
+
+                    <BButton block variant="warning" @click="onCancel"> Cancel </BButton>
+                </BCard>
+            </BCol>
+        </BRow>
     </div>
 </template>
 
diff --git a/client/src/components/Sharing/item.ts b/client/src/components/Sharing/item.ts
index eb5dee581703..10f805384340 100644
--- a/client/src/components/Sharing/item.ts
+++ b/client/src/components/Sharing/item.ts
@@ -5,8 +5,10 @@ export interface Item {
     published: boolean;
     users_shared_with: Array<{ email: string }>;
     extra?: {
-        cannot_change: unknown[];
-        can_change: unknown[];
+        cannot_change: Array<{ id: string; name: string }>;
+        can_change: Array<{ id: string; name: string }>;
         can_share: boolean;
     };
 }
+
+export type ShareOption = "make_public" | "make_accessible_to_shared" | "no_changes";

From 659927bcaf94a654945af8a0a52af25f791ac12e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:35:54 +0200
Subject: [PATCH 12/24] move permissions change to modal

---
 client/src/components/Sharing/Sharing.vue     |  11 +-
 client/src/components/Sharing/UserSharing.vue | 164 ++++++++++--------
 client/src/components/Sharing/item.ts         |   5 +-
 3 files changed, 97 insertions(+), 83 deletions(-)

diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index 20db536a7e0b..265a4f4fd6ce 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -50,7 +50,8 @@
                 :item="item"
                 :model-class="modelClass"
                 @share="(users, option) => setSharing(actions.share_with, users, option)"
-                @error="onError" />
+                @error="onError"
+                @cancel="getSharing" />
 
             <b-card no-body>
                 <b-button
@@ -340,10 +341,12 @@ export default {
         watch(
             () => item.value.username_and_slug,
             (value) => {
-                const index = value.lastIndexOf("/");
+                if (value) {
+                    const index = value.lastIndexOf("/");
 
-                itemUrl.prefix = itemRoot.value + value.substring(0, index + 1);
-                itemUrl.slug = value.substring(index + 1);
+                    itemUrl.prefix = itemRoot.value + value.substring(0, index + 1);
+                    itemUrl.slug = value.substring(index + 1);
+                }
             },
             { immediate: true }
         );
diff --git a/client/src/components/Sharing/UserSharing.vue b/client/src/components/Sharing/UserSharing.vue
index 5897aec3dc98..b707900b4a6a 100644
--- a/client/src/components/Sharing/UserSharing.vue
+++ b/client/src/components/Sharing/UserSharing.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BAlert, BButton, BCard, BCardHeader, BCol, BCollapse, BListGroup, BListGroupItem, BRow } from "bootstrap-vue";
+import {
+    BAlert,
+    BButton,
+    BCard,
+    BCardGroup,
+    BFormSelect,
+    BFormSelectOption,
+    BListGroup,
+    BListGroupItem,
+    BModal,
+} from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import Multiselect from "vue-multiselect";
@@ -12,6 +22,8 @@ import { assertArray } from "@/utils/assertions";
 
 import type { Item, ShareOption } from "./item";
 
+import Heading from "../Common/Heading.vue";
+
 const props = defineProps<{
     item: Item;
     modelClass: string;
@@ -20,6 +32,7 @@ const props = defineProps<{
 const emit = defineEmits<{
     (e: "share", userIds: string[], shareOption?: ShareOption): void;
     (e: "error", error: Error): void;
+    (e: "cancel"): void;
 }>();
 
 const { currentUser } = storeToRefs(useUserStore());
@@ -42,7 +55,7 @@ const sharingCandidatesAsEmails = computed(() => sharingCandidates.value.map(({
 watch(
     () => props.item.users_shared_with,
     (users) => {
-        sharingCandidates.value = [...users];
+        sharingCandidates.value = [...(users ?? [])];
     },
     { immediate: true }
 );
@@ -79,7 +92,7 @@ async function onSearchChanged(searchValue: string) {
 function onBlur() {
     const isValueChosen = sharingCandidates.value.some(({ email }) => email === currentSearch.value);
 
-    if (currentSearch.value && !sharingCandidatesAsEmails.value && !isValueChosen) {
+    if (currentSearch.value && !exposeEmails.value && !isValueChosen) {
         sharingCandidates.value.push({ email: currentSearch.value });
     }
 }
@@ -96,7 +109,8 @@ const charactersThresholdWarning = "Enter at least 3 characters to see suggestio
 const elementsNotFoundWarning = "No elements found. Consider changing the search query";
 
 function onCancel() {
-    sharingCandidates.value = [...props.item.users_shared_with];
+    sharingCandidates.value = [...(props.item.users_shared_with ?? [])];
+    emit("cancel");
 }
 
 function onSubmit() {
@@ -105,7 +119,7 @@ function onSubmit() {
 
 const noChanges = computed(() => {
     const candidates = [...sharingCandidatesAsEmails.value];
-    const sharedWith = [...props.item.users_shared_with.map(({ email }) => email)];
+    const sharedWith = [...(props.item.users_shared_with ?? []).map(({ email }) => email)];
 
     const newCandidates = candidates.filter((email) => !sharedWith.includes(email));
     const removedShared = sharedWith.filter((email) => !candidates.includes(email));
@@ -116,23 +130,17 @@ const noChanges = computed(() => {
 const canChangeCount = computed(() => props.item.extra?.can_change.length ?? 0);
 const cannotChangeCount = computed(() => props.item.extra?.cannot_change.length ?? 0);
 
-function onMakePublic() {
-    emit("share", sharingCandidatesAsEmails.value, "make_public");
-}
-
-function onMakePrivate() {
-    emit("share", sharingCandidatesAsEmails.value, "make_accessible_to_shared");
-}
+const selectedSharingOption = ref<ShareOption>("make_public");
 
-function onShareAnyway() {
-    emit("share", sharingCandidatesAsEmails.value, "no_changes");
+function onUpdatePermissions() {
+    emit("share", sharingCandidatesAsEmails.value, selectedSharingOption.value);
 }
 </script>
 
 <template>
     <div class="user-sharing">
-        <div v-if="currentUser && isConfigLoaded && !permissionsChangeRequired">
-            <p v-if="props.item.users_shared_with.length === 0">
+        <div v-if="currentUser && isConfigLoaded">
+            <p v-if="props.item.users_shared_with?.length === 0">
                 You have not shared this {{ props.modelClass }} with any users.
             </p>
             <p v-else>
@@ -198,70 +206,68 @@ function onShareAnyway() {
             </div>
         </div>
 
-        <BAlert variant="warning" dismissible fade :show="permissionsChangeRequired">
-            {{
-                canChangeCount > 0
-                    ? `${canChangeCount} datasets are exclusively private to you`
-                    : `You are not authorized to share ${cannotChangeCount} datasets`
-            }}
-        </BAlert>
-
-        <BRow v-if="permissionsChangeRequired">
-            <BCol v-if="canChangeCount > 0">
-                <BCard>
-                    <BCardHeader header-tag="header" class="p-1" role="tab">
-                        <BButton v-b-toggle.can-share block variant="warning">
-                            Datasets can be shared by updating their permissions
-                        </BButton>
-                    </BCardHeader>
-
-                    <BCollapse id="can-share" visible accordion="can-share-accordion" role="tabpanel">
-                        <BListGroup>
-                            <BListGroupItem v-for="dataset in props.item.extra?.can_change ?? []" :key="dataset.id">
-                                {{ dataset.name }}
-                            </BListGroupItem>
-                        </BListGroup>
-                    </BCollapse>
-                </BCard>
-            </BCol>
-
-            <BCol v-if="cannotChangeCount > 0">
-                <BCard>
-                    <BCardHeader header-tag="header" class="p-1" role="tab">
-                        <BButton v-b-toggle.cannot-share block variant="danger">
-                            Datasets cannot be shared, you are not authorized to change permissions
-                        </BButton>
-                    </BCardHeader>
-
-                    <BCollapse id="cannot-share" visible accordion="cannot-accordion" role="tabpanel">
-                        <BListGroup>
-                            <BListGroupItem v-for="dataset in props.item.extra?.cannot_change ?? []" :key="dataset.id">
-                                {{ dataset.name }}
-                            </BListGroupItem>
-                        </BListGroup>
-                    </BCollapse>
+        <BModal
+            :visible="permissionsChangeRequired"
+            size="xl"
+            no-close-on-backdrop
+            scrollable
+            dialog-class="user-sharing-modal"
+            @ok="onUpdatePermissions"
+            @cancel="onCancel"
+            @close="onCancel">
+            <template v-slot:modal-title>
+                <Heading inline h2 size="md"> Permissions Change Required </Heading>
+            </template>
+
+            <BAlert variant="warning" dismissible :show="permissionsChangeRequired && canChangeCount > 0">
+                This {{ modelClass }} contains {{ canChangeCount }}
+                {{ canChangeCount === 1 ? "dataset which is" : "datasets which are" }} exclusively private to you. You
+                need to update {{ canChangeCount === 1 ? "its" : "their" }} permissions, in order to share
+                {{ canChangeCount === 1 ? "it" : "them" }}.
+            </BAlert>
+
+            <BAlert variant="danger" dismissible :show="permissionsChangeRequired && cannotChangeCount > 0">
+                This {{ modelClass }} contains {{ cannotChangeCount }}
+                {{ cannotChangeCount === 1 ? "dataset" : "datasets" }} which you are not authorized to share.
+            </BAlert>
+
+            <BCard
+                border-variant="primary"
+                header="How would you like to proceed?"
+                header-bg-variant="primary"
+                header-text-variant="white"
+                class="mb-4">
+                <BFormSelect v-model="selectedSharingOption">
+                    <BFormSelectOption value="make_public"> Make datasets public </BFormSelectOption>
+                    <BFormSelectOption value="make_accessible_and_shared">
+                        Make datasets private to me and users this {{ modelClass }} is shared with
+                    </BFormSelectOption>
+                    <BFormSelectOption value="no_changes"> Share {{ modelClass }} anyways </BFormSelectOption>
+                </BFormSelect>
+            </BCard>
+
+            <BCardGroup deck>
+                <BCard
+                    v-if="canChangeCount > 0"
+                    header="The following datasets can be shared by updating their permissions">
+                    <BListGroup>
+                        <BListGroupItem v-for="dataset in props.item.extra?.can_change ?? []" :key="dataset.id">
+                            {{ dataset.name }}
+                        </BListGroupItem>
+                    </BListGroup>
                 </BCard>
-            </BCol>
 
-            <BCol>
                 <BCard
-                    border-variant="primary"
-                    header="How would you like to proceed?"
-                    header-bg-variant="primary"
-                    header-text-variant="white">
-                    <BButton v-if="canChangeCount > 0" block @click="onMakePublic"> Make datasets public </BButton>
-
-                    <BButton v-if="canChangeCount > 0" block @click="onMakePrivate">
-                        Make datasets private to me and
-                        {{ sharingCandidatesAsEmails.join() }}
-                    </BButton>
-
-                    <BButton block @click="onShareAnyway"> Share Anyway </BButton>
-
-                    <BButton block variant="warning" @click="onCancel"> Cancel </BButton>
+                    v-if="cannotChangeCount > 0"
+                    header="The following datasets cannot be shared, you are not authorized to change their permissions">
+                    <BListGroup>
+                        <BListGroupItem v-for="dataset in props.item.extra?.cannot_change ?? []" :key="dataset.id">
+                            {{ dataset.name }}
+                        </BListGroupItem>
+                    </BListGroup>
                 </BCard>
-            </BCol>
-        </BRow>
+            </BCardGroup>
+        </BModal>
     </div>
 </template>
 
@@ -276,3 +282,9 @@ function onShareAnyway() {
     }
 }
 </style>
+
+<style>
+.user-sharing-modal {
+    width: 100%;
+}
+</style>
diff --git a/client/src/components/Sharing/item.ts b/client/src/components/Sharing/item.ts
index 10f805384340..d8dc5efaacec 100644
--- a/client/src/components/Sharing/item.ts
+++ b/client/src/components/Sharing/item.ts
@@ -1,13 +1,12 @@
 export interface Item {
     title: string;
-    username_and_slug: `${string}/${string}`;
+    username_and_slug?: `${string}/${string}`;
     importable: boolean;
     published: boolean;
-    users_shared_with: Array<{ email: string }>;
+    users_shared_with?: Array<{ email: string }>;
     extra?: {
         cannot_change: Array<{ id: string; name: string }>;
         can_change: Array<{ id: string; name: string }>;
-        can_share: boolean;
     };
 }
 

From 5c57e53b5500ddb455cacdf9557a7be2b90d8223 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 13:45:40 +0200
Subject: [PATCH 13/24] convert sharing to typescript

---
 client/src/components/Sharing/Sharing.vue     | 758 ++++++------------
 client/src/components/Sharing/UserSharing.vue |  18 +-
 client/src/components/Sharing/item.ts         |   1 +
 3 files changed, 234 insertions(+), 543 deletions(-)

diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/Sharing.vue
index 265a4f4fd6ce..e32e2bbb7de4 100644
--- a/client/src/components/Sharing/Sharing.vue
+++ b/client/src/components/Sharing/Sharing.vue
@@ -1,3 +1,224 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretUp, faCopy, faEdit, faUserPlus, faUserSlash } from "@fortawesome/free-solid-svg-icons";
+import axios from "axios";
+import { computed, nextTick, reactive, ref, watch } from "vue";
+
+import { getGalaxyInstance } from "@/app";
+import { useToast } from "@/composables/toast";
+import { getAppRoot } from "@/onload/loadConfig";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import type { Item, ShareOption } from "./item";
+
+import EditableUrl from "./EditableUrl.vue";
+import ErrorMessages from "./ErrorMessages.vue";
+import UserSharing from "./UserSharing.vue";
+import Heading from "@/components/Common/Heading.vue";
+
+library.add(faCopy, faEdit, faUserPlus, faUserSlash, faCaretDown, faCaretUp);
+
+const props = defineProps<{
+    id: string;
+    pluralName: string;
+    modelClass: string;
+}>();
+
+const errors = ref<string[]>([]);
+
+function addError(newError: string) {
+    // temporary turning Set into Array, until we update till Vue 3.0, that supports Set reactivity
+    errors.value = Array.from(new Set(errors.value).add(newError));
+}
+
+function onErrorDismissed(index: number) {
+    errors.value.splice(index, 1);
+}
+
+const defaultExtra = () =>
+    ({
+        can_change: [],
+        cannot_change: [],
+    } as Item["extra"]);
+
+const item = ref<Item>({
+    title: "title",
+    username_and_slug: "username/slug",
+    importable: false,
+    published: false,
+    users_shared_with: [],
+    extra: defaultExtra(),
+});
+
+const itemRoot = computed(() => {
+    const port = window.location.port ? `:${window.location.port}` : "";
+    return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}`;
+});
+
+const itemUrl = reactive({
+    prefix: "",
+    slug: "",
+});
+
+watch(
+    () => item.value.username_and_slug,
+    (value) => {
+        if (value) {
+            const index = value.lastIndexOf("/");
+
+            itemUrl.prefix = itemRoot.value + value.substring(0, index + 1);
+            itemUrl.slug = value.substring(index + 1);
+        }
+    },
+    { immediate: true }
+);
+
+const slugUrl = computed(() => `${getAppRoot()}api/${props.pluralName.toLowerCase()}/${props.id}/slug`);
+
+function onChangeSlug(newValue: string) {
+    itemUrl.slug = newValue;
+}
+
+async function onSubmitSlug(newValue: string) {
+    itemUrl.slug = newValue;
+
+    try {
+        await axios.put(slugUrl.value, { new_slug: newValue });
+    } catch (e) {
+        onError(e);
+    }
+}
+
+const itemStatus = computed(() => (item.value.published ? "accessible via link and published" : "accessible via link"));
+const publishedUrl = computed(() => `${getAppRoot()}${props.pluralName.toLocaleLowerCase()}/list_published`);
+
+function onError(axiosError: unknown) {
+    addError(errorMessageAsString(axiosError));
+}
+
+const ready = ref(false);
+
+async function getSharing() {
+    ready.value = false;
+    try {
+        const response = await axios.get(
+            `${getAppRoot()}api/${props.pluralName.toLocaleLowerCase()}/${props.id}/sharing`
+        );
+        assignItem(response.data, true);
+    } catch (e) {
+        onError(e);
+    }
+}
+
+getSharing();
+
+function permissionsChangeRequired(data: Item) {
+    if (data.extra) {
+        return data.extra.can_change.length > 0 || data.extra.cannot_change.length > 0;
+    } else {
+        return false;
+    }
+}
+
+const actions = {
+    enableLinkAccess: "enable_link_access",
+    disableLinkAccess: "disable_link_access",
+    publish: "publish",
+    unpublish: "unpublish",
+    share_with: "share_with_users",
+} as const;
+
+const { success } = useToast();
+
+async function setSharing(
+    action: (typeof actions)[keyof typeof actions],
+    userId?: string | string[],
+    shareOption?: ShareOption
+) {
+    let userIds: string[] | undefined;
+    if (Array.isArray(userId)) {
+        userIds = userId;
+    } else {
+        userIds = userId ? userId.replace(/ /g, "").split(",") : undefined;
+    }
+
+    const data = {
+        user_ids: userIds,
+        share_option: shareOption ? shareOption : undefined,
+    };
+
+    try {
+        const response = await axios.put(
+            `${getAppRoot()}api/${props.pluralName.toLocaleLowerCase()}/${props.id}/${action}`,
+            data
+        );
+
+        errors.value = [];
+        const userIdsSaved = userIds && !permissionsChangeRequired(response.data) && response.data.errors.length === 0;
+        assignItem(response.data, userIdsSaved ?? false);
+
+        if (!permissionsChangeRequired(response.data)) {
+            success("Sharing preferences saved");
+        }
+    } catch (e) {
+        onError(e);
+    }
+}
+
+const userSharing = ref<InstanceType<typeof UserSharing>>();
+
+async function assignItem(newItem: Item, overwriteCandidates: boolean) {
+    if (newItem.errors) {
+        errors.value = newItem.errors;
+    }
+    item.value = newItem;
+
+    if ((!item.value.extra || newItem.errors?.length) ?? 0 > 0) {
+        item.value.extra = defaultExtra();
+    }
+
+    if (overwriteCandidates) {
+        await nextTick();
+        //@ts-ignore incorrect property not found error
+        userSharing.value?.reset();
+    }
+
+    ready.value = true;
+}
+
+function onImportable(importable: boolean) {
+    if (importable) {
+        setSharing(actions.enableLinkAccess);
+    } else {
+        item.value.published = false;
+        setSharing(actions.disableLinkAccess);
+    }
+}
+function onPublish(published: boolean) {
+    if (published) {
+        item.value.importable = true;
+        setSharing(actions.publish);
+    } else {
+        setSharing(actions.unpublish);
+    }
+}
+
+const hasUsername = ref(Boolean(getGalaxyInstance().user.get("username")));
+const newUsername = ref("");
+
+async function setUsername() {
+    axios
+        .put(`${getAppRoot()}api/users/${getGalaxyInstance().user.id}/information/inputs`, {
+            username: newUsername.value || "",
+        })
+        .then((response) => {
+            hasUsername.value = true;
+            getSharing();
+        })
+        .catch(onError);
+}
+</script>
+
 <template>
     <div>
         <Heading h1 size="lg" separator>
@@ -26,7 +247,7 @@
                     switch
                     @change="onPublish">
                     Make {{ modelClass }} publicly available in
-                    <a :href="published_url" target="_top">Published {{ pluralName }}</a>
+                    <a :href="publishedUrl" target="_top">Published {{ pluralName }}</a>
                 </b-form-checkbox>
             </div>
 
@@ -47,545 +268,14 @@
             <Heading h2 size="md"> Share {{ modelClass }} with Individual Users </Heading>
 
             <UserSharing
+                ref="userSharing"
                 :item="item"
                 :model-class="modelClass"
                 @share="(users, option) => setSharing(actions.share_with, users, option)"
                 @error="onError"
                 @cancel="getSharing" />
-
-            <b-card no-body>
-                <b-button
-                    v-b-toggle.accordion-1
-                    class="share-with-collapse"
-                    variant="light"
-                    @click="isCollapseVisible = !isCollapseVisible">
-                    Share {{ modelClass }} with Individual Users
-                    <FontAwesomeIcon :icon="isCollapseVisible ? `caret-up` : `caret-down`" />
-                </b-button>
-                <b-collapse id="accordion-1" accordion="main-accordion" role="tabpanel">
-                    <div v-if="currentUser && isConfigLoaded && !permissionsChangeRequired(item)">
-                        <p v-if="item.users_shared_with.length === 0" class="share_with_title">
-                            You have not shared this {{ modelClass }} with any users.
-                        </p>
-                        <p v-else class="share_with_title">
-                            The following users will see this {{ modelClass }} in their {{ modelClass }} list and will
-                            be able to view, import and run it.
-                        </p>
-
-                        <b-alert
-                            :show="dismissCountDown"
-                            dismissible
-                            class="success-alert"
-                            variant="success"
-                            @dismissed="dismissCountDown = 0"
-                            @dismiss-count-down="dismissCountDown = $event">
-                            Sharing preferences are saved!
-                        </b-alert>
-
-                        <div class="share_with_view">
-                            <Multiselect
-                                v-model="multiselectValues.sharingCandidates"
-                                :options="multiselectValues.userOptions"
-                                :clear-on-select="true"
-                                :multiple="true"
-                                :internal-search="false"
-                                :max-height="config.expose_user_email || currentUser.is_admin ? 300 : 0"
-                                label="email"
-                                track-by="email"
-                                placeholder="Please specify user email"
-                                @close="onMultiselectBlur(config.expose_user_email || currentUser.is_admin)"
-                                @search-change="
-                                    searchChanged($event, config.expose_user_email || currentUser.is_admin)
-                                ">
-                                <template v-if="!(config.expose_user_email || currentUser.is_admin)" slot="caret">
-                                    <div></div>
-                                </template>
-                                <template v-if="config.expose_user_email || currentUser.is_admin" slot="noResult">
-                                    <div v-if="threeCharactersEntered">
-                                        {{ elementsNotFoundWarning }}
-                                    </div>
-                                    <div v-else>{{ charactersThresholdWarning }}</div>
-                                </template>
-                                <template slot="tag" slot-scope="{ option, remove }">
-                                    <span class="multiselect__tag remove_sharing_with" :data-email="option.email">
-                                        <span>{{ option.email }}</span>
-                                        <i
-                                            aria-hidden="true"
-                                            tabindex="0"
-                                            class="multiselect__tag-icon"
-                                            @click="remove(option)"></i>
-                                    </span>
-                                </template>
-                                <template slot="noOptions">
-                                    <div v-if="threeCharactersEntered">
-                                        {{ charactersThresholdWarning }}
-                                    </div>
-                                    <div v-else>
-                                        {{ elementsNotFoundWarning }}
-                                    </div>
-                                </template>
-                            </Multiselect>
-                            <div class="share-with-card-buttons">
-                                <!--submit/cancel buttons-->
-                                <b-button
-                                    variant="outline-danger"
-                                    class="sharing_icon cancel-sharing-with"
-                                    @click="getSharing()">
-                                    Cancel
-                                </b-button>
-                                <b-button
-                                    v-b-tooltip.hover.bottom
-                                    variant="outline-primary"
-                                    :disabled="!(sharedWithUsersChanged || !!multiselectValues.currentUserSearch)"
-                                    :title="submitBtnTitle"
-                                    class="sharing_icon submit-sharing-with"
-                                    @click.stop="
-                                        setSharing(
-                                            actions.share_with,
-                                            multiselectValues.sharingCandidates.map(({ email }) => email)
-                                        )
-                                    ">
-                                    {{ multiselectValues.currentUserSearch ? `Add` : `Save` }}
-                                </b-button>
-                            </div>
-                        </div>
-                    </div>
-                    <b-alert variant="warning" dismissible fade :show="permissionsChangeRequired(item)">
-                        <div class="text-center">
-                            {{
-                                item.extra.can_change.length > 0
-                                    ? `${item.extra.can_change.length} datasets are exclusively private to you`
-                                    : `You are not authorized to share ${item.extra.cannot_change.length} datasets`
-                            }}
-                        </div>
-                    </b-alert>
-                    <b-row v-if="permissionsChangeRequired(item)">
-                        <b-col v-if="item.extra.can_change.length > 0">
-                            <b-card>
-                                <b-card-header header-tag="header" class="p-1" role="tab">
-                                    <b-button v-b-toggle.can-share block variant="warning">
-                                        Datasets can be shared by updating their permissions
-                                    </b-button>
-                                </b-card-header>
-                                <b-collapse id="can-share" visible accordion="can-share-accordion" role="tabpanel">
-                                    <b-list-group>
-                                        <b-list-group-item v-for="dataset in item.extra.can_change" :key="dataset.id">{{
-                                            dataset.name
-                                        }}</b-list-group-item>
-                                    </b-list-group>
-                                </b-collapse>
-                            </b-card>
-                        </b-col>
-                        <b-col v-if="item.extra.cannot_change.length > 0">
-                            <b-card>
-                                <b-card-header header-tag="header" class="p-1" role="tab">
-                                    <b-button v-b-toggle.cannot-share block variant="danger"
-                                        >Datasets cannot be shared, you are not authorized to change
-                                        permissions</b-button
-                                    >
-                                </b-card-header>
-                                <b-collapse id="cannot-share" visible accordion="cannot-accordion2" role="tabpanel">
-                                    <b-list-group>
-                                        <b-list-group-item
-                                            v-for="dataset in item.extra.cannot_change"
-                                            :key="dataset.id"
-                                            >{{ dataset.name }}</b-list-group-item
-                                        >
-                                    </b-list-group>
-                                </b-collapse>
-                            </b-card>
-                        </b-col>
-                        <b-col>
-                            <b-card
-                                border-variant="primary"
-                                header="How would you like to proceed?"
-                                header-bg-variant="primary"
-                                header-text-variant="white"
-                                align="center">
-                                <b-button
-                                    v-if="item.extra.can_change.length > 0"
-                                    block
-                                    variant="outline-primary"
-                                    @click="
-                                        setSharing(
-                                            actions.share_with,
-                                            multiselectValues.sharingCandidates.map(({ email }) => email),
-                                            share_option.make_public
-                                        )
-                                    "
-                                    >Make datasets public</b-button
-                                >
-                                <b-button
-                                    v-if="item.extra.can_change.length > 0"
-                                    block
-                                    variant="outline-primary"
-                                    @click="
-                                        setSharing(
-                                            actions.share_with,
-                                            multiselectValues.sharingCandidates.map(({ email }) => email),
-                                            share_option.make_accessible_to_shared
-                                        )
-                                    "
-                                    >Make datasets private to me and
-                                    {{ multiselectValues.sharingCandidates.map(({ email }) => email).join() }}</b-button
-                                >
-                                <b-button
-                                    block
-                                    variant="outline-primary"
-                                    @click="
-                                        setSharing(
-                                            actions.share_with,
-                                            multiselectValues.sharingCandidates.map(({ email }) => email),
-                                            share_option.no_changes
-                                        )
-                                    ">
-                                    Share Anyway
-                                </b-button>
-                                <b-button block variant="outline-danger" @click="getSharing()">Cancel </b-button>
-                            </b-card>
-                        </b-col>
-                    </b-row>
-                </b-collapse>
-            </b-card>
         </div>
     </div>
 </template>
 
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp, faCopy, faEdit, faUserPlus, faUserSlash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { getGalaxyInstance } from "app";
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import { getAppRoot } from "onload/loadConfig";
-import { mapState } from "pinia";
-import { errorMessageAsString } from "utils/simple-error";
-import Vue, { computed, reactive, ref, watch } from "vue";
-import Multiselect from "vue-multiselect";
-
-import { useConfig } from "@/composables/config";
-import { useUserStore } from "@/stores/userStore";
-
-import ErrorMessages from "./ErrorMessages";
-
-import EditableUrl from "./EditableUrl.vue";
-import UserSharing from "./UserSharing.vue";
-import Heading from "@/components/Common/Heading.vue";
-
-Vue.use(BootstrapVue);
-library.add(faCopy, faEdit, faUserPlus, faUserSlash, faCaretDown, faCaretUp);
-const defaultExtra = () => {
-    return {
-        cannot_change: [],
-        can_change: [],
-        can_share: true,
-    };
-};
-export default {
-    components: {
-        ErrorMessages,
-        FontAwesomeIcon,
-        Multiselect,
-        Heading,
-        EditableUrl,
-        UserSharing,
-    },
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        pluralName: {
-            type: String,
-            required: true,
-        },
-        modelClass: {
-            type: String,
-            required: true,
-        },
-    },
-    setup(props) {
-        const { config, isConfigLoaded } = useConfig(true);
-
-        const errors = ref([]);
-
-        function addError(newError) {
-            // temporary turning Set into Array, until we update till Vue 3.0, that supports Set reactivity
-            errors.value = Array.from(new Set(errors.value).add(newError));
-        }
-
-        function onErrorDismissed(index) {
-            errors.value.splice(index, 1);
-        }
-
-        const item = ref({
-            title: "title",
-            username_and_slug: "username/slug",
-            importable: false,
-            published: false,
-            users_shared_with: [],
-            extra: defaultExtra(),
-        });
-
-        const itemRoot = computed(() => {
-            const port = window.location.port ? `:${window.location.port}` : "";
-            return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}`;
-        });
-
-        const itemUrl = reactive({
-            prefix: "",
-            slug: "",
-        });
-
-        watch(
-            () => item.value.username_and_slug,
-            (value) => {
-                if (value) {
-                    const index = value.lastIndexOf("/");
-
-                    itemUrl.prefix = itemRoot.value + value.substring(0, index + 1);
-                    itemUrl.slug = value.substring(index + 1);
-                }
-            },
-            { immediate: true }
-        );
-
-        const slugUrl = computed(() => `${getAppRoot()}api/${props.pluralName.toLowerCase()}/${props.id}/slug`);
-
-        function onChangeSlug(newValue) {
-            itemUrl.slug = newValue;
-        }
-
-        async function onSubmitSlug(newValue) {
-            itemUrl.slug = newValue;
-
-            try {
-                await axios.put(slugUrl.value, { new_slug: newValue });
-            } catch (e) {
-                addError(errorMessageAsString(e));
-            }
-        }
-
-        return {
-            config,
-            isConfigLoaded,
-            onErrorDismissed,
-            errors,
-            addError,
-            item,
-            itemRoot,
-            itemUrl,
-            onChangeSlug,
-            slugUrl,
-            onSubmitSlug,
-        };
-    },
-    data() {
-        const Galaxy = getGalaxyInstance();
-        return {
-            isCollapseVisible: false,
-            dismissCountDown: 0,
-            charactersThresholdWarning: "Enter at least 3 characters to see suggestions",
-            elementsNotFoundWarning: "No elements found. Consider changing the search query.",
-            ready: false,
-            threeCharactersEntered: true,
-            hasUsername: Galaxy.user.get("username"),
-            newUsername: "",
-            multiselectValues: {
-                sharingCandidates: [],
-                userOptions: [],
-                currentUserSearch: "",
-            },
-            shareFields: ["email", { key: "id", label: "" }],
-            makeMembersPublic: false,
-            showUrl: true,
-            tooltipClipboard: "Copy URL",
-            actions: {
-                enable_link_access: "enable_link_access",
-                disable_link_access: "disable_link_access",
-                publish: "publish",
-                unpublish: "unpublish",
-                share_with: "share_with_users",
-            },
-            share_option: {
-                make_public: "make_public",
-                make_accessible_to_shared: "make_accessible_to_shared",
-                no_changes: "no_changes",
-            },
-        };
-    },
-    computed: {
-        ...mapState(useUserStore, ["currentUser"]),
-        sharedWithUsersChanged() {
-            if (this.item.users_shared_with.length !== this.multiselectValues.sharingCandidates.length) {
-                return true;
-            }
-
-            return !this.multiselectValues.sharingCandidates.every(({ email }) =>
-                this.item.users_shared_with.some((user) => user.email === email)
-            );
-        },
-        submitBtnTitle() {
-            if (this.multiselectValues.currentUserSearch) {
-                return "";
-            } else {
-                return this.multiselectValues.sharingCandidates && this.multiselectValues.sharingCandidates.length > 0
-                    ? `Share with ${this.multiselectValues.sharingCandidates.map(({ email }) => email)}`
-                    : "Please enter user email";
-            }
-        },
-
-        pluralNameLower() {
-            return this.pluralName.toLowerCase();
-        },
-        itemStatus() {
-            return this.item.published ? "accessible via link and published" : "accessible via link";
-        },
-        published_url() {
-            return `${getAppRoot()}${this.pluralNameLower}/list_published`;
-        },
-    },
-    created: function () {
-        this.getSharing();
-    },
-    methods: {
-        root() {
-            return getAppRoot();
-        },
-        permissionsChangeRequired(item) {
-            if (!item.extra) {
-                return false;
-            }
-            return item.extra && (item.extra.can_change.length > 0 || item.extra.cannot_change.length > 0);
-        },
-        onMultiselectBlur(isAdmin) {
-            const isValueChosen = this.multiselectValues.sharingCandidates.some(
-                (item) => item.email === this.multiselectValues.currentUserSearch
-            );
-            if (this.multiselectValues.currentUserSearch && !isValueChosen && !isAdmin) {
-                this.multiselectValues.sharingCandidates.push({ email: this.multiselectValues.currentUserSearch });
-            }
-        },
-        onError(axiosError) {
-            this.addError(errorMessageAsString(axiosError));
-        },
-        assignItem(newItem, overwriteCandidates) {
-            if (newItem.errors) {
-                this.errors = newItem.errors;
-            }
-            this.item = newItem;
-            if (overwriteCandidates) {
-                this.multiselectValues.sharingCandidates = Array.from(newItem.users_shared_with);
-            }
-            if (!this.item.extra || newItem.errors.length > 0) {
-                this.item.extra = defaultExtra();
-            }
-
-            this.ready = true;
-        },
-        onImportable(importable) {
-            if (importable) {
-                this.setSharing(this.actions.enable_link_access);
-            } else {
-                this.item.published = false;
-                this.setSharing(this.actions.disable_link_access);
-            }
-        },
-        onPublish(published) {
-            if (published) {
-                this.item.importable = true;
-                this.setSharing(this.actions.publish);
-            } else {
-                this.setSharing(this.actions.unpublish);
-            }
-        },
-        getSharing() {
-            this.ready = false;
-            this.dismissCountDown = 0;
-            axios
-                .get(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/sharing`)
-                .then((response) => this.assignItem(response.data, true))
-                .catch(this.onError);
-        },
-        setUsername() {
-            const Galaxy = getGalaxyInstance();
-            axios
-                .put(`${getAppRoot()}api/users/${Galaxy.user.id}/information/inputs`, {
-                    username: this.newUsername || "",
-                })
-                .then((response) => {
-                    this.hasUsername = true;
-                    this.getSharing();
-                })
-                .catch(this.onError);
-        },
-        setSharing(action, user_id, share_option) {
-            let user_ids = undefined;
-            if (Array.isArray(user_id)) {
-                user_ids = user_id;
-            } else {
-                user_ids = user_id ? user_id.replace(/ /g, "").split(",") : undefined;
-            }
-
-            const data = {
-                user_ids: user_ids,
-                share_option: share_option ? share_option : undefined,
-            };
-            return axios
-                .put(`${getAppRoot()}api/${this.pluralNameLower}/${this.id}/${action}`, data)
-                .then(({ data }) => {
-                    this.errors = [];
-                    const userIdsSaved = user_ids && !this.permissionsChangeRequired(data) && data.errors.length === 0;
-                    this.assignItem(data, userIdsSaved);
-
-                    if (userIdsSaved) {
-                        this.dismissCountDown = 3;
-                    }
-                })
-                .catch(this.onError);
-        },
-        searchChanged(searchValue, exposedUsers) {
-            this.multiselectValues.currentUserSearch = searchValue;
-            if (!exposedUsers) {
-                this.multiselectValues.userOptions = [{ email: searchValue }];
-            } else if (searchValue.length < 3) {
-                this.threeCharactersEntered = false;
-                this.multiselectValues.userOptions = [];
-            } else {
-                this.threeCharactersEntered = true;
-                axios
-                    .get(`${getAppRoot()}api/users?f_email=${searchValue}`)
-                    .then((response) => {
-                        this.multiselectValues.userOptions = response.data.filter(
-                            ({ email }) =>
-                                !this.multiselectValues.sharingCandidates.map(({ email }) => email).includes(email)
-                        );
-                    })
-                    .catch(this.onError);
-            }
-        },
-    },
-};
-</script>
-
-<style scoped>
-.sharing_icon {
-    margin-top: 0.15rem;
-}
-.share_with_view {
-    margin: 1rem 1rem;
-}
-.share_with_title {
-    text-align: center;
-    padding-top: 1.1rem;
-}
-
-.success-alert {
-    margin: 0.3rem 2rem 0.9rem;
-}
-.share-with-card-buttons {
-    margin: 0.5rem 0;
-    float: right;
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/client/src/components/Sharing/UserSharing.vue b/client/src/components/Sharing/UserSharing.vue
index b707900b4a6a..905a7ac10e74 100644
--- a/client/src/components/Sharing/UserSharing.vue
+++ b/client/src/components/Sharing/UserSharing.vue
@@ -12,7 +12,7 @@ import {
     BModal,
 } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useConfig } from "@/composables/config";
@@ -49,16 +49,12 @@ const permissionsChangeRequired = computed(() => {
 const userIsAdmin = computed(() => currentUser.value && "is_admin" in currentUser.value && currentUser.value.is_admin);
 const exposeEmails = computed(() => config.value.expose_user_email || userIsAdmin.value);
 
-const sharingCandidates = ref<Array<{ email: string }>>([]);
+const sharingCandidates = ref<Array<{ email: string }>>([...(props.item.users_shared_with ?? [])]);
 const sharingCandidatesAsEmails = computed(() => sharingCandidates.value.map(({ email }) => email));
 
-watch(
-    () => props.item.users_shared_with,
-    (users) => {
-        sharingCandidates.value = [...(users ?? [])];
-    },
-    { immediate: true }
-);
+function reset() {
+    sharingCandidates.value = [...(props.item.users_shared_with ?? [])];
+}
 
 const userOptions = ref<Array<{ email: string }>>([]);
 const currentSearch = ref("");
@@ -135,6 +131,10 @@ const selectedSharingOption = ref<ShareOption>("make_public");
 function onUpdatePermissions() {
     emit("share", sharingCandidatesAsEmails.value, selectedSharingOption.value);
 }
+
+defineExpose({
+    reset,
+});
 </script>
 
 <template>
diff --git a/client/src/components/Sharing/item.ts b/client/src/components/Sharing/item.ts
index d8dc5efaacec..5c6260ee8210 100644
--- a/client/src/components/Sharing/item.ts
+++ b/client/src/components/Sharing/item.ts
@@ -8,6 +8,7 @@ export interface Item {
         cannot_change: Array<{ id: string; name: string }>;
         can_change: Array<{ id: string; name: string }>;
     };
+    errors?: string[];
 }
 
 export type ShareOption = "make_public" | "make_accessible_to_shared" | "no_changes";

From 203a69a7e4337c067ea6ab150ee94c3d3938d652 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 13:46:51 +0200
Subject: [PATCH 14/24] rename Sharing to SharingPage

---
 client/src/components/Sharing/{Sharing.vue => SharingPage.vue} | 0
 client/src/entry/analysis/router.js                            | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename client/src/components/Sharing/{Sharing.vue => SharingPage.vue} (100%)

diff --git a/client/src/components/Sharing/Sharing.vue b/client/src/components/Sharing/SharingPage.vue
similarity index 100%
rename from client/src/components/Sharing/Sharing.vue
rename to client/src/components/Sharing/SharingPage.vue
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index c4e2d7fe9a3c..0cd35106b378 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -23,7 +23,6 @@ import NewUserWelcome from "components/NewUserWelcome/NewUserWelcome";
 import PageList from "components/Page/PageList";
 import PageDisplay from "components/PageDisplay/PageDisplay";
 import PageEditor from "components/PageEditor/PageEditor";
-import Sharing from "components/Sharing/Sharing";
 import ToolSuccess from "components/Tool/ToolSuccess";
 import ToolsList from "components/ToolsList/ToolsList";
 import ToolsJson from "components/ToolsView/ToolsSchemaJson/ToolsJson";
@@ -67,6 +66,7 @@ import AboutGalaxy from "@/components/AboutGalaxy.vue";
 import HistoryArchive from "@/components/History/Archiving/HistoryArchive.vue";
 import HistoryArchiveWizard from "@/components/History/Archiving/HistoryArchiveWizard.vue";
 import NotificationsList from "@/components/Notifications/NotificationsList.vue";
+import Sharing from "@/components/Sharing/SharingPage.vue";
 import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 
 Vue.use(VueRouter);

From 92f876386f925cd6bede5dec78986c54ae6453c1 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 13:49:07 +0200
Subject: [PATCH 15/24] fix multiselect layout shifting

---
 client/src/components/Sharing/UserSharing.vue | 12 ------------
 client/src/style/scss/multiselect.scss        |  4 ++++
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Sharing/UserSharing.vue b/client/src/components/Sharing/UserSharing.vue
index 905a7ac10e74..8833822c344c 100644
--- a/client/src/components/Sharing/UserSharing.vue
+++ b/client/src/components/Sharing/UserSharing.vue
@@ -271,18 +271,6 @@ defineExpose({
     </div>
 </template>
 
-<style scoped lang="scss">
-.user-sharing {
-    // removes content shifting
-    &:deep(.multiselect__input) {
-        padding-left: 0;
-        padding-top: 2px;
-        margin-bottom: 10px;
-        font-size: 14px;
-    }
-}
-</style>
-
 <style>
 .user-sharing-modal {
     width: 100%;
diff --git a/client/src/style/scss/multiselect.scss b/client/src/style/scss/multiselect.scss
index cafc6647eb9f..f5f86b4ba466 100644
--- a/client/src/style/scss/multiselect.scss
+++ b/client/src/style/scss/multiselect.scss
@@ -6,6 +6,10 @@
     }
     .multiselect__input {
         background: transparent;
+        padding-left: 0;
+        padding-top: 2px;
+        margin-bottom: 10px;
+        font-size: 14px;
     }
     .multiselect__option {
         white-space: normal;

From 34249232ffc5b20744bf316a6ffc647609a4768c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 13:52:55 +0200
Subject: [PATCH 16/24] adjust style

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

diff --git a/client/src/components/Sharing/UserSharing.vue b/client/src/components/Sharing/UserSharing.vue
index 8833822c344c..f85b5c223913 100644
--- a/client/src/components/Sharing/UserSharing.vue
+++ b/client/src/components/Sharing/UserSharing.vue
@@ -197,7 +197,7 @@ defineExpose({
                     </template>
                 </Multiselect>
 
-                <div class="share-with-card-buttons">
+                <div class="share-with-card-buttons mt-2 w-100 d-flex justify-content-end flex-gapx-1">
                     <BButton class="cancel-sharing-with" :disabled="noChanges" @click="onCancel"> Cancel </BButton>
                     <BButton variant="primary" class="submit-sharing-with" :disabled="noChanges" @click="onSubmit">
                         {{ currentSearch ? `Add` : `Save` }}

From ac2267207756994b36570ff44f0c71ee52051c9e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 14:00:59 +0200
Subject: [PATCH 17/24] fix toast append

---
 client/src/components/Sharing/SharingPage.vue | 2 +-
 client/src/components/Toast.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Sharing/SharingPage.vue b/client/src/components/Sharing/SharingPage.vue
index e32e2bbb7de4..e9a007a1a290 100644
--- a/client/src/components/Sharing/SharingPage.vue
+++ b/client/src/components/Sharing/SharingPage.vue
@@ -222,7 +222,7 @@ async function setUsername() {
 <template>
     <div>
         <Heading h1 size="lg" separator>
-            Share or Publish {{ modelClass }} <span v-if="ready">`{{ item.title }}`</span>
+            Share or Publish {{ modelClass }} <span v-if="ready">"{{ item.title }}"</span>
         </Heading>
 
         <ErrorMessages :messages="errors" @dismissed="onErrorDismissed"></ErrorMessages>
diff --git a/client/src/components/Toast.js b/client/src/components/Toast.js
index 20a3e2d589b7..bb66012b8ce9 100644
--- a/client/src/components/Toast.js
+++ b/client/src/components/Toast.js
@@ -6,7 +6,7 @@ export default {
                 title,
                 href,
                 toaster: "b-toaster-bottom-right",
-                append: true,
+                appendToast: true,
                 solid: true,
             });
         },

From be8533a90d98cbfe9214f081748b69b9dac91c0c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:11:28 +0200
Subject: [PATCH 18/24] add workflow embed to sharing

---
 .../Sharing/Embeds/WorkflowEmbed.vue          | 194 ++++++++++++++++++
 client/src/components/Sharing/SharingPage.vue |  28 ++-
 2 files changed, 216 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/Sharing/Embeds/WorkflowEmbed.vue

diff --git a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
new file mode 100644
index 000000000000..47fb3701d312
--- /dev/null
+++ b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useDebounce } from "@vueuse/core";
+import { BButton, BFormCheckbox, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
+import { computed, reactive, ref } from "vue";
+
+import { copy } from "@/utils/clipboard";
+import { withPrefix } from "@/utils/redirect";
+
+import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
+
+library.add(faCopy);
+
+const props = defineProps<{
+    id: string;
+}>();
+
+const settings = reactive({
+    buttons: true,
+    about: false,
+    heading: false,
+    position: [-20, -20] as [number, number],
+    zoom: 1,
+});
+
+const embedUrl = computed(() => {
+    let url = withPrefix(`/published/workflow?id=${props.id}&embed=true`);
+    url += `&buttons=${settings.buttons}`;
+    url += `&about=${settings.about}`;
+    url += `&heading=${settings.heading}`;
+    url += `&initialX=${settings.position[0]}&initialY=${settings.position[1]}`;
+    url += `&zoom=${settings.zoom}`;
+    return url;
+});
+
+const embed = computed(() => `<iframe title="Galaxy Workflow Embed" src="${embedUrl.value}" />`);
+
+const debouncedUrl = useDebounce(embedUrl, 1000);
+
+function onChangePosition(event: Event, index: number) {
+    const value = parseInt((event.target as HTMLInputElement).value);
+    settings.position[index] = value;
+}
+
+const showEmbed = ref(false);
+const showEmbedDebounced = useDebounce(showEmbed, 100);
+
+const copied = ref(false);
+
+function onCopy() {
+    copy(embed.value);
+    copied.value = true;
+}
+
+function onCopyOut() {
+    copied.value = false;
+}
+
+const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
+</script>
+
+<template>
+    <div class="workflow-embed">
+        <div class="settings">
+            <BFormCheckbox v-model="settings.heading"> Show heading </BFormCheckbox>
+            <BFormCheckbox v-model="settings.about"> Show about </BFormCheckbox>
+            <BFormCheckbox v-model="settings.buttons"> Show buttons </BFormCheckbox>
+
+            <label for="embed-position-control" class="control-label">
+                Initial position
+                <div id="embed-position-control" class="position-control">
+                    <label>
+                        x:
+                        <input
+                            :value="settings.position[0]"
+                            type="number"
+                            @change="(event) => onChangePosition(event, 0)" />
+                    </label>
+
+                    <label>
+                        y:
+                        <input
+                            :value="settings.position[1]"
+                            type="number"
+                            @change="(event) => onChangePosition(event, 1)" />
+                    </label>
+                </div>
+            </label>
+
+            <label for="embed-zoom-control" class="control-label">
+                Initial zoom
+                <ZoomControl
+                    id="embed-zoom-control"
+                    :zoom-level="settings.zoom"
+                    class="zoom-control"
+                    @onZoom="(level) => (settings.zoom = level)" />
+            </label>
+        </div>
+        <div class="preview">
+            <label for="embed-code" class="w-100">
+                Embed code
+                <BInputGroup id="embed-code">
+                    <BFormInput class="embed-code-input" :value="embed" readonly />
+                    <BInputGroupAppend>
+                        <BButton
+                            v-b-tooltip.hover
+                            :title="clipboardTitle"
+                            variant="primary"
+                            @click="onCopy"
+                            @blur="onCopyOut">
+                            <FontAwesomeIcon icon="copy" />
+                        </BButton>
+                    </BInputGroupAppend>
+                </BInputGroup>
+            </label>
+
+            <BFormCheckbox v-model="showEmbed" switch>Show embed Preview</BFormCheckbox>
+            <iframe v-if="showEmbedDebounced" title="Galaxy Workflow Embed" :src="debouncedUrl" />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.workflow-embed {
+    display: flex;
+    gap: 0.5rem;
+}
+
+@container (max-width: 1200px) {
+    .workflow-embed {
+        flex-direction: column;
+    }
+}
+
+.workflow-embed {
+    .settings {
+        flex: 1;
+        display: flex;
+        align-items: start;
+        justify-content: start;
+        flex-direction: column;
+    }
+
+    .preview {
+        flex: 1;
+
+        iframe {
+            width: 100%;
+            height: 550px;
+        }
+
+        .embed-code-input {
+            background-color: transparent;
+        }
+    }
+}
+
+.control-label {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.25rem;
+}
+
+.zoom-control,
+.position-control {
+    position: unset;
+    padding: 2px 4px;
+    border-color: $brand-primary;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.position-control {
+    display: flex;
+    flex-direction: column;
+    width: 9rem;
+
+    input {
+        width: 100%;
+    }
+
+    label {
+        margin-bottom: 0;
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+    }
+}
+</style>
diff --git a/client/src/components/Sharing/SharingPage.vue b/client/src/components/Sharing/SharingPage.vue
index e9a007a1a290..3626deb08d49 100644
--- a/client/src/components/Sharing/SharingPage.vue
+++ b/client/src/components/Sharing/SharingPage.vue
@@ -2,6 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretUp, faCopy, faEdit, faUserPlus, faUserSlash } from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
+import { BFormCheckbox } from "bootstrap-vue";
 import { computed, nextTick, reactive, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
@@ -12,6 +13,7 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import type { Item, ShareOption } from "./item";
 
 import EditableUrl from "./EditableUrl.vue";
+import WorkflowEmbed from "./Embeds/WorkflowEmbed.vue";
 import ErrorMessages from "./ErrorMessages.vue";
 import UserSharing from "./UserSharing.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -217,10 +219,12 @@ async function setUsername() {
         })
         .catch(onError);
 }
+
+const embedable = computed(() => item.value.importable && props.modelClass.toLocaleLowerCase() === "workflow");
 </script>
 
 <template>
-    <div>
+    <div class="sharing-page">
         <Heading h1 size="lg" separator>
             Share or Publish {{ modelClass }} <span v-if="ready">"{{ item.title }}"</span>
         </Heading>
@@ -237,10 +241,10 @@ async function setUsername() {
         </form>
         <div v-else-if="ready">
             <div class="mb-3">
-                <b-form-checkbox v-model="item.importable" switch class="make-accessible" @change="onImportable">
+                <BFormCheckbox v-model="item.importable" switch class="make-accessible" @change="onImportable">
                     Make {{ modelClass }} accessible
-                </b-form-checkbox>
-                <b-form-checkbox
+                </BFormCheckbox>
+                <BFormCheckbox
                     v-if="item.importable"
                     v-model="item.published"
                     class="make-publishable"
@@ -248,7 +252,7 @@ async function setUsername() {
                     @change="onPublish">
                     Make {{ modelClass }} publicly available in
                     <a :href="publishedUrl" target="_top">Published {{ pluralName }}</a>
-                </b-form-checkbox>
+                </BFormCheckbox>
             </div>
 
             <div v-if="item.importable" class="mb-4">
@@ -265,6 +269,12 @@ async function setUsername() {
                 access it. Note that sharing a History will also allow access to all of its datasets.
             </div>
 
+            <div v-if="embedable" class="mb-4">
+                <Heading h2 size="md"> Embed {{ modelClass }} </Heading>
+
+                <WorkflowEmbed v-if="props.modelClass.toLowerCase() === 'workflow'" :id="id" />
+            </div>
+
             <Heading h2 size="md"> Share {{ modelClass }} with Individual Users </Heading>
 
             <UserSharing
@@ -278,4 +288,10 @@ async function setUsername() {
     </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.sharing-page {
+    container-type: inline-size;
+
+    overflow-y: scroll;
+}
+</style>

From 0c68f175ca276639acb365b84d0b65d9022a7363 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:30:47 +0200
Subject: [PATCH 19/24] move query params to params

---
 .../Sharing/Embeds/WorkflowEmbed.vue          |  9 ++-
 .../Workflow/Published/WorkflowPublished.vue  | 77 ++++++++++++-------
 client/src/entry/analysis/router.js           | 12 ++-
 client/src/utils/utils.ts                     |  4 +
 4 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
index 47fb3701d312..77487de07dc7 100644
--- a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
+++ b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
@@ -6,8 +6,8 @@ import { useDebounce } from "@vueuse/core";
 import { BButton, BFormCheckbox, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
 import { computed, reactive, ref } from "vue";
 
+import { getAppRoot } from "@/onload/loadConfig";
 import { copy } from "@/utils/clipboard";
-import { withPrefix } from "@/utils/redirect";
 
 import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
 
@@ -25,8 +25,13 @@ const settings = reactive({
     zoom: 1,
 });
 
+const root = computed(() => {
+    const port = window.location.port ? `:${window.location.port}` : "";
+    return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}`;
+});
+
 const embedUrl = computed(() => {
-    let url = withPrefix(`/published/workflow?id=${props.id}&embed=true`);
+    let url = `${root.value}published/workflow?id=${props.id}&embed=true`;
     url += `&buttons=${settings.buttons}`;
     url += `&about=${settings.about}`;
     url += `&heading=${settings.heading}`;
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index ca6a2611fe95..cccab2f44592 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -7,7 +7,6 @@ import { computed, ref, watch } from "vue";
 
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
-import { useRouteQueryBool, useRouteQueryNumber } from "@/composables/route";
 import { usePanels } from "@/composables/usePanels";
 import { provideScopedWorkflowStores } from "@/composables/workflowStores";
 import { useUserStore } from "@/stores/userStore";
@@ -24,9 +23,40 @@ import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 
 library.add(faSpinner, faUser, faBuilding, faPlay, faEdit, faDownload);
 
-const props = defineProps<{
-    id: string;
-}>();
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    zoom: {
+        type: Number,
+        default: 0.75,
+    },
+    embed: {
+        type: Boolean,
+        default: false,
+    },
+    showButtons: {
+        type: Boolean,
+        default: true,
+    },
+    showAbout: {
+        type: Boolean,
+        default: true,
+    },
+    showHeading: {
+        type: Boolean,
+        default: true,
+    },
+    initialX: {
+        type: Number,
+        default: -20,
+    },
+    initialY: {
+        type: Number,
+        default: -20,
+    },
+});
 
 const workflowInfo = ref<
     | {
@@ -49,11 +79,9 @@ const { datatypesMapper } = useDatatypesMapper();
 
 const { stateStore } = provideScopedWorkflowStores(props.id);
 
-const defaultScale = useRouteQueryNumber("zoom", 0.75);
-
 watch(
-    () => defaultScale.value,
-    () => stateStore.setScale(defaultScale.value),
+    () => props.zoom,
+    () => stateStore.setScale(props.zoom),
     { immediate: true }
 );
 
@@ -110,16 +138,9 @@ function logInTitle(title: string) {
     }
 }
 
-const embedded = useRouteQueryBool("embed");
-const showButtons = useRouteQueryBool("buttons", true);
-const showAbout = useRouteQueryBool("about", true);
-const showHeading = useRouteQueryBool("heading", true);
-const initialX = useRouteQueryNumber("initialX", -20);
-const initialY = useRouteQueryNumber("initialY", -20);
-
 const initialPosition = computed(() => ({
-    x: -initialX.value * defaultScale.value,
-    y: -initialY.value * defaultScale.value,
+    x: -props.initialX * props.zoom,
+    y: -props.initialY * props.zoom,
 }));
 
 const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`));
@@ -127,8 +148,8 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
 
 <template>
     <div id="columns" class="d-flex">
-        <ActivityBar v-if="!embedded && showActivityBar" />
-        <FlexPanel v-if="!embedded && showToolbox" side="left">
+        <ActivityBar v-if="!props.embed && showActivityBar" />
+        <FlexPanel v-if="!props.embed && showToolbox" side="left">
             <ToolPanel />
         </FlexPanel>
 
@@ -150,21 +171,21 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
             <div v-else-if="workflowInfo" class="published-workflow">
                 <div class="workflow-preview d-flex flex-column">
                     <span
-                        v-if="showHeading || showButtons"
+                        v-if="props.showHeading || props.showButtons"
                         class="d-flex w-100 flex-gapx-1 flex-wrap justify-content-end align-items-center mb-2">
-                        <Heading v-if="showHeading" h1 separator inline size="xl" class="flex-grow-1 mb-0">
-                            <span v-if="showAbout"> Workflow Preview </span>
+                        <Heading v-if="props.showHeading" h1 separator inline size="xl" class="flex-grow-1 mb-0">
+                            <span v-if="props.showAbout"> Workflow Preview </span>
                             <span v-else> {{ workflowInfo.name }} </span>
                         </Heading>
 
-                        <span v-if="showButtons">
+                        <span v-if="props.showButtons">
                             <b-button :to="downloadUrl" title="Download Workflow" variant="secondary" size="md">
                                 <FontAwesomeIcon icon="fa-download" />
                                 Download
                             </b-button>
 
                             <b-button
-                                v-if="!embedded"
+                                v-if="!props.embed"
                                 :href="importUrl"
                                 :disabled="userStore.isAnonymous"
                                 :title="logInTitle('Import Workflow')"
@@ -177,7 +198,7 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
                             </b-button>
 
                             <b-button
-                                v-if="!embedded"
+                                v-if="!props.embed"
                                 :to="runUrl"
                                 :disabled="userStore.isAnonymous"
                                 :title="logInTitle('Run Workflow')"
@@ -188,7 +209,7 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
                             </b-button>
 
                             <b-button
-                                v-if="embedded"
+                                v-if="props.embed"
                                 :href="viewUrl"
                                 target="blank"
                                 variant="primary"
@@ -211,9 +232,9 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
                 </div>
 
                 <WorkflowInformation
-                    v-if="showAbout && workflowInfo"
+                    v-if="props.showAbout && workflowInfo"
                     :workflow-info="workflowInfo"
-                    :embedded="embedded" />
+                    :embedded="props.embed" />
             </div>
         </div>
     </div>
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 0cd35106b378..acccc73fbd5f 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -59,6 +59,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 
 import AvailableDatatypes from "@/components/AvailableDatatypes/AvailableDatatypes";
+import { parseBool } from "@/utils/utils";
 
 import { patchRouterPush } from "./router-push";
 
@@ -140,7 +141,16 @@ export function getRouter(Galaxy) {
             {
                 path: "/published/workflow",
                 component: WorkflowPublished,
-                props: (route) => ({ id: route.query.id }),
+                props: (route) => ({
+                    id: route.query.id,
+                    zoom: parseFloat(route.query.zoom),
+                    embed: parseBool(route.query.embed),
+                    showButtons: parseBool(route.query.buttons),
+                    showAbout: parseBool(route.query.about),
+                    showHeading: parseBool(route.query.heading),
+                    initialX: parseInt(route.query.initialX),
+                    initialY: parseInt(route.query.initialY),
+                }),
             },
             {
                 name: "error",
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
index d4916291084d..91f48b4a2e17 100644
--- a/client/src/utils/utils.ts
+++ b/client/src/utils/utils.ts
@@ -387,6 +387,10 @@ export function mergeObjectListsById<T extends { id: string; [key: string]: any
     return mergedList;
 }
 
+export function parseBool(value: string): boolean {
+    return value.toLowerCase() === "true";
+}
+
 type MatchObject<T extends string | number | symbol, R> = {
     [_Case in T]: () => R;
 };

From 024a155d3db8a7fd537a246676c40f662f3fd69a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:54:44 +0200
Subject: [PATCH 20/24] embed workflow without iframe fixed undef values in
 prop parsing

---
 .../Sharing/Embeds/WorkflowEmbed.vue          | 48 ++++++++++++++-----
 .../Workflow/Published/WorkflowPublished.vue  | 10 +++-
 client/src/entry/analysis/router.js           | 14 +++---
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
index 77487de07dc7..1aa926e3cb2d 100644
--- a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
+++ b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
@@ -10,6 +10,7 @@ import { getAppRoot } from "@/onload/loadConfig";
 import { copy } from "@/utils/clipboard";
 
 import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
+import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 
 library.add(faCopy);
 
@@ -21,10 +22,20 @@ const settings = reactive({
     buttons: true,
     about: false,
     heading: false,
-    position: [-20, -20] as [number, number],
+    initialX: -20,
+    initialY: -20,
     zoom: 1,
 });
 
+function onChangePosition(event: Event, xy: "x" | "y") {
+    const value = parseInt((event.target as HTMLInputElement).value);
+    if (xy === "x") {
+        settings.initialX = value;
+    } else {
+        settings.initialY = value;
+    }
+}
+
 const root = computed(() => {
     const port = window.location.port ? `:${window.location.port}` : "";
     return `${window.location.protocol}//${window.location.hostname}${port}${getAppRoot()}`;
@@ -35,19 +46,17 @@ const embedUrl = computed(() => {
     url += `&buttons=${settings.buttons}`;
     url += `&about=${settings.about}`;
     url += `&heading=${settings.heading}`;
-    url += `&initialX=${settings.position[0]}&initialY=${settings.position[1]}`;
+    url += `&initialX=${settings.initialX}&initialY=${settings.initialY}`;
     url += `&zoom=${settings.zoom}`;
     return url;
 });
 
 const embed = computed(() => `<iframe title="Galaxy Workflow Embed" src="${embedUrl.value}" />`);
 
-const debouncedUrl = useDebounce(embedUrl, 1000);
+// These Embed settings are not reactive, to we have to key them
+const embedKey = computed(() => `zoom: ${settings.zoom}, x: ${settings.initialX}, y: ${settings.initialY}`);
 
-function onChangePosition(event: Event, index: number) {
-    const value = parseInt((event.target as HTMLInputElement).value);
-    settings.position[index] = value;
-}
+const debouncedEmbedKey = useDebounce(embedKey, 200);
 
 const showEmbed = ref(false);
 const showEmbedDebounced = useDebounce(showEmbed, 100);
@@ -79,17 +88,17 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
                     <label>
                         x:
                         <input
-                            :value="settings.position[0]"
+                            :value="settings.initialX"
                             type="number"
-                            @change="(event) => onChangePosition(event, 0)" />
+                            @change="(event) => onChangePosition(event, 'x')" />
                     </label>
 
                     <label>
                         y:
                         <input
-                            :value="settings.position[1]"
+                            :value="settings.initialY"
                             type="number"
-                            @change="(event) => onChangePosition(event, 1)" />
+                            @change="(event) => onChangePosition(event, 'y')" />
                     </label>
                 </div>
             </label>
@@ -122,7 +131,18 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
             </label>
 
             <BFormCheckbox v-model="showEmbed" switch>Show embed Preview</BFormCheckbox>
-            <iframe v-if="showEmbedDebounced" title="Galaxy Workflow Embed" :src="debouncedUrl" />
+            <WorkflowPublished
+                v-if="showEmbedDebounced"
+                :id="props.id"
+                :key="debouncedEmbedKey"
+                class="published-preview"
+                :zoom="settings.zoom"
+                embed
+                :show-about="settings.about"
+                :show-buttons="settings.buttons"
+                :show-heading="settings.heading"
+                :initial-x="settings.initialX"
+                :initial-y="settings.initialY" />
         </div>
     </div>
 </template>
@@ -153,7 +173,9 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
     .preview {
         flex: 1;
 
-        iframe {
+        .published-preview {
+            border: 2px solid $brand-primary;
+            border-radius: 4px;
             width: 100%;
             height: 550px;
         }
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index cccab2f44592..a7907c2b7fc8 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -153,7 +153,7 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
             <ToolPanel />
         </FlexPanel>
 
-        <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
+        <div id="center" class="container-root m-3 w-100 overflow-auto d-flex flex-column">
             <div v-if="loading">
                 <Heading h1 separator size="xl">
                     <FontAwesomeIcon icon="fa-spinner" spin />
@@ -243,6 +243,10 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+.container-root {
+    container-type: inline-size;
+}
+
 .published-workflow {
     display: flex;
     flex-grow: 1;
@@ -261,8 +265,10 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
         max-width: 500px;
         height: 100%;
     }
+}
 
-    @media only screen and (max-width: 1100px) {
+@container (max-width: 900px) {
+    .published-workflow {
         flex-direction: column;
         height: unset;
 
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index acccc73fbd5f..5aed36eeae0c 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -143,13 +143,13 @@ export function getRouter(Galaxy) {
                 component: WorkflowPublished,
                 props: (route) => ({
                     id: route.query.id,
-                    zoom: parseFloat(route.query.zoom),
-                    embed: parseBool(route.query.embed),
-                    showButtons: parseBool(route.query.buttons),
-                    showAbout: parseBool(route.query.about),
-                    showHeading: parseBool(route.query.heading),
-                    initialX: parseInt(route.query.initialX),
-                    initialY: parseInt(route.query.initialY),
+                    zoom: route.query.zoom ? parseFloat(route.query.zoom) : undefined,
+                    embed: route.query.embed ? parseBool(route.query.embed) : undefined,
+                    showButtons: route.query.buttons ? parseBool(route.query.buttons) : undefined,
+                    showAbout: route.query.about ? parseBool(route.query.about) : undefined,
+                    showHeading: route.query.heading ? parseBool(route.query.heading) : undefined,
+                    initialX: route.query.initialX ? parseInt(route.query.initialX) : undefined,
+                    initialY: route.query.initialY ? parseInt(route.query.initialY) : undefined,
                 }),
             },
             {

From b440f012c8edd5adf0d9003d53228dbcdfc2f75c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:07:04 +0200
Subject: [PATCH 21/24] fix selenium selector for removed component

---
 client/src/utils/navigation/navigation.yml | 1 -
 lib/galaxy/selenium/navigates_galaxy.py    | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 59134f93b4f0..caf9696ab17d 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -438,7 +438,6 @@ histories:
       unshare_with_user_button: '.share_with_view [data-email="${email}"] .multiselect__tag-icon'
       user_email_input: '.user-email-input-form'
       submit_sharing_with: '.submit-sharing-with'
-      share_with_collapse: '.share-with-collapse'
       share_with_multiselect: '.share_with_view > .multiselect'
       share_with_input: '.share_with_view input'
       make_accessible: '.make-accessible label'
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 806e8705a701..5f45c2b93550 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -2207,10 +2207,6 @@ def close_history_editor(self, scope=".history-index"):
         self.assert_absent_or_hidden(editor)
 
     def share_ensure_by_user_available(self, sharing_component):
-        collapse = sharing_component.share_with_collapse
-        collapse.wait_for_visible()
-        if collapse.has_class("collapsed"):
-            collapse.wait_for_and_click()
         sharing_component.share_with_multiselect.wait_for_visible()
 
     def share_unshare_with_user(self, sharing_component, email):

From 21c9ffb653eeca6be50e1551769c8c9f7f37e599 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:17:23 +0200
Subject: [PATCH 22/24] fix deprecated vueuse function

---
 client/src/composables/route.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/composables/route.ts b/client/src/composables/route.ts
index 36b5bace0d9b..89b1ee6a7dbf 100644
--- a/client/src/composables/route.ts
+++ b/client/src/composables/route.ts
@@ -1,28 +1,28 @@
-import { MaybeComputedRef, resolveUnref } from "@vueuse/core";
+import { MaybeRefOrGetter, toValue } from "@vueuse/core";
 import { computed } from "vue";
 import { useRoute } from "vue-router/composables";
 
 /** use a route query parameter as a boolean computed */
 export function useRouteQueryBool(
-    parameter: MaybeComputedRef<string>,
-    defaultValue: MaybeComputedRef<boolean> = false
+    parameter: MaybeRefOrGetter<string>,
+    defaultValue: MaybeRefOrGetter<boolean> = false
 ) {
     const route = useRoute();
     return computed(() => {
-        const p = resolveUnref(parameter);
-        return p in route.query ? route.query[p] === "true" : resolveUnref(defaultValue);
+        const p = toValue(parameter);
+        return p in route.query ? route.query[p] === "true" : toValue(defaultValue);
     });
 }
 
-export function useRouteQueryNumber(parameter: MaybeComputedRef<string>, defaultValue: MaybeComputedRef<number> = 1) {
+export function useRouteQueryNumber(parameter: MaybeRefOrGetter<string>, defaultValue: MaybeRefOrGetter<number> = 1) {
     const route = useRoute();
     return computed(() => {
-        const p = resolveUnref(parameter);
+        const p = toValue(parameter);
         if (p in route.query) {
             const v = route.query[p];
-            return typeof v === "string" ? parseFloat(v) : resolveUnref(defaultValue);
+            return typeof v === "string" ? parseFloat(v) : toValue(defaultValue);
         } else {
-            return resolveUnref(defaultValue);
+            return toValue(defaultValue);
         }
     });
 }

From d20e555165ea1d3bbff8788480c5635c4a80d1e1 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:35:52 +0200
Subject: [PATCH 23/24] fix login redirect link fix heading line break

---
 client/src/components/Sharing/ErrorMessages.vue | 4 ++--
 client/src/components/Sharing/SharingPage.vue   | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Sharing/ErrorMessages.vue b/client/src/components/Sharing/ErrorMessages.vue
index 954a7d34db2c..c92a93aa06b6 100644
--- a/client/src/components/Sharing/ErrorMessages.vue
+++ b/client/src/components/Sharing/ErrorMessages.vue
@@ -34,9 +34,9 @@ function splitLoginString(string: string) {
             @dismissed="() => emit('dismissed', index)">
             <span v-if="hasLogin(message)">
                 <span v-for="(part, i) in splitLoginString(message)" :key="i">
-                    <router-link v-if="hasLogin(part)" :to="loginLink" class="require-login-link">
+                    <a v-if="hasLogin(part)" :href="loginLink" class="require-login-link">
                         {{ part }}
-                    </router-link>
+                    </a>
                     <span v-else> {{ part }} </span>
                 </span>
             </span>
diff --git a/client/src/components/Sharing/SharingPage.vue b/client/src/components/Sharing/SharingPage.vue
index 3626deb08d49..e602212c88f0 100644
--- a/client/src/components/Sharing/SharingPage.vue
+++ b/client/src/components/Sharing/SharingPage.vue
@@ -226,7 +226,9 @@ const embedable = computed(() => item.value.importable && props.modelClass.toLoc
 <template>
     <div class="sharing-page">
         <Heading h1 size="lg" separator>
-            Share or Publish {{ modelClass }} <span v-if="ready">"{{ item.title }}"</span>
+            <span>
+                Share or Publish {{ modelClass }} <span v-if="ready">"{{ item.title }}"</span>
+            </span>
         </Heading>
 
         <ErrorMessages :messages="errors" @dismissed="onErrorDismissed"></ErrorMessages>

From 2ba1e32083116a85cb633e8ae6c4f37a930070df Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 24 Oct 2023 15:04:04 +0200
Subject: [PATCH 24/24] add minimap and zoom control toggles

---
 .../components/Sharing/Embeds/WorkflowEmbed.vue | 10 +++++++++-
 .../Workflow/Editor/WorkflowGraph.vue           | 17 +++++++++++++++--
 .../Workflow/Published/WorkflowPublished.vue    | 10 ++++++++++
 client/src/entry/analysis/router.js             |  2 ++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
index 1aa926e3cb2d..7e7ef39692bc 100644
--- a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
+++ b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
@@ -22,6 +22,8 @@ const settings = reactive({
     buttons: true,
     about: false,
     heading: false,
+    minimap: true,
+    zoomControls: true,
     initialX: -20,
     initialY: -20,
     zoom: 1,
@@ -46,6 +48,8 @@ const embedUrl = computed(() => {
     url += `&buttons=${settings.buttons}`;
     url += `&about=${settings.about}`;
     url += `&heading=${settings.heading}`;
+    url += `&minimap=${settings.minimap}`;
+    url += `&zoom_controls=${settings.zoomControls}`;
     url += `&initialX=${settings.initialX}&initialY=${settings.initialY}`;
     url += `&zoom=${settings.zoom}`;
     return url;
@@ -56,7 +60,7 @@ const embed = computed(() => `<iframe title="Galaxy Workflow Embed" src="${embed
 // These Embed settings are not reactive, to we have to key them
 const embedKey = computed(() => `zoom: ${settings.zoom}, x: ${settings.initialX}, y: ${settings.initialY}`);
 
-const debouncedEmbedKey = useDebounce(embedKey, 200);
+const debouncedEmbedKey = useDebounce(embedKey, 500);
 
 const showEmbed = ref(false);
 const showEmbedDebounced = useDebounce(showEmbed, 100);
@@ -81,6 +85,8 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
             <BFormCheckbox v-model="settings.heading"> Show heading </BFormCheckbox>
             <BFormCheckbox v-model="settings.about"> Show about </BFormCheckbox>
             <BFormCheckbox v-model="settings.buttons"> Show buttons </BFormCheckbox>
+            <BFormCheckbox v-model="settings.minimap"> Show minimap </BFormCheckbox>
+            <BFormCheckbox v-model="settings.zoomControls"> Show zoom controls </BFormCheckbox>
 
             <label for="embed-position-control" class="control-label">
                 Initial position
@@ -141,6 +147,8 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
                 :show-about="settings.about"
                 :show-buttons="settings.buttons"
                 :show-heading="settings.heading"
+                :show-minimap="settings.minimap"
+                :show-zoom-controls="settings.zoomControls"
                 :initial-x="settings.initialX"
                 :initial-y="settings.initialY" />
         </div>
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index e6833b3bcde8..464139ba6631 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -1,6 +1,11 @@
 <template>
     <div id="workflow-canvas" class="unified-panel-body workflow-canvas">
-        <ZoomControl :zoom-level="scale" :pan="transform" @onZoom="onZoom" @update:pan="panBy" />
+        <ZoomControl
+            v-if="props.showZoomControls"
+            :zoom-level="scale"
+            :pan="transform"
+            @onZoom="onZoom"
+            @update:pan="panBy" />
         <ToolBar v-if="!readonly" />
         <div id="canvas-container" ref="canvas" class="canvas-content" @drop.prevent @dragover.prevent>
             <AdaptiveGrid
@@ -44,7 +49,7 @@
             </div>
         </div>
         <WorkflowMinimap
-            v-if="elementBounding"
+            v-if="elementBounding && props.showMinimap"
             :steps="steps"
             :comments="comments"
             :viewport-bounds="elementBounding"
@@ -86,6 +91,8 @@ const props = defineProps({
     scrollToId: { type: Number as PropType<number | null>, default: null },
     readonly: { type: Boolean, default: false },
     initialPosition: { type: Object as PropType<{ x: number; y: number }>, default: () => ({ x: 50, y: 20 }) },
+    showMinimap: { type: Boolean, default: true },
+    showZoomControls: { type: Boolean, default: true },
 });
 
 const { stateStore, stepStore } = useWorkflowStores();
@@ -102,6 +109,12 @@ const { transform, panBy, setZoom, moveTo } = useD3Zoom(
     scroll,
     props.initialPosition
 );
+
+defineExpose({
+    setZoom,
+    moveTo,
+});
+
 const { viewportBoundingBox } = useViewportBoundingBox(elementBounding, scale, transform);
 
 const isDragging = ref(false);
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index a7907c2b7fc8..62e06a487776 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -48,6 +48,14 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    showMinimap: {
+        type: Boolean,
+        default: true,
+    },
+    showZoomControls: {
+        type: Boolean,
+        default: true,
+    },
     initialX: {
         type: Number,
         default: -20,
@@ -227,6 +235,8 @@ const viewUrl = computed(() => withPrefix(`/published/workflow?id=${props.id}`))
                             :steps="workflow.steps"
                             :datatypes-mapper="datatypesMapper"
                             :initial-position="initialPosition"
+                            :show-minimap="props.showMinimap"
+                            :show-zoom-controls="props.showZoomControls"
                             readonly />
                     </b-card>
                 </div>
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 5aed36eeae0c..0c10439b2d9c 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -148,6 +148,8 @@ export function getRouter(Galaxy) {
                     showButtons: route.query.buttons ? parseBool(route.query.buttons) : undefined,
                     showAbout: route.query.about ? parseBool(route.query.about) : undefined,
                     showHeading: route.query.heading ? parseBool(route.query.heading) : undefined,
+                    showMinimap: route.query.minimap ? parseBool(route.query.minimap) : undefined,
+                    showZoomControls: route.query.zoom_controls ? parseBool(route.query.zoom_controls) : undefined,
                     initialX: route.query.initialX ? parseInt(route.query.initialX) : undefined,
                     initialY: route.query.initialY ? parseInt(route.query.initialY) : undefined,
                 }),