Minor styling fixes for invocation view header and history list cards

client/src/components/Collections/common/ClickToEdit.vue

@@ -83,10 +83,12 @@ function revertToOriginal() {
     <component
         :is="props.component || 'label'"
         v-else
+        v-g-tooltip.onoverflow
         role="button"
         for="click-to-edit-input"
         class="click-to-edit-label text-break"
         tabindex="0"
+        :title="computedValue || title"
         @keyup.enter="editable = true"
         @click.stop="editable = true">
         <span v-if="computedValue">{{ computedValue }}</span>

client/src/components/Common/GCard.vue

@@ -329,7 +329,7 @@ function onKeyDown(event: KeyboardEvent) {
                 <div class="d-flex flex-column flex-gapy-1">
                     <div
                         :id="`g-card-${props.id}-header`"
-                        class="d-flex flex-wrap flex-gapy-1 flex-gapx-1 justify-content-between">
+                        class="d-flex flex-gapy-1 flex-gapx-1 justify-content-between">
                         <div class="d-flex flex-column flex-grow-1 g-card-title-section">
                             <div class="d-flex">
                                 <div v-if="selectable">
@@ -349,7 +349,6 @@ function onKeyDown(event: KeyboardEvent) {
                                             :id="getElementId(props.id, 'title')"
                                             bold
                                             inline
-                                            class="d-block"
                                             :size="props.titleSize">
                                             <FontAwesomeIcon
                                                 v-if="props.titleIcon?.icon"
@@ -371,7 +370,7 @@ function onKeyDown(event: KeyboardEvent) {
                                             <template v-else>
                                                 <span
                                                     :id="getElementId(props.id, 'title-text')"
-                                                    v-g-tooltip.hover
+                                                    v-g-tooltip.onoverflow
                                                     :title="localize(title)"
                                                     :class="{ 'g-card-title-truncate': props.titleNLines }">
                                                     {{ title }}
@@ -752,14 +751,7 @@ function onKeyDown(event: KeyboardEvent) {
     }
 
     .g-card-rename {
-        visibility: hidden;
-    }
-
-    &:hover,
-    &:focus-within {
-        .g-card-rename {
-            visibility: visible;
-        }
+        align-self: flex-start;
     }
 
     .g-card-content {

client/src/components/History/HistoryCard.vue

@@ -29,7 +29,6 @@
 
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { userOwnsHistory } from "@/api";
 import type { AnyHistoryEntry } from "@/api/histories";
@@ -120,8 +119,6 @@ const props = withDefaults(defineProps<Props>(), {
     highlighted: false,
 });
 
-const router = useRouter();
-
 const historyStore = useHistoryStore();
 
 const userStore = useUserStore();
@@ -143,6 +140,12 @@ const emit = defineEmits<{
      */
     (e: "titleClick", history: AnyHistoryEntry["id"]): void;
 
+    /**
+     * Emitted when the rename action is triggered
+     * @event rename
+     */
+    (e: "rename", id: string, name: string): void;
+
     /**
      * Emitted when a tag is clicked for filtering
      * @event tagClick
@@ -178,8 +181,8 @@ const emit = defineEmits<{
  * Handles clicking on the history title to navigate to the history view
  * @function onTitleClick
  */
-function onTitleClick() {
-    router.push(`/histories/view?id=${props.history.id}`);
+async function onTitleClick() {
+    await historyStore.setCurrentHistory(props.history.id);
 }
 
 /**
@@ -189,7 +192,7 @@ function onTitleClick() {
 const historyCardTitle = computed(() => {
     return {
         label: props.history.name,
-        title: localize("Click to view this history"),
+        title: localize("Click to set as current"),
         handler: onTitleClick,
     };
 });
@@ -270,7 +273,7 @@ function onKeyDown(event: KeyboardEvent) {
         :clickable="props.clickable"
         :highlighted="props.highlighted"
         @titleClick="onTitleClick"
-        @rename="() => router.push(`/histories/rename?id=${history.id}`)"
+        @rename="emit('rename', history.id, history.name)"
         @select="isMyHistory(history) && emit('select', history)"
         @tagsUpdate="(tags) => onTagsUpdate(history.id, tags)"
         @tagClick="(tag) => emit('tagClick', tag)"

client/src/components/History/HistoryCardList.vue

@@ -23,11 +23,13 @@
  *   @tagClick="onTagClick" />
  */
 
-import type { Ref } from "vue";
+import { reactive, type Ref, ref } from "vue";
 
 import type { AnyHistoryEntry, MyHistory } from "@/api/histories";
 import { isMyHistory } from "@/api/histories";
+import { useHistoryStore } from "@/stores/historyStore";
 
+import RenameModal from "@/components/Common/RenameModal.vue";
 import HistoryCard from "@/components/History/HistoryCard.vue";
 
 interface Props {
@@ -150,6 +152,28 @@ const emit = defineEmits<{
      */
     (e: "on-history-card-click", history: AnyHistoryEntry, event: Event): void;
 }>();
+
+const historyStore = useHistoryStore();
+
+const modalOptions = reactive({
+    rename: {
+        id: "",
+        name: "",
+    },
+});
+
+const showRename = ref(false);
+
+function onRenameClose() {
+    showRename.value = false;
+    emit("refreshList", true, true);
+}
+
+function onRename(id: string, name: string) {
+    modalOptions.rename.id = id;
+    modalOptions.rename.name = name;
+    showRename.value = true;
+}
 </script>
 
 <template>
@@ -173,8 +197,16 @@ const emit = defineEmits<{
             @tagClick="(...args) => emit('tagClick', ...args)"
             @refreshList="(...args) => emit('refreshList', ...args)"
             @updateFilter="(...args) => emit('updateFilter', ...args)"
+            @rename="onRename"
             @on-key-down="(...args) => emit('on-key-down', ...args)"
             @on-history-card-click="(...args) => emit('on-history-card-click', ...args)" />
+
+        <RenameModal
+            v-if="showRename"
+            item-type="history"
+            :name="modalOptions.rename.name"
+            :rename-action="(newName) => historyStore.updateHistory(modalOptions.rename.id, { name: newName })"
+            @close="onRenameClose" />
     </div>
 </template>
 

client/src/components/History/Layout/DetailsLayout.vue

@@ -3,7 +3,7 @@ import { faPen, faSave, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BFormTextarea } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 import l from "@/utils/localization";
@@ -41,8 +41,6 @@ const userStore = useUserStore();
 const { isAnonymous } = storeToRefs(userStore);
 
 const nameRef = ref<HTMLInputElement | null>(null);
-const clickToEditRef = ref<InstanceType<typeof ClickToEdit> | null>(null);
-const clickToEditClamped = ref(false);
 
 const editing = ref(false);
 const textSelected = ref(false);
@@ -107,19 +105,6 @@ function onToggle() {
     }
 }
 
-function checkClickToEditClamped() {
-    const el = clickToEditRef.value?.$el;
-    if (el) {
-        clickToEditClamped.value = el.scrollHeight > el.clientHeight;
-    }
-}
-
-onMounted(checkClickToEditClamped);
-watch(
-    () => props.name,
-    () => nextTick(checkClickToEditClamped),
-);
-
 function selectText() {
     if (!textSelected.value) {
         nameRef.value?.select();
@@ -137,11 +122,8 @@ function selectText() {
             <template v-if="!summarized && !editing">
                 <ClickToEdit
                     v-if="renameable"
-                    ref="clickToEditRef"
                     v-model="clickToEditName"
-                    v-g-tooltip.hover="clickToEditClamped ? name : ''"
                     component="h3"
-                    title="..."
                     data-description="name display"
                     no-save-on-blur
                     class="name-display my-2 w-100" />
@@ -194,7 +176,7 @@ function selectText() {
                 v-if="tags"
                 :class="{
                     'mt-2': !summarized,
-                    tags: ['both', 'tags'].includes(summarized),
+                    tags: ['both', 'tags'].includes(summarized || ''),
                     hidden: summarized === 'hidden',
                 }"
                 :value="tags"

client/src/components/Panels/WorkflowPanel.vue

@@ -178,7 +178,6 @@ function createNew(event: Event) {
                 :filterable="false"
                 :current-workflow-id="props.currentWorkflowId"
                 editor-view
-                compact
                 @insertWorkflow="(...args) => emit('insertWorkflow', ...args)"
                 @insertWorkflowSteps="(...args) => emit('insertWorkflowSteps', ...args)"
                 @refreshList="refresh" />

client/src/components/ProgressBar.vue

@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
     <div class="my-1 progress-container">
-        <small v-if="props.note" class="progress-note">
+        <small v-if="props.note" v-g-tooltip.onoverflow class="progress-note" :title="props.note">
             {{ props.note }}<span v-if="props.loading">.<span class="blinking">..</span></span>
         </small>
         <BProgress :max="props.total">

client/src/components/Workflow/Invocation/InvocationScrollList.vue

@@ -93,7 +93,7 @@ function getInvocationBadges(invocation: WorkflowInvocation) {
         {
             id: "state",
             label: invocation.state,
-            title: invocation.state,
+            title: "",
             class: stateClass(invocation.state),
             visible: true,
         },

client/src/components/Workflow/List/WorkflowCard.vue

@@ -18,7 +18,6 @@ interface Props {
     filterable?: boolean;
     publishedView?: boolean;
     editorView?: boolean;
-    compact?: boolean;
     current?: boolean;
     selected?: boolean;
     selectable?: boolean;
@@ -32,7 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
     hideRuns: false,
     filterable: true,
     editorView: false,
-    compact: false,
     current: false,
     selected: false,
     selectable: false,
@@ -131,10 +129,10 @@ function onKeyDown(event: KeyboardEvent) {
     <GCard
         :id="workflow.id"
         class="workflow-card"
-        can-rename-title
+        :can-rename-title="!props.workflow.deleted"
         :title="workflowCardTitle"
         :title-badges="workflowCardTitleBadges"
-        :title-n-lines="props.compact ? 2 : undefined"
+        :title-n-lines="2"
         :description="description || ''"
         :grid-view="props.gridView"
         :badges="workflowCardBadges"

client/src/components/Workflow/List/WorkflowCardList.vue

@@ -19,7 +19,6 @@ interface Props {
     filterable?: boolean;
     publishedView?: boolean;
     editorView?: boolean;
-    compact?: boolean;
     currentWorkflowId?: string;
     selectedWorkflowIds?: SelectedWorkflow[];
     itemRefs?: Record<string, Ref<InstanceType<typeof WorkflowCard> | null>>;
@@ -33,7 +32,6 @@ const props = withDefaults(defineProps<Props>(), {
     filterable: true,
     publishedView: false,
     editorView: false,
-    compact: false,
     currentWorkflowId: "",
     selectedWorkflowIds: () => [],
     itemRefs: () => ({}),
@@ -107,7 +105,6 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>();
             :filterable="props.filterable"
             :published-view="props.publishedView"
             :editor-view="props.editorView"
-            :compact="props.compact"
             :current="workflow.id === props.currentWorkflowId"
             :clickable="props.clickable"
             :highlighted="props.rangeSelectAnchor?.id === workflow.id"

client/src/components/Workflow/WorkflowNavigationTitle.vue

@@ -136,9 +136,9 @@ async function rerunWorkflow() {
 
         <div class="position-relative">
             <div v-if="workflow" class="bg-secondary px-2 py-1 rounded d-flex flex-gapx-1 justify-content-between">
-                <div class="py-1 d-flex flex-wrap align-items-center flex-gapx-1" data-description="workflow heading">
+                <div class="py-1 align-items-center" data-description="workflow heading">
                     <slot name="before-icon" />
-                    <FontAwesomeIcon :icon="faSitemap" fixed-width />
+                    <FontAwesomeIcon class="mr-1" :icon="faSitemap" fixed-width />
                     <b> {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }} </b>
                     <span>(Version: {{ workflow.version + 1 }})</span>
                 </div>

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -5,7 +5,6 @@ import {
     faExclamation,
     faSpinner,
     faSquare,
-    faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BBadge, BNav, BNavItem } from "bootstrap-vue";
@@ -450,17 +449,6 @@ async function onCancel() {
                 <BBadge v-if="isPolling" v-g-tooltip.hover title="Polling for updates" variant="link">
                     <FontAwesomeIcon :icon="faSpinner" spin />
                 </BBadge>
-                <GButton
-                    v-if="!invocationAndJobTerminal"
-                    tooltip
-                    class="my-1"
-                    title="Cancel scheduling of workflow invocation"
-                    data-description="cancel invocation button"
-                    size="small"
-                    @click="onCancel">
-                    <FontAwesomeIcon :icon="faTimes" fixed-width />
-                    Cancel Workflow
-                </GButton>
             </div>
         </BNav>
 
@@ -581,7 +569,6 @@ async function onCancel() {
     // progress bar shrinks to fit divs on either side
     flex-grow: 1;
     flex-shrink: 1;
-    max-width: 50%;
 
     .steps-progress,
     .jobs-progress {