✨: update WorkflowCard button titles for Anonymous user

client/src/components/Workflow/WorkflowCard.vue

@@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit, faEye, faPen, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -42,6 +43,8 @@ const emit = defineEmits<{
 const router = useRouter();
 const userStore = useUserStore();
 
+const { isAnonymous } = storeToRefs(userStore);
+
 const showRename = ref(false);
 const showPreview = ref(false);
 
@@ -60,6 +63,35 @@ const description = computed(() => {
         return null;
     }
 });
+const editButtonTitle = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to edit Workflow";
+    } else {
+        if (workflow.value.deleted) {
+            return "You cannot edit a deleted workflow. Restore it first.";
+        } else {
+            return "Edit Workflow";
+        }
+    }
+});
+const importedButtonTitle = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to import workflow";
+    } else {
+        return "Import this workflow to edit";
+    }
+});
+const runButtonTitle = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to run workflow";
+    } else {
+        if (workflow.value.deleted) {
+            return "You cannot run a deleted workflow. Restore it first.";
+        } else {
+            return "Run workflow";
+        }
+    }
+});
 
 function onEdit() {
     router.push(`/workflows/edit?id=${workflow.value.id}`);
@@ -119,7 +151,7 @@ async function onTagClick(tag: string) {
                     </div>
 
                     <div class="workflow-count-actions">
-                        <WorkflowInvocationsCount class="mx-1" :workflow="workflow" />
+                        <WorkflowInvocationsCount v-if="!isAnonymous && !shared" class="mx-1" :workflow="workflow" />
 
                         <WorkflowActions
                             :workflow="workflow"
@@ -141,7 +173,7 @@ async function onTagClick(tag: string) {
                     <StatelessTags
                         clickable
                         :value="workflow.tags"
-                        :disabled="workflow.deleted"
+                        :disabled="isAnonymous || workflow.deleted || shared"
                         :max-visible-tags="gridView ? 2 : 8"
                         @input="onTagsUpdate($event)"
                         @tag-click="onTagClick($event)" />
@@ -155,16 +187,12 @@ async function onTagClick(tag: string) {
 
                     <div class="workflow-edit-run-buttons">
                         <BButton
-                            v-if="!shared"
+                            v-if="!isAnonymous && !shared"
                             v-b-tooltip.hover
                             :disabled="workflow.deleted"
                             size="sm"
                             class="workflow-edit-button"
-                            :title="
-                                workflow.deleted
-                                    ? 'You cannot edit a deleted workflow. Restore it first.'
-                                    : 'Edit workflow'
-                            "
+                            :title="editButtonTitle"
                             variant="outline-primary"
                             @click="onEdit">
                             <FontAwesomeIcon :icon="faEdit" fixed-width />
@@ -175,20 +203,24 @@ async function onTagClick(tag: string) {
                             v-else
                             v-b-tooltip.hover
                             size="sm"
-                            title="Import this workflow to edit"
+                            :disabled="isAnonymous"
+                            :title="importedButtonTitle"
                             :icon="faUpload"
                             variant="outline-primary"
                             :action="onImport">
                             Import
                         </AsyncButton>
 
-                        <WorkflowRunButton :id="workflow.id" />
+                        <WorkflowRunButton
+                            :id="workflow.id"
+                            :disabled="isAnonymous || workflow.deleted"
+                            :title="runButtonTitle" />
                     </div>
                 </div>
             </div>
 
             <WorkflowRename
-                v-if="!shared && !workflow.deleted"
+                v-if="!isAnonymous && !shared && !workflow.deleted"
                 :id="workflow.id"
                 :show="showRename"
                 :name="workflow.name"