Fix alert manager receiver name (#7941)

shell/assets/translations/en-us.yaml

@@ -3125,6 +3125,7 @@ monitoring:
       editYaml: Edit AlertmanagerConfig
       detail: Receiver in AlertmanagerConfig
     disabledReceiverButton: The receiver form is available after the AlertmanagerConfig is created
+    error: An error occurred saving the AlertmanagerConfig
     email:
       username: Auth Username
       password: Secret with Auth Password

shell/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -12,6 +12,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import jsyaml from 'js-yaml';
 import ButtonDropdown from '@shell/components/ButtonDropdown';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
+import FormValidation from '@shell/mixins/form-validation';
 
 export const RECEIVERS_TYPES = [
   {
@@ -100,7 +101,7 @@ export default {
     },
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   data(props) {
     const currentReceiver = {};
@@ -144,14 +145,18 @@ export default {
     }
 
     return {
-      create:        _CREATE,
+      create:         _CREATE,
       EDITOR_MODES,
       expectedFields,
-      fileFound:     false,
-      receiverTypes: RECEIVERS_TYPES,
+      fileFound:      false,
+      receiverTypes:  RECEIVERS_TYPES,
       suffixYaml,
-      view:          _VIEW,
-      yamlError:     '',
+      view:           _VIEW,
+      yamlError:      '',
+      fvFormRuleSets: [
+        { path: 'name', rules: ['required'] }
+      ],
+      fvReportedValidationPaths: ['value']
     };
   },
 
@@ -235,6 +240,14 @@ export default {
     createAddOptions(receiverType) {
       return receiverType.addOptions.map();
     },
+
+    setError(err) {
+      if (!err) {
+        this.errors = [];
+      } else {
+        this.errors = [err];
+      }
+    }
   }
 };
 </script>
@@ -249,8 +262,9 @@ export default {
     :can-yaml="true"
     :errors="errors"
     :cancel-event="true"
+    :validation-passed="fvFormIsValid"
     @error="e=>errors = e"
-    @finish="saveOverride()"
+    @finish="saveOverride"
     @cancel="redirectAfterCancel"
   >
     <div class="row mb-10">
@@ -259,7 +273,9 @@ export default {
           v-model="value.name"
           :is-disabled="receiverNameDisabled"
           :label="t('generic.name')"
+          :required="true"
           :mode="mode"
+          :rules="fvGetAndReportPathRules('name')"
         />
       </div>
     </div>

shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -156,7 +156,7 @@ export default {
     // being saved. Therefore we take the save from the
     // AlertmanagerConfig resource and pass it into the
     // receiver config form.
-    saveOverride(buttonDone) {
+    async saveOverride(buttonDone) {
       if (this.alertmanagerConfigResource.yamlError) {
         this.alertmanagerConfigResource.errors = this.alertmanagerConfigResource.errors || [];
         this.alertmanagerConfigResource.errors.push(this.alertmanagerConfigResource.yamlError);
@@ -166,8 +166,18 @@ export default {
         return;
       }
 
-      this.alertmanagerConfigResource.save(...arguments);
-      this.redirectToAlertmanagerConfigDetail();
+      try {
+        await this.alertmanagerConfigResource.save(...arguments);
+
+        buttonDone(true);
+
+        this.redirectToAlertmanagerConfigDetail();
+      } catch (e) {
+        const msg = e?.message ? e.message : this.t('monitoring.alertmanagerConfig.error');
+
+        this.$refs.config.setError(msg);
+        buttonDone(false);
+      }
     },
     handleButtonGroupClick(event) {
       if (event === this.yaml) {
@@ -271,6 +281,7 @@ export default {
     />
     <ReceiverConfig
       v-if="(currentView === config || currentView === detail) && alertmanagerConfigResource"
+      ref="config"
       :value="receiverValue"
       :mode="mode"
       :alertmanager-config-id="alertmanagerConfigId"