From 2e2694e4ec4307cc69881fc11c5a3ceb7fd8951c Mon Sep 17 00:00:00 2001
From: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>
Date: Tue, 14 May 2024 16:00:28 -0700
Subject: [PATCH] support displaying error banners on configmap creation page

---
 .../e2e/po/components/storage/config-map.po.ts   |  4 ++++
 .../pages/explorer/storage/configmap.spec.ts     | 16 ++++++++++++++++
 shell/edit/configmap.vue                         | 12 +++++++++---
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/po/components/storage/config-map.po.ts b/cypress/e2e/po/components/storage/config-map.po.ts
index b75dbba4df..ab0d77fa5d 100644
--- a/cypress/e2e/po/components/storage/config-map.po.ts
+++ b/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());
   }
diff --git a/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts b/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts
index 9b0bbc5524..173b655084 100644
--- a/cypress/e2e/tests/pages/explorer/storage/configmap.spec.ts
+++ b/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');
+  });
 });
diff --git a/shell/edit/configmap.vue b/shell/edit/configmap.vue
index 294f8999cf..c166a02dcd 100644
--- a/shell/edit/configmap.vue
+++ b/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);
-      this.done();
+      try {
+        await this.value.saveYaml(yaml);
+        this.done();
+      } catch (err) {
+        this.errors.push(err);
+        saveCb(false);
+      }
     },
 
     updateValue(val, type) {