diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index 8bdae1e2c012..c6096ea18f65 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -1,3 +1,4 @@
+import axios from "axios";
 import type { FetchArgType } from "openapi-typescript-fetch";
 
 import { HDADetailed } from "@/api";
@@ -88,3 +89,9 @@ export function getCompositeDatasetLink(historyDatasetId: string, path: string)
 
 export type DatasetExtraFiles = components["schemas"]["DatasetExtraFiles"];
 export const fetchDatasetExtraFiles = fetcher.path("/api/datasets/{dataset_id}/extra_files").method("get").create();
+
+export async function fetchDatasetAttributes(datasetId: string) {
+    const { data } = await axios.get(withPrefix(`/dataset/get_edit?dataset_id=${datasetId}`));
+
+    return data;
+}
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 6ee22a2590b2..ec217a321012 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -235,3 +235,10 @@ export function userOwnsHistory(user: User | AnonymousUser | null, history: AnyH
 function hasOwner(history: AnyHistory): history is HistorySummaryExtended {
     return "user_id" in history && history.user_id !== null;
 }
+
+export type DatasetHash = components["schemas"]["DatasetHash"];
+
+export type DatasetTransform = {
+    action: "to_posix_lines" | "spaces_to_tabs" | "datatype_groom";
+    datatype_ext: "bam" | "qname_sorted.bam" | "qname_input_sorted.bam" | "isa-tab" | "isa-json";
+};
diff --git a/client/src/api/jobs.ts b/client/src/api/jobs.ts
index d18644d3acd3..16a4018853c6 100644
--- a/client/src/api/jobs.ts
+++ b/client/src/api/jobs.ts
@@ -9,4 +9,11 @@ export const fetchJobDestinationParams = fetcher.path("/api/jobs/{job_id}/destin
 
 export const jobsFetcher = fetcher.path("/api/jobs").method("get").create();
 
-export const jobsReportError = fetcher.path("/api/jobs/{job_id}/error").method("post").create();
+export type ShowFullJobResponse = components["schemas"]["ShowFullJobResponse"];
+export type JobDetails = components["schemas"]["ShowFullJobResponse"] | components["schemas"]["EncodedJobDetails"];
+export const fetchJobDetails = fetcher.path("/api/jobs/{job_id}").method("get").create();
+
+export type JobInputSummary = components["schemas"]["JobInputSummary"];
+export const fetchJobCommonProblems = fetcher.path("/api/jobs/{job_id}/common_problems").method("get").create();
+
+export const postJobErrorReport = fetcher.path("/api/jobs/{job_id}/error").method("post").create();
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.test.js b/client/src/components/DatasetInformation/DatasetAttributes.test.ts
similarity index 53%
rename from client/src/components/DatasetInformation/DatasetAttributes.test.js
rename to client/src/components/DatasetInformation/DatasetAttributes.test.ts
index 7862c91da571..c983536cbf81 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.test.js
+++ b/client/src/components/DatasetInformation/DatasetAttributes.test.ts
@@ -1,43 +1,48 @@
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
+import { setActivePinia } from "pinia";
 
-import MockProvider from "../providers/MockProvider";
-import DatasetAttributes from "./DatasetAttributes";
+import DatasetAttributes from "./DatasetAttributes.vue";
+
+const DATASET_ID = "dataset_id";
 
 const localVue = getLocalVue();
 
-async function buildWrapper(conversion_disable = false) {
-    const wrapper = mount(DatasetAttributes, {
+async function mountDatasetAttributes(conversion_disable = false) {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    const axiosMock = new MockAdapter(axios);
+    axiosMock.onPut(`/dataset/set_edit`).reply(200, { message: "success", status: "success" });
+    axiosMock.onGet(`/dataset/get_edit?dataset_id=${DATASET_ID}`).reply(200, {
+        attribute_inputs: [{ name: "attribute_text", type: "text" }],
+        conversion_inputs: [{ name: "conversion_text", type: "text" }],
+        conversion_disable: conversion_disable,
+        datatype_inputs: [{ name: "datatype_text", type: "text" }],
+        permission_inputs: [{ name: "permission_text", type: "text" }],
+    });
+
+    const wrapper = mount(DatasetAttributes as object, {
         propsData: {
-            datasetId: "dataset_id",
+            datasetId: DATASET_ID,
         },
         localVue,
-        stubs: {
-            DatasetAttributesProvider: MockProvider({
-                result: {
-                    attribute_inputs: [{ name: "attribute_text", type: "text" }],
-                    conversion_inputs: [{ name: "conversion_text", type: "text" }],
-                    conversion_disable: conversion_disable,
-                    datatype_inputs: [{ name: "datatype_text", type: "text" }],
-                    permission_inputs: [{ name: "permission_text", type: "text" }],
-                },
-            }),
-            FontAwesomeIcon: false,
-            FormElement: false,
-        },
+        pinia,
     });
+
     await flushPromises();
+
     return wrapper;
 }
 
 describe("DatasetAttributes", () => {
     it("check rendering", async () => {
-        const axiosMock = new MockAdapter(axios);
-        axiosMock.onPut(`/dataset/set_edit`).reply(200, { message: "success", status: "success" });
-        const wrapper = await buildWrapper();
+        const wrapper = await mountDatasetAttributes();
+
         expect(wrapper.findAll("button").length).toBe(6);
         expect(wrapper.findAll("#attribute_text").length).toBe(1);
         expect(wrapper.findAll("#conversion_text").length).toBe(1);
@@ -45,14 +50,19 @@ describe("DatasetAttributes", () => {
         expect(wrapper.findAll("#permission_text").length).toBe(1);
         expect(wrapper.findAll(".tab-pane").length).toBe(3);
         expect(wrapper.findAll(".ui-portlet-section").length).toBe(2);
-        const $button = wrapper.find("#dataset-attributes-default-save");
-        await $button.trigger("click");
+
+        const saveButton = wrapper.find("#dataset-attributes-default-save");
+
+        await saveButton.trigger("click");
+
         await flushPromises();
+
         expect(wrapper.find("[role=alert]").text()).toBe("success");
     });
 
     it("check rendering without conversion option", async () => {
-        const wrapper = await buildWrapper(true);
+        const wrapper = await mountDatasetAttributes(true);
+
         expect(wrapper.findAll("button").length).toBe(5);
         expect(wrapper.findAll("#attribute_text").length).toBe(1);
         expect(wrapper.findAll("#conversion_text").length).toBe(0);
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index e197e126b6a9..1bad64943b6e 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -1,157 +1,224 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { type AxiosError } from "axios";
+import { BAlert, BButton, BTab, BTabs } from "bootstrap-vue";
+import { onMounted, ref } from "vue";
+
+import { fetchDatasetAttributes } from "@/api/datasets";
+import { setAttributes } from "@/components/DatasetInformation/services";
+import { useHistoryStore } from "@/stores/historyStore";
+import localize from "@/utils/localization";
+
+import FormDisplay from "@/components/Form/FormDisplay.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+library.add(faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser);
+
+interface Props {
+    datasetId: string;
+}
+
+const props = defineProps<Props>();
+
+const historyStore = useHistoryStore();
+
+const loading = ref(false);
+const messageText = ref("");
+const messageVariant = ref("danger");
+const formData = ref<Record<string, any>>({});
+const datasetAttributes = ref<Record<string, any>>({});
+
+function onAttribute(data: object) {
+    formData.value["attribute"] = data;
+}
+
+function onConversion(data: object) {
+    formData.value["conversion"] = data;
+}
+
+function onDatatype(data: object) {
+    formData.value["datatype"] = data;
+}
+
+function onPermission(data: object) {
+    formData.value["permission"] = data;
+}
+
+function onError(message: string) {
+    messageText.value = message;
+    messageVariant.value = "danger";
+}
+
+async function submit(key: string, operation: string) {
+    try {
+        const response = await setAttributes(props.datasetId, formData.value[key], operation);
+
+        messageText.value = response.message;
+        messageVariant.value = response.status;
+
+        historyStore.loadCurrentHistory();
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        onError(error.response?.data?.err_msg || "Unable to save dataset attributes.");
+    }
+}
+
+async function loadDatasetAttributes() {
+    loading.value = true;
+
+    try {
+        const data = await fetchDatasetAttributes(props.datasetId);
+
+        datasetAttributes.value = data;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        onError(error.response?.data?.err_msg || "Unable to fetch available dataset attributes.");
+    } finally {
+        loading.value = false;
+    }
+}
+
+onMounted(async () => {
+    await loadDatasetAttributes();
+});
+</script>
+
 <template>
     <div aria-labelledby="dataset-attributes-heading">
         <h1 id="dataset-attributes-heading" v-localize class="h-lg">Edit Dataset Attributes</h1>
-        <b-alert v-if="messageText" class="dataset-attributes-alert" :variant="messageVariant" show>
-            {{ messageText | l }}
-        </b-alert>
-        <DatasetAttributesProvider :id="datasetId" v-slot="{ result, loading }" @error="onError">
-            <div v-if="!loading" class="mt-3">
-                <b-tabs>
-                    <b-tab v-if="!result['attribute_disable']">
-                        <template v-slot:title>
-                            <FontAwesomeIcon icon="bars" class="mr-1" />{{ "Attributes" | l }}
-                        </template>
-                        <FormDisplay :inputs="result['attribute_inputs']" @onChange="onAttribute" />
-                        <div class="mt-2">
-                            <b-button
-                                id="dataset-attributes-default-save"
-                                variant="primary"
-                                class="mr-1"
-                                @click="submit('attribute', 'attributes')">
-                                <FontAwesomeIcon icon="save" class="mr-1" />{{ "Save" | l }}
-                            </b-button>
-                            <b-button v-if="!result['metadata_disable']" @click="submit('attribute', 'autodetect')">
-                                <FontAwesomeIcon icon="redo" class="mr-1" />{{ "Auto-detect" | l }}
-                            </b-button>
-                        </div>
-                    </b-tab>
-                    <b-tab
-                        v-if="
-                            (!result['conversion_disable'] || !result['datatype_disable']) &&
-                            !result['metadata_disable']
-                        ">
-                        <template v-slot:title>
-                            <FontAwesomeIcon icon="database" class="mr-1" />{{ "Datatypes" | l }}
-                        </template>
-                        <div v-if="!result['datatype_disable']" class="ui-portlet-section">
-                            <div class="portlet-header">
-                                <div class="portlet-title">
-                                    <FontAwesomeIcon icon="database" class="portlet-title-icon fa-fw mr-1" />
-                                    <span class="portlet-title-text">
-                                        <b itemprop="name">{{ "Assign Datatype" | l }}</b>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="portlet-content">
-                                <FormDisplay :inputs="result['datatype_inputs']" @onChange="onDatatype" />
-                                <div class="mt-2">
-                                    <b-button variant="primary" class="mr-1" @click="submit('datatype', 'datatype')">
-                                        <FontAwesomeIcon icon="save" class="mr-1" />{{ "Save" | l }}
-                                    </b-button>
-                                    <b-button @click="submit('datatype', 'datatype_detect')">
-                                        <FontAwesomeIcon icon="redo" class="mr-1" />{{ "Auto-detect" | l }}
-                                    </b-button>
-                                </div>
+
+        <BAlert v-if="messageText" class="dataset-attributes-alert" :variant="messageVariant" show>
+            {{ localize(messageText) }}
+        </BAlert>
+
+        <BAlert v-if="loading" variant="info" show>
+            <LoadingSpan message="Loading dataset attributes..." />
+        </BAlert>
+        <div v-else class="mt-3">
+            <BTabs>
+                <BTab v-if="!datasetAttributes['attribute_disable']">
+                    <template v-slot:title>
+                        <FontAwesomeIcon :icon="faBars" class="mr-1" />
+                        {{ localize("Attributes") }}
+                    </template>
+
+                    <FormDisplay
+                        v-if="datasetAttributes['attribute_inputs']"
+                        :inputs="datasetAttributes['attribute_inputs']"
+                        @onChange="onAttribute" />
+
+                    <div class="mt-2">
+                        <BButton
+                            id="dataset-attributes-default-save"
+                            variant="primary"
+                            class="mr-1"
+                            @click="submit('attribute', 'attributes')">
+                            <FontAwesomeIcon :icon="faSave" class="mr-1" />
+                            {{ localize("Save") }}
+                        </BButton>
+
+                        <BButton
+                            v-if="!datasetAttributes['metadata_disable']"
+                            @click="submit('attribute', 'autodetect')">
+                            <FontAwesomeIcon :icon="faRedo" class="mr-1" />
+                            {{ localize("Auto-detect") }}
+                        </BButton>
+                    </div>
+                </BTab>
+
+                <BTab
+                    v-if="
+                        (!datasetAttributes['conversion_disable'] || !datasetAttributes['datatype_disable']) &&
+                        !datasetAttributes['metadata_disable']
+                    ">
+                    <template v-slot:title>
+                        <FontAwesomeIcon :icon="faDatabase" class="mr-1" />
+                        {{ localize("Datatypes") }}
+                    </template>
+
+                    <div v-if="!datasetAttributes['datatype_disable']" class="ui-portlet-section">
+                        <div class="portlet-header">
+                            <div class="portlet-title">
+                                <FontAwesomeIcon :icon="faDatabase" class="portlet-title-icon fa-fw mr-1" />
+
+                                <span class="portlet-title-text">
+                                    <b itemprop="name">
+                                        {{ localize("Assign Datatype") }}
+                                    </b>
+                                </span>
                             </div>
                         </div>
-                        <div v-if="!result['conversion_disable']" class="ui-portlet-section">
-                            <div class="portlet-header">
-                                <div class="portlet-title">
-                                    <FontAwesomeIcon icon="cog" class="portlet-title-icon fa-fw mr-1" />
-                                    <span class="portlet-title-text">
-                                        <b itemprop="name">{{ "Convert to Datatype" | l }}</b>
-                                    </span>
-                                </div>
-                            </div>
-                            <div class="portlet-content">
-                                <FormDisplay :inputs="result['conversion_inputs']" @onChange="onConversion" />
-                                <div class="mt-2">
-                                    <b-button variant="primary" @click="submit('conversion', 'conversion')">
-                                        <FontAwesomeIcon icon="exchange-alt" class="mr-1" />{{ "Create Dataset" | l }}
-                                    </b-button>
-                                </div>
+                        <div class="portlet-content">
+                            <FormDisplay
+                                v-if="datasetAttributes['datatype_inputs']"
+                                :inputs="datasetAttributes['datatype_inputs']"
+                                @onChange="onDatatype" />
+
+                            <div class="mt-2">
+                                <BButton variant="primary" class="mr-1" @click="submit('datatype', 'datatype')">
+                                    <FontAwesomeIcon :icon="faSave" class="mr-1" />
+                                    {{ localize("Save") }}
+                                </BButton>
+
+                                <BButton @click="submit('datatype', 'datatype_detect')">
+                                    <FontAwesomeIcon :icon="faRedo" class="mr-1" />
+                                    {{ localize("Auto-detect") }}
+                                </BButton>
                             </div>
                         </div>
-                    </b-tab>
-                    <b-tab v-if="!result['permission_disable']">
-                        <template v-slot:title>
-                            <FontAwesomeIcon icon="user" class="mr-1" />{{ "Permissions" | l }}
-                        </template>
-                        <FormDisplay :inputs="result['permission_inputs']" @onChange="onPermission" />
-                        <div class="mt-2">
-                            <b-button variant="primary" @click="submit('permission', 'permission')">
-                                <FontAwesomeIcon icon="save" class="mr-1" />{{ "Save" | l }}
-                            </b-button>
+                    </div>
+
+                    <div v-if="!datasetAttributes['conversion_disable']" class="ui-portlet-section">
+                        <div class="portlet-header">
+                            <div class="portlet-title">
+                                <FontAwesomeIcon :icon="faCog" class="portlet-title-icon fa-fw mr-1" />
+
+                                <span class="portlet-title-text">
+                                    <b itemprop="name">
+                                        {{ localize("Convert to Datatype") }}
+                                    </b>
+                                </span>
+                            </div>
                         </div>
-                    </b-tab>
-                </b-tabs>
-            </div>
-        </DatasetAttributesProvider>
-    </div>
-</template>
+                        <div class="portlet-content">
+                            <FormDisplay
+                                v-if="datasetAttributes['conversion_inputs']"
+                                :inputs="datasetAttributes['conversion_inputs']"
+                                @onChange="onConversion" />
 
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { getGalaxyInstance } from "app";
-import FormDisplay from "components/Form/FormDisplay";
-import { DatasetAttributesProvider } from "components/providers/DatasetProvider";
+                            <div class="mt-2">
+                                <BButton variant="primary" @click="submit('conversion', 'conversion')">
+                                    <FontAwesomeIcon :icon="faExchangeAlt" class="mr-1" />
+                                    {{ localize("Create Dataset") }}
+                                </BButton>
+                            </div>
+                        </div>
+                    </div>
+                </BTab>
 
-import { setAttributes } from "./services";
+                <BTab v-if="!datasetAttributes['permission_disable']">
+                    <template v-slot:title>
+                        <FontAwesomeIcon :icon="faUser" class="mr-1" />
+                        {{ localize("Permissions") }}
+                    </template>
 
-library.add(faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser);
+                    <FormDisplay
+                        v-if="datasetAttributes['permission_inputs']"
+                        :inputs="datasetAttributes['permission_inputs']"
+                        @onChange="onPermission" />
 
-export default {
-    components: {
-        DatasetAttributesProvider,
-        FontAwesomeIcon,
-        FormDisplay,
-    },
-    props: {
-        datasetId: {
-            type: String,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            messageText: null,
-            messageVariant: null,
-            formData: {},
-        };
-    },
-    methods: {
-        onAttribute(data) {
-            this.formData["attribute"] = data;
-        },
-        onConversion(data) {
-            this.formData["conversion"] = data;
-        },
-        onDatatype(data) {
-            this.formData["datatype"] = data;
-        },
-        onPermission(data) {
-            this.formData["permission"] = data;
-        },
-        onError(messageText) {
-            this.messageText = messageText;
-            this.messageVariant = "danger";
-        },
-        submit(key, operation) {
-            setAttributes(this.datasetId, this.formData[key], operation).then((response) => {
-                this.messageText = response.message;
-                this.messageVariant = response.status;
-                this._reloadHistory();
-            }, this.onError);
-        },
-        /** reload Galaxy's history after updating dataset's attributes */
-        _reloadHistory: function () {
-            const Galaxy = getGalaxyInstance();
-            if (Galaxy) {
-                Galaxy.currHistoryPanel.loadCurrentHistory();
-            }
-        },
-    },
-};
-</script>
+                    <div class="mt-2">
+                        <BButton variant="primary" @click="submit('permission', 'permission')">
+                            <FontAwesomeIcon :icon="faSave" class="mr-1" />
+                            {{ localize("Save") }}
+                        </BButton>
+                    </div>
+                </BTab>
+            </BTabs>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/DatasetInformation/DatasetDetails.vue b/client/src/components/DatasetInformation/DatasetDetails.vue
index f9f2606669ed..667e33d2c802 100644
--- a/client/src/components/DatasetInformation/DatasetDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetDetails.vue
@@ -1,112 +1,164 @@
-<template>
-    <DatasetProvider
-        :id="datasetId"
-        v-slot="{ result: dataset, loading: isDatasetLoading, error: datasetLoadingError }">
-        <div aria-labelledby="dataset-details-heading">
-            <h1 id="dataset-details-heading" class="sr-only">Dataset Details</h1>
-            <LoadingSpan v-if="isDatasetLoading" />
-            <Alert v-else-if="datasetLoadingError" :message="datasetLoadingError" variant="error" />
-            <div v-else>
-                <JobDetailsProvider
-                    v-if="!isDatasetLoading && dataset.creating_job !== null"
-                    v-slot="{ result: job, loading: isJobLoading }"
-                    :job-id="dataset.creating_job"
-                    auto-refresh>
-                    <div v-if="!isJobLoading" class="details">
-                        <DatasetInformation :hda_id="datasetId" />
-                        <JobParameters dataset_type="hda" :dataset-id="datasetId" />
-                        <JobInformation :job_id="dataset.creating_job" />
-                        <DatasetStorage :dataset-id="datasetId" />
-                        <InheritanceChain :dataset-id="datasetId" :dataset-name="dataset.name" />
-                        <JobMetrics
-                            v-if="isConfigLoaded"
-                            :dataset-id="datasetId"
-                            :carbon-intensity="config.carbon_intensity"
-                            :geographical-server-location-name="config.geographical_server_location_name"
-                            :power-usage-effectiveness="config.power_usage_effectiveness"
-                            :should-show-aws-estimate="config.aws_estimate"
-                            :should-show-carbon-emission-estimates="config.carbon_emission_estimates" />
-                        <JobDestinationParams v-if="currentUser.is_admin" :job-id="dataset.creating_job" />
-                        <JobDependencies :dependencies="job.dependencies"></JobDependencies>
-                        <div v-if="dataset.peek">
-                            <h2 class="h-md">Dataset Peek</h2>
-                            <div v-html="dataset.peek" />
-                        </div>
-                    </div>
-                </JobDetailsProvider>
-                <div v-else-if="!isDatasetLoading" class="details">
-                    <DatasetInformation :hda_id="datasetId" />
-                    <DatasetStorage :dataset-id="datasetId" />
-                    <div>
-                        <h2 class="h-md">Job Not Found</h2>
-                        <p>
-                            No job associated with this dataset is recorded in Galaxy. Galaxy cannot determine full
-                            dataset provenance and history for this dataset.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </DatasetProvider>
-</template>
+<script setup lang="ts">
+import { type AxiosError } from "axios";
+import { BAlert } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { onMounted, onUnmounted, ref } from "vue";
 
-<script>
-import { mapState } from "pinia";
-
-import Alert from "@/components/Alert";
-import DatasetStorage from "@/components/Dataset/DatasetStorage/DatasetStorage";
-import DatasetInformation from "@/components/DatasetInformation/DatasetInformation";
-import JobDependencies from "@/components/JobDependencies/JobDependencies";
-import JobDestinationParams from "@/components/JobDestinationParams/JobDestinationParams";
-import JobInformation from "@/components/JobInformation/JobInformation";
-import JobMetrics from "@/components/JobMetrics/JobMetrics";
-import JobParameters from "@/components/JobParameters/JobParameters";
-import LoadingSpan from "@/components/LoadingSpan";
-import { DatasetProvider } from "@/components/providers";
-import { JobDetailsProvider } from "@/components/providers/JobProvider";
+import { type HDADetailed } from "@/api";
+import { fetchDatasetDetails } from "@/api/datasets";
+import { fetchJobDetails, JobDetails } from "@/api/jobs";
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
+import { stateIsTerminal } from "@/utils/utils";
+
+import DatasetStorage from "@/components/Dataset/DatasetStorage/DatasetStorage.vue";
+import DatasetInformation from "@/components/DatasetInformation/DatasetInformation.vue";
+import InheritanceChain from "@/components/InheritanceChain//InheritanceChain.vue";
+import JobDependencies from "@/components/JobDependencies/JobDependencies.vue";
+import JobDestinationParams from "@/components/JobDestinationParams/JobDestinationParams.vue";
+import JobInformation from "@/components/JobInformation/JobInformation.vue";
+import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
+import JobParameters from "@/components/JobParameters/JobParameters.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Props {
+    datasetId: string;
+}
+
+const props = defineProps<Props>();
+
+const { config, isConfigLoaded } = useConfig(true);
+
+const userStore = useUserStore();
+const { currentUser } = storeToRefs(userStore);
+
+const loading = ref(false);
+const jobLoading = ref(true);
+const jobTimeOut = ref<any>(null);
+const jobDetails = ref<JobDetails>();
+const dataset = ref<HDADetailed | null>(null);
+const jobLoadingError = ref<string | null>(null);
+const datasetLoadingError = ref<string | null>(null);
+
+async function getDatasetDetails() {
+    loading.value = true;
+
+    try {
+        const data = await fetchDatasetDetails({ id: props.datasetId });
+
+        dataset.value = data;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        datasetLoadingError.value = error.response?.data?.err_msg || "Unable to fetch available dataset details.";
+    } finally {
+        loading.value = false;
+    }
+}
+
+async function loadJobDetails() {
+    jobLoading.value = true;
+
+    try {
+        const { data } = await fetchJobDetails({ job_id: dataset.value?.creating_job as string, full: true });
+
+        if (stateIsTerminal(data)) {
+            clearTimeout(jobTimeOut.value);
+        } else {
+            jobTimeOut.value = setTimeout(loadJobDetails, 3000);
+        }
+
+        jobDetails.value = data;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        jobLoadingError.value = error.response?.data?.err_msg || "Unable to fetch available dataset details.";
+    } finally {
+        jobLoading.value = false;
+    }
+}
+
+onMounted(async () => {
+    await getDatasetDetails();
+
+    if (dataset.value?.creating_job !== null) {
+        await loadJobDetails();
+    }
+});
 
-import InheritanceChain from "../InheritanceChain/InheritanceChain";
-
-export default {
-    components: {
-        Alert,
-        JobParameters,
-        InheritanceChain,
-        LoadingSpan,
-        DatasetStorage,
-        DatasetInformation,
-        JobInformation,
-        JobMetrics,
-        JobDependencies,
-        JobDestinationParams,
-        DatasetProvider,
-        JobDetailsProvider,
-    },
-    props: {
-        datasetId: {
-            type: String,
-            required: true,
-        },
-    },
-    setup() {
-        const { config, isConfigLoaded } = useConfig(true);
-        return { config, isConfigLoaded };
-    },
-    computed: {
-        ...mapState(useUserStore, ["currentUser"]),
-    },
-};
+onUnmounted(() => {
+    clearTimeout(jobTimeOut.value);
+});
 </script>
 
+<template>
+    <div aria-labelledby="dataset-details-heading">
+        <h1 id="dataset-details-heading" class="sr-only">Dataset Details</h1>
+
+        <BAlert v-if="loading" variant="info" show>
+            <LoadingSpan message="Loading dataset details..." />
+        </BAlert>
+        <BAlert v-else-if="datasetLoadingError" variant="error">
+            {{ datasetLoadingError }}
+        </BAlert>
+        <div v-else-if="dataset">
+            <div v-if="dataset.creating_job && !jobLoading" class="details">
+                <DatasetInformation :dataset="dataset" />
+
+                <JobParameters dataset_type="hda" :dataset-id="datasetId" />
+
+                <JobInformation :job_id="dataset.creating_job" />
+
+                <DatasetStorage :dataset-id="datasetId" />
+
+                <InheritanceChain :dataset-id="datasetId" :dataset-name="dataset.name" />
+
+                <JobMetrics
+                    v-if="isConfigLoaded"
+                    :dataset-id="datasetId"
+                    :carbon-intensity="config.carbon_intensity"
+                    :geographical-server-location-name="config.geographical_server_location_name"
+                    :power-usage-effectiveness="config.power_usage_effectiveness"
+                    :should-show-aws-estimate="config.aws_estimate"
+                    :should-show-carbon-emission-estimates="config.carbon_emission_estimates" />
+
+                <JobDestinationParams v-if="currentUser?.is_admin" :job-id="dataset.creating_job" />
+
+                <JobDependencies v-if="jobDetails.dependencies" :dependencies="jobDetails.dependencies" />
+
+                <div v-if="dataset.peek">
+                    <h2 class="h-md">Dataset Peek</h2>
+
+                    <div class="dataset-peek" v-html="dataset.peek" />
+                </div>
+            </div>
+
+            <div v-if="!dataset.creating_job" class="details">
+                <DatasetInformation :dataset="dataset" />
+
+                <DatasetStorage :dataset-id="datasetId" />
+
+                <div>
+                    <h2 class="h-md">Job Not Found</h2>
+
+                    <p>
+                        No job associated with this dataset is recorded in Galaxy. Galaxy cannot determine full dataset
+                        provenance and history for this dataset.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
 <style scoped>
-.tool-title {
-    text-align: center;
-}
 .details {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+
+    .dataset-peek {
+        word-break: break-all;
+    }
 }
 </style>
diff --git a/client/src/components/DatasetInformation/DatasetError.test.js b/client/src/components/DatasetInformation/DatasetError.test.js
deleted file mode 100644
index b46c8e625b0b..000000000000
--- a/client/src/components/DatasetInformation/DatasetError.test.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { createPinia } from "pinia";
-import { useUserStore } from "stores/userStore";
-import { getLocalVue } from "tests/jest/helpers";
-
-import MockProvider from "../providers/MockProvider";
-import DatasetError from "./DatasetError";
-
-jest.mock("components/providers", () => {
-    return {}; // stubbed below
-});
-
-const localVue = getLocalVue();
-
-function buildWrapper(has_duplicate_inputs = true, has_empty_inputs = true, user_email = "") {
-    const pinia = createPinia();
-    const wrapper = mount(DatasetError, {
-        propsData: {
-            datasetId: "dataset_id",
-        },
-        localVue,
-        stubs: {
-            JobDetailsProvider: MockProvider({
-                result: {
-                    tool_id: "tool_id",
-                    tool_stderr: "tool_stderr",
-                    job_stderr: "job_stderr",
-                    job_messages: [{ desc: "message_1" }, { desc: "message_2" }],
-                    user_email: user_email,
-                },
-            }),
-            JobProblemProvider: MockProvider({
-                result: { has_duplicate_inputs: has_duplicate_inputs, has_empty_inputs: has_empty_inputs },
-            }),
-            DatasetProvider: MockProvider({
-                result: { id: "dataset_id", creating_job: "creating_job" },
-            }),
-            FontAwesomeIcon: false,
-            FormElement: false,
-        },
-        pinia,
-    });
-
-    const userStore = useUserStore();
-    userStore.currentUser = { email: user_email || "email" };
-
-    return wrapper;
-}
-
-describe("DatasetError", () => {
-    it("check props with common problems", async () => {
-        const wrapper = buildWrapper();
-        expect(wrapper.find("#dataset-error-tool-id").text()).toBe("tool_id");
-        expect(wrapper.find("#dataset-error-tool-stderr").text()).toBe("tool_stderr");
-        expect(wrapper.find("#dataset-error-job-stderr").text()).toBe("job_stderr");
-        const messages = wrapper.findAll("#dataset-error-job-messages .code");
-        expect(messages.at(0).text()).toBe("message_1");
-        expect(messages.at(1).text()).toBe("message_2");
-        expect(wrapper.find("#dataset-error-has-empty-inputs")).toBeDefined();
-        expect(wrapper.find("#dataset-error-has-duplicate-inputs")).toBeDefined();
-    });
-
-    it("check props without common problems", async () => {
-        const wrapper = buildWrapper(false, false, "user_email");
-        expect(wrapper.find("#dataset-error-tool-id").text()).toBe("tool_id");
-        expect(wrapper.find("#dataset-error-tool-stderr").text()).toBe("tool_stderr");
-        expect(wrapper.find("#dataset-error-job-stderr").text()).toBe("job_stderr");
-        expect(wrapper.findAll("#dataset-error-has-empty-inputs").length).toBe(0);
-        expect(wrapper.findAll("#dataset-error-has-duplicate-inputs").length).toBe(0);
-        expect(wrapper.findAll("#dataset-error-email").length).toBe(0);
-    });
-
-    it("hides form fields and button on success", async () => {
-        const wrapper = buildWrapper();
-        const fieldsAndButton = "#fieldsAndButton";
-        expect(wrapper.find(fieldsAndButton).exists()).toBe(true);
-        await wrapper.setData({ resultMessages: [["message", "success"]] });
-        expect(wrapper.find(fieldsAndButton).exists()).toBe(false);
-    });
-
-    it("does not hide form fields and button on error", async () => {
-        const wrapper = buildWrapper();
-        const fieldsAndButton = "#fieldsAndButton";
-        expect(wrapper.find(fieldsAndButton).exists()).toBe(true);
-        const messages = [
-            ["message", "success"],
-            ["message", "danger"],
-        ]; // at least one has "danger"
-        await wrapper.setData({ resultMessages: messages });
-        expect(wrapper.find(fieldsAndButton).exists()).toBe(true);
-    });
-});
diff --git a/client/src/components/DatasetInformation/DatasetError.test.ts b/client/src/components/DatasetInformation/DatasetError.test.ts
new file mode 100644
index 000000000000..c3213e8dc6fc
--- /dev/null
+++ b/client/src/components/DatasetInformation/DatasetError.test.ts
@@ -0,0 +1,125 @@
+import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { createPinia } from "pinia";
+import { getLocalVue } from "tests/jest/helpers";
+
+import { mockFetcher } from "@/api/schema/__mocks__";
+import { useUserStore } from "@/stores/userStore";
+
+import DatasetError from "./DatasetError.vue";
+
+const localVue = getLocalVue();
+
+const DATASET_ID = "dataset_id";
+
+async function montDatasetError(has_duplicate_inputs = true, has_empty_inputs = true, user_email = "") {
+    const pinia = createPinia();
+
+    mockFetcher
+        .path("/api/datasets/{dataset_id}")
+        .method("get")
+        .mock({
+            data: {
+                id: DATASET_ID,
+                creating_job: "creating_job",
+            },
+        });
+
+    mockFetcher
+        .path("/api/jobs/{job_id}")
+        .method("get")
+        .mock({
+            data: {
+                tool_id: "tool_id",
+                tool_stderr: "tool_stderr",
+                job_stderr: "job_stderr",
+                job_messages: [{ desc: "message_1" }, { desc: "message_2" }],
+                user_email: user_email,
+            },
+        });
+
+    mockFetcher
+        .path("/api/jobs/{job_id}/common_problems")
+        .method("get")
+        .mock({
+            data: {
+                has_duplicate_inputs: has_duplicate_inputs,
+                has_empty_inputs: has_empty_inputs,
+            },
+        });
+
+    const wrapper = mount(DatasetError as object, {
+        propsData: {
+            datasetId: DATASET_ID,
+        },
+        localVue,
+        pinia,
+    });
+
+    const userStore = useUserStore();
+    userStore.currentUser = {
+        email: user_email || "email",
+        id: "user_id",
+        tags_used: [],
+        isAnonymous: false,
+        total_disk_usage: 0,
+    };
+
+    await flushPromises();
+
+    return wrapper;
+}
+
+describe("DatasetError", () => {
+    it("check props with common problems", async () => {
+        const wrapper = await montDatasetError();
+
+        expect(wrapper.find("#dataset-error-tool-id").text()).toBe("tool_id");
+        expect(wrapper.find("#dataset-error-tool-stderr").text()).toBe("tool_stderr");
+        expect(wrapper.find("#dataset-error-job-stderr").text()).toBe("job_stderr");
+
+        const messages = wrapper.findAll("#dataset-error-job-messages .code");
+        expect(messages.at(0).text()).toBe("message_1");
+        expect(messages.at(1).text()).toBe("message_2");
+
+        expect(wrapper.find("#dataset-error-has-empty-inputs")).toBeDefined();
+        expect(wrapper.find("#dataset-error-has-duplicate-inputs")).toBeDefined();
+    });
+
+    it("check props without common problems", async () => {
+        const wrapper = await montDatasetError(false, false, "user_email");
+
+        expect(wrapper.find("#dataset-error-tool-id").text()).toBe("tool_id");
+        expect(wrapper.find("#dataset-error-tool-stderr").text()).toBe("tool_stderr");
+        expect(wrapper.find("#dataset-error-job-stderr").text()).toBe("job_stderr");
+
+        expect(wrapper.findAll("#dataset-error-has-empty-inputs").length).toBe(0);
+        expect(wrapper.findAll("#dataset-error-has-duplicate-inputs").length).toBe(0);
+        expect(wrapper.findAll("#dataset-error-email").length).toBe(0);
+    });
+
+    it("hides form fields and button on success", async () => {
+        const wrapper = await montDatasetError();
+
+        mockFetcher
+            .path("/api/jobs/{job_id}/error")
+            .method("post")
+            .mock({
+                data: {
+                    messages: ["message", "success"],
+                },
+            });
+
+        const FormAndSubmitButton = "#dataset-error-form";
+        expect(wrapper.find(FormAndSubmitButton).exists()).toBe(true);
+
+        const submitButton = "#dataset-error-submit";
+        expect(wrapper.find(submitButton).exists()).toBe(true);
+
+        await wrapper.find(submitButton).trigger("click");
+
+        await flushPromises();
+
+        expect(wrapper.find(FormAndSubmitButton).exists()).toBe(false);
+    });
+});
diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index 0deb037e7b1b..0c86dada34d9 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -1,157 +1,202 @@
-<template>
-    <div>
-        <b-alert v-if="errorMessage" variant="danger" show>
-            <h2 class="alert-heading h-sm">Failed to access Dataset details.</h2>
-            {{ errorMessage }}
-        </b-alert>
-        <DatasetProvider :id="datasetId" v-slot="{ result: dataset, loading: datasetLoading }">
-            <JobDetailsProvider
-                v-if="!datasetLoading"
-                v-slot="{ result: jobDetails, loading }"
-                :job-id="dataset.creating_job"
-                @error="onError">
-                <div v-if="!loading">
-                    <div class="page-container edit-attr">
-                        <div class="response-message"></div>
-                    </div>
-                    <h3 class="h-lg">Dataset Error Report</h3>
-                    <p>
-                        An error occurred while running the tool
-                        <b id="dataset-error-tool-id" class="text-break">{{ jobDetails.tool_id }}</b
-                        >.
-                    </p>
-                    <DatasetErrorDetails
-                        :tool-stderr="jobDetails.tool_stderr"
-                        :job-stderr="jobDetails.job_stderr"
-                        :job-messages="jobDetails.job_messages" />
-                    <JobProblemProvider
-                        v-slot="{ result: jobProblems }"
-                        :job-id="dataset.creating_job"
-                        @error="onError">
-                        <div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
-                            <h4 class="common_problems mt-3 h-md">Detected Common Potential Problems</h4>
-                            <p v-if="jobProblems.has_empty_inputs" id="dataset-error-has-empty-inputs">
-                                The tool was started with one or more empty input datasets. This frequently results in
-                                tool errors due to problematic input choices.
-                            </p>
-                            <p v-if="jobProblems.has_duplicate_inputs" id="dataset-error-has-duplicate-inputs">
-                                The tool was started with one or more duplicate input datasets. This frequently results
-                                in tool errors due to problematic input choices.
-                            </p>
-                        </div>
-                    </JobProblemProvider>
-                    <h4 class="mt-3 h-md">Troubleshooting</h4>
-                    <p>
-                        There are a number of helpful resources to self diagnose and correct problems.
-                        <br />
-                        Start here:
-                        <b>
-                            <a
-                                href="https://training.galaxyproject.org/training-material/faqs/galaxy/analysis_troubleshooting.html"
-                                target="_blank">
-                                My job ended with an error. What can I do?
-                            </a>
-                        </b>
-                    </p>
-                    <h4 class="mb-3 h-md">Issue Report</h4>
-                    <b-alert
-                        v-for="(resultMessage, index) in resultMessages"
-                        :key="index"
-                        :variant="resultMessage[1]"
-                        show>
-                        <span v-html="renderMarkdown(resultMessage[0])"></span>
-                    </b-alert>
-                    <div v-if="showForm" id="fieldsAndButton">
-                        <span class="mr-2 font-weight-bold">{{ emailTitle }}</span>
-                        <span v-if="!!currentUser?.email">{{ currentUser?.email }}</span>
-                        <span v-else>{{ "You must be logged in to receive emails" | l }}</span>
-                        <FormElement
-                            id="dataset-error-message"
-                            v-model="message"
-                            :area="true"
-                            title="Please provide detailed information on the activities leading to this issue:" />
-                        <b-button
-                            id="dataset-error-submit"
-                            variant="primary"
-                            class="mt-3"
-                            @click="submit(dataset, jobDetails.user_email)">
-                            <FontAwesomeIcon icon="bug" class="mr-1" />Report
-                        </b-button>
-                    </div>
-                </div>
-            </JobDetailsProvider>
-        </DatasetProvider>
-    </div>
-</template>
-
-<script>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBug } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import FormElement from "components/Form/FormElement";
-import { DatasetProvider } from "components/providers";
-import { JobDetailsProvider, JobProblemProvider } from "components/providers/JobProvider";
-import { mapState } from "pinia";
+import { AxiosError } from "axios";
+import { BAlert, BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, ref } from "vue";
 
+import { type HDADetailed } from "@/api";
+import { fetchDatasetDetails } from "@/api/datasets";
+import { fetchJobCommonProblems, fetchJobDetails, JobDetails, JobInputSummary, postJobErrorReport } from "@/api/jobs";
 import { useMarkdown } from "@/composables/markdown";
 import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
 
-import DatasetErrorDetails from "./DatasetErrorDetails";
-import { sendErrorReport } from "./services";
+import DatasetErrorDetails from "@/components/DatasetInformation/DatasetErrorDetails.vue";
+import FormElement from "@/components/Form/FormElement.vue";
 
 library.add(faBug);
 
-export default {
-    components: {
-        DatasetProvider,
-        DatasetErrorDetails,
-        FontAwesomeIcon,
-        FormElement,
-        JobDetailsProvider,
-        JobProblemProvider,
-    },
-    props: {
-        datasetId: {
-            type: String,
-            required: true,
-        },
-    },
-    setup() {
-        const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
-        return { renderMarkdown };
-    },
-    data() {
-        return {
-            message: null,
-            errorMessage: null,
-            resultMessages: [],
-            emailTitle: this.l("Your email address"),
-        };
-    },
-    computed: {
-        ...mapState(useUserStore, ["currentUser"]),
-        showForm() {
-            const noResult = !this.resultMessages.length;
-            const hasError = this.resultMessages.some((msg) => msg[1] === "danger");
-            return noResult || hasError;
-        },
-    },
-    methods: {
-        onError(err) {
-            this.errorMessage = err;
-        },
-        submit(dataset, userEmailJob) {
-            const email = userEmailJob || this.currentUserEmail;
-            const message = this.message;
-            sendErrorReport(dataset, message, email).then(
-                (resultMessages) => {
-                    this.resultMessages = resultMessages;
-                },
-                (errorMessage) => {
-                    this.errorMessage = errorMessage;
-                }
-            );
-        },
-    },
-};
+interface Props {
+    datasetId: string;
+}
+
+const props = defineProps<Props>();
+
+const userStore = useUserStore();
+const { currentUser } = storeToRefs(userStore);
+
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
+const message = ref("");
+const jobLoading = ref(true);
+const errorMessage = ref("");
+const datasetLoading = ref(false);
+const jobDetails = ref<JobDetails>();
+const jobProblems = ref<JobInputSummary>();
+const resultMessages = ref<string[][]>([]);
+const dataset = ref<HDADetailed | null>(null);
+
+const showForm = computed(() => {
+    const noResult = !resultMessages.value.length;
+    const hasError = resultMessages.value.some((msg) => msg[1] === "danger");
+
+    return noResult || hasError;
+});
+
+async function getDatasetDetails() {
+    datasetLoading.value = true;
+
+    try {
+        const data = await fetchDatasetDetails({ id: props.datasetId });
+
+        dataset.value = data;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        errorMessage.value = error.response?.data?.err_msg || "Unable to fetch available dataset details.";
+    } finally {
+        datasetLoading.value = false;
+    }
+}
+
+async function getJobDetails() {
+    jobLoading.value = true;
+
+    try {
+        const { data } = await fetchJobDetails({ job_id: dataset.value?.creating_job as string, full: true });
+
+        jobDetails.value = data;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        errorMessage.value = error.response?.data?.err_msg || "Unable to fetch available dataset details.";
+    } finally {
+        jobLoading.value = false;
+    }
+}
+
+async function getJobProblems() {
+    try {
+        const { data } = await fetchJobCommonProblems({ job_id: dataset.value?.creating_job as string });
+
+        jobProblems.value = data;
+    } catch (e) {
+        const error = e as AxiosError<{ err_msg?: string }>;
+
+        errorMessage.value = error.response?.data?.err_msg || "Unable to fetch available dataset details.";
+    }
+}
+
+async function submit(dataset: HDADetailed, userEmailJob?: string | null) {
+    const email = userEmailJob;
+
+    try {
+        const { data } = await postJobErrorReport({
+            job_id: dataset.creating_job,
+            dataset_id: dataset.id,
+            message: message.value,
+            email,
+        });
+
+        resultMessages.value = data.messages;
+    } catch (error: any) {
+        resultMessages.value = error;
+    }
+}
+
+onMounted(async () => {
+    await getDatasetDetails();
+
+    if (dataset.value?.creating_job !== null) {
+        await getJobDetails();
+        await getJobProblems();
+    }
+});
 </script>
+
+<template>
+    <div>
+        <BAlert v-if="errorMessage" variant="danger" show>
+            <h2 class="alert-heading h-sm">Failed to access Dataset details.</h2>
+            {{ errorMessage }}
+        </BAlert>
+
+        <div v-if="!datasetLoading && !jobLoading && dataset && jobDetails">
+            <div class="page-container edit-attr">
+                <div class="response-message"></div>
+            </div>
+
+            <h3 class="h-lg">Dataset Error Report</h3>
+
+            <p>
+                An error occurred while running the tool
+                <b id="dataset-error-tool-id" class="text-break">{{ jobDetails.tool_id }}</b
+                >.
+            </p>
+
+            <DatasetErrorDetails
+                :tool-stderr="jobDetails.tool_stderr"
+                :job-stderr="jobDetails.job_stderr"
+                :job-messages="jobDetails.job_messages" />
+
+            <div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
+                <h4 class="common_problems mt-3 h-md">Detected Common Potential Problems</h4>
+
+                <p v-if="jobProblems.has_empty_inputs" id="dataset-error-has-empty-inputs">
+                    The tool was started with one or more empty input datasets. This frequently results in tool errors
+                    due to problematic input choices.
+                </p>
+
+                <p v-if="jobProblems.has_duplicate_inputs" id="dataset-error-has-duplicate-inputs">
+                    The tool was started with one or more duplicate input datasets. This frequently results in tool
+                    errors due to problematic input choices.
+                </p>
+            </div>
+
+            <h4 class="mt-3 h-md">Troubleshooting</h4>
+
+            <p>
+                There are a number of helpful resources to self diagnose and correct problems.
+                <br />
+                Start here:
+                <b>
+                    <a
+                        href="https://training.galaxyproject.org/training-material/faqs/galaxy/analysis_troubleshooting.html"
+                        target="_blank">
+                        My job ended with an error. What can I do?
+                    </a>
+                </b>
+            </p>
+
+            <h4 class="mb-3 h-md">Issue Report</h4>
+
+            <BAlert v-for="(resultMessage, index) in resultMessages" :key="index" :variant="resultMessage[1]" show>
+                <span v-html="renderMarkdown(resultMessage[0])" />
+            </BAlert>
+
+            <div v-if="showForm" id="dataset-error-form">
+                <span class="mr-2 font-weight-bold">{{ localize("Your email address") }}</span>
+                <span v-if="currentUser?.email">{{ currentUser.email }}</span>
+                <span v-else>{{ localize("You must be logged in to receive emails") }}</span>
+
+                <FormElement
+                    id="dataset-error-message"
+                    v-model="message"
+                    :area="true"
+                    title="Please provide detailed information on the activities leading to this issue:" />
+
+                <BButton
+                    id="dataset-error-submit"
+                    variant="primary"
+                    class="mt-3"
+                    @click="submit(dataset, jobDetails.user_email)">
+                    <FontAwesomeIcon :icon="faBug" class="mr-1" />
+                    Report
+                </BButton>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/DatasetInformation/DatasetErrorDetails.vue b/client/src/components/DatasetInformation/DatasetErrorDetails.vue
index 8707f6b78d11..729c63ccd9c5 100644
--- a/client/src/components/DatasetInformation/DatasetErrorDetails.vue
+++ b/client/src/components/DatasetInformation/DatasetErrorDetails.vue
@@ -1,46 +1,52 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { type ShowFullJobResponse } from "@/api/jobs";
+
+interface Props {
+    jobStderr?: string;
+    toolStderr?: string;
+    jobMessages?: ShowFullJobResponse["job_messages"];
+}
+
+const props = defineProps<Props>();
+
+const hasMessages = computed(() => {
+    return props.jobMessages && props.jobMessages.length > 0;
+});
+const hasDetails = computed(() => {
+    return props.toolStderr || props.jobStderr || hasMessages.value;
+});
+</script>
+
 <template>
     <div v-if="hasDetails">
         <h4 class="h-md">Details</h4>
+
         <div v-if="hasMessages" id="dataset-error-job-messages">
             <p>Execution resulted in the following messages:</p>
+
             <div v-for="(jobMessage, index) in jobMessages" :key="index">
-                <pre class="rounded code">{{ jobMessage["desc"] }}</pre>
+                <pre class="rounded code">
+                    {{ jobMessage["desc"] }}
+                </pre>
             </div>
         </div>
+
         <div v-if="toolStderr">
             <p>Tool generated the following standard error:</p>
-            <pre id="dataset-error-tool-stderr" class="rounded code">{{ toolStderr }}</pre>
+
+            <pre id="dataset-error-tool-stderr" class="rounded code">
+                {{ toolStderr }}
+            </pre>
         </div>
+
         <div v-if="jobStderr">
             <p>Galaxy job runner generated the following standard error:</p>
-            <pre id="dataset-error-job-stderr" class="rounded code">{{ jobStderr }}</pre>
+
+            <pre id="dataset-error-job-stderr" class="rounded code">
+                {{ jobStderr }}
+            </pre>
         </div>
     </div>
 </template>
-
-<script>
-export default {
-    props: {
-        toolStderr: {
-            type: String,
-            default: null,
-        },
-        jobStderr: {
-            type: String,
-            default: null,
-        },
-        jobMessages: {
-            type: Array,
-            default: null,
-        },
-    },
-    computed: {
-        hasDetails() {
-            return this.toolStderr || this.jobStderr || this.hasMessages;
-        },
-        hasMessages() {
-            return this.jobMessages && this.jobMessages.length > 0;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/DatasetInformation/DatasetHash.vue b/client/src/components/DatasetInformation/DatasetHash.vue
index cff960b49b0a..ee5e3f41aa60 100644
--- a/client/src/components/DatasetInformation/DatasetHash.vue
+++ b/client/src/components/DatasetInformation/DatasetHash.vue
@@ -1,16 +1,15 @@
+<script setup lang="ts">
+import { type DatasetHash } from "@/api";
+
+interface Props {
+    hash: DatasetHash;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
     <li class="dataset-hash">
         <i>{{ hash.hash_value }}</i>
     </li>
 </template>
-
-<script>
-export default {
-    props: {
-        hash: {
-            type: Object,
-            required: true,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/DatasetInformation/DatasetHashes.vue b/client/src/components/DatasetInformation/DatasetHashes.vue
index be4420236909..fe115a623de8 100644
--- a/client/src/components/DatasetInformation/DatasetHashes.vue
+++ b/client/src/components/DatasetInformation/DatasetHashes.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { type DatasetHash as DatasetHashType } from "@/api";
+
+import DatasetHash from "@/components/DatasetInformation/DatasetHash.vue";
+
+interface Props {
+    hashes: DatasetHashType[];
+}
+
+defineProps<Props>();
+</script>
+
 <template>
     <span class="dataset-hashes">
         <ul class="dataset-hashes-list">
@@ -6,23 +18,7 @@
     </span>
 </template>
 
-<script>
-import DatasetHash from "./DatasetHash";
-
-export default {
-    components: {
-        DatasetHash,
-    },
-    props: {
-        hashes: {
-            type: Array,
-            required: true,
-        },
-    },
-};
-</script>
-
-<style scoped>
+<style scoped lang="scss">
 .dataset-hashes-list {
     padding-inline-start: 20px;
     margin-bottom: 0px;
diff --git a/client/src/components/DatasetInformation/DatasetInformation.test.js b/client/src/components/DatasetInformation/DatasetInformation.test.ts
similarity index 61%
rename from client/src/components/DatasetInformation/DatasetInformation.test.js
rename to client/src/components/DatasetInformation/DatasetInformation.test.ts
index b58e6d30e961..1ef0379d7ae8 100644
--- a/client/src/components/DatasetInformation/DatasetInformation.test.js
+++ b/client/src/components/DatasetInformation/DatasetInformation.test.ts
@@ -1,73 +1,92 @@
-import { mount } from "@vue/test-utils";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import { format, parseISO } from "date-fns";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
 
-import DatasetInformation from "./DatasetInformation";
-import datasetResponse from "./testData/datasetResponse";
+import DatasetInformation from "./DatasetInformation.vue";
 
 const HDA_ID = "FOO_HDA_ID";
 
-const mockDatasetProvider = {
-    render() {
-        return this.$scopedSlots.default({
-            loading: false,
-            result: datasetResponse,
-        });
-    },
+interface DatasetResponse {
+    id: string;
+    hid: number;
+    uuid: string;
+    name: string;
+    file_ext: string;
+    file_name: string;
+    file_size: number;
+    dataset_id: string;
+    history_id: string;
+    create_time: string;
+    metadata_dbkey: string;
+    [key: string]: any;
+}
+
+const datasetResponse: DatasetResponse = {
+    id: "FOO_HDA_ID",
+    hid: 32,
+    uuid: "5e89abe4-e8f7-468a-9ef1-d4e322183fa5",
+    name: "Add column on data 31",
+    file_size: 93,
+    file_ext: "txt",
+    dataset_id: "201592c8e20dac24",
+    history_id: "6fc9fbb81c497f69",
+    create_time: "2020-09-28T15:54:04.803756",
+    metadata_dbkey: "?",
+    file_name: "/home/oleg/galaxy/database/objects/5/e/8/dataset_5e89abe4-e8f7-468a-9ef1-d4e322183fa5.dat",
 };
 
 const localVue = getLocalVue();
 
 describe("DatasetInformation/DatasetInformation", () => {
-    let wrapper;
-    let datasetInfoTable;
-    let axiosMock;
-
-    beforeEach(() => {
-        axiosMock = new MockAdapter(axios);
-        axiosMock.onGet(new RegExp(`api/configuration/decode/*`)).reply(200, { decoded_id: 123 });
-    });
+    let wrapper: Wrapper<Vue>;
+    let axiosMock: MockAdapter;
+    let datasetInfoTable: Wrapper<Vue>;
 
     afterEach(() => {
         axiosMock.restore();
     });
 
     beforeEach(async () => {
-        const propsData = {
-            hda_id: HDA_ID,
-        };
-
-        wrapper = mount(DatasetInformation, {
-            propsData,
-            stubs: {
-                DatasetProvider: mockDatasetProvider,
+        axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(new RegExp(`api/configuration/decode/*`)).reply(200, { decoded_id: 123 });
+
+        wrapper = mount(DatasetInformation as object, {
+            propsData: {
+                dataset: datasetResponse,
             },
             localVue,
         });
+
         datasetInfoTable = wrapper.find("#dataset-details");
+
         await flushPromises();
     });
 
     it("dataset information should exist", async () => {
         // table should exist
         expect(datasetInfoTable).toBeTruthy();
+
         const rows = datasetInfoTable.findAll("tbody > tr");
+
         // should contain 11 rows
         expect(rows.length).toBe(11);
     });
 
-    it("filesize should be formatted", async () => {
-        const filesize = datasetInfoTable.find("#filesize > strong");
-        expect(filesize.html()).toBe(`<strong>${datasetResponse.file_size}</strong>`);
+    it("file size should be formatted", async () => {
+        const fileSize = datasetInfoTable.find("#file-size > strong");
+
+        expect(fileSize.html()).toBe(`<strong>${datasetResponse.file_size}</strong>`);
     });
 
     it("Date should be formatted", async () => {
         const date = datasetInfoTable.find(".utc-time").text();
+
         const parsedDate = parseISO(`${datasetResponse.create_time}Z`);
         const formattedDate = format(parsedDate, "eeee MMM do H:mm:ss yyyy zz");
+
         expect(date).toBe(formattedDate);
     });
 
@@ -82,6 +101,7 @@ describe("DatasetInformation/DatasetInformation", () => {
 
         rendered_entries.forEach((entry) => {
             const renderedText = datasetInfoTable.find(`#${entry.htmlAttribute}`).text();
+
             if (entry.htmlAttribute === "file-contents") {
                 expect(renderedText).toBe("contents");
             } else {
diff --git a/client/src/components/DatasetInformation/DatasetInformation.vue b/client/src/components/DatasetInformation/DatasetInformation.vue
index 896690118b6e..b311f6eda8ee 100644
--- a/client/src/components/DatasetInformation/DatasetInformation.vue
+++ b/client/src/components/DatasetInformation/DatasetInformation.vue
@@ -1,112 +1,142 @@
-<template>
-    <DatasetProvider :id="hda_id" v-slot="{ result: dataset, loading }">
-        <div v-if="!loading">
-            <h2 class="h-md">Dataset Information</h2>
-            <table id="dataset-details" class="tabletip info_data_table">
-                <tbody>
-                    <tr>
-                        <td>Number</td>
-                        <td id="number">{{ dataset.hid }}</td>
-                    </tr>
-                    <tr>
-                        <td>Name</td>
-                        <td id="name">{{ dataset.name }}</td>
-                    </tr>
-                    <tr>
-                        <td>Created</td>
-                        <td v-if="dataset.create_time" id="created">
-                            <UtcDate :date="dataset.create_time" mode="pretty" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Filesize</td>
-                        <td id="filesize" v-html="bytesToString(dataset.file_size)"></td>
-                    </tr>
-                    <tr>
-                        <td>Dbkey</td>
-                        <td id="dbkey">{{ dataset.metadata_dbkey }}</td>
-                    </tr>
-                    <tr>
-                        <td>Format</td>
-                        <td id="format">{{ dataset.file_ext }}</td>
-                    </tr>
-                    <tr>
-                        <td>File contents</td>
-                        <td id="file-contents"><a :href="prefixedUrl(dataset.download_url)">contents</a></td>
-                    </tr>
-                    <tr v-if="dataset.id">
-                        <td>History Content API ID</td>
-                        <td>
-                            <div id="dataset-id">{{ dataset.id }} <DecodedId :id="dataset.id" /></div>
-                        </td>
-                    </tr>
-                    <tr v-if="dataset.history_id">
-                        <td>History API ID</td>
-                        <td>
-                            <div id="history_id">{{ dataset.history_id }} <DecodedId :id="dataset.history_id" /></div>
-                        </td>
-                    </tr>
-                    <tr v-if="dataset.uuid">
-                        <td>UUID</td>
-                        <td id="dataset-uuid">{{ dataset.uuid }}</td>
-                    </tr>
-                    <tr v-if="dataset.file_name">
-                        <td>Full Path</td>
-                        <td id="file_name">{{ dataset.file_name }}</td>
-                    </tr>
-                    <tr v-if="dataset.created_from_basename">
-                        <td>Originally Created From a File Named</td>
-                        <td id="created_from_basename">{{ dataset.created_from_basename }}</td>
-                    </tr>
-                    <tr v-if="dataset.sources && dataset.sources.length > 0">
-                        <td>Sources</td>
-                        <td>
-                            <DatasetSources :sources="dataset.sources" />
-                        </td>
-                    </tr>
-                    <tr v-if="dataset.hashes && dataset.hashes.length > 0">
-                        <td>Hashes</td>
-                        <td>
-                            <DatasetHashes :hashes="dataset.hashes" />
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DatasetProvider>
-</template>
+<script setup lang="ts">
+import { type HDADetailed } from "@/api";
+import { withPrefix } from "@/utils/redirect";
+import { bytesToString } from "@/utils/utils";
+
+import DatasetHashes from "@/components/DatasetInformation/DatasetHashes.vue";
+import DatasetSources from "@/components/DatasetInformation/DatasetSources.vue";
+import DecodedId from "@/components/DecodedId.vue";
+import UtcDate from "@/components/UtcDate.vue";
 
-<script>
-import { DatasetProvider } from "components/providers";
-import UtcDate from "components/UtcDate";
-import { withPrefix } from "utils/redirect";
-import { bytesToString } from "utils/utils";
-
-import DecodedId from "../DecodedId";
-import DatasetHashes from "./DatasetHashes";
-import DatasetSources from "./DatasetSources";
-
-export default {
-    components: {
-        DatasetHashes,
-        DatasetProvider,
-        DatasetSources,
-        DecodedId,
-        UtcDate,
-    },
-    props: {
-        hda_id: {
-            type: String,
-            required: true,
-        },
-    },
-    methods: {
-        bytesToString(raw_size) {
-            return bytesToString(raw_size, false);
-        },
-        prefixedUrl(url) {
-            return withPrefix(url);
-        },
-    },
-};
+interface Props {
+    dataset: HDADetailed;
+}
+
+defineProps<Props>();
 </script>
+
+<template>
+    <div v-if="dataset">
+        <h2 class="h-md">Dataset Information</h2>
+
+        <table id="dataset-details" class="tabletip info_data_table">
+            <tbody>
+                <tr>
+                    <td>Number</td>
+
+                    <td id="number">
+                        {{ dataset.hid }}
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>Name</td>
+
+                    <td id="name">
+                        {{ dataset.name }}
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>Created</td>
+
+                    <td v-if="dataset.create_time" id="created">
+                        <UtcDate :date="dataset.create_time" mode="pretty" />
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>Filesize</td>
+
+                    <td id="file-size" v-html="bytesToString(dataset.file_size, false)" />
+                </tr>
+
+                <tr>
+                    <td>Dbkey</td>
+
+                    <td id="dbkey">
+                        {{ dataset.metadata_dbkey }}
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>Format</td>
+
+                    <td id="format">
+                        {{ dataset.file_ext }}
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>File contents</td>
+
+                    <td id="file-contents">
+                        <a :href="withPrefix(dataset.download_url)">contents</a>
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.id">
+                    <td>History Content API ID</td>
+
+                    <td>
+                        <div id="dataset-id">
+                            {{ dataset.id }}
+                            <DecodedId :id="dataset.id" />
+                        </div>
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.history_id">
+                    <td>History API ID</td>
+
+                    <td>
+                        <div id="history_id">
+                            {{ dataset.history_id }}
+                            <DecodedId :id="dataset.history_id" />
+                        </div>
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.uuid">
+                    <td>UUID</td>
+
+                    <td id="dataset-uuid">
+                        {{ dataset.uuid }}
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.file_name">
+                    <td>Full Path</td>
+
+                    <td id="file_name">
+                        {{ dataset.file_name }}
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.created_from_basename">
+                    <td>Originally Created From a File Named</td>
+
+                    <td id="created_from_basename">
+                        {{ dataset.created_from_basename }}
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.sources && dataset.sources.length > 0">
+                    <td>Sources</td>
+
+                    <td>
+                        <DatasetSources :sources="dataset.sources" />
+                    </td>
+                </tr>
+
+                <tr v-if="dataset.hashes && dataset.hashes.length > 0">
+                    <td>Hashes</td>
+
+                    <td>
+                        <DatasetHashes :hashes="dataset.hashes" />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/client/src/components/DatasetInformation/DatasetSource.vue b/client/src/components/DatasetInformation/DatasetSource.vue
index ad163fca5c59..e45e822a2178 100644
--- a/client/src/components/DatasetInformation/DatasetSource.vue
+++ b/client/src/components/DatasetInformation/DatasetSource.vue
@@ -1,55 +1,54 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCopy, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed } from "vue";
+
+import { type DatasetTransform } from "@/api";
+import { copy } from "@/utils/clipboard";
+import localize from "@/utils/localization";
+
+import DatasetSourceTransform from "@/components/DatasetInformation/DatasetSourceTransform.vue";
+
+library.add(faCopy, faExternalLinkAlt);
+
+interface Props {
+    source: {
+        source_uri: string;
+        transform: DatasetTransform[];
+    };
+}
+
+const props = defineProps<Props>();
+
+const sourceUri = computed(() => {
+    return props.source.source_uri;
+});
+const browserCompatUri = computed(() => {
+    return sourceUri.value && (sourceUri.value.indexOf("http") == 0 || sourceUri.value.indexOf("ftp") == 0);
+});
+
+function copyLink() {
+    copy(sourceUri.value, localize("Link copied to your clipboard"));
+}
+</script>
+
 <template>
     <li class="dataset-source">
         <a v-if="browserCompatUri" v-b-tooltip.hover title="Dataset Source URL" :href="sourceUri" target="_blank">
             {{ source.source_uri }}
-            <FontAwesomeIcon icon="external-link-alt" />
+            <FontAwesomeIcon :icon="faExternalLinkAlt" />
         </a>
         <span v-else>
             {{ source.source_uri }}
         </span>
-        <span v-b-tooltip.hover title="Copy URI"
-            ><FontAwesomeIcon icon="copy" style="cursor: pointer" @click="copyLink"
-        /></span>
+
+        <span v-b-tooltip.hover title="Copy URI">
+            <FontAwesomeIcon :icon="faCopy" style="cursor: pointer" @click="copyLink" />
+        </span>
+
         <br />
+
         <DatasetSourceTransform :transform="source.transform" />
     </li>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCopy, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { copy } from "utils/clipboard";
-import _l from "utils/localization";
-
-import DatasetSourceTransform from "./DatasetSourceTransform";
-
-library.add(faCopy, faExternalLinkAlt);
-
-export default {
-    components: {
-        DatasetSourceTransform,
-        FontAwesomeIcon,
-    },
-    props: {
-        source: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        browserCompatUri() {
-            const sourceUri = this.sourceUri;
-            return sourceUri && (sourceUri.indexOf("http") == 0 || sourceUri.indexOf("ftp") == 0);
-        },
-        sourceUri() {
-            return this.source.source_uri;
-        },
-    },
-    methods: {
-        copyLink() {
-            copy(this.sourceUri, _l("Link copied to your clipboard"));
-        },
-    },
-};
-</script>
diff --git a/client/src/components/DatasetInformation/DatasetSourceTransform.vue b/client/src/components/DatasetInformation/DatasetSourceTransform.vue
index 045a2f9f0b9f..d97dea7280e3 100644
--- a/client/src/components/DatasetInformation/DatasetSourceTransform.vue
+++ b/client/src/components/DatasetInformation/DatasetSourceTransform.vue
@@ -1,28 +1,7 @@
-<template>
-    <span class="dataset-source-transform-display">
-        <div v-if="transform && transform.length > 0">
-            Upon ingestion into the Galaxy, the following {{ actions }} were performed that modified the dataset
-            contents:
-            <ul>
-                <li v-for="(transformAction, index) in transform" :key="index">
-                    <span
-                        v-b-tooltip.hover.noninteractive.nofade.bottom
-                        :title="actionLongDescription(transformAction)"
-                        class="dataset-source-transform-element"
-                        :data-transform-action="transformAction.action">
-                        {{ actionShortDescription(transformAction) }}
-                    </span>
-                </li>
-            </ul>
-        </div>
-    </span>
-</template>
-
-<script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 
-Vue.use(BootstrapVue);
+import { type DatasetTransform } from "@/api";
 
 const TRANSFORM_ACTION_DESCRIPTIONS = {
     to_posix_lines: {
@@ -52,39 +31,59 @@ const UNKNOWN_ACTION_DESCRIPTION = {
     long: "",
 };
 
-export default {
-    props: {
-        transform: {
-            type: Array,
-            required: false,
-        },
-    },
-    computed: {
-        actions() {
-            return this.transform.length > 1 ? "actions" : "action";
-        },
-    },
-    methods: {
-        actionShortDescription(transformAction) {
-            return this.actionDescription(transformAction).short || "Unknown action.";
-        },
-        actionLongDescription(transformAction) {
-            let longDescription = this.actionDescription(transformAction).long || "";
-            if (transformAction.action == "datatype_groom") {
-                const datatypeDescription = DATATYPE_GROOMING_DESCRIPTIONS[transformAction.datatype_ext];
-                if (datatypeDescription) {
-                    longDescription += " " + datatypeDescription;
-                }
-            }
-            return longDescription;
-        },
-        actionDescription(transformAction) {
-            return TRANSFORM_ACTION_DESCRIPTIONS[transformAction.action] || UNKNOWN_ACTION_DESCRIPTION;
-        },
-    },
-};
+interface Props {
+    transform: DatasetTransform[];
+}
+
+const props = defineProps<Props>();
+
+const actions = computed(() => {
+    return props.transform.length > 1 ? "actions" : "action";
+});
+
+function actionDescription(transformAction: DatasetTransform) {
+    return TRANSFORM_ACTION_DESCRIPTIONS[transformAction.action] || UNKNOWN_ACTION_DESCRIPTION;
+}
+
+function actionShortDescription(transformAction: DatasetTransform) {
+    return actionDescription(transformAction).short || "Unknown action.";
+}
+
+function actionLongDescription(transformAction: DatasetTransform) {
+    let longDescription = actionDescription(transformAction).long || "";
+
+    if (transformAction.action == "datatype_groom") {
+        const datatypeDescription = DATATYPE_GROOMING_DESCRIPTIONS[transformAction.datatype_ext];
+
+        if (datatypeDescription) {
+            longDescription += " " + datatypeDescription;
+        }
+    }
+
+    return longDescription;
+}
 </script>
 
+<template>
+    <span class="dataset-source-transform-display">
+        <div v-if="transform && transform.length > 0">
+            Upon ingestion into the Galaxy, the following {{ actions }} were performed that modified the dataset
+            contents:
+            <ul>
+                <li v-for="(transformAction, index) in transform" :key="index">
+                    <span
+                        v-b-tooltip.hover.noninteractive.nofade.bottom
+                        :title="actionLongDescription(transformAction)"
+                        class="dataset-source-transform-element"
+                        :data-transform-action="transformAction.action">
+                        {{ actionShortDescription(transformAction) }}
+                    </span>
+                </li>
+            </ul>
+        </div>
+    </span>
+</template>
+
 <style scoped>
 .dataset-source-transform-element {
     text-decoration: underline;
diff --git a/client/src/components/DatasetInformation/DatasetSources.vue b/client/src/components/DatasetInformation/DatasetSources.vue
index 61b43da2aa02..59c41f2b4748 100644
--- a/client/src/components/DatasetInformation/DatasetSources.vue
+++ b/client/src/components/DatasetInformation/DatasetSources.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { type DatasetTransform } from "@/api";
+
+import DatasetSource from "@/components/DatasetInformation/DatasetSource.vue";
+
+interface Props {
+    sources: {
+        source_uri: string;
+        transform: DatasetTransform[];
+    }[];
+}
+
+defineProps<Props>();
+</script>
+
 <template>
     <span class="dataset-sources">
         <ul class="dataset-sources-list">
@@ -6,22 +21,6 @@
     </span>
 </template>
 
-<script>
-import DatasetSource from "./DatasetSource";
-
-export default {
-    components: {
-        DatasetSource,
-    },
-    props: {
-        sources: {
-            type: Array,
-            required: true,
-        },
-    },
-};
-</script>
-
 <style scoped>
 .dataset-sources-list {
     padding-inline-start: 20px;
diff --git a/client/src/components/DatasetInformation/services.js b/client/src/components/DatasetInformation/services.js
deleted file mode 100644
index f13b19c980af..000000000000
--- a/client/src/components/DatasetInformation/services.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
-import { rethrowSimple } from "utils/simple-error";
-
-import { jobsReportError } from "@/api/jobs";
-
-export async function sendErrorReport(dataset, message, email) {
-    const jobId = dataset.creating_job;
-    const request = {
-        job_id: jobId,
-        dataset_id: dataset.id,
-        message,
-        email,
-    };
-    const { data } = await jobsReportError(request);
-    return data.messages;
-}
-
-export async function setAttributes(datasetId, settings, operation) {
-    const payload = {
-        dataset_id: datasetId,
-        operation: operation,
-        ...settings,
-    };
-    const url = `${getAppRoot()}dataset/set_edit`;
-    try {
-        const { data } = await axios.put(url, payload);
-        return data;
-    } catch (e) {
-        rethrowSimple(e);
-    }
-}
diff --git a/client/src/components/DatasetInformation/services.ts b/client/src/components/DatasetInformation/services.ts
new file mode 100644
index 000000000000..ed9b57a20170
--- /dev/null
+++ b/client/src/components/DatasetInformation/services.ts
@@ -0,0 +1,22 @@
+import axios from "axios";
+
+import { getAppRoot } from "@/onload/loadConfig";
+import { rethrowSimple } from "@/utils/simple-error";
+
+export async function setAttributes(datasetId: string, settings: object, operation: string) {
+    const payload = {
+        dataset_id: datasetId,
+        operation: operation,
+        ...settings,
+    };
+
+    const url = `${getAppRoot()}dataset/set_edit`;
+
+    try {
+        const { data } = await axios.put(url, payload);
+
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
diff --git a/client/src/components/DatasetInformation/testData/datasetResponse.json b/client/src/components/DatasetInformation/testData/datasetResponse.json
deleted file mode 100644
index da106122f80c..000000000000
--- a/client/src/components/DatasetInformation/testData/datasetResponse.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-    "id": "FOO_HDA_ID",
-    "hid": 32,
-    "create_time": "2020-09-28T15:54:04.803756",
-    "name": "Add column on data 31",
-    "file_size": 93,
-    "file_ext": "txt",
-    "metadata_dbkey": "?",
-    "dataset_id": "201592c8e20dac24",
-    "history_id": "6fc9fbb81c497f69",
-    "uuid": "5e89abe4-e8f7-468a-9ef1-d4e322183fa5",
-    "file_name": "/home/oleg/galaxy/database/objects/5/e/8/dataset_5e89abe4-e8f7-468a-9ef1-d4e322183fa5.dat"
-}
diff --git a/client/src/components/providers/DatasetProvider.js b/client/src/components/providers/DatasetProvider.js
index b2d393743042..a22a4632617d 100644
--- a/client/src/components/providers/DatasetProvider.js
+++ b/client/src/components/providers/DatasetProvider.js
@@ -1,21 +1,6 @@
-import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
-
 import { fetchDatasetDetails } from "@/api/datasets";
 import { SingleQueryProvider } from "@/components/providers/SingleQueryProvider";
-import { rethrowSimple } from "@/utils/simple-error";
 
 import { stateIsTerminal } from "./utils";
 
-async function getDatasetAttributes({ id }) {
-    const url = `${getAppRoot()}dataset/get_edit?dataset_id=${id}`;
-    try {
-        const { data } = await axios.get(url);
-        return data;
-    } catch (e) {
-        rethrowSimple(e);
-    }
-}
-
-export const DatasetAttributesProvider = SingleQueryProvider(getDatasetAttributes);
 export default SingleQueryProvider(fetchDatasetDetails, stateIsTerminal);
diff --git a/client/src/components/providers/JobProvider.js b/client/src/components/providers/JobProvider.js
index 09f3983c412e..a17b32ae24fa 100644
--- a/client/src/components/providers/JobProvider.js
+++ b/client/src/components/providers/JobProvider.js
@@ -15,18 +15,7 @@ async function jobDetails({ jobId }) {
     }
 }
 
-async function jobProblems({ jobId }) {
-    const url = `${getAppRoot()}api/jobs/${jobId}/common_problems`;
-    try {
-        const { data } = await axios.get(url);
-        return data;
-    } catch (e) {
-        rethrowSimple(e);
-    }
-}
-
 export const JobDetailsProvider = SingleQueryProvider(jobDetails, stateIsTerminal);
-export const JobProblemProvider = SingleQueryProvider(jobProblems, stateIsTerminal);
 
 export function jobsProvider(ctx, callback, extraParams = {}) {
     const { root, ...requestParams } = ctx;
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
index 91f48b4a2e17..454df0ed340c 100644
--- a/client/src/utils/utils.ts
+++ b/client/src/utils/utils.ts
@@ -6,9 +6,14 @@
 import axios, { type AxiosError, type AxiosResponse } from "axios";
 
 import { getGalaxyInstance } from "@/app";
+import { NON_TERMINAL_STATES } from "@/components/WorkflowInvocationState/util";
 import { getAppRoot } from "@/onload/loadConfig";
 import _l from "@/utils/localization";
 
+export function stateIsTerminal(result: Record<string, any>) {
+    return !NON_TERMINAL_STATES.includes(result.state);
+}
+
 /** Object with any internal structure. More specific key than built-in Object type */
 export type AnyObject = Record<string | number | symbol, any>;