add computed owned to useWorkflowInstance, and replace in components

Author: ahmedhamidawan

client/src/components/Workflow/WorkflowAnnotation.vue

@@ -3,14 +3,11 @@ import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faHdd } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
-import { isRegisteredUser } from "@/api";
 import { useMarkdown } from "@/composables/markdown";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { useHistoryStore } from "@/stores/historyStore";
-import { useUserStore } from "@/stores/userStore";
 
 import Heading from "../Common/Heading.vue";
 import TextSummary from "../Common/TextSummary.vue";
@@ -32,16 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     invocationUpdateTime: undefined,
 });
 
-const { workflow } = useWorkflowInstance(props.workflowId);
-
-const { currentUser } = storeToRefs(useUserStore());
-const owned = computed(() => {
-    if (isRegisteredUser(currentUser.value) && workflow.value) {
-        return currentUser.value.username === workflow.value.owner;
-    } else {
-        return false;
-    }
-});
+const { workflow, owned } = useWorkflowInstance(props.workflowId);
 
 const description = computed(() => {
     if (workflow.value?.annotation) {

client/src/components/Workflow/WorkflowNavigationTitle.vue

@@ -6,7 +6,6 @@ import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { RouterLink } from "vue-router";
 
-import { isRegisteredUser } from "@/api";
 import type { WorkflowInvocationElementView } from "@/api/invocations";
 import type { WorkflowSummary } from "@/api/workflows";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
@@ -37,16 +36,9 @@ const emit = defineEmits<{
     (e: "on-execute"): void;
 }>();
 
-const { workflow, loading, error } = useWorkflowInstance(props.workflowId);
+const { workflow, loading, error, owned } = useWorkflowInstance(props.workflowId);
 
-const { currentUser, isAnonymous } = storeToRefs(useUserStore());
-const owned = computed(() => {
-    if (isRegisteredUser(currentUser.value) && workflow.value) {
-        return currentUser.value.username === workflow.value.owner;
-    } else {
-        return false;
-    }
-});
+const { isAnonymous } = storeToRefs(useUserStore());
 
 const importErrorMessage = ref<string | null>(null);
 const importedWorkflow = ref<WorkflowSummary | null>(null);

client/src/components/WorkflowInvocationState/WorkflowInvocationShare.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
 const modalToggle = ref(false);
 
 // Workflow and History refs
-const { workflow, loading: workflowLoading, error: workflowError } = useWorkflowInstance(props.workflowId);
+const { workflow, loading, error, owned } = useWorkflowInstance(props.workflowId);
 const historyStore = useHistoryStore();
 
 /** The link to the invocation. */
@@ -58,7 +58,7 @@ async function makeInvocationShareable() {
 </script>
 
 <template>
-    <div>
+    <div v-if="owned">
         <BButton
             v-b-tooltip.noninteractive.hover
             title="Share Invocation"
@@ -76,11 +76,11 @@ async function makeInvocationShareable() {
             title-tag="h2"
             ok-title="Make Workflow and History Shareable, and Copy Link"
             @ok="makeInvocationShareable">
-            <BAlert v-if="workflowError" variant="danger" show>
-                {{ workflowError }}
+            <BAlert v-if="error" variant="danger" show>
+                {{ error }}
             </BAlert>
 
-            <LoadingSpan v-else-if="workflowLoading" message="Loading details for invocation" />
+            <LoadingSpan v-else-if="loading" message="Loading details for invocation" />
 
             <div v-else-if="!!workflow">
                 <p v-localize>

client/src/composables/useWorkflowInstance.ts

@@ -1,5 +1,6 @@
 import { computed, ref } from "vue";
 
+import { useUserStore } from "@/stores/userStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
@@ -9,6 +10,9 @@ export function useWorkflowInstance(workflowId: string) {
     const loading = ref(false);
     const error = ref<string | null>(null);
 
+    const userStore = useUserStore();
+    const owned = computed(() => workflow.value && userStore.matchesCurrentUsername(workflow.value.owner));
+
     async function getWorkflowInstance() {
         if (!workflow.value) {
             loading.value = true;
@@ -23,5 +27,5 @@ export function useWorkflowInstance(workflowId: string) {
     }
     getWorkflowInstance();
 
-    return { workflow, loading, error };
+    return { workflow, loading, error, owned };
 }