GroupSAML test button has tooltip when disabled

ee/app/assets/javascripts/saml_providers/saml_settings_form.js

@@ -5,7 +5,8 @@ export default class SamlSettingsForm {
   constructor(formSelector) {
     this.form = document.querySelector(formSelector);
     this.enabledToggle = this.form.querySelector('#saml_provider_enabled');
-    this.testButton = this.form.querySelector('#js-saml-test-button a');
+    this.testButtonTooltipWrapper = this.form.querySelector('#js-saml-test-button');
+    this.testButton = this.testButtonTooltipWrapper.querySelector('a');
     this.dirtyFormChecker = new DirtyFormChecker(formSelector, () => this.updateView());
   }
 
@@ -26,11 +27,27 @@ export default class SamlSettingsForm {
     this.enabled = this.enabledToggle.checked;
   }
 
+  testButtonTooltip() {
+    if (!this.enabled) {
+      return 'Group SAML must be enabled to test';
+    }
+
+    if (this.dirtyFormChecker.isDirty) {
+      return 'Save changes before testing';
+    }
+
+    return 'Redirect to SAML provider to test configuration';
+  }
+
   updateView() {
     if (this.enabled && !this.dirtyFormChecker.isDirty) {
       this.testButton.removeAttribute('disabled');
     } else {
       this.testButton.setAttribute('disabled', true);
     }
+
+    // Update tooltip using wrapper so it works when input disabled
+    this.testButtonTooltipWrapper.setAttribute('title', this.testButtonTooltip());
+    $(this.testButtonTooltipWrapper).tooltip('_fixTitle');
   }
 }

ee/app/views/groups/saml_providers/_form.html.haml

@@ -26,5 +26,5 @@
 
     .form-actions
       = f.submit _("Save changes"), class: 'btn btn-success qa-save-changes-button'
-      #js-saml-test-button.pull-right
+      #js-saml-test-button.has-tooltip.pull-right
         = render 'test_button', saml_provider: @saml_provider