Merge pull request #17538 from ElectronicBlueberry/workflow-list-tweaks

Workflow list small tweaks
galaxyproject · Feb 23, 2024 · f80095d · f80095d
2 parents 516932c + 69db98b
commit f80095d
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 57 deletions.
diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
@@ -42,7 +42,7 @@ async function onClick() {
 
 <template>
     <BButton
-        v-b-tooltip.hover="!title"
+        v-b-tooltip.hover.noninteractive="!title"
         :title="title"
         :size="size"
         :variant="variant"

diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
@@ -153,7 +153,6 @@ watch(
         <DelayedInput
             v-if="props.menuType !== 'standalone'"
             v-show="props.menuType == 'linked' || (props.menuType == 'separate' && !props.showAdvanced)"
-            :class="props.filterText && 'font-weight-bold'"
             :query="props.filterText"
             :delay="props.debounceDelay"
             :loading="props.loading"
@@ -235,7 +234,7 @@ watch(
             </div>
 
             <!-- Perform search or cancel out (or open help modal for whole Menu if exists) -->
-            <div class="mt-3">
+            <div class="mb-3 mt-1">
                 <BButton
                     :id="`${identifier}-advanced-filter-submit`"
                     class="mr-1"

diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
@@ -88,6 +88,7 @@ watch(
                 ref="filterMenuInput"
                 v-model="localValue"
                 v-b-tooltip.focus.v-danger="hasError(props.name)"
+                class="mw-100"
                 size="sm"
                 :state="hasError(props.name) ? false : null"
                 :placeholder="`any ${props.filter.placeholder}`"

diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue
@@ -215,7 +215,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         <div v-for="action in actions" :key="action.class">
             <AsyncButton
                 v-if="action.condition && action.component === 'async'"
-                v-b-tooltip.hover
+                v-b-tooltip.hover.noninteractive
                 :class="action.class"
                 class="inline-icon-button mr-1"
                 :variant="action.variant"
@@ -226,7 +226,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
 
             <BButton
                 v-else-if="action.condition && action.component === 'button'"
-                v-b-tooltip.hover
+                v-b-tooltip.hover.noninteractive
                 :class="action.class"
                 class="inline-icon-button mr-1"
                 :variant="action.variant"
@@ -239,7 +239,7 @@ const menuActions: ComputedRef<BAction[]> = computed(() => {
         </div>
 
         <BDropdown
-            v-b-tooltip.top
+            v-b-tooltip.top.noninteractive
             :data-workflow-actions-dropdown="workflow.id"
             right
             no-caret

diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
@@ -106,7 +106,7 @@ async function onTagClick(tag: string) {
                             {{ workflow.name }}
                             <BButton
                                 v-if="!shared && !workflow.deleted"
-                                v-b-tooltip.hover
+                                v-b-tooltip.hover.noninteractive
                                 :data-workflow-rename="workflow.id"
                                 class="inline-icon-button workflow-rename"
                                 variant="link"
@@ -156,7 +156,7 @@ async function onTagClick(tag: string) {
                     <div class="workflow-edit-run-buttons">
                         <BButton
                             v-if="!shared"
-                            v-b-tooltip.hover
+                            v-b-tooltip.hover.noninteractive
                             :disabled="workflow.deleted"
                             size="sm"
                             class="workflow-edit-button"
@@ -173,7 +173,7 @@ async function onTagClick(tag: string) {
 
                         <AsyncButton
                             v-else
-                            v-b-tooltip.hover
+                            v-b-tooltip.hover.noninteractive
                             size="sm"
                             title="Import this workflow to edit"
                             :icon="faUpload"
@@ -199,15 +199,24 @@ async function onTagClick(tag: string) {
                 ok-only
                 size="xl"
                 hide-header
-                modal-class="workflow-preview-modal"
-                dialog-class="workflow-preview-modal w-auto"
+                dialog-class="workflow-card-preview-modal w-auto"
                 centered>
                 <WorkflowQuickView :id="workflow.id" :show="showPreview" @ok="toggleShowPreview(false)" />
             </BModal>
         </div>
     </div>
 </template>
 
+<style lang="scss">
+.workflow-card-preview-modal {
+    max-width: min(1400px, calc(100% - 200px));
+
+    .modal-content {
+        height: min(800px, calc(100vh - 80px));
+    }
+}
+</style>
+
 <style scoped lang="scss">
 @import "theme/blue.scss";
 @import "breakpoints.scss";
@@ -253,10 +262,6 @@ async function onTagClick(tag: string) {
             font-weight: bold;
         }
 
-        .workflow-preview-modal {
-            min-width: max-content;
-        }
-
         .workflow-card-actions {
             display: flex;
             gap: 0.25rem;

diff --git a/client/src/components/Workflow/WorkflowIndicators.vue b/client/src/components/Workflow/WorkflowIndicators.vue
@@ -80,7 +80,7 @@ function onViewUserPublished() {
     <div>
         <BButton
             v-if="workflow.published"
-            v-b-tooltip
+            v-b-tooltip.noninteractive
             size="sm"
             class="workflow-published-icon inline-icon-button"
             to="/workflows/list_published"
@@ -90,7 +90,7 @@ function onViewUserPublished() {
 
         <BButton
             v-if="sourceType.includes('trs')"
-            v-b-tooltip
+            v-b-tooltip.noninteractive
             size="sm"
             class="workflow-trs-icon inline-icon-button"
             :title="sourceTitle">
@@ -99,7 +99,7 @@ function onViewUserPublished() {
 
         <BButton
             v-if="sourceType == 'url'"
-            v-b-tooltip
+            v-b-tooltip.noninteractive
             size="sm"
             class="workflow-external-link inline-icon-button"
             :title="sourceTitle">
@@ -115,7 +115,7 @@ function onViewUserPublished() {
 
         <BBadge
             v-if="shared && !publishedView"
-            v-b-tooltip
+            v-b-tooltip.noninteractive
             class="outline-badge cursor-pointer mx-1"
             :title="`'${workflow.owner}' shared this workflow with you. Click to view all workflows shared with you by '${workflow.owner}'`"
             @click="onViewMySharedByUser">
@@ -125,7 +125,7 @@ function onViewUserPublished() {
 
         <BBadge
             v-if="publishedView"
-            v-b-tooltip
+            v-b-tooltip.noninteractive
             class="outline-badge cursor-pointer mx-1"
             :title="publishedTitle"
             @click="onViewUserPublished">

diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -42,7 +42,7 @@ function onInvocations() {
     <div class="workflow-invocations-count d-flex align-items-center flex-gapx-1">
         <BBadge
             v-if="count != undefined"
-            v-b-tooltip.hover
+            v-b-tooltip.hover.noninteractive
             pill
             :title="localize('View workflow invocations')"
             class="outline-badge cursor-pointer list-view"
@@ -57,7 +57,7 @@ function onInvocations() {
 
         <BButton
             v-else
-            v-b-tooltip.hover
+            v-b-tooltip.hover.noninteractive
             :title="localize('View workflow invocations')"
             class="inline-icon-button"
             variant="link"

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
@@ -221,7 +221,7 @@ onMounted(() => {
 <template>
     <div id="workflows-list" class="workflows-list">
         <div id="workflows-list-header" class="workflows-list-header mb-2">
-            <div class="d-flex">
+            <div class="d-flex flex-gapx-1">
                 <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Workflows</Heading>
 
                 <WorkflowListActions />

diff --git a/client/src/components/Workflow/WorkflowQuickView.vue b/client/src/components/Workflow/WorkflowQuickView.vue
@@ -77,45 +77,44 @@ watch(
 </script>
 
 <template>
-    <div class="workflow-quick-view">
+    <div class="workflow-quick-view h-100">
         <div v-if="loading" class="w-100">
             <BAlert class="w-100" show variant="info">
                 <LoadingSpan message="Loading workflow preview" />
             </BAlert>
         </div>
 
-        <div v-else class="workflow-preview-container">
+        <div v-else class="workflow-preview-container h-100">
             <div class="w-100">
-                <span class="d-flex mb-2">
+                <span class="d-flex mb-2 flex-gapx-1">
                     <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0"> Workflow Preview </Heading>
 
                     <WorkflowRunButton :id="props.id" full />
                 </span>
             </div>
 
-            <div class="d-flex w-100">
-                <div v-if="errored" class="w-100">
+            <div class="w-100 h-100 d-flex">
+                <template v-if="errored">
                     <BAlert v-if="errorMessage" show variant="danger">
                         Failed to load workflow:
                         {{ errorMessage }}
                     </BAlert>
 
                     <BAlert v-else show variant="danger"> Unknown Error </BAlert>
-                </div>
-
-                <div v-else-if="!loading && workflowInfo" class="workflow-preview d-flex flex-column">
-                    <BCard class="workflow-graph">
-                        <WorkflowGraph
-                            v-if="workflow && datatypesMapper"
-                            :steps="workflow.steps"
-                            :datatypes-mapper="datatypesMapper"
-                            readonly />
-                    </BCard>
-                </div>
-
-                <div v-if="!loading && !errored && workflowInfo" class="pl-2">
-                    <WorkflowInformation :workflow-info="workflowInfo" />
-                </div>
+                </template>
+
+                <BCard v-else-if="!loading && workflowInfo" class="workflow-preview-card">
+                    <WorkflowGraph
+                        v-if="workflow && datatypesMapper"
+                        :steps="workflow.steps"
+                        :datatypes-mapper="datatypesMapper"
+                        readonly />
+                </BCard>
+
+                <WorkflowInformation
+                    v-if="!loading && !errored && workflowInfo"
+                    class="pl-2"
+                    :workflow-info="workflowInfo" />
             </div>
         </div>
     </div>
@@ -127,21 +126,11 @@ watch(
 .workflow-quick-view {
     .workflow-preview-container {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
         width: 100%;
-    }
-
-    .workflow-preview {
-        flex-grow: 1;
-
-        display: flex;
-        flex-grow: 1;
-        gap: 1rem;
-        height: 100%;
 
-        .workflow-graph {
-            flex-grow: 1;
-            min-width: 500px;
+        .workflow-preview-card {
+            flex-grow: 2;
         }
 
         &:deep(.workflow-information) {

diff --git a/client/src/components/Workflow/WorkflowRunButton.vue b/client/src/components/Workflow/WorkflowRunButton.vue
@@ -24,7 +24,7 @@ function ExecuteWorkflow() {
 <template>
     <BButton
         id="workflow-run-button"
-        v-b-tooltip.hover.top
+        v-b-tooltip.hover.top.noninteractive
         title="Run workflow"
         :data-workflow-run="id"
         variant="primary"