Update fields to use TableField type in dialogs

- Changed fields definitions in DataDialog, FilesDialog, BasicSelectionDialog, and HistoryDatasetPicker components to explicitly use TableField type.
- Added labels for fields in each dialog to improve clarity and consistency.

client/src/components/DataDialog/DataDialog.vue

@@ -5,6 +5,7 @@ import { BBadge } from "bootstrap-vue";
 import { onMounted, type Ref, ref, watch } from "vue";
 import Vue from "vue";
 
+import type { TableField } from "@/components/Common/GTable.types";
 import type { DataOption } from "@/components/Form/Elements/FormData/types";
 import type { SelectionItem } from "@/components/SelectionDialog/selectionTypes";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
@@ -13,7 +14,6 @@ import { useUrlTracker } from "@/composables/urlTracker";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
 
-import { Model } from "./model";
 import { Services } from "./services";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
@@ -69,18 +69,22 @@ const model = new Model({ multiple: props.multiple, format: props.format });
 const urlTracker = useUrlTracker<string>({ root: getHistoryUrl() });
 
 /** Specifies data columns to be shown in the dialog's table */
-const fields = [
+const fields: TableField[] = [
     {
         key: "label",
+        label: "Name",
     },
     {
         key: "extension",
+        label: "Extension",
     },
     {
         key: "tags",
+        label: "Tags",
     },
     {
         key: "update_time",
+        label: "Update Time",
     },
 ];
 

client/src/components/FilesDialog/FilesDialog.vue

@@ -11,6 +11,7 @@ import {
     type FilterFileSourcesOptions,
     type RemoteEntry,
 } from "@/api/remoteFiles";
+import type { TableField } from "@/components/Common/GTable.types";
 import { fileSourcePluginToItem, isSubPath } from "@/components/FilesDialog/utilities";
 import {
     type ItemsProvider,
@@ -87,14 +88,14 @@ const selectAllIcon = ref<SelectionState>(SELECTION_STATES.UNSELECTED);
 const urlTracker = useUrlTracker<SelectionItem & { parentPage?: number }>({ root: undefined });
 const totalItems = ref(0);
 
-const fields = computed(() => {
+const fields = computed<TableField[]>(() => {
     const fields = [];
-    fields.push({ key: "label" });
+    fields.push({ key: "label", label: "Name" });
     if (showDetails.value) {
-        fields.push({ key: "details" });
+        fields.push({ key: "details", label: "Details" });
     }
     if (showTime.value) {
-        fields.push({ key: "time" });
+        fields.push({ key: "time", label: "Time" });
     }
     return fields;
 });

client/src/components/SelectionDialog/BasicSelectionDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, type Ref, ref } from "vue";
 
+import type { TableField } from "@/components/Common/GTable.types";
 import type { SelectionItem } from "@/components/SelectionDialog/selectionTypes";
 import { errorMessageAsString } from "@/utils/simple-error";
 
@@ -40,13 +41,13 @@ const modalShow = ref(true);
 const optionsShow = ref(false);
 const showTime = ref(false);
 
-const fields = computed(() => {
-    const fields = [{ key: "label" }];
+const fields = computed<TableField[]>(() => {
+    const fields = [{ key: "label", label: "Name" }];
     if (props.detailsKey) {
-        fields.push({ key: "details" });
+        fields.push({ key: "details", label: "Details" });
     }
     if (showTime.value) {
-        fields.push({ key: "time" });
+        fields.push({ key: "time", label: "Time" });
     }
     return fields;
 });

client/src/components/SelectionDialog/HistoryDatasetPicker.vue

@@ -3,6 +3,7 @@ import { faHdd } from "@fortawesome/free-solid-svg-icons";
 import { computed, ref, set } from "vue";
 
 import { GalaxyApi, type HDASummary, type HistorySortByLiteral, type HistorySummary } from "@/api";
+import type { TableField } from "@/components/Common/GTable.types";
 import { HistoriesFilters } from "@/components/History/HistoriesFilters";
 import {
     type ItemsProvider,
@@ -69,7 +70,8 @@ const okButtonText = computed(() => {
         return `${props.actionButtonText} ${selected.value.length} dataset${selected.value.length > 1 ? "s" : ""}`;
     }
 });
-const fields = computed(() => {
+
+const fields = computed<TableField[]>(() => {
     if (datasetsVisible.value) {
         return [
             { key: "label", label: "Name", sortable: true },