Replace the Ember array extensions with native arrays in the classic hyper-table

addon/components/hyper-table-v2/manage-columns.ts

@@ -1,7 +1,6 @@
-import { A } from '@ember/array';
 import { set, action } from '@ember/object';
 import { later, next } from '@ember/runloop';
-import { isEmpty } from '@ember/utils';
+import { compare, isEmpty } from '@ember/utils';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
@@ -37,15 +36,15 @@ export default class HyperTableV2ManageColumns extends Component<HyperTableV2Man
   }
 
   get orderedFilteredClusters(): Map<string, ManagedColumn[]> {
-    const fields = A(
-      (this.args.handler.columnDefinitions || []).filter((columnDefinition) => {
+    const fields = (this.args.handler.columnDefinitions || [])
+      .filter((columnDefinition) => {
         const search = (this.searchColumnDefinitionKeyword || '').toLowerCase();
         const hasSearched =
           !this.searchColumnDefinitionKeyword || columnDefinition.name.toLowerCase().indexOf(search) >= 0;
         const hasActiveGroup = !this.activeColumnCategory || columnDefinition.category === this.activeColumnCategory;
         return hasActiveGroup && hasSearched;
       })
-    ).sortBy('name');
+      .sort((a, b) => compare(a.name, b.name));
 
     return this.groupByClusteringKey(fields);
   }

addon/components/hyper-table/cell-renderers/list.hbs

@@ -2,9 +2,9 @@
   —
 {{else}}
   <div class="list-container" {{on "click" this.toggleList}}>
-    {{#if this.value.firstObject.name}}
+    {{#if this.firstItem.name}}
       <div>
-        {{this.value.firstObject.name}}
+        {{this.firstItem.name}}
       </div>
       {{#if (eq this.manager.tetherOn this.elementId)}}
         <div class="expandable-list">

addon/components/hyper-table/cell-renderers/list.js

@@ -10,9 +10,13 @@ export default Component.extend(CellRendererMixin, {
 
   isEditing: false,
 
-  formattedList: computed('value', 'value.firstObject.name', function () {
-    if (this.value.firstObject.name) {
-      return this.value.mapBy('name').join('<br>');
+  firstItem: computed('value.[]', function () {
+    return this.value.slice()[0];
+  }),
+
+  formattedList: computed('value.[]', 'firstItem.name', function () {
+    if (this.firstItem.name) {
+      return this.value.map((item) => item.name).join('<br>');
     }
     return this.value.slice().join('<br>');
   }),

addon/components/hyper-table/filters-renderers/date.js

@@ -19,8 +19,8 @@ export default class DateFiltersRenderer extends FiltersRenderer {
     this._currentMovingDateOption = filter ? filter.value : null;
     this.filterOption = this._currentMovingDateOption ? 'moving' : 'fixed';
 
-    let lowerBoundFilter = this.args.column.filters.findBy('key', 'lower_bound');
-    let upperBoundFilter = this.args.column.filters.findBy('key', 'upper_bound');
+    let lowerBoundFilter = this.args.column.filters.find((filter) => filter.key === 'lower_bound');
+    let upperBoundFilter = this.args.column.filters.find((filter) => filter.key === 'upper_bound');
     if (lowerBoundFilter && upperBoundFilter) {
       this._currentDateValue = [
         moment.unix(lowerBoundFilter.value).toDate(),

addon/components/hyper-table/filters-renderers/money.js

@@ -20,8 +20,8 @@ export default NumericFilterRenderer.extend({
   didReceiveAttrs() {
     this._super();
     if (this.column) {
-      let lowerBound = this.column.filters.findBy('key', 'lower_bound');
-      let upperBound = this.column.filters.findBy('key', 'upper_bound');
+      let lowerBound = this.column.filters.find((filter) => filter.key === 'lower_bound');
+      let upperBound = this.column.filters.find((filter) => filter.key === 'upper_bound');
 
       if (!isBlank(lowerBound)) {
         this.setProperties({ lowerBoundFilter: lowerBound.value / 100 });

addon/components/hyper-table/filters-renderers/numeric.js

@@ -22,7 +22,7 @@ export default Component.extend(FiltersRendererMixin, {
   }),
 
   currentExistenceFilter: computed('column.filters.[]', 'lowerBoundFilter', 'upperBoundFilter', function () {
-    let _existenceFilter = this.column.filters.findBy('key', 'existence');
+    let _existenceFilter = this.column.filters.find((filter) => filter.key === 'existence');
 
     if (_existenceFilter) {
       return _existenceFilter.value;
@@ -58,8 +58,8 @@ export default Component.extend(FiltersRendererMixin, {
   didReceiveAttrs() {
     this._super();
     if (this.column) {
-      let lowerBound = this.column.filters.findBy('key', 'lower_bound');
-      let upperBound = this.column.filters.findBy('key', 'upper_bound');
+      let lowerBound = this.column.filters.find((filter) => filter.key === 'lower_bound');
+      let upperBound = this.column.filters.find((filter) => filter.key === 'upper_bound');
 
       this.setProperties({
         lowerBoundFilter: lowerBound?.value,

addon/components/hyper-table/filters-renderers/text.js

@@ -21,7 +21,7 @@ export default Component.extend(FiltersRendererMixin, {
   },
 
   currentExistenceFilter: computed('column.filters.[]', '_searchQuery', function () {
-    let _existenceFilter = this.column.filters.findBy('key', 'existence');
+    let _existenceFilter = this.column.filters.find((filter) => filter.key === 'existence');
 
     if (_existenceFilter) {
       return _existenceFilter.value;
@@ -47,7 +47,7 @@ export default Component.extend(FiltersRendererMixin, {
   init() {
     this._super();
 
-    const searchTerm = this.column.filters.findBy('key', this.searchKey || 'value');
+    const searchTerm = this.column.filters.find((filter) => filter.key === (this.searchKey || 'value'));
     this.set('_searchQuery', searchTerm?.value);
   },
 

addon/components/hyper-table/index.hbs

@@ -118,7 +118,10 @@
                 </p>
               {{/if}}
               {{#each fields as |field|}}
-                <div class="field {{if field.visible 'field--visible'}}" {{on "click" (fn this.fieldVisibilityUpdated field)}}>
+                <div
+                  class="field {{if field.visible 'field--visible'}}"
+                  {{on "click" (fn this.fieldVisibilityUpdated field)}}
+                >
                   <OSS::Checkbox
                     @checked={{field.visible}}
                     @size="sm"

addon/components/hyper-table/index.js

@@ -1,4 +1,3 @@
-import { A } from '@ember/array';
 import Component from '@ember/component';
 import { action, computed, observer, set } from '@ember/object';
 import { alias, and, filterBy } from '@ember/object/computed';
@@ -31,16 +30,20 @@ export default Component.extend({
   _resizeListener: null,
   _scrollListener: null,
 
-  _searchQuery: computed('_columns.firstObject.filters.{[],@each.value}', {
+  _firstColumn: computed('_columns.[]', function () {
+    return this._columns?.[0];
+  }),
+
+  _searchQuery: computed('_firstColumn.filters.{[],@each.value}', {
     get: function () {
       if (isEmpty(this._columns)) return;
 
-      let searchTerm = this._columns.firstObject.filters.findBy('key', 'value');
+      let searchTerm = this._firstColumn.filters.find((filter) => filter.key === 'value');
 
       return searchTerm ? searchTerm.value : null;
     },
     set: function (k, v) {
-      this._columns.firstObject.set('filters', isEmpty(v) ? [] : [{ key: 'value', value: v }]);
+      this._firstColumn.set('filters', isEmpty(v) ? [] : [{ key: 'value', value: v }]);
       debounce(this, this._doSearch, 1000);
       return v;
     }
@@ -56,7 +59,7 @@ export default Component.extend({
   _collection: alias('manager.data'),
   _columns: alias('manager.columns'),
   _fieldCategories: computed('manager.fieldCategories', function () {
-    return this.manager.fieldCategories.sortBy('label');
+    return [...this.manager.fieldCategories].sort((a, b) => compare(a.label, b.label));
   }),
 
   metaObserver: observer('meta.total', function () {
@@ -91,20 +94,17 @@ export default Component.extend({
   _orderedFilteredClusters: computed('manager.fields', '_availableFieldsKeyword', '_activeFieldCategory', function () {
     let _keyword = this._availableFieldsKeyword.toLowerCase();
 
-    let fields = A(
-      this.manager.fields.filter((x) => {
-        const hasKeyword =
-          !this._availableFieldsKeyword ||
-          (x.name || '').toLowerCase().indexOf(_keyword) >= 0 ||
-          (x.title || '').toLowerCase().indexOf(_keyword) >= 0;
-        const hasActiveGroup = !this._activeFieldCategory || x.categories.indexOf(this._activeFieldCategory) >= 0;
-        const isToggleable = x.toggleable === true;
-
-        return hasKeyword && hasActiveGroup && isToggleable;
-      })
-    );
+    let fields = this.manager.fields.filter((x) => {
+      const hasKeyword =
+        !this._availableFieldsKeyword ||
+        (x.name || '').toLowerCase().indexOf(_keyword) >= 0 ||
+        (x.title || '').toLowerCase().indexOf(_keyword) >= 0;
+      const hasActiveGroup = !this._activeFieldCategory || x.categories.indexOf(this._activeFieldCategory) >= 0;
+      const isToggleable = x.toggleable === true;
+
+      return hasKeyword && hasActiveGroup && isToggleable;
+    });
 
-    fields.sortBy('name');
     return this.groupByClusteringKey(fields);
   }),
 
@@ -117,7 +117,7 @@ export default Component.extend({
   _allRowSelectedManager(value) {
     this._setAllRowSelected(value);
 
-    this._collection.setEach('selected', value);
+    this._collection.forEach((item) => set(item, 'selected', value));
 
     this.manager.set('excludedItems', []);
   },
@@ -224,7 +224,11 @@ export default Component.extend({
 
   reorderColumns: action(function (itemModels) {
     let _cs = [this._columns[0]].concat(itemModels);
-    let hasSameOrder = compare(_cs.mapBy('key'), this.manager.columns.mapBy('key')) === 0;
+    let hasSameOrder =
+      compare(
+        _cs.map((column) => column.key),
+        this.manager.columns.map((column) => column.key)
+      ) === 0;
 
     if (!hasSameOrder) {
       this.manager.updateColumns(_cs);
@@ -318,9 +322,9 @@ export default Component.extend({
   }),
 
   resetAllFilters: action(function () {
-    this._columns.setEach('filters', []);
+    this._columns.forEach((column) => set(column, 'filters', []));
     this.manager.resetSelection();
-    this._collection.setEach('selected', false);
+    this._collection.forEach((item) => set(item, 'selected', false));
 
     if (this.manager.hooks.onColumnsChange) {
       this.manager.hooks.onColumnsChange('columns:change');
@@ -340,7 +344,7 @@ export default Component.extend({
   toggleSelectAll: action(function (value) {
     this.manager.set('_selectAllChecked', value);
     if (this.manager._selectAllChecked) {
-      this._collection.setEach('selected', true);
+      this._collection.forEach((item) => set(item, 'selected', true));
       if (this._selectedCount === this.manager.meta.total) {
         this._allRowSelectedManager(true);
       }

addon/components/hyper-table/views.hbs

@@ -65,11 +65,7 @@
     </:content>
     <:footer>
       <div class="fx-row fx-1 fx-malign-end fx-gap-px-10">
-        <OSS::Button
-          @skin="default"
-          @label={{t "hypertable.view.new.cancel"}}
-          {{on "click" this.toggleAddViewModal}}
-        />
+        <OSS::Button @skin="default" @label={{t "hypertable.view.new.cancel"}} {{on "click" this.toggleAddViewModal}} />
         <OSS::Button
           @skin="primary"
           @label={{t "hypertable.view.new.cta"}}

addon/components/hyper-table/views.js

@@ -1,4 +1,4 @@
-import { action } from '@ember/object';
+import { action, set } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { isPresent } from '@ember/utils';
 import Component from '@glimmer/component';
@@ -32,7 +32,11 @@ export default class ViewsComponent extends Component {
   addPredefinedView(view) {
     if (this.args.manager.hooks.onAddView) {
       this.args.manager.hooks.onAddView(view.name, view.table);
-      this.args.manager.predefinedViews.removeObject(view);
+      set(
+        this.args.manager,
+        'predefinedViews',
+        this.args.manager.predefinedViews.filter((predefinedView) => predefinedView !== view)
+      );
       this.selectView(view);
     }
   }

addon/mixins/editable.js

@@ -7,7 +7,7 @@ export default Mixin.create({
   classNameBindings: ['editStatus.status', 'isUpsertable'],
 
   editStatus: computed('manager.{editStatus.[],editStatus.@each.status}', 'element.id', function () {
-    return this.manager.get('editStatus').findBy('id', this.element.id);
+    return this.manager.get('editStatus').find((status) => status.id === this.element.id);
   }),
 
   isSuccess: equal('editStatus.status', 'success'),
@@ -26,19 +26,20 @@ export default Mixin.create({
     }
 
     let editStatus = this.manager.get('editStatus');
-    let elementEditStatus = editStatus.findBy('id', this.element.id);
+    let elementEditStatus = editStatus.find((status) => status.id === this.element.id);
 
     // check if autosave is set to true
     // will initialize the item's edit status
     if (autosave) {
-      this.manager.editStatus.pushObject(
+      this.manager.set('editStatus', [
+        ...this.manager.editStatus,
         EmberObject.create({
           key: this.column.key,
           status: 'editing',
           item: this.item,
           id: this.element.id
         })
-      );
+      ]);
     }
 
     // no editing status -> user hasn't started modification
@@ -62,14 +63,15 @@ export default Mixin.create({
 
     // sets the global editing status to let the table know of any on going editing
     if (!elementEditStatus) {
-      this.manager.editStatus.pushObject(
+      this.manager.set('editStatus', [
+        ...this.manager.editStatus,
         EmberObject.create({
           key: this.column.key,
           status: 'editing',
           item: this.item,
           id: this.element.id
         })
-      );
+      ]);
     } else {
       elementEditStatus.set('status', 'editing');
     }

addon/types/column.js

@@ -40,7 +40,7 @@ export default EmberObject.extend({
   },
 
   applyFacets(key, facets) {
-    this.set('filters', isEmpty(facets) ? [] : [{ key, value: facets.mapBy('identifier').join(',') }]);
+    this.set('filters', isEmpty(facets) ? [] : [{ key, value: facets.map((facet) => facet.identifier).join(',') }]);
     this.manager.hooks.onColumnsChange('columns:change');
   },