From d8470c2612bc9465e18a0358d48ec73a57201c90 Mon Sep 17 00:00:00 2001 From: Olympe Lespagnon Date: Mon, 8 Sep 2025 11:26:14 +0200 Subject: [PATCH 1/6] Handle manage fields box animation to prevent slow IRM --- addon/components/hyper-table-v2/manage-columns.hbs | 2 +- addon/components/hyper-table-v2/manage-columns.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/addon/components/hyper-table-v2/manage-columns.hbs b/addon/components/hyper-table-v2/manage-columns.hbs index 6feb5b55..a9cf90bf 100644 --- a/addon/components/hyper-table-v2/manage-columns.hbs +++ b/addon/components/hyper-table-v2/manage-columns.hbs @@ -4,7 +4,7 @@ @label={{t "hypertable.features.manage_fields.title"}} {{on "click" this.toggleAvailableFields}} /> -
+
{ + this.dropdownVisibility = this.displayAvailableFields ? 'visible' : 'invisible'; + }, 100); } @action From d3e2eae6e9bdd016f74c5edce71411bdf412ebbe Mon Sep 17 00:00:00 2001 From: Olympe Lespagnon Date: Mon, 8 Sep 2025 11:30:11 +0200 Subject: [PATCH 2/6] Update manage-columns tests to handle setTimeOut --- .../components/hyper-table-v2/manage-columns-test.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/tests/integration/components/hyper-table-v2/manage-columns-test.ts b/tests/integration/components/hyper-table-v2/manage-columns-test.ts index d78f5dc8..70372f03 100644 --- a/tests/integration/components/hyper-table-v2/manage-columns-test.ts +++ b/tests/integration/components/hyper-table-v2/manage-columns-test.ts @@ -1,7 +1,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { setupIntl, type TestContext } from 'ember-intl/test-support'; -import { click, fillIn, render } from '@ember/test-helpers'; +import { click, fillIn, render, waitFor } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; import { RowsFetcher, TableManager } from '@upfluence/hypertable/test-support'; import TableHandler from '@upfluence/hypertable/core/handler'; @@ -56,6 +56,8 @@ module('Integration | Component | hyper-table-v2/manage-columns', function (hook test('it renders', async function (assert) { await render(hbs``); + await waitFor('.available-fields-wrapper.invisible'); + assert.dom('.available-fields-wrapper.invisible').exists({ count: 1 }); }); @@ -63,6 +65,7 @@ module('Integration | Component | hyper-table-v2/manage-columns', function (hook test('it should open the available columns', async function (assert) { await render(hbs``); await click('.upf-btn.upf-btn--default'); + await waitFor('.available-fields-wrapper.visible'); assert.dom('.available-fields-wrapper.visible').exists({ count: 1 }); }); From 8e536e4b7388906b04734f8916c3c8f33df4699d Mon Sep 17 00:00:00 2001 From: Olympe Lespagnon Date: Mon, 8 Sep 2025 17:23:57 +0200 Subject: [PATCH 3/6] Add invisible class on close --- addon/components/hyper-table-v2/manage-columns.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/addon/components/hyper-table-v2/manage-columns.ts b/addon/components/hyper-table-v2/manage-columns.ts index 5a97e115..b3529ab3 100644 --- a/addon/components/hyper-table-v2/manage-columns.ts +++ b/addon/components/hyper-table-v2/manage-columns.ts @@ -111,6 +111,7 @@ export default class HyperTableV2ManageColumns extends Component Date: Mon, 8 Sep 2025 17:52:51 +0200 Subject: [PATCH 4/6] Fix --- .../hyper-table-v2/manage-columns.hbs | 122 +++++++++--------- .../hyper-table-v2/manage-columns.ts | 22 ++-- 2 files changed, 73 insertions(+), 71 deletions(-) diff --git a/addon/components/hyper-table-v2/manage-columns.hbs b/addon/components/hyper-table-v2/manage-columns.hbs index a9cf90bf..0f457edc 100644 --- a/addon/components/hyper-table-v2/manage-columns.hbs +++ b/addon/components/hyper-table-v2/manage-columns.hbs @@ -1,76 +1,78 @@ -
+
-
-
-
-
{{t "hypertable.features.manage_fields.all_fields"}}
- -
- {{#each this._columnCategories as |category|}} + {{#if this.displayAvailableFields}} +
+
-
{{category}}
+
{{t "hypertable.features.manage_fields.all_fields"}}
- {{/each}} -
-
-
- + {{#each this._columnCategories as |category|}} +
+
{{category}}
+ +
+ {{/each}}
-
- {{#each-in this.orderedFilteredClusters as |clusterName fields|}} - {{#if clusterName}} -
- {{clusterName}} -
- {{/if}} - {{#each fields as |field|}} -
- {{#if field.isLoading}} -
- {{else}} - - {{/if}} -
- {{field.definition.name}} +
+
+ +
+
+ {{#each-in this.orderedFilteredClusters as |clusterName fields|}} + {{#if clusterName}} +
+ {{clusterName}} +
+ {{/if}} + {{#each fields as |field|}} +
+ {{#if field.isLoading}} +
+ {{else}} + + {{/if}} +
+ {{field.definition.name}} +
+ {{/each}} + {{else}} +
+ {{t "hypertable.features.manage_fields.no_columns"}}
- {{/each}} - {{else}} -
- {{t "hypertable.features.manage_fields.no_columns"}} -
- {{/each-in}} + {{/each-in}} +
-
+ {{/if}}
\ No newline at end of file diff --git a/addon/components/hyper-table-v2/manage-columns.ts b/addon/components/hyper-table-v2/manage-columns.ts index b3529ab3..e8317397 100644 --- a/addon/components/hyper-table-v2/manage-columns.ts +++ b/addon/components/hyper-table-v2/manage-columns.ts @@ -101,17 +101,17 @@ export default class HyperTableV2ManageColumns extends Component { - this.dropdownVisibility = this.displayAvailableFields ? 'visible' : 'invisible'; - }, 100); - } - - @action - closeAvailableFields(): void { - this.displayAvailableFields = false; - this.dropdownVisibility = 'invisible'; + if (this.displayAvailableFields) { + this.dropdownVisibility = 'invisible'; + setTimeout(() => { + this.displayAvailableFields = false; + }, 300); + } else { + this.displayAvailableFields = true; + setTimeout(() => { + this.dropdownVisibility = 'visible'; + }, 10); + } } @action From 3f3f42b8fc10f4b8bfafa1b570c97d90297192e0 Mon Sep 17 00:00:00 2001 From: Olympe Lespagnon Date: Tue, 9 Sep 2025 10:14:52 +0200 Subject: [PATCH 5/6] Use ember.later and ember.next instead of setTimeOut --- .../components/hyper-table-v2/manage-columns.ts | 16 ++++++++++------ .../hyper-table-v2/manage-columns-test.ts | 7 +++---- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/addon/components/hyper-table-v2/manage-columns.ts b/addon/components/hyper-table-v2/manage-columns.ts index e8317397..ecb94d24 100644 --- a/addon/components/hyper-table-v2/manage-columns.ts +++ b/addon/components/hyper-table-v2/manage-columns.ts @@ -6,6 +6,7 @@ import { action } from '@ember/object'; import { isEmpty } from '@ember/utils'; import TableHandler from '@upfluence/hypertable/core/handler'; import { ColumnDefinition } from '@upfluence/hypertable/core/interfaces'; +import { later, next } from '@ember/runloop'; type ManagedColumn = { definition: ColumnDefinition; @@ -98,19 +99,22 @@ export default class HyperTableV2ManageColumns extends Component { - this.displayAvailableFields = false; - }, 300); + later( + this, + () => { + this.displayAvailableFields = false; + }, + 300 + ); } else { this.displayAvailableFields = true; - setTimeout(() => { + next(this, () => { this.dropdownVisibility = 'visible'; - }, 10); + }); } } diff --git a/tests/integration/components/hyper-table-v2/manage-columns-test.ts b/tests/integration/components/hyper-table-v2/manage-columns-test.ts index 70372f03..6042834a 100644 --- a/tests/integration/components/hyper-table-v2/manage-columns-test.ts +++ b/tests/integration/components/hyper-table-v2/manage-columns-test.ts @@ -54,14 +54,13 @@ module('Integration | Component | hyper-table-v2/manage-columns', function (hook await this.handler.fetchColumns(); }); - test('it renders', async function (assert) { + test('fields are not rendered in the DOM initially', async function (assert) { await render(hbs``); - await waitFor('.available-fields-wrapper.invisible'); - assert.dom('.available-fields-wrapper.invisible').exists({ count: 1 }); + assert.dom('.available-fields-wrapper').doesNotExist(); }); - module('when a user clicks on manage column button', function () { + module('when a user clicks on manage column button, it is rendered', function () { test('it should open the available columns', async function (assert) { await render(hbs``); await click('.upf-btn.upf-btn--default'); From bf306445c6262bd1fe48ba1dfde3fbbf49000507 Mon Sep 17 00:00:00 2001 From: Olympe Lespagnon Date: Tue, 9 Sep 2025 14:08:44 +0200 Subject: [PATCH 6/6] Fix click outside --- .../hyper-table-v2/manage-columns.hbs | 2 +- .../hyper-table-v2/manage-columns.ts | 22 ++++++++++++------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/addon/components/hyper-table-v2/manage-columns.hbs b/addon/components/hyper-table-v2/manage-columns.hbs index 0f457edc..a5eede67 100644 --- a/addon/components/hyper-table-v2/manage-columns.hbs +++ b/addon/components/hyper-table-v2/manage-columns.hbs @@ -1,4 +1,4 @@ -
+
{ - this.displayAvailableFields = false; - }, - 300 - ); + this.closeAvailableFields(); } else { this.displayAvailableFields = true; next(this, () => { @@ -118,6 +112,18 @@ export default class HyperTableV2ManageColumns extends Component { + this.displayAvailableFields = false; + }, + 300 + ); + } + @action onSearchUpdate(value: string): void { this.searchColumnDefinitionKeyword = value;