Update validate modifier for new structure

ui/packages/consul-ui/app/modifiers/validate.js

@@ -5,9 +5,17 @@
 
 import Modifier from 'ember-modifier';
 import { action } from '@ember/object';
+import { registerDestructor } from '@ember/destroyable';
 
 class ValidationError extends Error {}
 
+function cleanup(instance) {
+  if (instance && instance?.element) {
+    instance?.element?.removeEventListener('input', instance?.listen);
+    instance?.element?.removeEventListener('blur', instance?.reset);
+  }
+}
+
 export default class ValidateModifier extends Modifier {
   item = null;
   hash = null;
@@ -70,37 +78,24 @@ export default class ValidateModifier extends Modifier {
     }
   }
 
-  async connect([value], _hash) {
-    this.element.addEventListener('input', this.listen);
-    this.element.addEventListener('blur', this.reset);
-    if (this.element.value.length > 0) {
-      await Promise.resolve();
-      if (this && this.element) {
-        this.validate(this.element.value, this.hash.validations);
-      }
-    }
-  }
-
   @action
   listen(e) {
     this.validate(e.target.value, this.hash.validations);
   }
 
-  disconnect() {
+  constructor(owner, args) {
-    this.item = null;
+    super(owner, args);
-    this.hash = null;
+    registerDestructor(this, cleanup);
-    this.element.removeEventListener('input', this.listen);
-    this.element.removeEventListener('blur', this.reset);
   }
 
-  didReceiveArguments() {
+  async modify(element, positional, named) {
-    const [value] = this.args.positional;
+    cleanup.call(this);
-    const _hash = this.args.named;
 
-    this.item = value;
+    this.element = element;
-    this.hash = _hash;
+    this.hash = named;
+    this.item = positional[0];
 
-    if (typeof _hash.chart === 'undefined') {
+    if (typeof this.hash.chart === 'undefined') {
       this.hash.chart = {
         state: {
           context: {},
@@ -117,13 +112,15 @@ export default class ValidateModifier extends Modifier {
         },
       };
     }
-  }
 
-  didInstall() {
+    this.element.addEventListener('input', this.listen);
-    this.connect(this.args.positional, this.args.named);
+    this.element.addEventListener('blur', this.reset);
-  }
 
-  willRemove() {
+    if (this.element.value.length > 0) {
-    this.disconnect();
+      await Promise.resolve();
+      if (this && this.element) {
+        this.validate(this.element.value, this.hash.validations);
+      }
+    }
   }
 }