support displaying error banners on configmap creation page

cypress/e2e/po/components/storage/config-map.po.ts

@@ -25,6 +25,10 @@ export default class ConfigMapPo extends CreateEditViewPo {
     return LabeledInputPo.byLabel(this.self(), 'Description');
   }
 
+  errorBanner() {
+    return cy.get('#cru-errors');
+  }
+
   saveCreateForm(): AsyncButtonPo {
     return new AsyncButtonPo('[data-testid="form-save"]', this.self());
   }

cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts

@@ -59,4 +59,20 @@ skipGeometric=true`;
     // Assert the current value yaml dumps will append a newline at the end
     configMapPo.valueInput().value().should('eq', `${ expectedValue }\n`);
   });
+
+  it('should show an error banner if the api call sends back an error', () => {
+    // Navigate to Service Discovery => ConfigMaps
+    ConfigMapPagePo.navTo();
+    // Click on Create
+    configMapPage.clickCreate();
+    // Enter ConfigMap name
+    const configMapPo = new ConfigMapPo();
+
+    // Enter an invalid name so the api call fails
+    configMapPo.nameInput().set('$^$^"£%');
+    // Click on Create
+    configMapPo.saveCreateForm().click();
+    // Error banner should be displayed
+    configMapPo.errorBanner().should('exist').and('be.visible');
+  });
 });

shell/edit/configmap.vue

@@ -61,11 +61,17 @@ export default {
   },
 
   methods: {
-    async saveConfigMap() {
+    async saveConfigMap(saveCb) {
+      this.errors = [];
       const yaml = await this.$refs.cru.createResourceYaml(this.yamlModifiers);
 
-      await this.value.saveYaml(yaml);
+      try {
-      this.done();
+        await this.value.saveYaml(yaml);
+        this.done();
+      } catch (err) {
+        this.errors.push(err);
+        saveCb(false);
+      }
     },
 
     updateValue(val, type) {