Backport of UI/Deprecation Computed property override into release/1.22.x (#22959)

backport of commit 0879750

Co-authored-by: Rishabh Gupta <[email protected]>

Author: hc-github-team-consul-core

.changelog/22947.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Fixes computed property override issues currently occurring and in some cases pre-emptively as this has been deprecated in ember v4
+```

ui/packages/consul-ui/app/components/child-selector/index.js

@@ -36,18 +36,27 @@ export default Component.extend(Slotted, {
     this._super(...arguments);
     this._listeners.remove();
   },
-  options: computed('selectedOptions.[]', 'allOptions.[]', function () {
-    // It's not massively important here that we are defaulting `items` and
-    // losing reference as its just to figure out the diff
-    let options = this.allOptions || [];
-    const items = this.selectedOptions || [];
-    if (get(items, 'length') > 0) {
-      // filter out any items from the available options that have already been
-      // selected/added
-      // TODO: find a proper ember-data diff
-      options = options.filter((item) => !items.findBy('ID', get(item, 'ID')));
-    }
-    return options;
+  options: computed('selectedOptions.[]', 'allOptions.[]', {
+    get() {
+      if (this._options !== undefined) {
+        return this._options;
+      }
+      // It's not massively important here that we are defaulting `items` and
+      // losing reference as its just to figure out the diff
+      let options = this.allOptions || [];
+      const items = this.selectedOptions || [];
+      if (get(items, 'length') > 0) {
+        // filter out any items from the available options that have already been
+        // selected/added
+        // TODO: find a proper ember-data diff
+        options = options.filter((item) => !items.findBy('ID', get(item, 'ID')));
+      }
+      return options;
+    },
+    set(_key, value) {
+      this._options = value;
+      return this._options;
+    },
   }),
   save: task(function* (item, items, success = function () {}) {
     const repo = this.repo;

ui/packages/consul-ui/app/components/consul/intention/permission/header/form/index.js

@@ -20,14 +20,23 @@ export default Component.extend({
   onsubmit: function () {},
   onreset: function () {},
 
-  changeset: computed('item', function () {
-    return this.change.changesetFor(
-      name,
-      this.item ||
-        this.repo.create({
-          HeaderType: this.headerTypes.firstObject,
-        })
-    );
+  changeset: computed('item', {
+    get() {
+      if (this._changeset !== undefined) {
+        return this._changeset;
+      }
+      return this.change.changesetFor(
+        name,
+        this.item ||
+          this.repo.create({
+            HeaderType: this.headerTypes.firstObject,
+          })
+      );
+    },
+    set(_key, value) {
+      this._changeset = value;
+      return this._changeset;
+    },
   }),
 
   headerTypes: alias(`schema.${name}.HeaderType.allowedValues`),

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

@@ -17,8 +17,17 @@ const normalizedGatewayLabels = {
 
 export default Component.extend({
   tagName: '',
-  Name: computed('item.Kind', function () {
-    const name = normalizedGatewayLabels[this.item.Kind];
-    return name ? name : titleize(humanize(this.item.Kind));
+  Name: computed('item.Kind', {
+    get() {
+      if (this._Name !== undefined) {
+        return this._Name;
+      }
+      const name = normalizedGatewayLabels[this.item.Kind];
+      return name ? name : titleize(humanize(this.item.Kind));
+    },
+    set(_key, value) {
+      this._Name = value;
+      return this._Name;
+    },
   }),
 });

ui/packages/consul-ui/app/components/data-sink/index.js

@@ -19,30 +19,38 @@ export default Component.extend({
   onchange: function (e) {},
   onerror: function (e) {},
 
-  state: computed('instance', 'instance.{dirtyType,isSaving}', function () {
-    let id;
-    const isSaving = get(this, 'instance.isSaving');
-    const dirtyType = get(this, 'instance.dirtyType');
-    if (typeof isSaving === 'undefined' && typeof dirtyType === 'undefined') {
-      id = 'idle';
-    } else {
-      switch (dirtyType) {
-        case 'created':
-          id = isSaving ? 'creating' : 'create';
-          break;
-        case 'updated':
-          id = isSaving ? 'updating' : 'update';
-          break;
-        case 'deleted':
-        case undefined:
-          id = isSaving ? 'removing' : 'remove';
-          break;
+  state: computed('instance', 'instance.{dirtyType,isSaving}', {
+    get() {
+      let id;
+      const isSaving = get(this, 'instance.isSaving');
+      const dirtyType = get(this, 'instance.dirtyType');
+
+      if (typeof isSaving === 'undefined' && typeof dirtyType === 'undefined') {
+        id = 'idle';
+      } else {
+        switch (dirtyType) {
+          case 'created':
+            id = isSaving ? 'creating' : 'create';
+            break;
+          case 'updated':
+            id = isSaving ? 'updating' : 'update';
+            break;
+          case 'deleted':
+          case undefined:
+            id = isSaving ? 'removing' : 'remove';
+            break;
+        }
+        id = `active.${id}`;
       }
-      id = `active.${id}`;
-    }
-    return {
-      matches: (name) => id.indexOf(name) !== -1,
-    };
+
+      return {
+        matches: (name) => id.indexOf(name) !== -1,
+      };
+    },
+
+    set(_key, value) {
+      return value;
+    },
   }),
 
   init: function () {

ui/packages/consul-ui/app/components/list-collection/index.js

@@ -47,14 +47,23 @@ export default Component.extend(Slotted, {
       return style;
     };
   },
-  style: computed('height', function () {
-    if (this.scroll !== 'virtual') {
-      return {};
-    }
-    return {
-      height: this.height,
-    };
+
+  style: computed('height', {
+    get() {
+      if (this.scroll !== 'virtual') {
+        return {};
+      } else {
+        return {
+          height: this.height,
+        };
+      }
+    },
+
+    set(_key, value) {
+      return value;
+    },
   }),
+
   actions: {
     resize: function (e) {
       // TODO: This top part is very similar to resize in tabular-collection

ui/packages/consul-ui/app/components/tabular-collection/index.js

@@ -39,18 +39,26 @@ export default CollectionComponent.extend(Slotted, {
     this.$element = this.dom.element(`#${this.guid}`);
     this.actions.resize.apply(this, [{ target: this.dom.viewport() }]);
   },
-  style: computed('rowHeight', '_items', 'maxRows', 'maxHeight', function () {
-    const maxRows = this.rows;
-    let height = this.maxHeight;
-    if (maxRows) {
-      let rows = Math.max(3, get(this._items || [], 'length'));
-      rows = Math.min(maxRows, rows);
-      height = this.rowHeight * rows + 29;
-    }
-    return {
-      height: height,
-    };
+
+  style: computed('rowHeight', '_items', 'maxRows', 'maxHeight', {
+    get() {
+      const maxRows = this.rows;
+      let height = this.maxHeight;
+
+      if (maxRows) {
+        let rows = Math.max(3, get(this._items || [], 'length'));
+        rows = Math.min(maxRows, rows);
+        height = this.rowHeight * rows + 29;
+      }
+
+      return { height };
+    },
+
+    set(_key, value) {
+      return value;
+    },
   }),
+
   willRender: function () {
     this._super(...arguments);
     set(this, 'hasCaption', this._isRegistered('caption'));

ui/packages/consul-ui/app/models/intention-permission-http-header.js

@@ -33,6 +33,16 @@ export default class IntentionPermission extends Fragment {
 
   @computed(...schema.HeaderType.allowedValues)
   get HeaderType() {
+    // Use manual override if one was set
+    if (this._headerTypeManual !== undefined) {
+      return this._headerTypeManual;
+    }
+    // Original logic: find first defined variant field
     return schema.HeaderType.allowedValues.find((prop) => typeof this[prop] !== 'undefined');
   }
+
+  set HeaderType(value) {
+    // Store manual override
+    this._headerTypeManual = value;
+  }
 }

ui/packages/consul-ui/app/models/intention-permission-http.js

@@ -30,6 +30,16 @@ export default class IntentionPermissionHttp extends Fragment {
 
   @computed(...schema.PathType.allowedValues)
   get PathType() {
+    // Use manual override if one was set
+    if (this._pathTypeManual !== undefined) {
+      return this._pathTypeManual;
+    }
+    // Original logic: find first defined property
     return schema.PathType.allowedValues.find((prop) => typeof this[prop] === 'string');
   }
+
+  set PathType(value) {
+    // Store manual override
+    this._pathTypeManual = value;
+  }
 }

ui/packages/consul-ui/lib/block-slots/addon/components/block-slot.js

@@ -8,8 +8,13 @@ import YieldSlot from './yield-slot';
 const BlockSlot = Component.extend({
   layout,
   tagName: '',
-  _name: computed('name', function () {
-    return this.name;
+  _name: computed('name', {
+    get() {
+      return this.name;
+    },
+    set(_key, value) {
+      return value;
+    },
   }),
   didInsertElement: function () {
     const slottedComponent = this.nearestOfType(Slots);