Add sharing option for invocations

Opens a modal that does the following on `ok`:
- Share workflow (make importable)
- Share history (make importable)
- Copy the link to your clipboard

Fixes galaxyproject#19756

Author: ahmedhamidawan

client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BModal } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import { GalaxyApi } from "@/api";
+import { getFullAppUrl } from "@/app/utils";
+import { Toast } from "@/composables/toast";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
+import { useHistoryStore } from "@/stores/historyStore";
+import { copy } from "@/utils/clipboard";
+
+import LoadingSpan from "../LoadingSpan.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();
+
+/** The link to the invocation. */
+const invocationLink = computed(() => getFullAppUrl(`workflows/invocations/${props.invocationId}`));
+
+async function makeInvocationShareable() {
+    if (!workflow.value) {
+        return;
+    }
+
+    // Note: Is it worth it to check here if the workflow and history are already shareable?
+
+    const { error: workflowShareError } = await GalaxyApi().PUT("/api/workflows/{workflow_id}/enable_link_access", {
+        params: { path: { workflow_id: workflow.value.id } },
+    });
+    const { error: historyShareError } = await GalaxyApi().PUT("/api/histories/{history_id}/enable_link_access", {
+        params: { path: { history_id: props.historyId } },
+    });
+
+    if (workflowShareError || historyShareError) {
+        Toast.error(`${workflowShareError || historyShareError}`, "Failed to make workflow and history shareable.");
+        return;
+    } else {
+        Toast.success("Workflow and history are now shareable.");
+    }
+
+    copy(invocationLink.value, "The link to the invocation has been copied to your clipboard.");
+}
+</script>
+
+<template>
+    <div>
+        <BButton
+            v-b-tooltip.noninteractive.hover
+            title="Share Invocation"
+            size="sm"
+            class="text-decoration-none"
+            variant="link"
+            :disabled="!workflow"
+            @click="modalToggle = true">
+            <FontAwesomeIcon :icon="faShareAlt" fixed-width />
+        </BButton>
+
+        <BModal
+            v-model="modalToggle"
+            title="Share Workflow Invocation"
+            title-tag="h2"
+            ok-title="Make Workflow and History Shareable, and Copy Link"
+            @ok="makeInvocationShareable">
+            <BAlert v-if="workflowError" variant="danger" show>
+                {{ workflowError }}
+            </BAlert>
+
+            <LoadingSpan v-else-if="workflowLoading" message="Loading details for invocation" />
+
+            <div v-else-if="!!workflow">
+                <p v-localize>
+                    To share this invocation, you need to make sure that the workflow
+                    <strong>"{{ workflow.name }}"</strong>
+                    and history
+                    <strong>"{{ historyStore.getHistoryNameById(props.historyId) }}"</strong>
+                    are accessible via link.
+                </p>
+                <p v-localize>
+                    You can do this by clicking the <i>"Make Workflow and History Shareable, and Copy Link"</i>
+                    button below. This will generate a link that you can share with others, allowing them to view the
+                    invocation.
+                </p>
+            </div>
+        </BModal>
+    </div>
+</template>

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