Icu 16534 refactor usage of tracked using this args (#2711)

* refactor: 💡 remove tracked usage with this.args

addons/api/addon/models/host-catalog.js

@@ -4,6 +4,7 @@
  */
 
 import GeneratedHostCatalogModel from '../generated/models/host-catalog';
+import { tracked } from '@glimmer/tracking';
 
 export const TYPE_HOST_CATALOG_STATIC = 'static';
 export const TYPE_HOST_CATALOG_DYNAMIC = 'plugin';
@@ -40,7 +41,8 @@ export const STATIC_CREDENTIAL_FIELDS = ['access_key_id, secret_access_key'];
 export default class HostCatalogModel extends GeneratedHostCatalogModel {
   // =attributes
 
-  #credentialType;
+  @tracked _credentialTypeValue;
+
   /**
    * True if the host catalog is static.
    * @type {boolean}
@@ -62,14 +64,14 @@ export default class HostCatalogModel extends GeneratedHostCatalogModel {
    * @type {string}
    */
   get credentialType() {
-    if (!this.#credentialType) {
+    if (!this._credentialTypeValue) {
       if (DYNAMIC_CREDENTIAL_FIELDS.some((field) => this[field])) {
-        this.#credentialType = TYPE_CREDENTIAL_DYNAMIC;
+        return TYPE_CREDENTIAL_DYNAMIC;
       } else {
-        this.#credentialType = TYPE_CREDENTIAL_STATIC;
+        return TYPE_CREDENTIAL_STATIC;
       }
     }
-    return this.#credentialType;
+    return this._credentialTypeValue;
   }
 
   /**
@@ -77,7 +79,7 @@ export default class HostCatalogModel extends GeneratedHostCatalogModel {
    * @type {string}
    */
   set credentialType(type) {
-    this.#credentialType = type;
+    this._credentialTypeValue = type;
   }
 
   /**

addons/api/addon/models/storage-bucket.js

@@ -4,6 +4,7 @@
  */
 
 import GeneratedStorageBucketModel from '../generated/models/storage-bucket';
+import { tracked } from '@glimmer/tracking';
 
 export const TYPE_STORAGE_BUCKET_PLUGIN = 'plugin';
 export const TYPES_STORAGE_BUCKET = Object.freeze([TYPE_STORAGE_BUCKET_PLUGIN]);
@@ -26,7 +27,8 @@ export const TYPES_CREDENTIALS = Object.freeze([
 export default class StorageBucketModel extends GeneratedStorageBucketModel {
   // attributes
 
-  #credentialType;
+  @tracked _credentialTypeValue;
+
   /**
    * True if the storage bucket is a plugin.
    * @type {boolean}
@@ -40,14 +42,14 @@ export default class StorageBucketModel extends GeneratedStorageBucketModel {
    * @type {string}
    */
   get credentialType() {
-    if (!this.#credentialType) {
+    if (!this._credentialTypeValue) {
       if (this.role_arn) {
-        this.#credentialType = TYPE_CREDENTIAL_DYNAMIC;
+        return TYPE_CREDENTIAL_DYNAMIC;
       } else {
-        this.#credentialType = TYPE_CREDENTIAL_STATIC;
+        return TYPE_CREDENTIAL_STATIC;
       }
     }
-    return this.#credentialType;
+    return this._credentialTypeValue;
   }
 
   /**
@@ -55,8 +57,9 @@ export default class StorageBucketModel extends GeneratedStorageBucketModel {
    * @type {string}
    */
   set credentialType(type) {
-    this.#credentialType = type;
+    this._credentialTypeValue = type;
   }
+
   /**
    * True if the storage bucket is an unknown type.
    * @type {boolean}

addons/api/addon/serializers/host-catalog.js

@@ -34,7 +34,7 @@ export default class HostCatalogSerializer extends ApplicationSerializer {
     ) {
       if (options.isNestedAttribute) {
         json.attributes[key] = null;
-      } else if (options.isNestedSecret && json.secrets[key]) {
+      } else if (options.isNestedSecret && json.secrets?.[key]) {
         delete json.secrets[key];
         if (Object.keys(json.secrets).length === 0) {
           delete json.secrets;

ui/admin/app/components/form/host-catalog/aws/index.hbs

@@ -165,9 +165,9 @@
       <G.RadioField
         name={{credentialType}}
         @value={{credentialType}}
-        checked={{eq credentialType this.selectedCredentialType}}
+        checked={{eq credentialType @model.credentialType}}
         disabled={{form.disabled}}
-        {{on 'input' (fn this.updateCredentialTypeSelection credentialType)}}
+        {{on 'input' (fn @changeCredentialType credentialType)}}
         as |F|
       >
         <F.Label>

ui/admin/app/components/form/host-catalog/aws/index.js

@@ -4,22 +4,16 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import {
   TYPES_CREDENTIALS,
   TYPE_CREDENTIAL_DYNAMIC,
 } from 'api/models/host-catalog';
-import { tracked } from '@glimmer/tracking';
 
 export default class FormHostCatalogAwsComponent extends Component {
   // =attributes
-  @tracked selectedCredentialType = this.args.model.credentialType;
-
-  @tracked showDynamicCredentials =
-    this.args.model.credentialType === TYPE_CREDENTIAL_DYNAMIC;
 
   /**
-   * returns an array of available credential types
+   * Returns an array of available credential types.
    * @type {array}
    */
   get credentials() {
@@ -27,17 +21,10 @@ export default class FormHostCatalogAwsComponent extends Component {
   }
 
   /**
-   * Allows to update the credential type
-   * @param type {string}
+   * Returns true if credential type is dynamic.
+   * @type {boolean}
    */
-  @action
-  updateCredentialTypeSelection(type) {
-    this.selectedCredentialType = type;
-    if (type === TYPE_CREDENTIAL_DYNAMIC) {
-      this.showDynamicCredentials = true;
-    } else {
-      this.showDynamicCredentials = false;
-    }
-    this.args.changeCredentialType(type);
+  get showDynamicCredentials() {
+    return this.args.model.credentialType === TYPE_CREDENTIAL_DYNAMIC;
   }
 }

ui/admin/app/components/form/storage-bucket/aws/index.hbs

@@ -221,9 +221,9 @@
     {{#each this.credentials as |credentialType|}}
       <G.RadioCard
         @value={{credentialType}}
-        @checked={{eq credentialType this.selectedCredentialType}}
+        @checked={{eq credentialType @model.credentialType}}
         @disabled={{form.disabled}}
-        {{on 'input' (fn this.updateCredentialTypeSelection credentialType)}}
+        {{on 'input' (fn @changeCredentialType credentialType)}}
         as |R|
       >
         <R.Label>{{t

ui/admin/app/components/form/storage-bucket/aws/index.js

@@ -4,41 +4,27 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import {
   TYPES_CREDENTIALS,
   TYPE_CREDENTIAL_DYNAMIC,
 } from 'api/models/storage-bucket';
-import { tracked } from '@glimmer/tracking';
 
 export default class FormStorageBucketAwsIndexComponent extends Component {
   // =attributes
 
-  @tracked selectedCredentialType = this.args.model.credentialType;
-  @tracked showDynamicCredentials =
-    this.args.model.credentialType === TYPE_CREDENTIAL_DYNAMIC;
-
   /**
-   * returns an array of available credential types
+   * Returns an array of available credential types.
    * @type {array}
    */
   get credentials() {
     return TYPES_CREDENTIALS;
   }
 
-  // =actions
   /**
-   * Allows to update the credential type
-   * @param {string} type
+   * Returns true if credential type is dynamic.
+   * @type {boolean}
    */
-  @action
-  updateCredentialTypeSelection(type) {
-    this.selectedCredentialType = type;
-    if (type === TYPE_CREDENTIAL_DYNAMIC) {
-      this.showDynamicCredentials = true;
-    } else {
-      this.showDynamicCredentials = false;
-    }
-    this.args.changeCredentialType(type);
+  get showDynamicCredentials() {
+    return this.args.model.credentialType === TYPE_CREDENTIAL_DYNAMIC;
   }
 }

ui/admin/app/components/worker-filter-generator/index.js

@@ -13,12 +13,19 @@ export default class WorkerFilterGeneratorIndexComponent extends Component {
   generatorTagType = 'tag';
   generatorNameType = 'name';
   operatorOptions = ['==', 'matches', 'contains'];
-  @tracked showFilterGenerator = this.args.showFilterGenerator;
+  @tracked showFilterGenerator = this.defaultShowFilterGenerator;
   @tracked selectedGeneratorType = this.generatorTagType;
   @tracked key = '';
   @tracked value = '';
   @tracked operator = '';
 
+  /**
+   * @type {string}
+   */
+  get defaultShowFilterGenerator() {
+    return this.args.showFilterGenerator;
+  }
+
   /**
    * @return {string}
    */

ui/admin/app/controllers/scopes/scope/host-catalogs/index.js

@@ -11,7 +11,7 @@ import { debounce } from 'core/decorators/debounce';
 import { loading } from 'ember-loading';
 import { confirm } from 'core/decorators/confirm';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
-import { TYPE_STATIC_CREDENTIAL } from 'api/models/host-catalog';
+import { TYPE_CREDENTIAL_STATIC } from 'api/models/host-catalog';
 
 export default class ScopesScopeHostCatalogsIndexController extends Controller {
   // =services
@@ -92,7 +92,7 @@ export default class ScopesScopeHostCatalogsIndexController extends Controller {
   async save(hostCatalog) {
     // If the role_arn is empty, then the credential type should be static
     if (!hostCatalog.role_arn) {
-      hostCatalog.credentialType = TYPE_STATIC_CREDENTIAL;
+      hostCatalog.credentialType = TYPE_CREDENTIAL_STATIC;
     }
     await hostCatalog.save();
     if (this.can.can('read host-catalog', hostCatalog)) {
@@ -133,7 +133,7 @@ export default class ScopesScopeHostCatalogsIndexController extends Controller {
 
   /**
    * Updates credential type
-   * @param {model} hostcatalog
+   * @param {model} hostCatalog
    * @param {string} credentialType
    */
   @action

ui/admin/app/controllers/scopes/scope/storage-buckets/index.js

@@ -9,6 +9,7 @@ import { action } from '@ember/object';
 import { loading } from 'ember-loading';
 import { confirm } from 'core/decorators/confirm';
 import { notifySuccess, notifyError } from 'core/decorators/notify';
+import { TYPE_CREDENTIAL_STATIC } from 'api/models/storage-bucket';
 
 export default class ScopesScopeStorageBucketsIndexController extends Controller {
   // =services
@@ -55,6 +56,10 @@ export default class ScopesScopeStorageBucketsIndexController extends Controller
   @notifyError(({ message }) => message)
   @notifySuccess('notifications.save-success')
   async save(storageBucket) {
+    // If the role_arn is empty, then the credential type should be static
+    if (!storageBucket.role_arn) {
+      storageBucket.credentialType = TYPE_CREDENTIAL_STATIC;
+    }
     await storageBucket.save();
     await this.router.transitionTo(
       'scopes.scope.storage-buckets.storage-bucket',