chore(deps): upgrade ember-resource and refactor (#543)

addon/components/data-table.hbs

@@ -37,24 +37,24 @@
   ...attributes
 >
 
-  {{#if this.isLoading}}
-    {{yield (hash
-        head=(component "data-table/head" sortedBy=this.sort update=this.updateSort)
-      )
-    }}
-    <tbody data-test-loading>
-      <tr>
-        <td colspan="99" class="uk-padding-large uk-animation-fade uk-text-center">
-          <UkSpinner @ratio="1" />
-        </td>
-      </tr>
-    </tbody>
-  {{else}}
-    {{yield
+{{#if this.data.isRunning}}
+  {{yield (hash
+     head=(component "data-table/head" sortedBy=this.sort update=this.updateSort)
+   )
+  }}
+  <tbody data-test-loading>
+    <tr>
+      <td colspan="99" class="uk-padding-large uk-animation-fade uk-text-center">
+        <UkSpinner @ratio="1" />
+      </td>
+    </tr>
+  </tbody>
+{{else}}
+  {{yield
       (hash
         body=(component "data-table/body" models=this.data.value emptyWarning=@emptyWarning emptyIcon=@emptyIcon emptyIconColor=@emptyIconColor)
         head=(component "data-table/head" sortedBy=this.sort update=this.updateSort)
-        refresh=(perform this.fetchData)
+        refresh=this.triggerRefresh
       )
     }}
     <tfoot>

addon/components/data-table.js

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { task } from "ember-concurrency";
-import { useFunction } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 export default class DataTableComponent extends Component {
   @service store;
@@ -16,14 +16,14 @@ export default class DataTableComponent extends Component {
   @tracked internalSearch;
   @tracked internalPage = 1;
   @tracked internalSort;
+  @tracked dataRefresh = false;
 
-  // While using 'useTask' we ended up in an infinite loop.
-  // data = useTask(this, this.fetchData, () => [this.args.filter]);
-  data = useFunction(this, this.fetchData.perform, () => [
+  data = trackedTask(this, this.fetchData, () => [
     this.args.filter,
     this.search,
     this.sort,
     this.page,
+    this.dataRefresh,
   ]);
 
   get sort() {
@@ -65,10 +65,6 @@ export default class DataTableComponent extends Component {
     }
   }
 
-  get isLoading() {
-    return this.fetchData.isRunning;
-  }
-
   get nextPage() {
     if (this.page < this.numPages) {
       return this.page + 1;
@@ -83,8 +79,15 @@ export default class DataTableComponent extends Component {
     return null;
   }
 
+  @action
+  triggerRefresh() {
+    this.dataRefresh = !this.dataRefresh;
+  }
+
   @task
   *fetchData() {
+    yield Promise.resolve();
+
     assert(
       "Must pass a model name as string",
       typeof this.args.modelName === "string"

addon/components/meta-field.js

@@ -3,7 +3,7 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { task } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 export default class MetaFieldComponent extends Component {
   @service intl;
@@ -28,9 +28,15 @@ export default class MetaFieldComponent extends Component {
     return false;
   }
 
-  visible = useTask(this, this.evalVisible, () => [this.args.field.visible]);
-  readOnly = useTask(this, this.evalReadOnly, () => [this.args.field.readOnly]);
-  options = useTask(this, this.evalOptions, () => [this.args.field.options]);
+  visible = trackedTask(this, this.evalVisible, () => [
+    this.args.field.visible,
+  ]);
+  readOnly = trackedTask(this, this.evalReadOnly, () => [
+    this.args.field.readOnly,
+  ]);
+  options = trackedTask(this, this.evalOptions, () => [
+    this.args.field.options,
+  ]);
 
   @task
   *evalVisible(visible) {

package.json

@@ -55,7 +55,7 @@
     "ember-intl": "^5.7.2",
     "ember-modifier": "^3.2.7",
     "ember-power-select": "^5.0.4",
-    "ember-resources": "^4.9.0",
+    "ember-resources": "^5.2.1",
     "ember-simple-set-helper": "^0.1.2",
     "ember-test-selectors": "^6.0.0",
     "ember-truth-helpers": "^3.0.0",

tests/acceptance/users-test.js

@@ -8,6 +8,7 @@ import {
   settled,
 } from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
+import { timeout } from "ember-concurrency";
 import { setupIntl } from "ember-intl/test-support";
 import { setupApplicationTest } from "ember-qunit";
 import { module, test } from "qunit";
@@ -99,6 +100,9 @@ module("Acceptance | users", function (hooks) {
     await click(
       "[data-test-filters-radio-buttons='active'] [data-test-filters-radio-buttons-button='off']"
     );
+
+    await timeout(100);
+
     assert.dom("[data-test-user-username]").exists({
       count: users.filter((user) => user.isActive === false).length,
     });

tests/integration/components/data-table-test.js

@@ -1,6 +1,7 @@
 import { render, click, fillIn } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { setupMirage } from "ember-cli-mirage/test-support";
+import { timeout } from "ember-concurrency";
 import { setupIntl } from "ember-intl/test-support";
 import { setupRenderingTest } from "ember-qunit";
 import { module, test } from "qunit";
@@ -41,6 +42,8 @@ module("Integration | Component | data-table", function (hooks) {
     assert.dom("thead tr th:first-child").hasText("Heading 1");
     assert.dom("thead tr th:last-child").hasText("Heading 2");
 
+    await timeout(100);
+
     assert.dom("tbody tr").exists({ count: 10 });
     assert
       .dom(`tbody tr td[data-test-role-slug=${role.slug}]`)

yarn.lock

@@ -6664,10 +6664,10 @@ [email protected]:
     ember-cli-version-checker "^5.1.2"
     resolve "^1.20.0"
 
-ember-resources@^4.9.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/ember-resources/-/ember-resources-4.9.0.tgz#477c11f6656cdafb06f1f3ea4b6720fc7cc3bd1c"
-  integrity sha512-pmHK44RMo+DEqmhAYXL1zjqSVzYxl4SlKvggwumpbcWUYrk2s2+AIHJUKSPcIh0L/7GEpvKzn15Tn8IBO13wGQ==
+ember-resources@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/ember-resources/-/ember-resources-5.2.1.tgz#e49fac86fac17e136235319b17d6854794c5463f"
+  integrity sha512-OFKzWluBee7q1gaQSP/iJsLkk5SqCoEA92Q56+GembR1zKITvqINU42r/08W+gKPrbef/JWRwvhkumNjrGAzjg==
   dependencies:
     "@babel/runtime" "^7.17.8"
     "@embroider/addon-shim" "^1.2.0"