Pass error message props via JS instead of HAML

Move passing of `errorMessage` and `disallowedValueErrorMessage` to JS
instead of passing it via HAML data attributes

ee/app/assets/javascripts/groups/settings/access_restriction_field/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { __, sprintf } from '~/locale';
 import CommaSeparatedListTokenSelector from '../components/comma_separated_list_token_selector.vue';
 
-export default (el, placeholder, qaSelector) => {
+export default (el, props = {}, qaSelector) => {
   // eslint-disable-next-line no-new
   new Vue({
     el,
@@ -10,21 +10,14 @@ export default (el, placeholder, qaSelector) => {
       CommaSeparatedListTokenSelector,
     },
     data() {
-      const {
-        hiddenInputId,
-        labelId,
-        regexValidator,
-        disallowedValues,
-        errorMessage,
-        disallowedValueErrorMessage,
-      } = document.querySelector(this.$options.el).dataset;
+      const { hiddenInputId, labelId, regexValidator, disallowedValues } = document.querySelector(
+        this.$options.el,
+      ).dataset;
 
       return {
         hiddenInputId,
         labelId,
         regexValidator,
-        errorMessage,
-        disallowedValueErrorMessage,
         ...(regexValidator ? { regexValidator: new RegExp(regexValidator) } : {}),
         ...(disallowedValues ? { disallowedValues: JSON.parse(disallowedValues) } : {}),
       };
@@ -39,9 +32,7 @@ export default (el, placeholder, qaSelector) => {
           ariaLabelledby: this.labelId,
           regexValidator: this.regexValidator,
           disallowedValues: this.disallowedValues,
-          errorMessage: this.errorMessage,
-          disallowedValueErrorMessage: this.disallowedValueErrorMessage,
-          placeholder,
+          ...props,
         },
         scopedSlots: {
           'user-defined-token-content': ({ inputText: value }) => {

ee/app/assets/javascripts/pages/groups/edit/index.js

@@ -3,10 +3,14 @@ import initAccessRestrictionField from 'ee/groups/settings/access_restriction_fi
 import { __ } from '~/locale';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initAccessRestrictionField('.js-allowed-email-domains', __('Enter domain'));
+  initAccessRestrictionField('.js-allowed-email-domains', {
+    placeholder: __('Enter domain'),
+    errorMessage: __('The domain you entered is misformatted.'),
+    disallowedValueErrorMessage: __('The domain you entered is not allowed.'),
+  });
   initAccessRestrictionField(
     '.js-ip-restriction',
-    __('Enter IP address range'),
+    { placeholder: __('Enter IP address range') },
     'ip_restriction_field',
   );
 });

ee/app/views/groups/settings/_allowed_email_domain.html.haml

@@ -8,9 +8,7 @@
   .js-allowed-email-domains{ data: { hidden_input_id: hidden_input_id,
     label_id: label_id,
     regex_validator: AllowedEmailDomain::VALID_DOMAIN_REGEX.source,
-    disallowed_values: AllowedEmailDomain::RESERVED_DOMAINS.to_json,
-    error_message: _('The domain you entered is misformatted.'),
-    disallowed_value_error_message: _('The domain you entered is not allowed.') } }
+    disallowed_values: AllowedEmailDomain::RESERVED_DOMAINS.to_json } }
   = f.hidden_field :allowed_email_domains_list, id: hidden_input_id
   .form-text.text-muted
     - read_more_link = link_to(_('Read more'), help_page_path('user/group/index', anchor: 'allowed-domain-restriction-premium'))