Add sharing interface for invocations

This uses the `GenericWizard` to enforce the user to make their history and workflow both accessible, and then shows them the link they can copy.

Fixes galaxyproject#19756

Author: ahmedhamidawan

client/src/components/Common/Wizard/GenericWizard.vue

@@ -261,6 +261,7 @@ const steps = computed<[string, WizardStep][]>(() => {
             display: flex;
             flex-direction: column;
             align-items: center;
+            width: 100%;
         }
     }
 

client/src/components/CopyToClipboard.vue

@@ -1,5 +1,7 @@
 <template>
-    <FontAwesomeIcon class="cursor-pointer" :title="title" :icon="['far', 'copy']" @click="copy(text, message)" />
+    <component :is="component" @click="copy(text, message)">
+        <FontAwesomeIcon :class="{ 'cursor-pointer': component !== 'button' }" :title="title" :icon="['far', 'copy']" />
+    </component>
 </template>
 
 <script>
@@ -28,6 +30,11 @@ export default {
             default: "copy to clipboard",
             required: false,
         },
+        component: {
+            type: String,
+            default: "span",
+            required: false,
+        },
     },
     methods: {
         copy(text, message) {

client/src/components/Sharing/SharingPage.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
     id: string;
     pluralName: string;
     modelClass: string;
+    noHeading?: boolean;
 }>();
 
 const errors = ref<string[]>([]);
@@ -219,11 +220,13 @@ async function setUsername() {
 }
 
 const embedable = computed(() => item.value.importable && props.modelClass.toLocaleLowerCase() === "workflow");
+
+defineExpose({ item });
 </script>
 
 <template>
     <div class="sharing-page">
-        <Heading h1 size="lg" separator>
+        <Heading v-if="!props.noHeading" h1 size="lg" separator>
             <span>
                 Share or Publish {{ modelClass }} <span v-if="ready">"{{ item.title }}"</span>
             </span>

client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { faLink, faShareAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+    BAlert,
+    BButton,
+    BFormInput,
+    BInputGroup,
+    BInputGroupAppend,
+    BInputGroupPrepend,
+    BInputGroupText,
+    BModal,
+} from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
+
+import { getFullAppUrl } from "@/app/utils";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
+import { useHistoryStore } from "@/stores/historyStore";
+
+import { useWizard } from "../Common/Wizard/useWizard";
+
+import GenericWizard from "../Common/Wizard/GenericWizard.vue";
+import CopyToClipboard from "../CopyToClipboard.vue";
+import LoadingSpan from "../LoadingSpan.vue";
+import SharingPage from "../Sharing/SharingPage.vue";
+
+const props = defineProps<{
+    invocationId: string;
+    workflowId: string;
+    historyId: string;
+}>();
+
+const modalToggle = ref(false);
+
+// Workflow and History refs
+const { workflow, loading: workflowLoading, error: workflowError } = useWorkflowInstance(props.workflowId);
+const historyStore = useHistoryStore();
+const history = computed(() => historyStore.getHistoryById(props.historyId, true));
+
+/** The link to the invocation. */
+const invocationLink = computed(() => getFullAppUrl(`workflows/invocations/${props.invocationId}`));
+
+// Component references
+const historySharing = ref<InstanceType<typeof SharingPage> | null>(null);
+const workflowSharing = ref<InstanceType<typeof SharingPage> | null>(null);
+
+// Computed properties to check if the workflow and history are accessible
+const workflowIsAccessible = computed(() => {
+    const { item } = workflowSharing.value || {};
+    return Boolean(item?.importable) || Boolean(item?.users_shared_with?.length);
+});
+const historyIsAccessible = computed(() => {
+    const { item } = historySharing.value || {};
+    return Boolean(item?.importable) || Boolean(item?.users_shared_with?.length);
+});
+
+/** The workflow and history sharing wizard steps. */
+const wizard = useWizard({
+    "share-workflow": {
+        label: "Share workflow",
+        instructions: "",
+        isValid: () => workflowIsAccessible.value,
+        isSkippable: () => false,
+    },
+    "share-history": {
+        label: "Share history",
+        instructions: "",
+        isValid: () => historyIsAccessible.value,
+        isSkippable: () => false,
+    },
+    "get-link": {
+        label: "Share the invocation",
+        instructions: "Here is a link to the invocation.",
+        isValid: () => true,
+        isSkippable: () => false,
+    },
+});
+
+/** Information to show in the instructional message. */
+const currentItemInfo = computed(() => {
+    if (wizard.isCurrent("share-workflow")) {
+        return {
+            type: "workflow",
+            name: workflow.value?.name || "...",
+            accessibleStatus: workflowIsAccessible.value,
+        };
+    } else if (wizard.isCurrent("share-history")) {
+        return {
+            type: "history",
+            name: history.value?.name || "...",
+            accessibleStatus: historyIsAccessible.value,
+        };
+    } else {
+        return null;
+    }
+});
+
+// This next block is used to navigate to the "get-link" step of the wizard
+// when the modal is opened and the workflow and history are already accessible.
+const navigatedToLinkOnce = ref(false);
+watch(
+    () => modalToggle.value,
+    (opened) => {
+        if (opened && !navigatedToLinkOnce.value && !wizard.isCurrent("get-link")) {
+            // A timeout is used to ensure that the sharing components are loaded
+            setTimeout(() => {
+                if (workflowIsAccessible.value && historyIsAccessible.value) {
+                    wizard.goTo("get-link");
+                }
+                navigatedToLinkOnce.value = true;
+            }, 1000);
+        }
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <div>
+        <BButton
+            v-b-tooltip.noninteractive.hover
+            title="Share Invocation"
+            size="sm"
+            class="text-decoration-none"
+            variant="link"
+            :disabled="!workflow || !history"
+            @click="modalToggle = true">
+            <FontAwesomeIcon :icon="faShareAlt" fixed-width />
+        </BButton>
+
+        <BModal
+            v-model="modalToggle"
+            title="Share Workflow Invocation"
+            title-sr-only
+            hide-header
+            size="xl"
+            scrollable
+            dialog-class="invocation-share-dialog"
+            ok-only
+            ok-title="Exit"
+            ok-variant="secondary">
+            <BAlert v-if="workflowError" variant="danger" show>
+                {{ workflowError }}
+            </BAlert>
+
+            <LoadingSpan v-else-if="workflowLoading" message="Loading details for invocation" />
+
+            <GenericWizard
+                v-else-if="!!workflow && !!history"
+                title="Share the associated workflow and history first"
+                :use="wizard"
+                submit-button-label="Next"
+                :is-busy="workflowLoading">
+                <div v-if="currentItemInfo?.accessibleStatus" class="donemessagelarge">
+                    The {{ currentItemInfo.type }}
+                    <strong> "{{ currentItemInfo.name }}" </strong>
+                    is either made accessible via link or shared with at least one user.
+                    <strong>Click next to continue.</strong>
+                </div>
+                <BAlert v-else-if="currentItemInfo?.accessibleStatus === false" variant="info" show>
+                    The {{ currentItemInfo.type }}
+                    <strong> "{{ currentItemInfo.name }}" </strong>
+                    is not accessible via link or shared with any user. Select your sharing preferences below to make it
+                    accessible.
+                </BAlert>
+
+                <div v-show="wizard.isCurrent('share-workflow')" class="w-100">
+                    <SharingPage
+                        :id="workflow.id"
+                        ref="workflowSharing"
+                        :key="`workflow-${workflow.id}`"
+                        class="sharing-view"
+                        plural-name="Workflows"
+                        model-class="Workflow"
+                        no-heading />
+                </div>
+
+                <div v-show="wizard.isCurrent('share-history')" class="w-100">
+                    <SharingPage
+                        :id="history.id"
+                        ref="historySharing"
+                        :key="`history-${history.id}`"
+                        class="sharing-view"
+                        plural-name="Histories"
+                        model-class="History"
+                        no-heading />
+                </div>
+
+                <div v-if="wizard.isCurrent('get-link')" class="w-100">
+                    <BInputGroup>
+                        <BInputGroupPrepend>
+                            <BInputGroupText>
+                                <FontAwesomeIcon :icon="faLink" />
+                            </BInputGroupText>
+                        </BInputGroupPrepend>
+
+                        <BFormInput type="text" :value="invocationLink" disabled />
+
+                        <BInputGroupAppend>
+                            <CopyToClipboard
+                                message="Link to invocation copied to clipboard"
+                                :text="invocationLink"
+                                title="Copy key"
+                                component="button" />
+                        </BInputGroupAppend>
+                    </BInputGroup>
+
+                    <p class="mt-2">
+                        <strong>Note:</strong>
+                        If you share this link with someone, and they are still unable to view the invocation, please go
+                        back and ensure that the workflow and history are either made accessible to anyone via link, or
+                        shared with the same user.
+                    </p>
+                </div>
+            </GenericWizard>
+        </BModal>
+    </div>
+</template>
+
+<style lang="scss">
+.invocation-share-dialog {
+    width: 900px;
+}
+</style>
+
+<style lang="scss" scoped>
+.sharing-view {
+    container-type: unset;
+    overflow-y: unset;
+}
+</style>

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -28,6 +28,7 @@ import WorkflowInvocationExportOptions from "./WorkflowInvocationExportOptions.v
 import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue";
 import WorkflowInvocationMetrics from "./WorkflowInvocationMetrics.vue";
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
+import WorkflowInvocationShare from "./WorkflowInvocationShare.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
@@ -263,6 +264,10 @@ async function onCancel() {
                     <FontAwesomeIcon :icon="faSquare" fixed-width />
                     Cancel
                 </BButton>
+                <WorkflowInvocationShare
+                    :invocation-id="invocation.id"
+                    :workflow-id="invocation.workflow_id"
+                    :history-id="invocation.history_id" />
             </template>
         </WorkflowNavigationTitle>
         <WorkflowAnnotation