Merge pull request #18188 from davelopez/24.0_fix_edit_dataset_on_error

[24.0] Fix Edit Dataset UI when there is an error retrieving the dataset

client/src/components/DatasetInformation/DatasetAttributes.test.js

@@ -33,6 +33,31 @@ async function buildWrapper(conversion_disable = false) {
     return wrapper;
 }
 
+async function buildWrapperWithError(error) {
+    const wrapper = mount(DatasetAttributes, {
+        propsData: {
+            datasetId: "dataset_id",
+            messageText: error,
+            messageVariant: "danger",
+        },
+        computed: {
+            hasError() {
+                return true;
+            },
+        },
+        localVue,
+        stubs: {
+            DatasetAttributesProvider: MockProvider({
+                result: null,
+            }),
+            FontAwesomeIcon: false,
+            FormElement: false,
+        },
+    });
+    await flushPromises();
+    return wrapper;
+}
+
 describe("DatasetAttributes", () => {
     it("check rendering", async () => {
         const axiosMock = new MockAdapter(axios);
@@ -61,4 +86,15 @@ describe("DatasetAttributes", () => {
         expect(wrapper.findAll(".tab-pane").length).toBe(3);
         expect(wrapper.findAll(".ui-portlet-section").length).toBe(1);
     });
+
+    it("doesn't render edit controls with error", async () => {
+        const wrapper = await buildWrapperWithError("error");
+        expect(wrapper.findAll("button").length).toBe(0);
+        expect(wrapper.findAll("#attribute_text").length).toBe(0);
+        expect(wrapper.findAll("#conversion_text").length).toBe(0);
+        expect(wrapper.findAll("#datatype_text").length).toBe(0);
+        expect(wrapper.findAll("#permission_text").length).toBe(0);
+        expect(wrapper.findAll(".tab-pane").length).toBe(0);
+        expect(wrapper.findAll(".ui-portlet-section").length).toBe(0);
+    });
 });

client/src/components/DatasetInformation/DatasetAttributes.vue

@@ -5,7 +5,7 @@
             {{ messageText | l }}
         </b-alert>
         <DatasetAttributesProvider :id="datasetId" v-slot="{ result, loading }" @error="onError">
-            <div v-if="!loading" class="mt-3">
+            <div v-if="!loading && !hasError" class="mt-3">
                 <b-tabs>
                     <b-tab v-if="!result['attribute_disable']">
                         <template v-slot:title>
@@ -121,6 +121,11 @@ export default {
             formData: {},
         };
     },
+    computed: {
+        hasError() {
+            return this.messageVariant === "danger";
+        },
+    },
     methods: {
         onAttribute(data) {
             this.formData["attribute"] = data;