Fix up loading failed error state in Dataset Attributes component

galaxyproject · May 28, 2024 · 16cb727 · 16cb727
1 parent 093dcc8
commit 16cb727
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 15 deletions.
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.test.ts b/client/src/components/DatasetInformation/DatasetAttributes.test.ts
@@ -39,23 +39,17 @@ async function mountDatasetAttributes(conversion_disable = false) {
     return wrapper;
 }
 
-async function buildWrapperWithError(error) {
+async function buildWrapperWithError(error: string) {
+    const axiosMock = new MockAdapter(axios);
+    axiosMock.onGet(`/dataset/get_edit?dataset_id=${DATASET_ID}`).reply(400);
     const wrapper = mount(DatasetAttributes, {
         propsData: {
-            datasetId: "dataset_id",
+            datasetId: DATASET_ID,
             messageText: error,
             messageVariant: "danger",
         },
-        computed: {
-            hasError() {
-                return true;
-            },
-        },
         localVue,
         stubs: {
-            DatasetAttributesProvider: MockProvider({
-                result: null,
-            }),
             FontAwesomeIcon: false,
             FormElement: false,
         },

diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -4,7 +4,7 @@ import { faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser } from
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { type AxiosError } from "axios";
 import { BAlert, BButton, BTab, BTabs } from "bootstrap-vue";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 
 import { fetchDatasetAttributes } from "@/api/datasets";
 import { setAttributes } from "@/components/DatasetInformation/services";
@@ -26,11 +26,11 @@ const props = defineProps<Props>();
 const historyStore = useHistoryStore();
 
 const loading = ref(false);
-const messageText = ref("");
+const loadingFailed = ref(false);
+const messageText = ref<string>();
 const messageVariant = ref("danger");
 const formData = ref<Record<string, any>>({});
 const datasetAttributes = ref<Record<string, any>>({});
-const hasError = computed(() => messageVariant.value === "danger");
 
 function onAttribute(data: object) {
     formData.value["attribute"] = data;
@@ -77,7 +77,7 @@ async function loadDatasetAttributes() {
         datasetAttributes.value = data;
     } catch (e) {
         const error = e as AxiosError<{ err_msg?: string }>;
-
+        loadingFailed.value = true;
         onError(error.response?.data?.err_msg || "Unable to fetch available dataset attributes.");
     } finally {
         loading.value = false;
@@ -102,7 +102,7 @@ onMounted(async () => {
         <BAlert v-if="loading" variant="info" show>
             <LoadingSpan message="Loading dataset attributes..." />
         </BAlert>
-        <div v-else-if="!hasError" class="mt-3">
+        <div v-else-if="!loadingFailed" class="mt-3">
             <BTabs>
                 <BTab v-if="!datasetAttributes['attribute_disable']">
                     <template v-slot:title>