UI: Namespace validation update (#22820)

ui/lib/core/addon/components/edit-form.js

@@ -15,6 +15,9 @@ export default Component.extend({
   layout,
   flashMessages: service(),
 
+  // internal validations
+  invalidFormAlert: '',
+  modelValidations: null,
   // public API
   model: null,
   successMessage: 'Saved!',
@@ -38,10 +41,25 @@ export default Component.extend({
   // is the case, set this value to true
   callOnSaveAfterRender: false,
 
+  checkModelValidity(model) {
+    if (model.validate) {
+      const { isValid, state, invalidFormMessage } = model.validate();
+      this.set('modelValidations', state);
+      this.set('invalidFormAlert', invalidFormMessage);
+      return isValid;
+    }
+    // no validations on model; return true
+    return true;
+  },
+
   save: task(
     waitFor(function* (model, options = { method: 'save' }) {
       const { method } = options;
       const messageKey = method === 'save' ? 'successMessage' : 'deleteSuccessMessage';
+      if (method === 'save' && !this.checkModelValidity(model)) {
+        // if saving and model invalid, don't continue
+        return;
+      }
       try {
         yield model[method]();
       } catch (err) {

ui/lib/core/addon/components/form-field.hbs

@@ -281,12 +281,6 @@
           class="input {{if this.validationError 'has-error-border'}}"
           maxLength={{@attr.options.characterLimit}}
         />
-        {{! TODO: explore removing in favor of new model validations pattern since it is only used on the namespace model }}
-        {{#if @attr.options.validationAttr}}
-          {{#if (and (get @model this.valuePath) (not (get @model @attr.options.validationAttr)))}}
-            <AlertInline @type="danger" @message={{@attr.options.invalidMessage}} />
-          {{/if}}
-        {{/if}}
       {{/if}}
     </div>
   {{else if (or (eq @attr.type "boolean") (eq @attr.options.editType "boolean"))}}

ui/lib/core/addon/components/form-save-buttons.hbs

@@ -0,0 +1,34 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<div class="field is-fullwidth box is-bottomless {{if (eq @includeBox false) 'is-shadowless'}}">
+  <div class="field is-grouped">
+    <div class="control">
+      <button
+        type="submit"
+        data-test-edit-form-submit
+        class="button is-primary {{if @isSaving 'loading'}}"
+        disabled={{@isSaving}}
+      >
+        {{or @saveButtonText "Save"}}
+      </button>
+    </div>
+    {{#if this.cancelLink}}
+      <div class="control">
+        <LinkTo @route={{this.cancelLink.route}} @models={{this.cancelLink.models}} class="button">
+          {{or @cancelButtonText "Cancel"}}
+        </LinkTo>
+      </div>
+    {{/if}}
+    {{#if @onCancel}}
+      <div class="control">
+        <button type="button" class="button" onclick={{action @onCancel}} data-test-cancel-button>
+          {{or @cancelButtonText "Cancel"}}
+        </button>
+      </div>
+    {{/if}}
+  </div>
+  {{yield to="error"}}
+</div>

ui/lib/core/addon/components/form-save-buttons.js

@@ -3,18 +3,19 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import layout from '../templates/components/form-save-buttons';
+import Component from '@glimmer/component';
 
 /**
  * @module FormSaveButtons
  * `FormSaveButtons` displays a button save and a cancel button at the bottom of a form.
+ * To show an overall inline error message, use the :error yielded block like shown below.
  *
  * @example
  * ```js
  * <FormSaveButtons @saveButtonText="Save" @isSaving={{isSaving}} @cancelLinkParams={{array
- * "foo.route"}} />
+ * "foo.route"}}>
+ *   <:error>This is an error</:error>
+ * </FormSaveButtons>
  * ```
  *
  * @param [saveButtonText="Save" {String}] - The text that will be rendered on the Save button.
@@ -26,13 +27,11 @@ import layout from '../templates/components/form-save-buttons';
  *
  */
 
-export default Component.extend({
-  layout,
-  tagName: '',
-
-  cancelLink: computed('cancelLinkParams.[]', function () {
-    if (!Array.isArray(this.cancelLinkParams) || !this.cancelLinkParams.length) return;
-    const [route, ...models] = this.cancelLinkParams;
+export default class FormSaveButtons extends Component {
+  get cancelLink() {
+    const { cancelLinkParams } = this.args;
+    if (!Array.isArray(cancelLinkParams) || !cancelLinkParams.length) return null;
+    const [route, ...models] = cancelLinkParams;
     return { route, models };
-  }),
-});
+  }
+}