Merge pull request galaxyproject#16510 from ElectronicBlueberry/workf…

…low-share-page

Published Workflow Sharing Page Overhaul

client/src/components/Common/PublishedItem.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, type PropType } from "vue";
+
+import { usePanels } from "@/composables/usePanels";
+
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+
+interface Item {
+    name: string;
+    model_class?: string;
+    owner?: string;
+    username?: string;
+    email_hash?: string;
+    tags?: string[];
+    title?: string;
+}
+
+const props = defineProps({
+    item: {
+        type: Object as PropType<Item | null>,
+        default: null,
+    },
+});
+
+const modelTitle = computed(() => {
+    const modelClass = props.item?.model_class ?? "Item";
+    if (modelClass == "StoredWorkflow") {
+        return "Workflow";
+    }
+    return modelClass;
+});
+
+const plural = computed(() => {
+    if (modelTitle.value === "History") {
+        return "Histories";
+    }
+    return `${modelTitle.value}s`;
+});
+
+const gravatarSource = computed(() => `https://secure.gravatar.com/avatar/${props.item?.email_hash}?d=identicon`);
+const owner = computed(() => props.item?.owner ?? props.item?.username ?? "Unavailable");
+const pluralPath = computed(() => plural.value.toLowerCase());
+const publishedByUser = computed(() => `/${pluralPath.value}/list_published?f-username=${owner.value}`);
+const urlAll = computed(() => `/${pluralPath.value}/list_published`);
+
+const { showActivityBar, showToolbox } = usePanels();
+</script>
+
+<template>
+    <div id="columns" class="d-flex">
+        <ActivityBar v-if="showActivityBar" />
+        <FlexPanel v-if="showToolbox" side="left">
+            <ToolBox />
+        </FlexPanel>
+        <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
+            <slot />
+        </div>
+        <FlexPanel side="right">
+            <div v-if="modelTitle" class="m-3">
+                <h1 class="h-sm">About this {{ modelTitle }}</h1>
+                <h2 class="h-md text-break">{{ props.item?.title ?? props.item?.name }}</h2>
+                <img :src="gravatarSource" alt="user avatar" />
+                <StatelessTags v-if="props.item?.tags" class="tags mt-2" :value="props.item.tags" disabled />
+                <br />
+                <h2 class="h-sm">Author</h2>
+                <div>{{ owner }}</div>
+                <hr />
+                <h2 class="h-sm">Related Pages</h2>
+                <div>
+                    <router-link :to="urlAll">All published {{ plural }}.</router-link>
+                </div>
+                <div>
+                    <router-link :to="publishedByUser"> Published {{ plural }} by {{ owner }}. </router-link>
+                </div>
+            </div>
+            <LoadingSpan v-else message="Loading item details" />
+            <div class="flex-fill" />
+        </FlexPanel>
+    </div>
+</template>

client/src/components/History/HistoryPublished.vue

@@ -1,19 +1,20 @@
 <template>
-    <Published :item="history">
+    <PublishedItem :item="history">
         <template v-slot>
             <HistoryView :id="id" />
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import HistoryView from "components/History/HistoryView";
 import { urlData } from "utils/url";
 
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import HistoryView from "@/components/History/HistoryView.vue";
+
 export default {
     components: {
-        Published,
+        PublishedItem,
         HistoryView,
     },
     props: {

client/src/components/PageDisplay/PageDisplay.vue

@@ -1,5 +1,5 @@
 <template>
-    <Published :item="page">
+    <PublishedItem :item="page">
         <template v-slot>
             <div v-if="isConfigLoaded">
                 <Markdown
@@ -13,24 +13,23 @@
             </div>
             <b-alert v-else variant="info" show>Unsupported page format.</b-alert>
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import Markdown from "components/Markdown/Markdown";
-import { withPrefix } from "utils/redirect";
-import { urlData } from "utils/url";
-
 import { useConfig } from "@/composables/config";
+import { withPrefix } from "@/utils/redirect";
+import { urlData } from "@/utils/url";
 
-import PageHtml from "./PageHtml";
+import PageHtml from "./PageHtml.vue";
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import Markdown from "@/components/Markdown/Markdown.vue";
 
 export default {
     components: {
         Markdown,
         PageHtml,
-        Published,
+        PublishedItem,
     },
     props: {
         pageId: {

client/src/components/Visualizations/VisualizationPublished.vue

@@ -1,20 +1,21 @@
 <template>
-    <Published :item="visualization">
+    <PublishedItem :item="visualization">
         <template v-slot>
             <CenterFrame :src="getUrl" />
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import CenterFrame from "entry/analysis/modules/CenterFrame";
-import { urlData } from "utils/url";
+import { urlData } from "@/utils/url";
+
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
 export default {
     components: {
         CenterFrame,
-        Published,
+        PublishedItem,
     },
     props: {
         id: {

client/src/components/Workflow/Editor/ConnectionMenu.vue

@@ -130,3 +130,9 @@ function toggleConnection(inputObject: InputObject) {
     }
 }
 </script>
+
+<style scoped lang="scss">
+#input-choices-menu {
+    color: black;
+}
+</style>

client/src/components/Workflow/Editor/Draggable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ZoomTransform } from "d3-zoom";
 import type { Ref } from "vue";
-import { inject, PropType, reactive, ref } from "vue";
+import { computed, inject, PropType, reactive, ref } from "vue";
 
 import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
 import { useAnimationFrameThrottle } from "@/composables/throttle";
@@ -26,11 +26,15 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(["mousedown", "mouseup", "move", "dragstart", "start", "stop"]);
 
-let dragImg: HTMLImageElement | undefined;
+let dragImg: HTMLImageElement | null = null;
 const draggable = ref();
 const size = reactive(useAnimationFrameSize(draggable));
 const transform: Ref<ZoomTransform> | undefined = inject("transform");
@@ -86,14 +90,17 @@ const onMove = (position: Position, event: DragEvent) => {
 const onEnd = (position: Position, event: DragEvent) => {
     if (dragImg) {
         document.body.removeChild(dragImg);
+        dragImg = null;
     }
 
     dragging = false;
     emit("mouseup");
     emit("stop");
 };
 
-useDraggable(draggable, {
+const maybeDraggable = computed(() => (props.disabled ? null : draggable.value));
+
+useDraggable(maybeDraggable, {
     preventDefault: props.preventDefault,
     stopPropagation: props.stopPropagation,
     useCapture: false,

client/src/components/Workflow/Editor/DraggablePan.vue

@@ -27,6 +27,10 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    disabled: {
+        tyoe: Boolean,
+        default: false,
+    },
 });
 
 type Size = { width: number; height: number };
@@ -148,6 +152,7 @@ function onMouseUp(e: MouseEvent) {
         :prevent-default="preventDefault"
         :stop-propagation="stopPropagation"
         :drag-data="dragData"
+        :disabled="disabled"
         @move="onMove"
         @mouseup="onMouseUp"
         v-on="$listeners">

client/src/components/Workflow/Editor/Index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isCanvas" id="columns" class="workflow-client d-flex">
+    <div v-if="isCanvas" id="columns" class="d-flex">
         <StateUpgradeModal :state-messages="stateMessages" />
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
@@ -36,7 +36,7 @@
                 @onInsertWorkflow="onInsertWorkflow"
                 @onInsertWorkflowSteps="onInsertWorkflowSteps" />
         </FlexPanel>
-        <div id="center" class="workflow-center overflow-auto w-100">
+        <div id="center" class="workflow-center">
             <div class="unified-panel-header" unselectable="on">
                 <div class="unified-panel-header-inner">
                     <span class="sr-only">Workflow Editor</span>
@@ -63,7 +63,7 @@
             </WorkflowGraph>
         </div>
         <FlexPanel side="right">
-            <div class="unified-panel workflow-panel">
+            <div class="unified-panel bg-white">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
                         <WorkflowOptions
@@ -731,4 +731,13 @@ export default {
     cursor: pointer;
     z-index: 1002;
 }
+
+.workflow-center {
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: auto;
+    width: 100%;
+}
 </style>