From e14bf799cc45d54bbb1e304f4a9cec0822e7a731 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 7 Mar 2025 17:08:50 +0500
Subject: [PATCH] use a computed instead of a function for workflow creator
 badges

Co-authored-by: mvdbeek <m.vandenbeek@gmail.com>
---
 .../Workflow/List/WorkflowIndicators.vue      | 65 +++++++++++--------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/client/src/components/Workflow/List/WorkflowIndicators.vue b/client/src/components/Workflow/List/WorkflowIndicators.vue
index c2e3cfa8a0b..758b59107ae 100644
--- a/client/src/components/Workflow/List/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/List/WorkflowIndicators.vue
@@ -23,8 +23,9 @@ import { isUrl } from "@/utils/url";
 import UtcDate from "@/components/UtcDate.vue";
 
 interface BadgeData {
+    name: string;
     url?: string;
-    icon?: IconDefinition;
+    icon: IconDefinition;
     title?: string;
     class?: Record<string, boolean>;
 }
@@ -84,6 +85,35 @@ const sourceTitle = computed(() => {
     }
 });
 
+const creatorBadges = computed<BadgeData[] | undefined>(() => {
+    return props.workflow.creator
+        ?.map((creator: Creator) => {
+            if (!creator.name) {
+                return;
+            }
+            let url: string | undefined;
+            let titleEnd = "Workflow Creator";
+
+            if (creator.url && isUrl(creator.url)) {
+                url = creator.url;
+            }
+            const orcidRegex = /^https:\/\/orcid\.org\/\d{4}-\d{4}-\d{4}-\d{3}[0-9X]$/;
+            if (creator.identifier && orcidRegex.test(creator.identifier)) {
+                url = creator.identifier;
+                titleEnd = "ORCID profile";
+            }
+
+            return {
+                name: creator.name,
+                url,
+                icon: creator.class === "Organization" ? faBuilding : faUserEdit,
+                title: `${url ? "Click to view " : ""}${titleEnd}`,
+                class: { "cursor-pointer": !!url, "outline-badge": !!url },
+            };
+        })
+        .filter((b) => !!b);
+});
+
 const { success } = useToast();
 
 function onCopyLink() {
@@ -106,27 +136,6 @@ function onViewUserPublished() {
     emit("updateFilter", "user", `'${props.workflow.owner}'`);
 }
 
-function getCreatorBadge(creator: Creator): BadgeData {
-    let url: string | undefined;
-    let titleEnd = "Workflow Creator";
-
-    if (creator.url && isUrl(creator.url)) {
-        url = creator.url;
-    }
-    const orcidRegex = /^https:\/\/orcid\.org\/\d{4}-\d{4}-\d{4}-\d{3}[0-9X]$/;
-    if (creator.identifier && orcidRegex.test(creator.identifier)) {
-        url = creator.identifier;
-        titleEnd = "ORCID profile";
-    }
-
-    return {
-        url,
-        icon: creator.class === "Organization" ? faBuilding : faUserEdit,
-        title: `${url ? "Click to view " : ""}${titleEnd}`,
-        class: { "cursor-pointer": !!url, "outline-badge": !!url },
-    };
-}
-
 function getStepText(steps: number) {
     if (steps === 1) {
         return "1 step";
@@ -205,18 +214,18 @@ function getStepText(steps: number) {
             <span class="font-weight-bold"> {{ workflow.owner }} </span>
         </BBadge>
 
-        <template v-if="props.workflow.creator?.length">
+        <template v-if="creatorBadges?.length">
             <BBadge
-                v-for="creator in props.workflow.creator"
+                v-for="creator in creatorBadges"
                 :key="creator.name"
                 v-b-tooltip.noninteractive.hover
                 data-description="external creator badge"
                 class="mx-1"
-                :class="getCreatorBadge(creator)?.class"
-                :title="getCreatorBadge(creator)?.title"
-                :href="getCreatorBadge(creator)?.url"
+                :class="creator.class"
+                :title="creator.title"
+                :href="creator.url"
                 target="_blank">
-                <FontAwesomeIcon :icon="getCreatorBadge(creator).icon" size="sm" fixed-width />
+                <FontAwesomeIcon :icon="creator.icon" size="sm" fixed-width />
                 <span class="font-weight-bold"> {{ creator.name }} </span>
             </BBadge>
         </template>