Add ability to show component in alert

src/alert.js

@@ -12,40 +12,51 @@ except according to the terms contained in the LICENSE file.
 import { shallowReactive } from 'vue';
 
 class AlertData {
+  #data;
+
   constructor() {
-    this._data = shallowReactive({
+    this.#data = shallowReactive({
       // The alert's "contextual" type: 'success', 'info', 'warning', or
       // 'danger'.
       type: 'danger',
-      message: null,
-      // `true` if the alert should be visible and `false` if not.
-      state: false,
-      // The time at which the alert was last set
+      // Either a string or an array with a component and props for the
+      // component
+      content: null,
+      // The time at which the alert was last shown
       at: new Date()
     });
   }
 
-  get type() { return this._data.type; }
-  get message() { return this._data.message; }
-  get state() { return this._data.state; }
-  get at() { return this._data.at; }
+  // Returns `true` if the alert should be visible and `false` if not.
+  get state() { return this.content != null; }
+
+  get type() { return this.#data.type; }
+
+  get content() { return this.#data.content; }
 
-  _set(type, message) {
-    this._data.type = type;
-    this._data.message = message;
-    this._data.state = true;
-    this._data.at = new Date();
+  get message() {
+    const { content } = this.#data;
+    return typeof content === 'string' ? content : null;
   }
 
-  success(message) { this._set('success', message); }
-  info(message) { this._set('info', message); }
-  warning(message) { this._set('warning', message); }
-  danger(message) { this._set('danger', message); }
+  get at() { return this.#data.at; }
 
-  blank() {
-    this._data.state = false;
-    this._data.message = null;
+  // `content` can be a string, an array with a component and props for the
+  // component, or just a component.
+  #show(type, content) {
+    this.#data.type = type;
+    this.#data.content = typeof content === 'string' || Array.isArray(content)
+      ? content
+      : [content, {}];
+    this.#data.at = new Date();
   }
+
+  success(content) { this.#show('success', content); }
+  info(content) { this.#show('info', content); }
+  warning(content) { this.#show('warning', content); }
+  danger(content) { this.#show('danger', content); }
+
+  blank() { this.#data.content = null; }
 }
 
 // Only a single alert is shown at a time. This function returns an object that

src/components/alert.vue

@@ -16,7 +16,12 @@ except according to the terms contained in the LICENSE file.
       @click="alert.blank()">
       <span aria-hidden="true">&times;</span>
     </button>
-    <span class="alert-message">{{ alert.message }}</span>
+
+    <span v-if="alert.message != null" class="alert-message">
+      {{ alert.message }}
+    </span>
+    <component v-else-if="alert.content != null" :is="alert.content[0]"
+      v-bind="alert.content[1]"/>
   </div>
 </template>
 

src/components/alert/40917.vue

@@ -0,0 +1,46 @@
+<!--
+Copyright 2024 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div>
+    <span>{{ $tc('message', duplicateProperties.length) }}</span>
+    <ul>
+      <li v-for="p of duplicateProperties" :key="p.provided">
+        {{ $t('duplicateProperty', p) }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'Alert40917'
+});
+defineProps({
+  duplicateProperties: {
+    type: Array,
+    required: true
+  }
+});
+</script>
+
+<i18n lang="json5">
+{
+  // @transifexKey util.request.problem.409_17
+  "en": {
+    "message": "This Form attempts to create a new Entity property that matches with an existing one except for capitalization: | This Form attempts to create new Entity properties that match with existing ones except for capitalization:",
+    // Error message format for the duplicate properties (different capitalization) in an Entity-list.
+    // {provided} is the property name in the uploaded Form.
+    // {current} is the existing property name in the Entity-list.
+    "duplicateProperty": "{provided} (existing: {current})"
+  }
+}
+</i18n>

src/locales/en.json5

@@ -485,14 +485,7 @@
       "problem": {
         // A "resource" is a generic term for something in Central, for example,
         // a Project, a Web User, or a Form.
-        "404_1": "The resource you are looking for cannot be found. The resource may have been deleted.",
-        "409_17": {
-          "message": "This Form attempts to create a new Entity property that matches with an existing one except for capitalization: | This Form attempts to create new Entity properties that match with existing ones except for capitalization:",
-          // Error message format for the duplicate properties (different capitalization) in an Entity-list.
-          // {provided} is the property name in the uploaded Form.
-          // {current} is the existing property name in the Entity-list.
-          "duplicateProperty": "{provided} (existing: {current})"
-        }
+        "404_1": "The resource you are looking for cannot be found. The resource may have been deleted."
       }
     },
     "session": {

src/util/request.js

@@ -9,6 +9,8 @@ https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
 including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 */
+import Alert40917 from '../components/alert/40917.vue';
+
 import { odataLiteral } from './odata';
 
 // Returns `true` if `data` looks like a Backend Problem and `false` if not.
@@ -245,12 +247,7 @@ export const requestAlertMessage = (i18n, axiosError, problemToAlert = undefined
   if (problem.code === 404.1) return i18n.t('util.request.problem.404_1');
   if (problem.code === 409.17) {
     const { duplicateProperties } = problem.details;
-    // eslint-disable-next-line prefer-template
-    return i18n.tc('util.request.problem.409_17.message', duplicateProperties.length) +
-      '\n\n' +
-      duplicateProperties
-        .map(p => `• ${i18n.t('util.request.problem.409_17.duplicateProperty', p)}`)
-        .join('\n');
+    return [Alert40917, { duplicateProperties }];
   }
   return problem.message;
 };

test/assertions.js

@@ -316,15 +316,26 @@ addAsyncMethod('textTooltip', async function textTooltip() {
 ////////////////////////////////////////////////////////////////////////////////
 // OTHER
 
-Assertion.addMethod('alert', function assertAlert(type = undefined, message = undefined) {
+Assertion.addMethod('alert', function assertAlert(type = undefined, content = undefined) {
   expect(this._obj).to.be.instanceof(VueWrapper);
   const { alert } = this._obj.vm.$container;
   this.assert(
     alert.state,
     'expected the component to show an alert',
     'expected the component not to show an alert'
   );
-  if (checkNegate(this, [type, message])) return;
+  if (checkNegate(this, [type, content])) return;
   if (type != null) alert.type.should.equal(type);
-  if (message != null) alert.message.should.stringMatch(message);
+  if (content != null) {
+    if (typeof content === 'string' || content instanceof RegExp ||
+      typeof content === 'function') {
+      alert.message.should.stringMatch(content);
+    } else if (Array.isArray(content)) {
+      const [component, props = {}] = content;
+      alert.content[0].should.equal(component);
+      alert.content[1].should.eql(props);
+    } else {
+      alert.content.should.eql([content, {}]);
+    }
+  }
 });

test/components/form-draft/publish.spec.js

@@ -1,5 +1,6 @@
 import { RouterLinkStub } from '@vue/test-utils';
 
+import Alert40917 from '../../../src/components/alert/40917.vue';
 import FormDraftPublish from '../../../src/components/form-draft/publish.vue';
 import FormVersionRow from '../../../src/components/form-version/row.vue';
 
@@ -297,10 +298,10 @@ describe('FormDraftPublish', () => {
         details: { duplicateProperties: [{ current: 'first_name', provided: 'FIRST_NAME' }] }
       })
       .afterResponse(modal => {
-        modal.should.alert(
-          'danger',
-          /This Form attempts to create a new Entity property that matches with an existing one except for capitalization:.*FIRST_NAME \(existing: first_name\)/s
-        );
+        modal.should.alert('danger', [
+          Alert40917,
+          { duplicateProperties: [{ current: 'first_name', provided: 'FIRST_NAME' }] }
+        ]);
       });
   });
 

test/components/form/new.spec.js

@@ -1,5 +1,6 @@
 import { clone } from 'ramda';
 
+import Alert40917 from '../../../src/components/alert/40917.vue';
 import ChecklistStep from '../../../src/components/checklist-step.vue';
 import FileDropZone from '../../../src/components/file-drop-zone.vue';
 import FormNew from '../../../src/components/form/new.vue';
@@ -501,10 +502,10 @@ describe('FormNew', () => {
           details: { duplicateProperties: [{ current: 'first_name', provided: 'FIRST_NAME' }] }
         })
         .afterResponse(modal => {
-          modal.should.alert(
-            'danger',
-            /This Form attempts to create a new Entity property that matches with an existing one except for capitalization:.*FIRST_NAME \(existing: first_name\)/s
-          );
+          modal.should.alert('danger', [
+            Alert40917,
+            { duplicateProperties: [{ current: 'first_name', provided: 'FIRST_NAME' }] }
+          ]);
         });
     });
   });