edit, cancel and delete interactions

src/registrar/assets/src/js/getgov/form-nameservers.js

@@ -13,6 +13,7 @@ export class NameserverForm {
         this.handleDeleteClick = this.handleDeleteClick.bind(this);
         this.handleDeleteKebabClick = this.handleDeleteKebabClick.bind(this);
         this.handleCancelClick = this.handleCancelClick.bind(this);
+        this.handleCancelAddFormClick = this.handleCancelAddFormClick.bind(this);
     }
 
     init() {
@@ -30,7 +31,12 @@ export class NameserverForm {
 
         if (secondNameserver && !thirdNameserver && errorMessages.length > 0) {
             showElement(this.nameserversForm);
-            hideElement(this.addNameserverButton);
+            this.formChanged = true;
+        }
+
+        if (this.nameserversForm.querySelector('.usa-input--error')) {
+            showElement(this.nameserversForm);
+            this.formChanged = true;
         }
 
         // handle display of table view errors
@@ -62,6 +68,11 @@ export class NameserverForm {
             cancelButton.addEventListener('click', this.handleCancelClick);
         });
 
+        const cancelAddFormButtons = document.querySelectorAll('.nameserver-cancel-add-form');
+        cancelAddFormButtons.forEach(cancelAddFormButton => {
+            cancelAddFormButton.addEventListener('click', this.handleCancelAddFormClick);
+        });
+
         const deleteButtons = document.querySelectorAll('.nameserver-delete');
         deleteButtons.forEach(deleteButton => {
             deleteButton.addEventListener('click', this.handleDeleteClick);
@@ -111,8 +122,27 @@ export class NameserverForm {
     }
 
     handleAddFormClick(event) {
+        this.callback = () => {
+            // Check if any other edit row is currently visible and hide it
+            document.querySelectorAll('tr.edit-row:not(.display-none)').forEach(openEditRow => {
+                this.resetEditRowAndFormAndCollapseEditRow(openEditRow);
+            });
+            // Check if this.nameserversForm is visible (i.e., does not have 'display-none')
+            if (!this.nameserversForm.classList.contains('display-none')) {
+                this.resetNameserversForm();
+            }
+            // show nameservers form
             showElement(this.nameserversForm);
-        hideElement(this.addNameserverButton);
+        };
+        if (this.formChanged) {
+            //------- Show the confirmation modal
+            let modalTrigger = document.querySelector("#unsaved_changes_trigger");
+            if (modalTrigger) {
+                modalTrigger.click();
+            }
+        } else {
+            this.executeCallback();
+        }
     }
 
     handleEditClick(event) {
@@ -128,6 +158,10 @@ export class NameserverForm {
             document.querySelectorAll('tr.edit-row:not(.display-none)').forEach(openEditRow => {
                 this.resetEditRowAndFormAndCollapseEditRow(openEditRow);
             });
+            // Check if this.nameserversForm is visible (i.e., does not have 'display-none')
+            if (!this.nameserversForm.classList.contains('display-none')) {
+                this.resetNameserversForm();
+            }
             // hide and show rows as appropriate
             hideElement(readOnlyRow);
             showElement(editRow);
@@ -180,6 +214,10 @@ export class NameserverForm {
     }
 
 
+    handleCancelAddFormClick(event) {
+        this.resetNameserversForm();
+    }
+
     /**
      * Handles the click event for the cancel button within the table form.
      * 
@@ -207,11 +245,11 @@ export class NameserverForm {
             return;
         }
         // reset the values set in editRow
-        this.resetInputValuesInRow(editRow);
+        this.resetInputValuesInElement(editRow);
         // copy values from editRow to readOnlyRow
         this.copyEditRowToReadonlyRow(editRow, readOnlyRow);
         // remove errors from the editRow
-        this.removeErrorsFromRow(editRow);
+        this.removeErrorsFromElement(editRow);
         // remove errors from the entire form
         this.removeFormErrors();
         // reset formChanged
@@ -221,8 +259,25 @@ export class NameserverForm {
         showElement(readOnlyRow);
     }
 
-    resetInputValuesInRow(editRow) {
+    resetNameserversForm() {
-        let textInputs = editRow.querySelectorAll("input[type='text']");
+        if (!this.nameserversForm) {
+            console.warn("Expected DOM element but did not find it");
+            return;
+        }
+        // reset the values set in nameserversForm
+        this.resetInputValuesInElement(this.nameserversForm);
+        // remove errors from the nameserversForm
+        this.removeErrorsFromElement(this.nameserversForm);
+        // remove errors from the entire form
+        this.removeFormErrors();
+        // reset formChanged
+        this.resetFormChanged();
+        // hide the nameserversForm
+        hideElement(this.nameserversForm);
+    }
+
+    resetInputValuesInElement(domElement) {
+        let textInputs = domElement.querySelectorAll("input[type='text']");
         textInputs.forEach(input => {
             input.value = input.dataset.initialValue;
         })
@@ -243,24 +298,24 @@ export class NameserverForm {
         }
     }
 
-    removeErrorsFromRow(editRow) {
+    removeErrorsFromElement(domElement) {
-        // remove class 'usa-form-group--error' from divs in editRow
+        // remove class 'usa-form-group--error' from divs in domElement
-        editRow.querySelectorAll("div.usa-form-group--error").forEach(div => {
+        domElement.querySelectorAll("div.usa-form-group--error").forEach(div => {
             div.classList.remove("usa-form-group--error");
         });
 
-        // remove class 'usa-label--error' from labels in editRow
+        // remove class 'usa-label--error' from labels in domElement
-        editRow.querySelectorAll("label.usa-label--error").forEach(label => {
+        domElement.querySelectorAll("label.usa-label--error").forEach(label => {
             label.classList.remove("usa-label--error");
         });
 
         // Remove divs whose id ends with '__error-message' (error message divs)
-        editRow.querySelectorAll("div[id$='__error-message']").forEach(errorDiv => {
+        domElement.querySelectorAll("div[id$='__error-message']").forEach(errorDiv => {
             errorDiv.remove();
         });
 
-        // remove class 'usa-input--error' from inputs in editRow
+        // remove class 'usa-input--error' from inputs in domElement
-        editRow.querySelectorAll("input.usa-input--error").forEach(input => {
+        domElement.querySelectorAll("input.usa-input--error").forEach(input => {
             input.classList.remove("usa-input--error");
         });
     }

src/registrar/templates/domain_nameservers.html

@@ -80,8 +80,8 @@
 
         <div class="margin-top-2">
           <button
-                type="submit"
+            type="button"
-                class="usa-button usa-button--outline"
+            class="usa-button usa-button--outline nameserver-cancel-add-form"
             name="btn-cancel-click"
             aria-label="Reset the data in the name server form to the registry state (undo changes)"
           >Cancel
@@ -178,7 +178,6 @@
                 <td>
                     <button class="usa-button usa-button--unstyled display-block margin-top-1" type="submit">Save</button>
                     
-                    <!-- TODO: cancel buttons should trigger JS, submit cancel buttons should be nested in modal -->
                     <button
                           type="button"
                           class="usa-button usa-button--unstyled display-block nameserver-cancel"
@@ -244,16 +243,14 @@
         </div>
         {% endfor %}
           
-        <!-- TODO: cancel buttons should trigger JS, submit cancel buttons should be nested in modal -->
         <div class="margin-top-2">
           <button
-                type="submit"
+            type="button"
-                class="usa-button usa-button--outline"
+            class="usa-button usa-button--outline nameserver-cancel-add-form"
             name="btn-cancel-click"
             aria-label="Reset the data in the name server form to the registry state (undo changes)"
           >Cancel
           </button>
-
           <button
                 type="submit"
                 class="usa-button"