From e7cc754a4ad8ed6e551ab2e81c69f36223d4d93c Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 27 Feb 2024 14:45:20 -0400
Subject: [PATCH 1/3] Fix design of page creation

---
 src/components/vue-form-builder.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 750e4bf4c..6a5f47447 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -388,28 +388,30 @@
     <b-modal
       id="addPageModal"
       ref="addPageModal"
-      :ok-title="$t('Save')"
-      :cancel-title="$t('Cancel')"
+      header-class="pb-2"
+      size="lg"
+      :ok-title="$t('SAVE')"
+      :cancel-title="$t('CANCEL')"
       cancel-variant="btn btn-outline-secondary"
       ok-variant="btn btn-secondary ml-2"
-      :title="$t('Add New Page')"
       header-close-content="&times;"
       data-cy="add-page-modal"
       :ok-disabled="!addPageName || !!checkPageName(addPageName)"
       @ok="addPage"
-      @hide="addPageName = ''"
+      @show="addPageName = ''; showAddPageValidations=false;"
     >
-      <required />
+      <template #modal-title>
+        <h5 class="modal-title">{{ $t('Create New Page') }}</h5>
+        <small class="modal-subtitle mb-n2">{{ $t('Create a new page in your screen') }}</small>
+      </template>
       <form-input
         ref="addPageInput"
         v-model="addPageName"
         :name="$t('Page Name')"
         :label="$t('Page Name') + ' *'"
         :helper="$t('The name of the new page to add')"
-        validation="required"
         :error="checkPageName(addPageName)"
         data-cy="add-page-name"
-        required
         aria-required="true"
       />
     </b-modal>
@@ -588,6 +590,7 @@ export default {
     }
 
     return {
+      showAddPageValidations: false,
       openedPages: [0],
       currentPage: 0,
       selected: null,
@@ -763,7 +766,13 @@ export default {
     onClick(page) {
       this.$refs.tabsBar.openPageByIndex(page);
     },
-    checkPageName(value) {
+    checkPageName(value, force = false) {
+      if (!force && !this.showAddPageValidations) {
+        return null;
+      }
+      if (!value.trim()) {
+        return this.$t("The Page Name field is required.");
+      }
       const pageNames = this.config
         .map((config) => config.name)
         .filter((name) => name !== this.originalPageName);
@@ -1136,7 +1145,9 @@ export default {
       this.updateState();
     },
     addPage(e) {
-      if (this.$refs.addPageInput.validator.errorCount) {
+      this.showAddPageValidations = true;
+      const error = this.checkPageName(this.addPageName, true);
+      if (error) {
         e.preventDefault();
         return;
       }

From 8c42a801484edd118404221b434e6157836ca4e3 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Wed, 28 Feb 2024 11:10:02 -0400
Subject: [PATCH 2/3] Update currentPage before to save state

---
 src/components/vue-form-builder.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 6a5f47447..693e10082 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -1162,6 +1162,7 @@ export default {
         items: []
       });
       this.addPageName = "";
+      this.currentPage = this.config.length - 1;
       this.updateState();
 
       // open new page

From f8d33a89557eca50a3b098c5b2101797b0ba76af Mon Sep 17 00:00:00 2001
From: Miguel Angel <me@miguelangel.co>
Date: Wed, 28 Feb 2024 10:23:17 -0400
Subject: [PATCH 3/3] test: update pages dropdown e2e

---
 tests/e2e/specs/pagesDropdown.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/e2e/specs/pagesDropdown.spec.js b/tests/e2e/specs/pagesDropdown.spec.js
index a7c7241d4..f27c707dc 100644
--- a/tests/e2e/specs/pagesDropdown.spec.js
+++ b/tests/e2e/specs/pagesDropdown.spec.js
@@ -9,6 +9,7 @@ describe("Page Dropdown", () => {
     // Define Page 2
     cy.get("[data-cy=add-page-name]").clear().type("Page_2");
     cy.get("[data-cy=add-page-modal] button.btn").eq(1).click();
+    cy.wait(300);
     cy.get('[data-cy=controls-FormButton]:contains("Page")').drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }