NEW Show icons on tabs with invalid form field values

silverstripe · Sep 18, 2020 · bab66e1 · bab66e1
1 parent 1729957
commit bab66e1
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 22 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/lang/src/en.json b/client/lang/src/en.json
@@ -12,6 +12,7 @@
     "Admin.CONFIRMUNSAVED": "Are you sure you want to navigate away from this page?\n\nWARNING: Your changes have not been saved.\n\nPress OK to continue, or Cancel to stay on the current page.",
     "Admin.CONFIRMUNSAVEDSHORT": "WARNING: Your changes have not been saved.",
     "Admin.VALIDATIONERROR": "Validation Error",
+    "Admin.VALIDATION_ERRORS_ON_PAGE": "There are validation errors on this page, please fix them before saving or publishing.",
     "Admin.NONE": "None",
     "Admin.EDIT": "Edit",
     "Admin.ANY": "Any",

diff --git a/client/src/legacy/LeftAndMain.EditForm.js b/client/src/legacy/LeftAndMain.EditForm.js
@@ -110,27 +110,62 @@ $.entwine('ss', function($){
     },
     'from .cms-tabset': {
       onafterredrawtabs: function () {
-        // Show validation errors if necessary
-        if(this.hasClass('validationerror')) {
-          // Ensure the first validation error is visible
-          var tabError = this.find('.message.validation, .message.required').first().closest('.tab');
-          $('.cms-container').clearCurrentTabState(); // clear state to avoid override later on
-
-          // Attempt #1: Look for nearest .ss-tabset (usually nested deeper underneath a .cms-tabset).
-          var $tabSet = tabError.closest('.ss-tabset');
-
-          // Attempt #2: Next level in tab-ception, try to select the tab within this higher level .cms-tabset if possible
-          if (!$tabSet.length) {
-            $tabSet = tabError.closest('.cms-tabset');
-          }
 
-          if ($tabSet.length) {
-            $tabSet.tabs('option', 'active', tabError.index('.tab'));
-          } else if (!this.getValidationErrorShown()) {
-            // Ensure that this error message popup won't be added more than once
-            this.setValidationErrorShown(true);
-            errorMessage(ss.i18n._t('Admin.VALIDATIONERROR', 'Validation Error'));
-          }
+        // This function will:
+        // - Add an invalid icon on each tab that contains form fields than failed validation
+        // - Set an alert message in the edit form error banner
+        // - In some edge cases, fallback to a legacy behaviour of showing a toast notification
+        const iconClass = 'font-icon-attention-1 tab-attention';
+        const selector = `.${iconClass.split(' ').join('.')}`;
+
+        // Remove any existing invalid tab icons
+        this.find(selector).remove();
+
+        // Reset the edit form banner
+        const $editFormErrorBanner = $("#Form_EditForm_error");
+        $editFormErrorBanner.attr('class', 'alert');
+        $editFormErrorBanner.html('');
+        $editFormErrorBanner.hide();
+
+        // Check if there are any form validation errors
+        if(!this.hasClass('validationerror')) {
+          return;
+        }
+
+        // Find tab-pane's with decedent validation .alert's
+        const $invalidTabPanes = this.find('.tab-pane .alert').closest('.tab-pane');
+        if (!$invalidTabPanes.length) {
+          return;
+        }
+
+        // Get the surrounding ss-tabset
+        const $ssTabSet = $invalidTabPanes.closest('.tab-content').closest('.ss-tabset');
+        if ($ssTabSet.length) {
+
+          // Add invalid icons to tabs
+          $invalidTabPanes.each((i) => {
+            const invalidTabPaneId = $invalidTabPanes.eq(i).attr('id');
+            const $tabLi = $ssTabSet.find(`#tab-${invalidTabPaneId}`).closest('li');
+            const $icon = $(`<i class="${iconClass}"></i>`);
+            $tabLi.append($icon);
+          });
+
+          // Set an alert message in the edit form error banner
+          const messageText = ss.i18n._t(
+            'Admin.VALIDATION_ERRORS_ON_PAGE',
+            'There are validation errors on this page, please fix them before saving or publishing.'
+          );
+          $editFormErrorBanner.attr('class', 'alert alert-danger');
+          $editFormErrorBanner.html(messageText);
+          $editFormErrorBanner.show();
+          return;
+        }
+
+        // Legacy fallback behaviour - show a toast notification
+        if (!this.getValidationErrorShown()) {
+          errorMessage(ss.i18n._t('Admin.VALIDATIONERROR', 'Validation Error'));
+          // Ensure that this error message popup won't be added more than once
+          this.setValidationErrorShown(true);
         }
       }
     },

diff --git a/client/src/styles/legacy/_style.scss b/client/src/styles/legacy/_style.scss
@@ -685,6 +685,13 @@ html, body {
   .nav-link {
     padding: $nav-link-padding;
   }
+
+  .tab-attention {
+    color: $state-draft;
+    float: right;
+    margin-top: 12px;
+    margin-left: -5px;
+  }
 }
 
 // -------------------------------------------------------