Form customizations (#5026)

* configuration to hide cancel button in forms
* only show required fields message if form has required fields
* save should handle non-dialog forms

src/api/forms/FormsAPI.js

@@ -113,8 +113,8 @@ export default class FormsAPI extends EventEmitter {
         const self = this;
 
         const promise = new Promise((resolve, reject) => {
-            onSave = onFormSave(resolve);
-            onDismiss = onFormDismiss(reject);
+            onSave = onFormAction(resolve);
+            onDismiss = onFormAction(reject);
         });
 
         const vm = new Vue({
@@ -162,7 +162,7 @@ export default class FormsAPI extends EventEmitter {
             }
         }
 
-        function onFormDismiss(dismiss) {
+        function onFormAction(callback) {
             return () => {
                 if (element) {
                     formElement.remove();
@@ -170,18 +170,8 @@ export default class FormsAPI extends EventEmitter {
                     overlay.dismiss();
                 }
 
-                if (dismiss) {
-                    dismiss();
-                }
-            };
-        }
-
-        function onFormSave(save) {
-            return () => {
-                overlay.dismiss();
-
-                if (save) {
-                    save(changes);
+                if (callback) {
+                    callback(changes);
                 }
             };
         }

src/api/forms/components/FormProperties.vue

@@ -24,7 +24,10 @@
 <div class="c-form js-form">
     <div class="c-overlay__top-bar c-form__top-bar">
         <div class="c-overlay__dialog-title js-form-title">{{ model.title }}</div>
-        <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+        <div
+            v-if="hasRequiredFields"
+            class="c-overlay__dialog-hint hint"
+        >All fields marked <span class="req icon-asterisk"></span> are required.</div>
     </div>
     <form
         name="mctForm"
@@ -66,6 +69,7 @@
             {{ submitLabel }}
         </button>
         <button
+            v-if="!shouldHideCancelButton"
             tabindex="0"
             class="c-button js-cancel-button"
             aria-label="Cancel"
@@ -105,6 +109,10 @@ export default {
         };
     },
     computed: {
+        hasRequiredFields() {
+            return this.model.sections.some(section =>
+                section.rows.some(row => row.required));
+        },
         isInvalid() {
             return Object.entries(this.invalidProperties)
                 .some(([key, value]) => {
@@ -132,6 +140,9 @@ export default {
             }
 
             return 'Cancel';
+        },
+        shouldHideCancelButton() {
+            return this.model.buttons?.cancel?.hide === true;
         }
     },
     mounted() {