Hide problem alerts after successful new dataset/property requests

src/components/dataset/new.vue

@@ -59,7 +59,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { inject, ref, watch } from 'vue';
 import { equals } from 'ramda';
 import { useI18n } from 'vue-i18n';
 
@@ -91,6 +91,7 @@ const step = ref(0);
 const createdDataset = ref(null);
 
 const emit = defineEmits(['hide', 'success']);
+const alert = inject('alert');
 
 watch(() => props.state, (state) => {
   if (!state) name.value = '';
@@ -108,6 +109,8 @@ const submit = () => {
         : null)
   })
     .then(({ data }) => {
+      // Reset the alert
+      alert.blank();
       // Reset the form
       name.value = '';
       step.value = 1;

src/components/dataset/overview/new-property.vue

@@ -37,7 +37,9 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { inject, ref, watch } from 'vue';
+import { equals } from 'ramda';
+import { useI18n } from 'vue-i18n';
 
 import Modal from '../../modal.vue';
 import FormGroup from '../../form-group.vue';
@@ -64,18 +66,25 @@ const nameGroup = ref(null);
 const name = ref('');
 
 const emit = defineEmits(['hide', 'success']);
+const alert = inject('alert');
 
 watch(() => props.state, (state) => {
   if (!state) name.value = '';
 });
 
+const { t } = useI18n();
 const submit = () => {
   request({
     method: 'POST',
     url: apiPaths.datasetProperties(project.id, dataset.name),
-    data: { name: name.value }
+    data: { name: name.value },
+    problemToAlert: ({ code, details }) =>
+      (code === 409.3 && equals(details.fields, ['name', 'datasetId'])
+        ? t('problem.409_3', { propertyName: details.values[0] })
+        : null)
   })
     .then(() => {
+      alert.blank();
       emit('success');
     })
     .catch(noop);
@@ -91,7 +100,10 @@ const submit = () => {
       "To add an Entity property, choose a unique property name below.",
       "You can also add new properties by uploading a Form that references them, in which case the properties are created when the Form is published."
     ],
-    "newPropertyName": "New property name"
+    "newPropertyName": "New property name",
+    "problem": {
+      "409_3": "A property already exists in this Entity List with the name of “{propertyName}”."
+    },
   }
 }
 </i18n>

test/components/dataset/overview/property-new.spec.js

@@ -105,4 +105,25 @@ describe('DatasetPropertyNew', () => {
       connections.find('.caption-cell').text().should.equal('1 of 2 properties');
     });
   });
+
+  it('shows a custom message for a duplicate property name', () =>
+    mockHttp()
+      .mount(DatasetPropertyNew, mountOptions())
+      .request(async (modal) => {
+        await modal.get('input').setValue('my_new_property');
+        return modal.get('form').trigger('submit');
+      })
+      .respondWithProblem({
+        code: 409.3,
+        message: 'A resource already exists with name,datasetId value(s) of my_new_property,1.',
+        details: {
+          fields: ['name', 'datasetId'],
+          values: ['my_new_property', 1]
+        }
+      })
+      .afterResponse(modal => {
+        modal.should.alert('danger', (message) => {
+          message.should.startWith('A property already exists in this Entity List with the name of “my_new_property”.');
+        });
+      }));
 });

transifex/strings_en.json

@@ -1481,6 +1481,11 @@
       },
       "newPropertyName": {
         "string": "New property name"
+      },
+      "problem": {
+        "409_3": {
+          "string": "A property already exists in this Entity List with the name of “{propertyName}”."
+        }
       }
     },
     "DatasetPendingSubmissions": {