From c8cf62954ae5e4d266fe0c8893dc539e878d685a Mon Sep 17 00:00:00 2001
From: Philippe Ndiaye <philippe.ndiaye@upfluence.com>
Date: Thu, 8 Aug 2024 14:58:04 +0200
Subject: [PATCH] fix scroll to end button behaviour

---
 addon/components/hyper-table-v2/index.hbs |  9 +++++----
 addon/components/hyper-table-v2/index.ts  | 10 ++++------
 addon/components/hyper-table/index.hbs    | 15 ++++++++-------
 addon/components/hyper-table/index.js     |  4 ++--
 addon/types/table.js                      |  6 ++++--
 app/styles/hypertable.less                |  3 ++-
 6 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/addon/components/hyper-table-v2/index.hbs b/addon/components/hyper-table-v2/index.hbs
index 5233024d..9644e136 100644
--- a/addon/components/hyper-table-v2/index.hbs
+++ b/addon/components/hyper-table-v2/index.hbs
@@ -1,4 +1,9 @@
 <div class="hypertable-container" ...attributes>
+  {{#unless @handler.communicationError}}
+    <div class="scroll-button-container {{if this.scrollableTable 'is-visible'}}">
+      <OSS::Button @icon="fa fa-chevron-right" class="scroll-button is-visible" {{on "click" this.scrollToEnd}} />
+    </div>
+  {{/unless}}
   <div class="hypertable__upper-header">
     <div class="fx-row">
       <div class="left-side">
@@ -176,10 +181,6 @@
           {{/if}}
         {{/each}}
       </div>
-
-      <div class="scroll-button-container {{if this.scrollableTable 'is-visible'}}">
-        <OSS::Button @icon="fa fa-chevron-right" class="scroll-button is-visible" {{on "click" this.scrollToEnd}} />
-      </div>
     {{/if}}
   </div>
 </div>
\ No newline at end of file
diff --git a/addon/components/hyper-table-v2/index.ts b/addon/components/hyper-table-v2/index.ts
index 6d7842aa..dcaec29d 100644
--- a/addon/components/hyper-table-v2/index.ts
+++ b/addon/components/hyper-table-v2/index.ts
@@ -71,7 +71,7 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
 
   @action
   computeScrollableTable(): void {
-    const table = this.innerTableElement?.querySelector('.hypertable');
+    const table = this.innerTableElement;
 
     if (table) {
       this.scrollableTable = Math.ceil(table.scrollLeft) + table.clientWidth < table.scrollWidth;
@@ -85,10 +85,8 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
   setupInnerTableElement(element: Element): void {
     this.innerTableElement = element;
 
-    const table = element.querySelector('.hypertable');
-
-    if (table) {
-      scheduleOnce('afterRender', this, this._setupInnerTableElement, table);
+    if (element) {
+      scheduleOnce('afterRender', this, this._setupInnerTableElement, this.innerTableElement);
     }
   }
 
@@ -133,7 +131,7 @@ export default class HyperTableV2 extends Component<HyperTableV2Args> {
 
   @action
   scrollToEnd(): void {
-    const table = this.innerTableElement?.querySelector('.hypertable');
+    const table = this.innerTableElement;
 
     if (table) {
       scheduleOnce('afterRender', this, this._scrollToEnd, table);
diff --git a/addon/components/hyper-table/index.hbs b/addon/components/hyper-table/index.hbs
index 9bfea88e..4c97fce5 100644
--- a/addon/components/hyper-table/index.hbs
+++ b/addon/components/hyper-table/index.hbs
@@ -152,6 +152,14 @@
   />
 </div>
 
+<div class="scroll-button-container {{if this.manager.isScrollable 'is-visible'}}">
+  <OSS::Button
+    @label={{t "hypertable.column.scroll_to_end"}}
+    class="scroll-button {{if this.manager.isScrollable 'is-visible'}}"
+    {{action "scrollToEnd"}}
+  />
+</div>
+
 <div class="hypertable__table {{if (eq this._collection.length 0) 'hypertable__table--empty'}}">
   {{#if (and this.manager.tetherInstance this.manager.tetherBackdrop)}}
     <div class="hypertable__backdrop" {{action "onBackdropClick"}}></div>
@@ -289,13 +297,6 @@
     {{/each}}
   </div>
 
-  <div class="scroll-button-container {{if this.manager.isScrollable 'is-visible'}}">
-    <OSS::Button
-      @label={{t "hypertable.column.scroll_to_end"}}
-      class="scroll-button {{if this.manager.isScrollable 'is-visible'}}"
-      {{action "scrollToEnd"}}
-    />
-  </div>
 </div>
 
 {{#if this.footer}}
diff --git a/addon/components/hyper-table/index.js b/addon/components/hyper-table/index.js
index ef6232d4..effce6b1 100644
--- a/addon/components/hyper-table/index.js
+++ b/addon/components/hyper-table/index.js
@@ -173,7 +173,7 @@ export default Component.extend({
 
     // eslint-disable-next-line ember/no-incorrect-calls-with-inline-anonymous-functions
     scheduleOnce('afterRender', this, () => {
-      let table = document.querySelector('.hypertable');
+      let table = document.querySelector('.hypertable__table');
       $(table).scroll(() => {
         if (table.scrollLeft === table.scrollWidth - table.clientWidth) {
           this.manager.set('isScrollable', false);
@@ -250,7 +250,7 @@ export default Component.extend({
     },
 
     scrollToEnd() {
-      this._innerTable.firstElementChild.scrollLeft = this._innerTable.firstElementChild.scrollWidth;
+      this._innerTable.scrollLeft = this._innerTable.scrollWidth;
     },
 
     toggleHover(item, value) {
diff --git a/addon/types/table.js b/addon/types/table.js
index 228aef9f..a7f9391f 100644
--- a/addon/types/table.js
+++ b/addon/types/table.js
@@ -248,8 +248,10 @@ export default EmberObject.extend({
   },
 
   refreshScrollableStatus() {
-    let table = document.querySelector('.hypertable');
-    this.set('isScrollable', table.scrollWidth > table.offsetWidth);
+    const table = document.querySelector('.hypertable__table');
+    if (table) {
+      this.set('isScrollable', table.scrollWidth > table.offsetWidth);
+    }
   },
 
   triggerTetherContainer(on, elementClass, options, backdrop = true, width) {
diff --git a/app/styles/hypertable.less b/app/styles/hypertable.less
index 0e654b53..fdde2d72 100644
--- a/app/styles/hypertable.less
+++ b/app/styles/hypertable.less
@@ -7,6 +7,7 @@
 
 .hypertable-container {
   width: 100%;
+  position: relative;
 }
 
 .hypertable {
@@ -57,7 +58,7 @@
 .scroll-button-container {
   position: absolute;
   right: 13px;
-  top: calc(@cell-height - 13px);
+  top: 124px;
 
   z-index: 19;
   overflow-x: hidden;