[Breaking] Upgrade support for Ember 6

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: 20
+  NODE_VERSION: ${{ vars.NODE_VERSION }}
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
 
@@ -48,8 +48,6 @@ jobs:
         include:
           - name: current
             command: pnpm test:ember
-          - name: next
-            command: pnpm ember try:one ember-4.12
     steps:
       - uses: webfactory/ssh-agent@v0.5.0
         with:
@@ -95,6 +93,7 @@ jobs:
         id: pkg_version
         run: echo ::set-output name=VERSION::${GITHUB_REF#refs/tags/v}
       - name: Trigger upfluence-web/deploy
+        if: ${{ !contains(github.ref, '-') }}
         uses: benc-uk/workflow-dispatch@v1
         with:
           repo: upfluence/upfluence-web

.github/workflows/sonarqube-sync.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - master
 env:
-  NODE_VERSION: '20'
+  NODE_VERSION: ${{ vars.NODE_VERSION }}
   GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }}
   FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
 

README.md

@@ -1,4 +1,15 @@
-# Hypertable
+<div align="center">
+  <img src=".github/assets/logo.svg" width="96" height="96" alt="">
+  <h1>@upfluence/hypertable</h1>
+  <p>Ember.js library to simplify the creation and management of complex data tables.</p>
+
+[![ci](https://github.com/upfluence/hypertable/actions/workflows/ci.yml/badge.svg)](https://github.com/upfluence/hypertable/actions/workflows/ci.yml)
+[![Coverage](https://sonarqube.upfluence.co/api/project_badges/measure?project=hypertable&metric=coverage&token=sqb_670d7e3c30119fb218ef8811f41648ba81213618)](https://sonarqube.upfluence.co/dashboard?id=hypertable)
+[![Maintainability Rating](https://sonarqube.upfluence.co/api/project_badges/measure?project=hypertable&metric=sqale_rating&token=sqb_670d7e3c30119fb218ef8811f41648ba81213618)](https://sonarqube.upfluence.co/dashboard?id=hypertable)
+[![Quality Gate Status](https://sonarqube.upfluence.co/api/project_badges/measure?project=hypertable&metric=alert_status&token=sqb_670d7e3c30119fb218ef8811f41648ba81213618)](https://sonarqube.upfluence.co/dashboard?id=hypertable)
+[![Code Smells](https://sonarqube.upfluence.co/api/project_badges/measure?project=hypertable&metric=code_smells&token=sqb_670d7e3c30119fb218ef8811f41648ba81213618)](https://sonarqube.upfluence.co/dashboard?id=hypertable)
+
+</div>
 
 To follow the early life of this project, see
 [oss-components#pn-flexbox-tables](https://github.com/upfluence/oss-components/pull/54/files)
@@ -23,14 +34,18 @@ The goal is to provide a consistent and maintainable way to build tables across
 
 ## Compatibility
 
-- Ember.js v3.24 or above
-- Ember CLI v3.24 or above
-- Node.js v12 or above
+- Ember.js v6.12 or above
+- Node.js v24 or above
+- pnpm 10
+
+Required peer dependency: `ember-source` `^6.12.0`.
+
+Apps on Ember.js below 6.12 should stay on `3.x`.
 
 ## Installation
 
 ```
-pnpm install @upfluence/hypertable
+pnpm add @upfluence/hypertable
 ```
 
 Additionally, the following registry should be added to the `.npmrc` file:
@@ -627,7 +642,7 @@ this.handler.on('columns-loaded', () => {
 
 - `git clone <repository-url>`
 - `cd hypertable`
-- `pnpm install`
+- `make install`
 
 ### Linting
 
@@ -637,17 +652,15 @@ this.handler.on('columns-loaded', () => {
 
 ### Running tests
 
-- `ember test` – Runs the test suite on the current Ember version
-- `ember test --server` – Runs the test suite in "watch mode"
-- `ember try:each` – Runs the test suite against multiple Ember versions
+- `pnpm test:ember` – Runs the test suite on the current Ember version
+- `make testserver` – Runs the test suite in "watch mode"
+- `pnpm test:ember-compatibility` – Runs the test suite against multiple Ember versions
 
 ### Running the dummy application
 
-- `ember serve`
+- `pnpm start`
 - Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
-See the [Contributing](CONTRIBUTING.md) guide for details.
-
 ### License
 
 This project is licensed under the [MIT License](LICENSE.md).

addon/components/hyper-table-v2/filtering-renderers/common/existence.ts

@@ -1,5 +1,5 @@
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 

addon/components/hyper-table-v2/filtering-renderers/common/facets-loader.ts

@@ -1,6 +1,6 @@
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { isEmpty } from '@ember/utils';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';

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-v2/search.ts

@@ -1,6 +1,6 @@
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 

addon/components/hyper-table-v2/summary.ts

@@ -1,5 +1,5 @@
 import { assert } from '@ember/debug';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
 import type { IntlService } from 'ember-intl';

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

@@ -16,6 +16,6 @@
     @square={{true}}
     class={{if this.isCopied "success-tooltip"}}
     {{enable-tooltip title=(if this.isCopied "Copied" "Copy") placement="top"}}
-    {{action "copy" bubbles=false}}
+    {{on "click" this.copy}}
   />
 {{/if}}

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

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 
 import CellRendererMixin from '@upfluence/hypertable/mixins/cell-renderer';
@@ -10,13 +11,13 @@ export default Component.extend(CellRendererMixin, {
     this.set('isCopied', false);
   },
 
-  actions: {
-    copy() {
-      this.set('isCopied', true);
+  copy: action(function (event) {
+    event.stopPropagation();
 
-      navigator.clipboard.writeText(this.value);
+    this.set('isCopied', true);
 
-      debounce(this, this.endCopy, 2500);
-    }
-  }
+    navigator.clipboard.writeText(this.value);
+
+    debounce(this, this.endCopy, 2500);
+  })
 });

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

@@ -1,18 +1,18 @@
 {{#if this.emptyValue}}
   —
 {{else}}
-  <div class="list-container" {{action "toggleList" bubbles=false}}>
-    {{#if this.value.firstObject.name}}
+  <div class="list-container" {{on "click" this.toggleList}}>
+    {{#if this.firstItem.name}}
       <div>
-        {{this.value.firstObject.name}}
+        {{this.firstItem.name}}
       </div>
       {{#if (eq this.manager.tetherOn this.elementId)}}
         <div class="expandable-list">
           {{#each this.value as |item|}}
             <div
               class="expandable-list__item
                 {{if item.locked 'expandable-list__item-disabled '}}fx-row fx-xalign-center fx-gap-px-6"
-              {{on "click" (action "goToUrl" (concat this.url item.id) item.locked bubbles=false)}}
+              {{on "click" (fn this.goToUrl (concat this.url item.id) item.locked)}}
             >
               {{item.name}}
               {{#if item.locked}}

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

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 
 import CellRendererMixin from '@upfluence/hypertable/mixins/cell-renderer';
 
@@ -10,46 +10,50 @@ 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>');
   }),
 
-  actions: {
-    goToUrl(url, locked, event) {
-      if (!this.url || locked) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-
-      window.open(url, '_blank');
-    },
-
-    toggleList() {
-      if (this.manager.tetherOn !== this.elementId) {
-        this.manager.destroyTetherInstance();
-      }
-
-      this.manager.triggerTetherContainer(
-        this.elementId,
-        'expandable-list',
-        {
-          element: `#${this.elementId} .expandable-list`,
-          target: `#${this.elementId} .list-container`,
-          attachment: 'top center',
-          targetAttachment: 'bottom center',
-          constraints: [
-            {
-              to: 'scrollParent'
-            }
-          ]
-        },
-        false,
-        document.querySelector(`#${this.elementId} .list-container`).offsetWidth
-      );
+  goToUrl: action(function (url, locked, event) {
+    if (!this.url || locked) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    window.open(url, '_blank');
+  }),
+
+  toggleList: action(function (event) {
+    event.stopPropagation();
+
+    if (this.manager.tetherOn !== this.elementId) {
+      this.manager.destroyTetherInstance();
     }
-  }
+
+    this.manager.triggerTetherContainer(
+      this.elementId,
+      'expandable-list',
+      {
+        element: `#${this.elementId} .expandable-list`,
+        target: `#${this.elementId} .list-container`,
+        attachment: 'top center',
+        targetAttachment: 'bottom center',
+        constraints: [
+          {
+            to: 'scrollParent'
+          }
+        ]
+      },
+      false,
+      document.querySelector(`#${this.elementId} .list-container`).offsetWidth
+    );
+  })
 });

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

@@ -1,6 +1,6 @@
 {{#if (and this.emptyValue (or (not this.editStatus.status) this.isSuccess))}}
   {{#if this.isUpsertable}}
-    <span {{action "toggleEditing"}}>
+    <span {{on "click" this.startEditing}}>
       {{or this.column.field.emptyPlaceholder "Add value"}}
     </span>
   {{else}}
@@ -12,11 +12,11 @@
       <div class={{if this.isError "is-invalid"}}>
         <Input
           @type="number"
-          @insert-newline={{action "toggleEditing" this.editableValue}}
+          @insert-newline={{fn this.toggleEditing this.editableValue}}
           @value={{this.value}}
           aria-label={{or this.column.field.name "Value"}}
           class="editing-input__field form-control"
-          {{on "focusout" (action "toggleEditing" this.editableValue)}}
+          {{on "focusout" (fn this.toggleEditing this.editableValue)}}
         />
       </div>
     {{else}}
@@ -33,10 +33,10 @@
     {{#if this.isSaving}}
       <LoadingState />
     {{else if this.isSuccess}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
       <OSS::Icon @icon="fa-check" class="font-size-lg font-color-success-500" />
     {{else if (not this.editStatus.status)}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
     {{/if}}
   </div>
 {{/if}}

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

@@ -1,5 +1,5 @@
 {{#if this.isUpsertable}}
-  <span {{action "toggleEditing"}}>
+  <span {{on "click" this.startEditing}}>
     {{or this.column.field.emptyPlaceholder "Add value"}}
   </span>
 {{else}}
@@ -14,10 +14,10 @@
       <Input
         @type="text"
         @value={{this.editableValue}}
-        @insert-newline={{action "toggleEditing" this.editableValue}}
+        @insert-newline={{fn this.toggleEditing this.editableValue}}
         aria-label={{or this.column.field.name "Value"}}
         class="editing-input__field form-control upf-input"
-        {{on "focusout" (action "toggleEditing" this.editableValue)}}
+        {{on "focusout" (fn this.toggleEditing this.editableValue)}}
       />
     </div>
     <div class="text-value" {{enable-tooltip title=this.editableValue placement="bottom"}}>
@@ -31,10 +31,10 @@
     {{#if this.isSaving}}
       <LoadingState />
     {{else if this.isSuccess}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
       <OSS::Icon @icon="fa-check" class="font-size-lg font-color-success-500" />
     {{else if (not this.editStatus.status)}}
-      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{action "toggleEditing"}} />
+      <OSS::Icon @icon="fa-pencil" class="cell-edition delayed" {{on "click" this.startEditing}} />
     {{/if}}
   </div>
 {{/if}}