Refactor UserInternalRegexHandler to own module

- Also removes jquery usage

app/assets/javascripts/admin/users/new.js

+const DATA_ATTR_REGEX_PATTERN = 'data-user-internal-regex-pattern';
+const DATA_ATTR_REGEX_OPTIONS = 'data-user-internal-regex-options';
+export const ID_USER_EXTERNAL = 'user_external';
+export const ID_WARNING = 'warning_external_automatically_set';
+export const ID_USER_EMAIL = 'user_email';
+
+const getAttributeValue = (attr) => document.querySelector(`[${attr}]`)?.getAttribute(attr);
+
+const getRegexPattern = () => getAttributeValue(DATA_ATTR_REGEX_PATTERN);
+
+const getRegexOptions = () => getAttributeValue(DATA_ATTR_REGEX_OPTIONS);
+
+export const setupInternalUserRegexHandler = () => {
+  const regexPattern = getRegexPattern();
+
+  if (!regexPattern) {
+    return;
+  }
+
+  const regexOptions = getRegexOptions();
+  const elExternal = document.getElementById(ID_USER_EXTERNAL);
+  const elWarningMessage = document.getElementById(ID_WARNING);
+  const elUserEmail = document.getElementById(ID_USER_EMAIL);
+
+  const isEmailInternal = (email) => {
+    const regex = new RegExp(regexPattern, regexOptions);
+    return regex.test(email);
+  };
+
+  const setExternalCheckbox = (email) => {
+    const isChecked = elExternal.checked;
+
+    if (isEmailInternal(email)) {
+      if (isChecked) {
+        elExternal.checked = false;
+        elWarningMessage.classList.remove('hidden');
+      }
+    } else if (!isChecked) {
+      elExternal.checked = true;
+      elWarningMessage.classList.add('hidden');
+    }
+  };
+
+  const setupListeners = () => {
+    elUserEmail.addEventListener('input', (event) => {
+      setExternalCheckbox(event.target.value);
+    });
+
+    elExternal.addEventListener('change', () => {
+      elWarningMessage.classList.add('hidden');
+    });
+  };
+
+  setupListeners();
+};

app/assets/javascripts/pages/admin/users/new/index.js

-import $ from 'jquery';
+import { setupInternalUserRegexHandler } from '~/admin/users/new';
 
-export default class UserInternalRegexHandler {
-  constructor() {
-    this.regexPattern = $('[data-user-internal-regex-pattern]').data('user-internal-regex-pattern');
-    if (this.regexPattern && this.regexPattern !== '') {
-      this.regexOptions = $('[data-user-internal-regex-options]').data(
-        'user-internal-regex-options',
-      );
-      this.external = $('#user_external');
-      this.warningMessage = $('#warning_external_automatically_set');
-      this.addListenerToEmailField();
-      this.addListenerToUserExternalCheckbox();
-    }
-  }
-
-  addListenerToEmailField() {
-    $('#user_email').on('input', (event) => {
-      this.setExternalCheckbox(event.currentTarget.value);
-    });
-  }
-
-  addListenerToUserExternalCheckbox() {
-    this.external.on('click', () => {
-      this.warningMessage.addClass('hidden');
-    });
-  }
-
-  isEmailInternal(email) {
-    const regex = new RegExp(this.regexPattern, this.regexOptions);
-    return regex.test(email);
-  }
-
-  setExternalCheckbox(email) {
-    const isChecked = this.external.prop('checked');
-    if (this.isEmailInternal(email)) {
-      if (isChecked) {
-        this.external.prop('checked', false);
-        this.warningMessage.removeClass('hidden');
-      }
-    } else if (!isChecked) {
-      this.external.prop('checked', true);
-      this.warningMessage.addClass('hidden');
-    }
-  }
-}
-
-// eslint-disable-next-line no-new
-new UserInternalRegexHandler();
+setupInternalUserRegexHandler();

changelogs/unreleased/ps-refactor-user-internal-regex-handler.yml

+---
+title: In admin new user page, fix external checkbox warning hide with keyboard interaction
+merge_request: 56896
+author:
+type: fixed

spec/frontend/admin/users/new_spec.js

+import {
+  setupInternalUserRegexHandler,
+  ID_USER_EMAIL,
+  ID_USER_EXTERNAL,
+  ID_WARNING,
+} from '~/admin/users/new';
+
+describe('admin/users/new', () => {
+  const FIXTURE = 'admin/users/new_with_internal_user_regex.html';
+
+  let elExternal;
+  let elUserEmail;
+  let elWarningMessage;
+
+  beforeEach(() => {
+    loadFixtures(FIXTURE);
+    setupInternalUserRegexHandler();
+
+    elExternal = document.getElementById(ID_USER_EXTERNAL);
+    elUserEmail = document.getElementById(ID_USER_EMAIL);
+    elWarningMessage = document.getElementById(ID_WARNING);
+
+    elExternal.checked = true;
+  });
+
+  const changeEmail = (val) => {
+    elUserEmail.value = val;
+    elUserEmail.dispatchEvent(new Event('input'));
+  };
+
+  const hasHiddenWarning = () => elWarningMessage.classList.contains('hidden');
+
+  describe('Behaviour of userExternal checkbox', () => {
+    it('hides warning by default', () => {
+      expect(hasHiddenWarning()).toBe(true);
+    });
+
+    describe('when matches email as internal', () => {
+      beforeEach(() => {
+        changeEmail('test@');
+      });
+
+      it('has external unchecked', () => {
+        expect(elExternal.checked).toBe(false);
+      });
+
+      it('shows warning', () => {
+        expect(hasHiddenWarning()).toBe(false);
+      });
+
+      describe('when external is checked again', () => {
+        beforeEach(() => {
+          elExternal.dispatchEvent(new Event('change'));
+        });
+
+        it('hides warning', () => {
+          expect(hasHiddenWarning()).toBe(true);
+        });
+      });
+    });
+
+    describe('when matches emails as external', () => {
+      beforeEach(() => {
+        changeEmail('test.ext@');
+      });
+
+      it('has external checked', () => {
+        expect(elExternal.checked).toBe(true);
+      });
+
+      it('hides warning', () => {
+        expect(hasHiddenWarning()).toBe(true);
+      });
+    });
+  });
+});

spec/frontend/pages/admin/users/new/index_spec.js

-import $ from 'jquery';
-import UserInternalRegexHandler from '~/pages/admin/users/new/index';
-
-describe('UserInternalRegexHandler', () => {
-  const FIXTURE = 'admin/users/new_with_internal_user_regex.html';
-  let $userExternal;
-  let $userEmail;
-  let $warningMessage;
-
-  beforeEach(() => {
-    loadFixtures(FIXTURE);
-    // eslint-disable-next-line no-new
-    new UserInternalRegexHandler();
-    $userExternal = $('#user_external');
-    $userEmail = $('#user_email');
-    $warningMessage = $('#warning_external_automatically_set');
-    if (!$userExternal.prop('checked')) $userExternal.prop('checked', 'checked');
-  });
-
-  describe('Behaviour of userExternal checkbox when', () => {
-    it('matches email as internal', (done) => {
-      expect($warningMessage.hasClass('hidden')).toBeTruthy();
-
-      $userEmail.val('test@').trigger('input');
-
-      expect($userExternal.prop('checked')).toBeFalsy();
-      expect($warningMessage.hasClass('hidden')).toBeFalsy();
-      done();
-    });
-
-    it('matches email as external', (done) => {
-      expect($warningMessage.hasClass('hidden')).toBeTruthy();
-
-      $userEmail.val('test.ext@').trigger('input');
-
-      expect($userExternal.prop('checked')).toBeTruthy();
-      expect($warningMessage.hasClass('hidden')).toBeTruthy();
-      done();
-    });
-  });
-});