Merge pull request galaxyproject#22228 from itisAliRH/btable-to-gtable-workflows

itisAliRH · web-flow · commit cacf25f7c414 · 2026-04-07T19:23:42.000+02:00
Migrate Workflow Components from BTable to GTable
diff --git a/client/src/components/JobStates/JobState.vue b/client/src/components/JobStates/JobState.vue
@@ -20,7 +20,7 @@ const stateIcon = computed(() => iconClasses[props.job.state] || null);
 </script>
 
 <template>
-    <span class="rounded px-2 py-1" :class="badgeClass">
+    <span class="rounded px-2 py-1 text-nowrap" :class="badgeClass">
         <FontAwesomeIcon v-if="stateIcon" :icon="stateIcon.icon" :spin="stateIcon.spin" />
         {{ props.job.state }}
     </span>
diff --git a/client/src/components/Workflow/Import/TrsSearch.vue b/client/src/components/Workflow/Import/TrsSearch.vue
@@ -2,18 +2,20 @@
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert, BFormInput, BInputGroup, BInputGroupAppend, BTable } from "bootstrap-vue";
+import { BAlert, BCard, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
 import { computed, type Ref, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import type { RowClickEvent, TableField } from "@/components/Common/GTable.types";
 import { getRedirectOnImportPath } from "@/components/Workflow/redirectPath";
 import { Services } from "@/components/Workflow/services";
 import { useMarkdown } from "@/composables/markdown";
 import { withPrefix } from "@/utils/redirect";
 
-import type { TrsSelection } from "./types";
+import type { TrsSelection, TrsTool as TrsSearchData } from "./types";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
+import GTable from "@/components/Common/GTable.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import TrsServerSelection from "@/components/Workflow/Import/TrsServerSelection.vue";
@@ -23,16 +25,16 @@ const emit = defineEmits<{
     (e: "input-valid", valid: boolean): void;
 }>();
 
-type TrsSearchData = {
+type TrsSearchRow = {
     id: string;
     name: string;
     description: string;
-    [key: string]: unknown;
+    data: TrsSearchData;
 };
 
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
-const fields = [
+const fields: TableField[] = [
     { key: "name", label: "Name" },
     { key: "description", label: "Description" },
     { key: "organization", label: "Organization" },
@@ -99,23 +101,9 @@ function onTrsSelectionError(message: string) {
     errorMessage.value = message;
 }
 
-function showRowDetails(row: any, _index: number, e: MouseEvent) {
-    if ((e.target as Node | undefined)?.nodeName !== "A") {
-        // Collapse all other rows
-        itemsComputed.value.forEach((item) => {
-            if (item !== row) {
-                item._showDetails = false;
-            }
-        });
-        // Toggle the clicked row
-        const wasExpanded = row._showDetails;
-        row._showDetails = !row._showDetails;
-
-        // If collapsing the row, reset selection state
-        if (wasExpanded) {
-            selectedTool.value = null;
-            selectedVersion.value = undefined;
-        }
+function showRowDetails({ event, toggleDetails }: RowClickEvent<TrsSearchRow>) {
+    if ((event.target as Node | undefined)?.nodeName !== "A") {
+        toggleDetails();
     }
 }
 
@@ -126,7 +114,6 @@ function computeItems(items: TrsSearchData[]) {
             name: item.name,
             description: item.description,
             data: item,
-            _showDetails: false,
         };
     });
 }
@@ -211,76 +198,59 @@ defineExpose({ triggerImport });
             <BAlert v-else-if="results.length == 0" variant="info" show>
                 No search results found, refine your search.
             </BAlert>
-            <BTable
+            <GTable
                 v-else
                 :fields="fields"
                 :items="itemsComputed"
                 hover
                 caption-top
-                :busy="loading"
-                tbody-tr-class="clickable-row"
-                @row-clicked="showRowDetails">
-                <template v-slot:row-details="row">
+                clickable-rows
+                :loading="loading"
+                @row-click="showRowDetails">
+                <template v-slot:row-details="{ item }">
                     <BCard>
                         <BAlert v-if="importing" variant="info" show>
                             <LoadingSpan message="Importing workflow" />
                         </BAlert>
 
                         <TrsTool
-                            :trs-tool="row.item.data"
-                            @onImport="(versionId) => onVersionSelected(row.item.data, versionId)"
-                            @onSelect="(versionId) => onVersionSelected(row.item.data, versionId)" />
+                            :trs-tool="item.data"
+                            @onImport="onVersionSelected(item.data, $event)"
+                            @onSelect="onVersionSelected(item.data, $event)" />
                     </BCard>
                 </template>
 
                 <template v-slot:cell(description)="row">
                     <span class="trs-description" v-html="renderMarkdown(row.item.data.description)" />
                 </template>
-            </BTable>
+            </GTable>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-.trs-description {
-    position: relative;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-}
-
-.trs-search-field {
-    display: flex;
-    gap: var(--spacing);
-    align-items: center;
-    margin-bottom: var(--spacing-4);
-
-    :deep(.popper-element) {
-        max-width: 30vw;
-    }
-}
-
 .vertical-scroll {
     max-height: 600px;
     overflow-y: auto;
-}
-.clickable-row:not(.b-table-details) {
-    cursor: pointer;
-}
-.clickable-row:not(:first-child) {
-    border-top: 1px double #ccc;
-}
-.clickable-row.b-table-has-details {
-    border: 2px solid var(--brand-primary, #007bff);
-    border-bottom: none;
-}
-.clickable-row.b-table-details {
-    border: 2px solid var(--brand-primary, #007bff);
-    border-top: none;
-}
-.clickable-row.b-table-details:hover {
-    background: unset;
+
+    .trs-description {
+        position: relative;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+    }
+
+    .trs-search-field {
+        display: flex;
+        gap: var(--spacing);
+        align-items: center;
+        margin-bottom: var(--spacing-4);
+
+        :deep(.popper-element) {
+            max-width: 30vw;
+        }
+    }
 }
 </style>
diff --git a/client/src/components/WorkflowInvocationState/JobStep.test.ts b/client/src/components/WorkflowInvocationState/JobStep.test.ts
@@ -16,7 +16,7 @@ const SELECTORS = {
     JOB_STATE_BUTTON_NAV: "nav",
     JOB_STATE_BUTTON: ".g-button",
     JOBS_TABLE: ".job-step-jobs",
-    JOB_ROW: ".job-step-jobs > tbody > tr",
+    JOB_ROW: ".job-step-jobs .g-table tbody > tr:not(.g-table-details-row):not(.g-table-empty-row)",
     STUBBED_JOB_DETAILS: "anonymous-stub",
 };
 
diff --git a/client/src/components/WorkflowInvocationState/JobStepJobs.test.ts b/client/src/components/WorkflowInvocationState/JobStepJobs.test.ts
@@ -21,7 +21,7 @@ const TEST_NEW_JOB_ID = "sample-job-NEW";
 
 const SELECTORS = {
     JOBS_TABLE: ".job-step-jobs",
-    JOB_ROW: ".job-step-jobs > tbody > tr",
+    JOB_ROW: ".job-step-jobs .g-table tbody > tr:not(.g-table-details-row):not(.g-table-empty-row)",
     JOB_CONTENT: ".g-modal-content",
     JOB_INFORMATION_TABLE: "table#job-information",
 };
diff --git a/client/src/components/WorkflowInvocationState/JobStepJobs.vue b/client/src/components/WorkflowInvocationState/JobStepJobs.vue
@@ -1,28 +1,30 @@
 <script setup lang="ts">
 import { faArrowCircleLeft, faArrowCircleRight, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BTable } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import type { JobBaseModel } from "@/api/jobs";
-
-import { getJobDuration } from "../JobInformation/utilities";
-
-import GButton from "../BaseComponents/GButton.vue";
-import GButtonGroup from "../BaseComponents/GButtonGroup.vue";
-import GModal from "../BaseComponents/GModal.vue";
-import Heading from "../Common/Heading.vue";
-import JobDetails from "../JobInformation/JobDetails.vue";
-import JobState from "../JobStates/JobState.vue";
-import UtcDate from "../UtcDate.vue";
-
-const props = defineProps<{
+import type { TableField } from "@/components/Common/GTable.types";
+import { getJobDuration } from "@/components/JobInformation/utilities";
+
+import GButton from "@/components/BaseComponents/GButton.vue";
+import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
+import GModal from "@/components/BaseComponents/GModal.vue";
+import GTable from "@/components/Common/GTable.vue";
+import Heading from "@/components/Common/Heading.vue";
+import JobDetails from "@/components/JobInformation/JobDetails.vue";
+import JobState from "@/components/JobStates/JobState.vue";
+import UtcDate from "@/components/UtcDate.vue";
+
+interface Props {
     jobs: JobBaseModel[];
     invocationId: string;
     currentPage: number;
     sortDesc: boolean;
     perPage: number;
-}>();
+}
+
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
     (e: "update:current-page", value: number): void;
@@ -31,6 +33,14 @@ const emit = defineEmits<{
 
 const showModal = ref(false);
 
+const fields: TableField[] = [
+    { key: "id", label: "Job ID" },
+    { key: "tool_id", label: "Tool" },
+    { key: "update_time", label: "Updated", sortable: true },
+    { key: "duration", label: "Time To Finish" },
+    { key: "state", label: "State" },
+];
+
 /** The job currently being viewed in the modal */
 const viewedJob = ref<JobBaseModel | null>(null);
 
@@ -55,20 +65,13 @@ const viewedJobIndex = computed<number | null>({
     },
 });
 
-function getTrClass(job: JobBaseModel) {
-    return {
-        "clickable-row": true,
-        "font-weight-bold": job.id === viewedJob.value?.id,
-    };
-}
-
-function jobClicked(job: JobBaseModel) {
-    viewedJob.value = job;
+function jobClicked(event: { item: JobBaseModel }) {
+    viewedJob.value = event.item;
     showModal.value = true;
 }
 
-function onSort(sortInfo: { sortDesc: boolean }) {
-    emit("update:sort-desc", sortInfo.sortDesc);
+function onSort(_sortBy: string, sortDesc: boolean) {
+    emit("update:sort-desc", sortDesc);
 }
 
 function navigateJob(direction: "previous" | "next") {
@@ -111,28 +114,24 @@ watch(
 
 <template>
     <div>
-        <BTable
+        <GTable
+            clickable-rows
+            hover
+            striped
             class="job-step-jobs"
-            primary-key="id"
+            sort-by="update_time"
             :current-page="props.currentPage"
+            :fields="fields"
             :items="props.jobs"
-            striped
-            no-sort-reset
-            no-local-sorting
-            hover
+            :local-sorting="false"
             :per-page="props.perPage"
-            :fields="[
-                { key: 'id', label: 'Job ID' },
-                { key: 'tool_id', label: 'Tool' },
-                { key: 'update_time', label: 'Updated', sortable: true },
-                { key: 'duration', label: 'Time To Finish' },
-                { key: 'state', label: 'State' },
-            ]"
-            :tbody-tr-class="getTrClass"
-            @row-clicked="jobClicked"
+            :sort-desc="props.sortDesc"
+            @row-click="jobClicked($event)"
             @sort-changed="onSort">
             <template v-slot:cell(id)="data">
-                <div class="d-flex flex-gapx-1 align-items-center">
+                <div
+                    class="d-flex flex-gapx-1 align-items-center"
+                    :class="{ 'font-weight-bold': data.item.id === viewedJob?.id }">
                     <span>{{ data.item.id }}</span>
 
                     <GButton
@@ -158,7 +157,7 @@ watch(
             <template v-slot:cell(duration)="data">
                 {{ getJobDuration(data.item) }}
             </template>
-        </BTable>
+        </GTable>
 
         <GModal :show.sync="showModal" fixed-height size="medium" @close="viewedJob = null">
             <template v-slot:header>
@@ -188,14 +187,15 @@ watch(
                     </div>
                 </div>
             </template>
+
             <JobDetails v-if="viewedJob" :job-id="viewedJob.id" :invocation-id="invocationId" />
         </GModal>
     </div>
 </template>
 
 <style scoped lang="scss">
 .job-step-jobs {
-    :deep(.clickable-row) {
+    :deep(.g-table-row-clickable) {
         cursor: pointer;
         color: var(--color-blue-600);
         user-select: text;
diff --git a/client/src/components/WorkflowInvocationState/ParameterStep.vue b/client/src/components/WorkflowInvocationState/ParameterStep.vue
