fixes some deprecations and removes unused libraries (#23010)

* fixes some deprecations and removes unused libraries

* adds changelog

* updates packages

Author: rishabh-gupta-hashicorp

.changelog/23010.txt

@@ -0,0 +1,6 @@
+```release-note:improvement
+ui: resolved multiple Ember deprecations:
+- Removed mutation-after-consumption warnings in Outlet by staging state updates outside the render pass
+- Replaced deprecated Route#replaceWith/transitionTo usage with RouterService in affected routes
+- Avoided mutating objects produced by {{hash}} (setting-on-hash) by switching to tracked POJOs
+```

ui/packages/consul-ui/app/components/outlet/index.js

@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { schedule } from '@ember/runloop';
 
 class State {
   constructor(name) {
@@ -23,11 +24,20 @@ export default class Outlet extends Component {
 
   @tracked element;
   @tracked routeName;
-  @tracked state;
-  @tracked previousState;
+  @tracked _state = new State('idle');
+  @tracked _previousState = new State('idle');
   @tracked endTransition;
+  // Non-tracked staging variable (won't trigger tracking violations)
+  _stagingState = null;
 
   @tracked route;
+  get state() {
+    return this._stagingState || this._state;
+  }
+
+  get previousState() {
+    return this._previousState;
+  }
 
   get model() {
     return this.args.model || {};
@@ -81,8 +91,14 @@ export default class Outlet extends Component {
   startLoad(transition) {
     const outlet = this.routlet.findOutlet(transition.to.name) || 'application';
     if (this.args.name === outlet) {
-      this.previousState = this.state;
-      this.state = new State('loading');
+      this._stagingState = new State('loading');
+      // Commit after render
+      schedule('afterRender', () => {
+        this._previousState = this._state;
+
+        this._state = this._stagingState || new State('loading');
+        this._stagingState = null;
+      });
       this.endTransition = this.routlet.transition();
       let duration;
       if (this.element) {
@@ -103,9 +119,14 @@ export default class Outlet extends Component {
 
   @action
   endLoad(transition) {
-    if (this.state.matches('loading')) {
-      this.previousState = this.state;
-      this.state = new State('idle');
+    const currentState = this._stagingState || this._state;
+    if (currentState.matches('loading')) {
+      this._stagingState = new State('idle');
+      schedule('afterRender', () => {
+        this._previousState = this._state;
+        this._state = this._stagingState || new State('idle');
+        this._stagingState = null;
+      });
     }
     if (this.args.name === 'application') {
       this.setAppRoute(this.router.currentRouteName);
@@ -115,7 +136,6 @@ export default class Outlet extends Component {
   @action
   connect() {
     this.routlet.addOutlet(this.args.name, this);
-    this.previousState = this.state = new State('idle');
     this.router.on('routeWillChange', this.startLoad);
     this.router.on('routeDidChange', this.endLoad);
   }

ui/packages/consul-ui/app/components/tooltip/index.hbs

@@ -7,9 +7,7 @@
   class="tooltip"
   ...attributes
   {{tooltip
-    options=(hash
-      triggerTarget="parentNode"
-    )
+    options=this.tooltipOptions
   }}
 >
   {{yield}}

ui/packages/consul-ui/app/components/tooltip/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+
+export default class TooltipComponent extends Component {
+  get tooltipOptions() {
+    return {
+      triggerTarget: 'parentNode',
+      ...this.args.options,
+    };
+  }
+}

ui/packages/consul-ui/app/helpers/href-to.js

@@ -14,6 +14,7 @@ import { getOwner } from '@ember/application';
 import transitionable from 'consul-ui/utils/routing/transitionable';
 import wildcard from 'consul-ui/utils/routing/wildcard';
 import { routes } from 'consul-ui/router';
+import { scheduleOnce } from '@ember/runloop';
 
 const isWildcard = wildcard(routes);
 
@@ -65,7 +66,7 @@ export default class HrefToHelper extends Helper {
 
   @action
   routeWillChange(transition) {
-    this.recompute();
+    scheduleOnce('afterRender', this, 'recompute');
   }
 
   willDestroy() {

ui/packages/consul-ui/app/helpers/is-href.js

@@ -6,6 +6,7 @@
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { scheduleOnce } from '@ember/runloop';
 
 export default class IsHrefHelper extends Helper {
   @service('router') router;
@@ -26,7 +27,13 @@ export default class IsHrefHelper extends Helper {
 
   @action
   routeWillChange(transition) {
-    this.next = transition.to.name.replace('.index', '');
+    const nextRoute = transition.to.name.replace('.index', '');
+    // Defer mutation + recompute without anonymous inline function
+    scheduleOnce('afterRender', this, this._commitNext, nextRoute);
+  }
+
+  _commitNext(nextRoute) {
+    this.next = nextRoute;
     this.recompute();
   }
 

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

@@ -16,7 +16,8 @@ export default modifier(($element, [content], hash = {}) => {
   if (typeof content === 'string' && content.trim() === '') {
     return;
   }
-  const options = hash.options || {};
+  const userOptions = hash.options || {};
+  const options = { ...userOptions };
 
   let $anchor = $element;
 
@@ -32,7 +33,7 @@ export default modifier(($element, [content], hash = {}) => {
     }
     content = $anchor.cloneNode(true);
     $el.remove();
-    hash.options.triggerTarget = undefined;
+    delete options.triggerTarget;
   }
   // {{tooltip}} will just use the HTML content
   if (typeof content === 'undefined') {
@@ -45,7 +46,7 @@ export default modifier(($element, [content], hash = {}) => {
     // amount of time specified by the delay
     const delay = options.delay || [];
     if (typeof delay[1] !== 'undefined') {
-      hash.options.onShown = (tooltip) => {
+      options.onShown = (tooltip) => {
         clearInterval(interval);
         interval = setTimeout(() => {
           tooltip.hide();
@@ -68,7 +69,7 @@ export default modifier(($element, [content], hash = {}) => {
     plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(
       (item) => Boolean(item)
     ),
-    ...hash.options,
+    ...options,
   });
 
   return () => {

ui/packages/consul-ui/app/modifiers/with-overlay.js

@@ -13,7 +13,8 @@ import tippy, { followCursor } from 'tippy.js';
  * {{tooltip 'Text' options=(hash )}}
  */
 export default modifier(($element, [content], hash = {}) => {
-  const options = hash.options || {};
+  const userOptions = hash.options || {};
+  const options = { ...userOptions };
 
   let $anchor = $element;
 
@@ -29,7 +30,7 @@ export default modifier(($element, [content], hash = {}) => {
     }
     content = $anchor.cloneNode(true);
     $el.remove();
-    hash.options.triggerTarget = undefined;
+    delete options.triggerTarget;
   }
   // {{tooltip}} will just use the HTML content
   if (typeof content === 'undefined') {

ui/packages/consul-ui/app/routes/dc/kv/index.js

@@ -17,7 +17,7 @@ export default class IndexRoute extends Route {
     const params = this.paramsFor(this.routeName);
     const key = params.key || '/';
     if (!isFolder(key)) {
-      return this.replaceWith(this.routeName, key + '/');
+      return this.router.replaceWith(this.routeName, key + '/');
     }
   }
 

ui/packages/consul-ui/app/routes/dc/nodes/show/rtt.js

@@ -3,12 +3,15 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 import Route from 'consul-ui/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class DcNodesShowRttRoute extends Route {
+  @service router;
+
   redirect(model) {
     const distances = model?.tomography?.distances;
     if (Array.isArray(distances) && distances.length == 0) {
-      this.replaceWith('dc.nodes.show');
+      this.router.replaceWith('dc.nodes.show');
     }
   }
 }