From 2ccd3058cdff2ff7ee4c0efc7efc3b4bc607cefb Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 16:07:02 +0100
Subject: [PATCH 01/20] Replace BootstrapVue components with Galaxy components
 in Categories

- Replace b-table with GTable custom component
- Replace b-link with GLink custom component
- Remove BootstrapVue dependency import
- Update import paths to use @ alias
- Add explicit labels to table field definitions
- Add tooltip to category link for better UX
---
 .../Toolshed/SearchList/Categories.vue        | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Toolshed/SearchList/Categories.vue b/client/src/components/Toolshed/SearchList/Categories.vue
index 4198275b336..b70c0076db3 100644
--- a/client/src/components/Toolshed/SearchList/Categories.vue
+++ b/client/src/components/Toolshed/SearchList/Categories.vue
@@ -1,31 +1,35 @@
 <template>
     <div>
         <LoadingSpan v-if="loading" message="Loading categories" />
-        <b-table v-else striped no-sort-reset :items="categories" :fields="fields">
-            <template v-slot:cell(name)="data">
-                <b-link
-                    href="javascript:void(0)"
-                    role="button"
-                    class="font-weight-bold"
-                    @click="onCategory(data.value)">
-                    {{ data.value }}
-                </b-link>
-            </template>
-        </b-table>
+        <div v-else>
+            <GTable :items="categories" :fields="fields">
+                <template v-slot:cell(name)="data">
+                    <GLink
+                        href="#"
+                        tooltip
+                        title="View repositories in this category"
+                        @click.prevent="onCategory(data.item.name)">
+                        {{ data.item.name }}
+                    </GLink>
+                </template>
+            </GTable>
+        </div>
     </div>
 </template>
+
 <script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
-
-import { Services } from "../services";
+import { Services } from "@/components/Toolshed/services";
 
+import GLink from "@/components/BaseComponents/GLink.vue";
+import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-Vue.use(BootstrapVue);
-
 export default {
-    components: { LoadingSpan },
+    components: {
+        GLink,
+        GTable,
+        LoadingSpan,
+    },
     props: {
         toolshedUrl: {
             type: String,
@@ -41,8 +45,8 @@ export default {
             categories: [],
             fields: [
                 { key: "name", label: "Category", sortable: true },
-                { key: "description", sortable: false },
-                { key: "repositories", sortable: true },
+                { key: "description", label: "Description", sortable: false },
+                { key: "repositories", label: "Repositories", sortable: true },
             ],
         };
     },

From 4c64b80cbb769e7ccfe0ec9dd311fb08d8c10f45 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 16:11:37 +0100
Subject: [PATCH 02/20] Add expandable row details functionality

- Add expandedRows state to track expanded row indices
- Implement isRowExpanded and toggleRowDetails methods
- Add expand/collapse toggle button with chevron icon animation
- Create row-details slot for custom expandable content
- Restructure table body to support detail rows with template pattern
---
 client/src/components/Common/GTable.vue | 200 +++++++++++++++---------
 1 file changed, 122 insertions(+), 78 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 244a9125495..da462509285 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -216,6 +216,7 @@ const emit = defineEmits<{
 
 const sortBy = ref<string>(props.sortBy || "update_time");
 const sortDesc = ref<boolean>(props.sortDesc || true);
+const expandedRows = ref<Set<number>>(new Set());
 
 const localItems = computed(() => {
     const items = props.items || [];
@@ -341,6 +342,26 @@ function onRowSelect(item: T, index: number) {
     emit("row-select", { item, index, selected: !isSelected });
 }
 
+/**
+ * Check if row details are expanded
+ */
+function isRowExpanded(index: number) {
+    return expandedRows.value.has(index);
+}
+
+/**
+ * Toggle row details expansion
+ */
+function toggleRowDetails(index: number) {
+    if (isRowExpanded(index)) {
+        expandedRows.value.delete(index);
+    } else {
+        expandedRows.value.add(index);
+    }
+    // Trigger reactivity
+    expandedRows.value = new Set(expandedRows.value);
+}
+
 /**
  * Get cell value with optional formatter
  */
@@ -479,87 +500,106 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                     </thead>
 
                     <tbody v-if="localItems.length > 0">
-                        <tr
-                            v-for="(item, index) in localItems"
-                            :id="getRowId(props.id, index)"
-                            :key="index"
-                            :class="{
-                                'g-table-row-clickable': clickableRows,
-                                'g-table-row-selected': isRowSelected(index),
-                            }"
-                            @click="onRowClick(item, index, $event)">
-                            <!-- Selection checkbox column -->
-                            <td v-if="selectable" class="g-table-select-column">
-                                <BFormCheckbox
-                                    :id="`${getRowId(props.id, index)}-select`"
-                                    v-b-tooltip.hover.noninteractive
-                                    :checked="isRowSelected(index)"
-                                    title="Select for bulk actions"
-                                    @click.stop
-                                    @change="onRowSelect(item, index)" />
-                            </td>
+                        <template v-for="(item, index) in localItems">
+                            <template>
+                                <tr
+                                    :id="getRowId(props.id, index)"
+                                    :key="`tr` + index"
+                                    :class="{
+                                        'g-table-row-clickable': clickableRows,
+                                        'g-table-row-selected': isRowSelected(index),
+                                    }"
+                                    @click="onRowClick(item, index, $event)">
+                                    <!-- Selection checkbox column -->
+                                    <td v-if="selectable" class="g-table-select-column">
+                                        <BFormCheckbox
+                                            :id="`${getRowId(props.id, index)}-select`"
+                                            v-b-tooltip.hover.noninteractive
+                                            :checked="isRowSelected(index)"
+                                            title="Select for bulk actions"
+                                            @click.stop
+                                            @change="onRowSelect(item, index)" />
+                                    </td>
 
-                            <!-- Data columns -->
-                            <td
-                                v-for="(field, fieldIndex) in props.fields"
-                                :id="getCellId(props.id, field.key, index)"
-                                :key="field.key"
-                                :class="[
-                                    field.cellClass,
-                                    field.class,
-                                    getAlignmentClass(field.align),
-                                    { 'hide-on-small': field.hideOnSmall },
-                                ]">
-                                <template v-if="fieldIndex === 0 && getStatusIcon(item, index)">
-                                    <FontAwesomeIcon
-                                        v-if="getStatusIcon(item, index)"
-                                        v-b-tooltip.hover.noninteractive
-                                        v-bind="getIconProps(item, index)"
-                                        fixed-width />
-                                </template>
-
-                                <slot :name="`cell(${field.key})`" :value="item[field.key]" :item="item" :index="index">
-                                    <span>{{ getCellValue(item, field) }}</span>
-                                </slot>
-                            </td>
-
-                            <!-- Actions column -->
-                            <td v-if="props.actions" class="g-table-actions-column">
-                                <slot name="actions" :item="item" :index="index">
-                                    <BDropdown
-                                        v-b-tooltip.hover.noninteractive
-                                        no-caret
-                                        right
-                                        title="More actions"
-                                        variant="link"
-                                        size="lg"
-                                        toggle-class="text-decoration-none p-0"
-                                        @click.stop>
-                                        <template v-slot:button-content>
-                                            <FontAwesomeIcon :icon="faEllipsisV" fixed-width />
+                                    <!-- Data columns -->
+                                    <td
+                                        v-for="(field, fieldIndex) in props.fields"
+                                        :id="getCellId(props.id, field.key, index)"
+                                        :key="field.key"
+                                        :class="[
+                                            field.cellClass,
+                                            field.class,
+                                            getAlignmentClass(field.align),
+                                            { 'hide-on-small': field.hideOnSmall },
+                                        ]">
+                                        <template v-if="fieldIndex === 0 && getStatusIcon(item, index)">
+                                            <FontAwesomeIcon
+                                                v-if="getStatusIcon(item, index)"
+                                                v-b-tooltip.hover.noninteractive
+                                                v-bind="getIconProps(item, index)"
+                                                fixed-width />
                                         </template>
 
-                                        <template v-for="ac in props.actions">
-                                            <BDropdownItem
-                                                v-if="ac.visible ?? true"
-                                                :id="ac.id"
-                                                :key="ac.id"
-                                                :disabled="ac.disabled"
-                                                :size="ac.size || 'sm'"
-                                                :variant="ac.variant || 'link'"
-                                                :to="ac.to"
-                                                :title="ac.title"
-                                                :href="ac.href"
-                                                :target="ac.externalLink ? '_blank' : undefined"
-                                                @click.stop="ac.handler && ac.handler(item, index)">
-                                                <FontAwesomeIcon v-if="ac.icon" :icon="ac.icon" fixed-width />
-                                                {{ ac.label }}
-                                            </BDropdownItem>
-                                        </template>
-                                    </BDropdown>
-                                </slot>
-                            </td>
-                        </tr>
+                                        <slot
+                                            :name="`cell(${field.key})`"
+                                            :value="item[field.key]"
+                                            :item="item"
+                                            :index="index"
+                                            :toggle-details="() => toggleRowDetails(index)">
+                                            <span>{{ getCellValue(item, field) }}</span>
+                                        </slot>
+                                    </td>
+
+                                    <!-- Actions column -->
+                                    <td v-if="props.actions" class="g-table-actions-column">
+                                        <slot name="actions" :item="item" :index="index">
+                                            <BDropdown
+                                                v-b-tooltip.hover.noninteractive
+                                                no-caret
+                                                right
+                                                title="More actions"
+                                                variant="link"
+                                                size="lg"
+                                                toggle-class="text-decoration-none p-0"
+                                                @click.stop>
+                                                <template v-slot:button-content>
+                                                    <FontAwesomeIcon :icon="faEllipsisV" fixed-width />
+                                                </template>
+
+                                                <template v-for="ac in props.actions">
+                                                    <BDropdownItem
+                                                        v-if="ac.visible ?? true"
+                                                        :id="ac.id"
+                                                        :key="ac.id"
+                                                        :disabled="ac.disabled"
+                                                        :size="ac.size || 'sm'"
+                                                        :variant="ac.variant || 'link'"
+                                                        :to="ac.to"
+                                                        :title="ac.title"
+                                                        :href="ac.href"
+                                                        :target="ac.externalLink ? '_blank' : undefined"
+                                                        @click.stop="ac.handler && ac.handler(item, index)">
+                                                        <FontAwesomeIcon v-if="ac.icon" :icon="ac.icon" fixed-width />
+                                                        {{ ac.label }}
+                                                    </BDropdownItem>
+                                                </template>
+                                            </BDropdown>
+                                        </slot>
+                                    </td>
+                                </tr>
+                            </template>
+
+                            <!-- Row details expansion -->
+                            <tr v-if="isRowExpanded(index)" :key="`details-${index}`" class="g-table-details-row">
+                                <td :colspan="props.fields.length + (selectable ? 1 : 0) + (props.actions ? 1 : 0)">
+                                    <slot
+                                        name="row-details"
+                                        :item="item"
+                                        :index="index"
+                                        :toggle-details="() => toggleRowDetails(index)" />
+                                </td>
+                            </tr>
+                        </template>
                     </tbody>
                 </table>
 
@@ -616,6 +656,10 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
             &.g-table-row-selected {
                 background-color: $brand-light;
             }
+
+            &.g-table-details-row {
+                background-color: lighten($brand-light, 0.3);
+            }
         }
 
         td {

From 5e565fef2687ffc14e751e012d0532baf639f70b Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 16:20:10 +0100
Subject: [PATCH 03/20] Replace b-table with custom GTable component

Migrates the repository details table from Bootstrap Vue's b-table to a custom GTable component for improved consistency and maintainability across the codebase.

Updates template slot variable names from `data` to `row` for better clarity and semantic accuracy. Also improves the status cell template by using template tags instead of span elements to avoid unnecessary DOM nodes when conditionally rendering content.
---
 .../Toolshed/RepositoryDetails/Index.vue      | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.vue b/client/src/components/Toolshed/RepositoryDetails/Index.vue
index 1af80b1f472..40496b4ce93 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.vue
@@ -10,6 +10,7 @@ import { Services } from "../services";
 import InstallationActions from "./InstallationActions.vue";
 import InstallationSettings from "./InstallationSettings.vue";
 import RepositoryTools from "./RepositoryTools.vue";
+import GTable from "@/components/Common/GTable.vue";
 
 const props = defineProps({
     repo: {
@@ -228,26 +229,26 @@ function stopWatchingRepository() {
                     {{ error }}
                 </b-alert>
                 <div v-else class="border rounded">
-                    <b-table borderless :items="repoTable" :fields="repoFields" class="text-center m-0">
-                        <template v-slot:cell(numeric_revision)="data">
-                            <span class="font-weight-bold">{{ data.value }}</span>
+                    <GTable borderless :items="repoTable" :fields="repoFields" class="text-center m-0">
+                        <template v-slot:cell(numeric_revision)="row">
+                            <span class="font-weight-bold">{{ row.value }}</span>
                         </template>
-                        <template v-slot:cell(tools)="data">
-                            <RepositoryTools :tools="data.value" />
+                        <template v-slot:cell(tools)="row">
+                            <RepositoryTools :tools="row.value" />
                         </template>
-                        <template v-slot:cell(profile)="data">
-                            {{ data.value ? `+${data.value}` : "-" }}
+                        <template v-slot:cell(profile)="row">
+                            {{ row.value ? `+${row.value}` : "-" }}
                         </template>
-                        <template v-slot:cell(missing_test_components)="data">
-                            <span v-if="!data.value" :class="repoChecked" />
+                        <template v-slot:cell(missing_test_components)="row">
+                            <span v-if="!row.value" :class="repoChecked" />
                             <span v-else :class="repoUnchecked" />
                         </template>
                         <template v-slot:cell(status)="row">
-                            <span v-if="row.item.status">
+                            <template v-if="row.item.status">
                                 <span v-if="!isFinalState(row.item.status)" class="fa fa-spinner fa-spin" />
                                 {{ row.item.status }}
-                            </span>
-                            <span v-else> - </span>
+                            </template>
+                            <template v-else> - </template>
                         </template>
                         <template v-slot:cell(actions)="row">
                             <InstallationActions
@@ -257,7 +258,8 @@ function stopWatchingRepository() {
                                 @onUninstall="uninstallRepository(row.item)"
                                 @onReset="resetRepository(row.item)" />
                         </template>
-                    </b-table>
+                    </GTable>
+
                     <InstallationSettings
                         v-if="showSettings && selectedChangeset"
                         :repo="repo"

From fbeedc7a2d96849204a5ee94730a8cf3fc9f29e7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 16:22:49 +0100
Subject: [PATCH 04/20] Use LoadingSpan and FontAwesomeIcon in repo details

- replace manual spinner markup with LoadingSpan for consistency
- switch status icons to FontAwesomeIcon to centralize icon usage
---
 .../Toolshed/RepositoryDetails/Index.vue         | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.vue b/client/src/components/Toolshed/RepositoryDetails/Index.vue
index 40496b4ce93..8d6b7c2bd35 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
 import { useResourceWatcher } from "@/composables/resourceWatcher";
@@ -11,6 +13,7 @@ import InstallationActions from "./InstallationActions.vue";
 import InstallationSettings from "./InstallationSettings.vue";
 import RepositoryTools from "./RepositoryTools.vue";
 import GTable from "@/components/Common/GTable.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const props = defineProps({
     repo: {
@@ -32,8 +35,6 @@ const repositoryWatcher = useResourceWatcher(loadInstalledRepositories, {
     enableBackgroundPolling: false,
 });
 
-const repoChecked = "fa fa-check text-success";
-const repoUnchecked = "fa fa-times text-danger";
 const repoFields = [
     { key: "numeric_revision", label: "Revision" },
     { key: "tools", label: "Tools and Versions" },
@@ -220,10 +221,7 @@ function stopWatchingRepository() {
             <b-link :href="repo.repository_url" target="_blank">Show additional details and dependencies.</b-link>
         </div>
         <div>
-            <span v-if="loading">
-                <span class="fa fa-spinner fa-spin" />
-                <span class="loading-message">Loading repository details...</span>
-            </span>
+            <LoadingSpan v-if="loading" message="Loading repository details" />
             <div v-else>
                 <b-alert v-if="error" variant="danger" show>
                     {{ error }}
@@ -240,12 +238,12 @@ function stopWatchingRepository() {
                             {{ row.value ? `+${row.value}` : "-" }}
                         </template>
                         <template v-slot:cell(missing_test_components)="row">
-                            <span v-if="!row.value" :class="repoChecked" />
-                            <span v-else :class="repoUnchecked" />
+                            <FontAwesomeIcon v-if="!row.value" :icon="faCheck" class="text-success" />
+                            <FontAwesomeIcon v-else :icon="faTimes" class="text-danger" />
                         </template>
                         <template v-slot:cell(status)="row">
                             <template v-if="row.item.status">
-                                <span v-if="!isFinalState(row.item.status)" class="fa fa-spinner fa-spin" />
+                                <LoadingSpan v-if="!isFinalState(row.item.status)" />
                                 {{ row.item.status }}
                             </template>
                             <template v-else> - </template>

From 26db30e6b48ca12e0b0420488fdffdb4181fd946 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 16:26:34 +0100
Subject: [PATCH 05/20] Replace Bootstrap Vue with custom G-components

- Migrates the repository search results table from Bootstrap Vue to custom GTable and GLink components for better consistency with the design system.
- Updates table field definitions to include sortable configuration, enabling column sorting functionality for improved data exploration.
- Removes Bootstrap Vue initialization and simplifies imports by using absolute paths for better maintainability.
---
 .../Toolshed/SearchList/Repositories.vue      | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Toolshed/SearchList/Repositories.vue b/client/src/components/Toolshed/SearchList/Repositories.vue
index 868b6022ae6..e149e46ec04 100644
--- a/client/src/components/Toolshed/SearchList/Repositories.vue
+++ b/client/src/components/Toolshed/SearchList/Repositories.vue
@@ -1,30 +1,27 @@
 <template>
     <div>
-        <b-table id="shed-search-results" striped :items="repositories" :fields="fields">
-            <template v-slot:cell(name)="row">
-                <b-link href="javascript:void(0)" role="button" class="font-weight-bold" @click="row.toggleDetails">
-                    {{ row.item.name }}
-                </b-link>
-                <div>{{ row.item.description }}</div>
-            </template>
-            <template v-slot:row-details="row">
-                <RepositoryDetails :repo="row.item" :toolshed-url="toolshedUrl" />
-            </template>
-        </b-table>
         <div v-if="noResultsFound" class="unavailable-message">No matching repositories found.</div>
+
         <LoadingSpan v-if="pageLoading" message="Loading repositories" />
+        <GTable v-else id="shed-search-results" :items="repositories" :fields="fields">
+            <template v-slot:cell(name)="{ item, toggleDetails }">
+                <GLink href="#" @click.prevent="toggleDetails">{{ item.name }}</GLink>
+                <div>{{ item.description }}</div>
+            </template>
+            <template v-slot:row-details="{ item }">
+                <RepositoryDetails :repo="item" :toolshed-url="toolshedUrl" />
+            </template>
+        </GTable>
     </div>
 </template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
 
+<script>
 import { Services } from "../services";
 
-import RepositoryDetails from "../RepositoryDetails/Index.vue";
+import GLink from "@/components/BaseComponents/GLink.vue";
+import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-
-Vue.use(BootstrapVue);
+import RepositoryDetails from "@/components/Toolshed/RepositoryDetails/Index.vue";
 
 const READY = 0;
 const LOADING = 1;
@@ -32,6 +29,8 @@ const COMPLETE = 2;
 export default {
     components: {
         LoadingSpan,
+        GLink,
+        GTable,
         RepositoryDetails,
     },
     props: {
@@ -52,10 +51,10 @@ export default {
         return {
             repositories: [],
             fields: [
-                { key: "name" },
-                { key: "owner", label: "Owner" },
-                { key: "times_downloaded", label: "Downloaded" },
-                { key: "last_updated", label: "Updated" },
+                { key: "name", label: "Name", sortable: true },
+                { key: "owner", label: "Owner", sortable: true },
+                { key: "times_downloaded", label: "Downloaded", sortable: true },
+                { key: "last_updated", label: "Updated", sortable: true },
             ],
             page: 1,
             pageSize: 50,

From 780ece4b9bf03a3420e9ff417357e010606bf7d8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 16:47:59 +0100
Subject: [PATCH 06/20] Add status message to LoadingSpan in repository status
 cell

---
 client/src/components/Toolshed/RepositoryDetails/Index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.vue b/client/src/components/Toolshed/RepositoryDetails/Index.vue
index 8d6b7c2bd35..735e23e1e43 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.vue
@@ -243,8 +243,7 @@ function stopWatchingRepository() {
                         </template>
                         <template v-slot:cell(status)="row">
                             <template v-if="row.item.status">
-                                <LoadingSpan v-if="!isFinalState(row.item.status)" />
-                                {{ row.item.status }}
+                                <LoadingSpan v-if="!isFinalState(row.item.status)" :message="row.item.status" />
                             </template>
                             <template v-else> - </template>
                         </template>

From 8fcf787dd2483dd6fa2de451ff482f90d9ec03c7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 17:02:47 +0100
Subject: [PATCH 07/20] Add client-side filtering and filtered event

- Add `filter` and `localFiltering` props, apply local filtering in
`localItems`, and emit `filtered` to enable client-side search control.
---
 client/src/components/Common/GTable.vue | 39 ++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index da462509285..40f8a22c43f 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -61,6 +61,12 @@ interface Props {
      */
     fields?: TableField[];
 
+    /**
+     * Filter string to filter items
+     * @default ""
+     */
+    filter?: string;
+
     /**
      * Whether to show hover effect on rows
      * @default true
@@ -103,6 +109,12 @@ interface Props {
      */
     overlayLoading?: boolean;
 
+    /**
+     * Whether to use local filtering (client-side) or rely on external filtering (server-side)
+     * @default true
+     */
+    localFiltering?: boolean;
+
     /**
      * Whether to use local sorting (client-side) or rely on external sorting (server-side)
      * @default true
@@ -167,12 +179,14 @@ const props = withDefaults(defineProps<Props>(), {
     containerClass: "",
     emptyState: () => ({ message: "No data available" }),
     fields: () => [],
+    filter: "",
     hover: true,
     items: () => [],
     loading: false,
     loadingMessage: "Loading...",
     loadMoreLoading: false,
     loadMoreMessage: "Loading more...",
+    localFiltering: true,
     localSorting: true,
     overlayLoading: false,
     selectable: false,
@@ -189,6 +203,12 @@ const props = withDefaults(defineProps<Props>(), {
  * Events emitted by the GTable component
  */
 const emit = defineEmits<{
+    /**
+     * Emitted when items are filtered
+     * @event filtered
+     */
+    (e: "filtered", filteredItems: T[]): void;
+
     /**
      * Emitted when sort changes
      * @event sort-changed
@@ -219,13 +239,30 @@ const sortDesc = ref<boolean>(props.sortDesc || true);
 const expandedRows = ref<Set<number>>(new Set());
 
 const localItems = computed(() => {
-    const items = props.items || [];
+    let items = props.items || [];
 
     // If local sorting is disabled, return items as-is
     if (!props.localSorting) {
         return items;
     }
 
+    // Apply local filtering if enabled and filter string is provided
+    if (props.localFiltering && props.filter && props.filter.trim() !== "") {
+        const filterLower = props.filter.toLowerCase().trim();
+        items = items.filter((item) => {
+            // Search through all field values
+            return Object.values(item).some((value) => {
+                if (value == null) {
+                    return false;
+                }
+                return String(value).toLowerCase().includes(filterLower);
+            });
+        });
+
+        // Emit filtered event with the filtered items
+        emit("filtered", items);
+    }
+
     // If no sort field is set, return items as-is
     if (!sortBy.value) {
         return items;

From 7a4d3bda5518f5c92dbec34d1c22e587feeac3b5 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 17:07:22 +0100
Subject: [PATCH 08/20] Replace Bootstrap table with custom GTable component

- Migrates the installed repositories list from Bootstrap Vue's b-table to a custom GTable component for improved consistency and maintainability across the application.
- Simplifies template slot destructuring by extracting needed properties directly in slot scope bindings, reducing intermediate variable references.
- Removes custom sort formatting logic that prioritized latest versions, delegating sorting behavior to the GTable component's default implementation.
- Adds explicit labels to table field definitions for better clarity and removes redundant configuration.
---
 .../Toolshed/InstalledList/Index.vue          | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Index.vue b/client/src/components/Toolshed/InstalledList/Index.vue
index 938a177f3a1..f4c3028c6d7 100644
--- a/client/src/components/Toolshed/InstalledList/Index.vue
+++ b/client/src/components/Toolshed/InstalledList/Index.vue
@@ -20,28 +20,29 @@
                         </span>
                     </b-link>
                 </div>
+
                 <Monitor v-if="showMonitor" @onQuery="onQuery" />
-                <b-table
+
+                <GTable
                     id="repository-table"
-                    striped
                     :fields="fields"
-                    :sort-by="sortBy"
                     :items="repositories"
                     :filter="filter"
                     @filtered="filtered">
-                    <template v-slot:cell(name)="row">
-                        <b-link href="#" role="button" class="font-weight-bold" @click="row.toggleDetails">
-                            <div v-if="!isLatest(row.item)">
+                    <template v-slot:cell(name)="{ item, toggleDetails }">
+                        <b-link href="#" role="button" class="font-weight-bold" @click.prevent="toggleDetails">
+                            <div v-if="!isLatest(item)">
                                 <b-badge variant="danger" class="mb-2"> Newer version available! </b-badge>
                             </div>
-                            <div class="name">{{ row.item.name }}</div>
+                            <div class="name">{{ item.name }}</div>
                         </b-link>
-                        <div>{{ row.item.description }}</div>
+                        <div>{{ item.description }}</div>
                     </template>
-                    <template v-slot:row-details="row">
-                        <RepositoryDetails :repo="row.item" />
+                    <template v-slot:row-details="{ item }">
+                        <RepositoryDetails :repo="item" />
                     </template>
-                </b-table>
+                </GTable>
+
                 <div v-if="showNotFound">
                     No matching entries found for: <span class="font-weight-bold">{{ filter }}</span
                     >.
@@ -51,6 +52,7 @@
         </div>
     </div>
 </template>
+
 <script>
 import BootstrapVue from "bootstrap-vue";
 import Vue from "vue";
@@ -61,12 +63,14 @@ import { Services } from "../services";
 
 import RepositoryDetails from "./Details.vue";
 import Monitor from "./Monitor.vue";
+import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GTable,
         LoadingSpan,
         Monitor,
         RepositoryDetails,
@@ -86,7 +90,6 @@ export default {
             nRepositories: 0,
             repositories: [],
             showMonitor: false,
-            sortBy: "name",
         };
     },
     computed: {
@@ -110,13 +113,12 @@ export default {
             const fields = [
                 {
                     key: "name",
+                    label: "Name",
                     sortable: true,
-                    sortByFormatted: (value, key, item) => {
-                        return `${this.isLatest(item)}_${value}`;
-                    },
                 },
                 {
                     key: "owner",
+                    label: "Owner",
                     sortable: true,
                 },
             ];

From 7f527bdb7b2288ba0719221290f34de2c549c043 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:31:36 +0100
Subject: [PATCH 09/20] Add hideHeader prop to optionally hide table header

- Introduces a new optional `hideHeader` property to the table component, allowing consumers to hide the table header when needed.
- Defaults to `false` to maintain backward compatibility and existing table behavior. The header is now conditionally rendered based on this prop value.
---
 client/src/components/Common/GTable.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 40f8a22c43f..921b0e4718d 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -73,6 +73,12 @@ interface Props {
      */
     hover?: boolean;
 
+    /**
+     * Whether to hide the table header
+     * @default false
+     */
+    hideHeader?: boolean;
+
     /**
      * Table data items
      * @default []
@@ -181,6 +187,7 @@ const props = withDefaults(defineProps<Props>(), {
     fields: () => [],
     filter: "",
     hover: true,
+    hideHeader: false,
     items: () => [],
     loading: false,
     loadingMessage: "Loading...",
@@ -473,7 +480,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
 </script>
 
 <template>
-    <div :id="`g-table-container-${props.id}`" class="w-100" :class="containerClass">
+    <div :id="`g-table-container-${props.id}`" :class="containerClass">
         <!-- Table wrapper -->
         <BOverlay :show="overlayLoading" rounded="sm" class="position-relative w-100">
             <div :id="`g-table-wrapper-${props.id}`" class="position-relative w-100">
@@ -486,7 +493,7 @@ const getCellId = (tableId: string, fieldKey: string, index: number) => `g-table
                         { 'table-bordered': bordered },
                         tableClass,
                     ]">
-                    <thead>
+                    <thead v-if="!props.hideHeader">
                         <tr>
                             <th v-if="selectable" class="g-table-select-column">
                                 <slot name="head-select">

From 77bdd66edd636622b1fd4254da62f078fbab1b04 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:34:38 +0100
Subject: [PATCH 10/20] Replace b-table with GTable for header hiding

- Switch to custom GTable and explicit field labels to avoid
custom CSS while keeping the header hidden.
---
 .../Toolshed/InstalledList/Monitor.vue        | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index c7dcb7aa067..83663876e37 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -5,12 +5,8 @@
         </b-alert>
         <b-card v-if="showItems" no-body class="my-2">
             <h2 class="m-3 h-text">Currently installing...</h2>
-            <b-table
-                class="mx-3 mb-0"
-                sticky-header
-                thead-class="installation-monitor-header"
-                :items="items"
-                :fields="fields">
+
+            <GTable :items="items" :fields="fields" hide-header class="m-2">
                 <template v-slot:cell(name)="row">
                     <b-link @click="onQuery(row.item.name)"> {{ row.item.name }} ({{ row.item.owner }}) </b-link>
                 </template>
@@ -23,11 +19,13 @@
                         :status="row.item.status"
                         @onUninstall="uninstallRepository(row.item)" />
                 </template>
-            </b-table>
+            </GTable>
         </b-card>
+
         <b-alert v-if="showEmpty" variant="info" show> Currently there are no installing repositories. </b-alert>
     </div>
 </template>
+
 <script>
 import BootstrapVue from "bootstrap-vue";
 import Vue from "vue";
@@ -35,11 +33,13 @@ import Vue from "vue";
 import { Services } from "../services";
 
 import InstallationActions from "../RepositoryDetails/InstallationActions.vue";
+import GTable from "@/components/Common/GTable.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GTable,
         InstallationActions,
     },
     data() {
@@ -48,7 +48,20 @@ export default {
             loading: true,
             error: null,
             items: [],
-            fields: ["name", "status", "actions"],
+            fields: [
+                {
+                    key: "name",
+                    label: "Name",
+                },
+                {
+                    key: "status",
+                    label: "Status",
+                },
+                {
+                    key: "actions",
+                    label: "Actions",
+                },
+            ],
         };
     },
     computed: {
@@ -103,8 +116,3 @@ export default {
     },
 };
 </script>
-<style>
-.installation-monitor-header {
-    display: none;
-}
-</style>

From 226241a6f11b0d8a9834b623578740ca4c5b1bca Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:38:45 +0100
Subject: [PATCH 11/20] Replace Bootstrap card with GCard in monitor

- Use GCard for the installing list to align with common UI components.
---
 client/src/components/Toolshed/InstalledList/Monitor.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index 83663876e37..7b69cf3f109 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -3,7 +3,8 @@
         <b-alert v-if="error" variant="danger" show>
             {{ error }}
         </b-alert>
-        <b-card v-if="showItems" no-body class="my-2">
+
+        <GCard v-if="showItems" class="my-2">
             <h2 class="m-3 h-text">Currently installing...</h2>
 
             <GTable :items="items" :fields="fields" hide-header class="m-2">
@@ -20,7 +21,7 @@
                         @onUninstall="uninstallRepository(row.item)" />
                 </template>
             </GTable>
-        </b-card>
+        </GCard>
 
         <b-alert v-if="showEmpty" variant="info" show> Currently there are no installing repositories. </b-alert>
     </div>
@@ -33,12 +34,14 @@ import Vue from "vue";
 import { Services } from "../services";
 
 import InstallationActions from "../RepositoryDetails/InstallationActions.vue";
+import GCard from "@/components/Common/GCard.vue";
 import GTable from "@/components/Common/GTable.vue";
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GCard,
         GTable,
         InstallationActions,
     },

From bab53e89630362acc055ed04c92c7fc64a74003a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:41:13 +0100
Subject: [PATCH 12/20] Replace Bootstrap link with GLink in monitor list

- Use shared GLink component for consistent link styling in the
installed tools monitor table.
---
 client/src/components/Toolshed/InstalledList/Monitor.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index 7b69cf3f109..ce0df238b27 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -9,11 +9,13 @@
 
             <GTable :items="items" :fields="fields" hide-header class="m-2">
                 <template v-slot:cell(name)="row">
-                    <b-link @click="onQuery(row.item.name)"> {{ row.item.name }} ({{ row.item.owner }}) </b-link>
+                    <GLink @click="onQuery(row.item.name)"> {{ row.item.name }} ({{ row.item.owner }}) </GLink>
                 </template>
+
                 <template v-slot:cell(status)="row">
                     <b>Status: </b><span>{{ row.item.status }}</span>
                 </template>
+
                 <template v-slot:cell(actions)="row">
                     <InstallationActions
                         class="float-right"
@@ -34,6 +36,7 @@ import Vue from "vue";
 import { Services } from "../services";
 
 import InstallationActions from "../RepositoryDetails/InstallationActions.vue";
+import GLink from "@/components/BaseComponents/GLink.vue";
 import GCard from "@/components/Common/GCard.vue";
 import GTable from "@/components/Common/GTable.vue";
 
@@ -42,6 +45,7 @@ Vue.use(BootstrapVue);
 export default {
     components: {
         GCard,
+        GLink,
         GTable,
         InstallationActions,
     },

From 49796d2b99fa046499c36d00e4e6d8293f8c0562 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:44:08 +0100
Subject: [PATCH 13/20] Add tooltip to installed list name links

---
 client/src/components/Toolshed/InstalledList/Monitor.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index ce0df238b27..e4db53ea490 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -9,7 +9,9 @@
 
             <GTable :items="items" :fields="fields" hide-header class="m-2">
                 <template v-slot:cell(name)="row">
-                    <GLink @click="onQuery(row.item.name)"> {{ row.item.name }} ({{ row.item.owner }}) </GLink>
+                    <GLink tooltip title="Show all repositories with this name" @click="onQuery(row.item.name)">
+                        {{ row.item.name }} ({{ row.item.owner }})
+                    </GLink>
                 </template>
 
                 <template v-slot:cell(status)="row">

From a08e75ab9be0f36c185a72b6bfe4c258ea87a45c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:45:07 +0100
Subject: [PATCH 14/20] Register BAlert locally for alerts

- Replace global BootstrapVue usage with local BAlert import to reduce plugin scope.
---
 .../components/Toolshed/InstalledList/Monitor.vue    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.vue b/client/src/components/Toolshed/InstalledList/Monitor.vue
index e4db53ea490..975ef061bf5 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.vue
+++ b/client/src/components/Toolshed/InstalledList/Monitor.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <b-alert v-if="error" variant="danger" show>
+        <BAlert v-if="error" variant="danger" show>
             {{ error }}
-        </b-alert>
+        </BAlert>
 
         <GCard v-if="showItems" class="my-2">
             <h2 class="m-3 h-text">Currently installing...</h2>
@@ -27,13 +27,12 @@
             </GTable>
         </GCard>
 
-        <b-alert v-if="showEmpty" variant="info" show> Currently there are no installing repositories. </b-alert>
+        <BAlert v-if="showEmpty" variant="info" show> Currently there are no installing repositories. </BAlert>
     </div>
 </template>
 
 <script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
+import { BAlert } from "bootstrap-vue";
 
 import { Services } from "../services";
 
@@ -42,10 +41,9 @@ import GLink from "@/components/BaseComponents/GLink.vue";
 import GCard from "@/components/Common/GCard.vue";
 import GTable from "@/components/Common/GTable.vue";
 
-Vue.use(BootstrapVue);
-
 export default {
     components: {
+        BAlert,
         GCard,
         GLink,
         GTable,

From 57affb5f20c602e0ce35c08234896cb2f1add8d3 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 5 Feb 2026 18:47:38 +0100
Subject: [PATCH 15/20] Replace Bootstrap components with custom equivalents
 and FontAwesome icons

- Replaces Bootstrap components with custom composable alternatives and updates icon implementation to use FontAwesome icons instead of CSS classes.
- Replace `b-alert`, `b-badge`, and `b-link` components with their custom `BAlert`, `BBadge`, and `GLink` counterparts for better consistency and maintainability.
- Switches from CSS-based icon classes to FontAwesome icon components, improving icon management and reducing style sheet dependencies.
- Removes the global Bootstrap Vue plugin registration.
---
 .../Toolshed/InstalledList/Index.vue          | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Index.vue b/client/src/components/Toolshed/InstalledList/Index.vue
index f4c3028c6d7..28f20e4baa7 100644
--- a/client/src/components/Toolshed/InstalledList/Index.vue
+++ b/client/src/components/Toolshed/InstalledList/Index.vue
@@ -4,21 +4,23 @@
         <div v-else>
             <LoadingSpan v-if="loading" message="Loading installed repositories" />
             <div v-else>
-                <b-alert :variant="messageVariant" :show="showMessage">{{ message }}</b-alert>
+                <BAlert :variant="messageVariant" :show="showMessage">{{ message }}</BAlert>
+
                 <div class="m-1">
                     <span class="installed-message text-muted">
                         {{ repositories.length }} repositories installed on this instance.
                     </span>
-                    <b-link class="font-weight-bold" @click="toggleMonitor">
+
+                    <GLink class="font-weight-bold" @click="toggleMonitor">
                         <span v-if="showMonitor">
-                            <span class="fa fa-angle-double-up" />
+                            <FontAwesomeIcon :icon="faAngleDoubleUp" />
                             <span>Hide installation progress.</span>
                         </span>
                         <span v-else>
-                            <span class="fa fa-angle-double-down" />
+                            <FontAwesomeIcon :icon="faAngleDoubleDown" />
                             <span>Show installation progress.</span>
                         </span>
-                    </b-link>
+                    </GLink>
                 </div>
 
                 <Monitor v-if="showMonitor" @onQuery="onQuery" />
@@ -30,14 +32,17 @@
                     :filter="filter"
                     @filtered="filtered">
                     <template v-slot:cell(name)="{ item, toggleDetails }">
-                        <b-link href="#" role="button" class="font-weight-bold" @click.prevent="toggleDetails">
+                        <GLink class="font-weight-bold" @click.prevent="toggleDetails">
                             <div v-if="!isLatest(item)">
-                                <b-badge variant="danger" class="mb-2"> Newer version available! </b-badge>
+                                <BBadge variant="danger" class="mb-2"> Newer version available! </BBadge>
                             </div>
+
                             <div class="name">{{ item.name }}</div>
-                        </b-link>
+                        </GLink>
+
                         <div>{{ item.description }}</div>
                     </template>
+
                     <template v-slot:row-details="{ item }">
                         <RepositoryDetails :repo="item" />
                     </template>
@@ -54,8 +59,9 @@
 </template>
 
 <script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
+import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BBadge } from "bootstrap-vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
 
@@ -63,13 +69,16 @@ import { Services } from "../services";
 
 import RepositoryDetails from "./Details.vue";
 import Monitor from "./Monitor.vue";
+import GLink from "@/components/BaseComponents/GLink.vue";
 import GTable from "@/components/Common/GTable.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-Vue.use(BootstrapVue);
-
 export default {
     components: {
+        BAlert,
+        BBadge,
+        FontAwesomeIcon,
+        GLink,
         GTable,
         LoadingSpan,
         Monitor,
@@ -83,6 +92,8 @@ export default {
     },
     data() {
         return {
+            faAngleDoubleDown,
+            faAngleDoubleUp,
             error: null,
             loading: true,
             message: null,

From 88d331b87996f4f4260cc68fbe05ca1967c1888c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 6 Feb 2026 09:55:02 +0100
Subject: [PATCH 16/20] Update InstalledList Index test for GComponents

- Add GLink import and proper component stubbing
- Change from findAll("a") to findAllComponents(GLink)
- Update loading message check to use LoadingSpan stub
- Verify Tool Shed field in component data instead of DOM
---
 .../src/components/Toolshed/InstalledList/Index.test.js  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Index.test.js b/client/src/components/Toolshed/InstalledList/Index.test.js
index aaf4a66ba1d..31de908c9be 100644
--- a/client/src/components/Toolshed/InstalledList/Index.test.js
+++ b/client/src/components/Toolshed/InstalledList/Index.test.js
@@ -3,6 +3,7 @@ import { mount } from "@vue/test-utils";
 import { describe, expect, it, vi } from "vitest";
 
 import Index from "./Index.vue";
+import GLink from "@/components/BaseComponents/GLink.vue";
 
 vi.mock("app");
 vi.mock("onload/loadConfig", () => ({
@@ -42,20 +43,22 @@ describe("InstalledList", () => {
             },
             stubs: {
                 RepositoryDetails: true,
+                GLink,
+                LoadingSpan: true,
             },
             localVue,
         });
-        expect(wrapper.find(".loading-message").text()).toBe("Loading installed repositories...");
+        expect(wrapper.find("loadingspan-stub").attributes("message")).toBe("Loading installed repositories");
         await wrapper.vm.$nextTick();
         expect(wrapper.find(".installed-message").text()).toBe("2 repositories installed on this instance.");
         const names = wrapper.findAll(".name");
         expect(names.length).toBe(2);
         expect(names.at(0).text()).toBe("name_0");
         expect(names.at(1).text()).toBe("name_1");
-        const links = wrapper.findAll("a");
+        const links = wrapper.findAllComponents(GLink);
         expect(links.length).toBe(3);
         const badge = links.at(1).find(".badge");
         expect(badge.text()).toBe("Newer version available!");
-        expect(wrapper.find('th[role="columnheader"][aria-colindex="3"] > div').text()).toBe("Tool Shed");
+        expect(wrapper.vm.fields.some((field) => field.key === "tool_shed")).toBe(true);
     });
 });

From c9b95d6cdf5029fb5e2e3ab979ce4b49249c6aa4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 6 Feb 2026 09:55:41 +0100
Subject: [PATCH 17/20] Update Monitor test for GTable with hide-header

- Check component fields data instead of th elements
- Update text assertions to use toContain for tooltip text
---
 .../Toolshed/InstalledList/Monitor.test.js          | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.test.js b/client/src/components/Toolshed/InstalledList/Monitor.test.js
index 0868a17f9ff..0d61bb3e63e 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.test.js
+++ b/client/src/components/Toolshed/InstalledList/Monitor.test.js
@@ -33,17 +33,18 @@ describe("Monitor", () => {
     it("test monitor", async () => {
         const localVue = getLocalVue();
         const wrapper = mount(Monitor, { localVue });
+
         await localVue.nextTick();
-        const headers = wrapper.findAll("th");
-        expect(headers.length).toBe(3);
-        expect(headers.at(0).text()).toBe("Name");
-        expect(headers.at(1).text()).toBe("Status");
+
+        expect(wrapper.vm.fields.length).toBe(3);
+        expect(wrapper.vm.fields[0].label).toBe("Name");
+        expect(wrapper.vm.fields[1].label).toBe("Status");
 
         const cells = wrapper.findAll("td");
         expect(cells.length).toBe(6);
-        expect(cells.at(0).text()).toBe("name_0 (owner_0)");
+        expect(cells.at(0).text()).toContain("name_0 (owner_0)");
         expect(cells.at(1).text()).toContain("status_0_0");
-        expect(cells.at(3).text()).toBe("name_1 (owner_1)");
+        expect(cells.at(3).text()).toContain("name_1 (owner_1)");
         expect(cells.at(4).text()).toContain("status_1");
     });
 });

From 44a9ebbad8d702d0131b4264e39a340c09c6864f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 6 Feb 2026 09:58:10 +0100
Subject: [PATCH 18/20] Update RepositoryDetails test for LoadingSpan component

Replace .loading-message class selector with loadingspan-stub to match
the migrated component structure using LoadingSpan instead of a plain
div with class.
---
 .../src/components/Toolshed/RepositoryDetails/Index.test.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.test.ts b/client/src/components/Toolshed/RepositoryDetails/Index.test.ts
index 8614a2bd048..d6f3b487377 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.test.ts
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.test.ts
@@ -34,7 +34,7 @@ describe("RepositoryDetails", () => {
 
         const localVue = getLocalVue();
         const pinia = createPinia();
-        const wrapper = shallowMount(Index, {
+        const wrapper = shallowMount(Index as object, {
             propsData: {
                 repo: {
                     id: "id",
@@ -47,7 +47,7 @@ describe("RepositoryDetails", () => {
             localVue,
             pinia,
         });
-        expect(wrapper.find(".loading-message").text()).toBe("Loading repository details...");
+        expect(wrapper.find("loadingspan-stub").attributes("message")).toBe("Loading repository details");
         await flushPromises();
         expect(wrapper.findAll(".alert").length).toBe(0);
     });

From 3faede3b185c99711c1d7804c160dabbe11228f8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 6 Feb 2026 09:58:31 +0100
Subject: [PATCH 19/20] Update Categories test for GComponents migration

- Import and stub GLink component
- Change from findAll("a") to findAllComponents(GLink)
- Update text assertions to use toContain instead of toBe to handle
  tooltip text included in GLink component
- Replace .loading-message selector with LoadingSpan stub
- Add proper component stubs for both test cases
---
 .../Toolshed/SearchList/Categories.test.js      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Toolshed/SearchList/Categories.test.js b/client/src/components/Toolshed/SearchList/Categories.test.js
index 3e67fc81115..303d1afe7ce 100644
--- a/client/src/components/Toolshed/SearchList/Categories.test.js
+++ b/client/src/components/Toolshed/SearchList/Categories.test.js
@@ -2,6 +2,7 @@ import { createLocalVue, mount } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import Categories from "./Categories.vue";
+import GLink from "@/components/BaseComponents/GLink.vue";
 
 vi.mock("../services", () => ({
     Services: class Services {
@@ -35,8 +36,11 @@ describe("Categories", () => {
                 toolshedUrl: "toolshedUrl",
             },
             localVue,
+            stubs: {
+                LoadingSpan: true,
+            },
         });
-        expect(wrapper.find(".loading-message").text()).toBe("Loading categories...");
+        expect(wrapper.find("loadingspan-stub").attributes("message")).toBe("Loading categories");
     });
 
     it("test categories table", async () => {
@@ -46,12 +50,17 @@ describe("Categories", () => {
                 toolshedUrl: "toolshedUrl",
             },
             localVue,
+            stubs: {
+                GLink,
+            },
         });
         await localVue.nextTick();
-        const links = wrapper.findAll("a");
+        const links = wrapper.findAllComponents(GLink);
         expect(links.length).toBe(2);
-        expect(links.at(0).text()).toBe("name_0");
-        expect(links.at(1).text()).toBe("name_1");
+
+        expect(links.at(0).text()).toContain("name_0");
+        expect(links.at(1).text()).toContain("name_1");
+
         const rows = wrapper.findAll("tr");
         expect(rows.length).toBe(3);
         const cells = rows.at(1).findAll("td");

From 4064b10a642697e01a08c0a8745595d2b28bdae8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 6 Feb 2026 15:29:51 +0100
Subject: [PATCH 20/20] Avoid accessing wrapper internals in Monitor test for
 Vue 3 compatibility

- Remove assertions on wrapper.vm.fields
- Test rendered output instead of component internals
- Use flushPromises instead of localVue.nextTick
---
 .../Toolshed/InstalledList/Monitor.test.js           | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Toolshed/InstalledList/Monitor.test.js b/client/src/components/Toolshed/InstalledList/Monitor.test.js
index 0d61bb3e63e..22a2ecdc65a 100644
--- a/client/src/components/Toolshed/InstalledList/Monitor.test.js
+++ b/client/src/components/Toolshed/InstalledList/Monitor.test.js
@@ -1,5 +1,5 @@
-import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
 import { describe, expect, it, vi } from "vitest";
 
 import Monitor from "./Monitor.vue";
@@ -31,14 +31,12 @@ vi.mock("../services", () => ({
 
 describe("Monitor", () => {
     it("test monitor", async () => {
-        const localVue = getLocalVue();
-        const wrapper = mount(Monitor, { localVue });
+        const wrapper = mount(Monitor);
 
-        await localVue.nextTick();
+        await flushPromises();
 
-        expect(wrapper.vm.fields.length).toBe(3);
-        expect(wrapper.vm.fields[0].label).toBe("Name");
-        expect(wrapper.vm.fields[1].label).toBe("Status");
+        const headers = wrapper.findAll("th");
+        expect(headers.length).toBe(0);
 
         const cells = wrapper.findAll("td");
         expect(cells.length).toBe(6);