From 72a3fd32a3e0cf7fd6c6ce5f7fb929098424e931 Mon Sep 17 00:00:00 2001
From: cherrie-k <80851202+cherrie-k@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:55:57 +0900
Subject: [PATCH] [ZEPPELIN-6054] Eliminate no-invalid-this warnings

### What is this PR for?
This PR aims to refactor several parts of the Zeppelin project codebase to eliminate no-invalid-this warnings reported by ESLint. These warnings indicate that the this keyword is being used in ways that might lead to unexpected behavior or bugs, particularly within nested callbacks or when this loses its intended context. By addressing these warnings, we improve the stability, readability, and maintainability of the codebase.

**Note on `note-action.service.js`**:
Initially, I aimed to refactor `note-action.service.js` to eliminate ESLint warnings. However, during testing, it was found that the note actions on the default page were not displaying correctly after the changes. To ensure the stability of the project, I have reverted the changes made to `note-action.service.js`. I plan to revisit this refactor to address the ESLint warnings while ensuring no issues arise in the build process.

### What type of PR is it?
Refactoring

### Todos
* [x] - Resolve ESLint warnings of files in zeppelin-web/src/app
* [ ] - Resolve ESLint warnings of files in zeppelin-web/src/components
* [x] - Check if project compiles successfully

### What is the Jira issue?
[ZEPPELIN-6054](https://issues.apache.org/jira/browse/ZEPPELIN-6054)

### How should this be tested?
* CI
* Build and run

### Screenshots (if appropriate)
*Current Warnings*:
<img width="1102" alt="image" src="https://github.com/user-attachments/assets/4a928656-ec97-4553-a12c-2cd0fbd46350">


### Questions:
* Does the license files need to update? - No
* Is there breaking changes for older versions? - No
* Does this needs documentation? - No


Closes #4788 from cherrie-k/fix/minor-warnings.

Signed-off-by: Cheng Pan <chengpan@apache.org>
---
 .../builtins/visualization-d3network.js              | 12 +++++++-----
 .../visualization/builtins/visualization-table.js    | 11 +++++------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js b/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
index 749e4344dca..2621413eeef 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-d3network.js
@@ -164,25 +164,27 @@ export default class NetworkVisualization extends Visualization {
         .append(html.join(''));
     };
 
+    let clickedOnDOMElement;
     const drag = d3.behavior.drag()
       .origin((d) => d)
-      .on('dragstart', function(d) {
+      .on('dragstart', (d) => {
         console.log('dragstart');
         d3.event.sourceEvent.stopPropagation();
-        d3.select(this).classed('dragging', true);
+        clickedOnDOMElement = d3.event.sourceEvent.target;
+        d3.select(clickedOnDOMElement).classed('dragging', true);
         self.force.stop();
       })
-      .on('drag', function(d) {
+      .on('drag', (d) => {
         console.log('drag');
         d.px += d3.event.dx;
         d.py += d3.event.dy;
         d.x += d3.event.dx;
         d.y += d3.event.dy;
       })
-      .on('dragend', function(d) {
+      .on('dragend', (d) => {
         console.log('dragend');
         d.fixed = true;
-        d3.select(this).classed('dragging', false);
+        d3.select(clickedOnDOMElement).classed('dragging', false);
         self.force.resume();
       });
 
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-table.js b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
index a3243abc5ff..3b1870227fa 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-table.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
@@ -364,14 +364,13 @@ export default class TableVisualization extends Visualization {
       gridApi.colResizable.on.columnSizeChanged(scope, () => {
         self.persistConfigWithGridState(self.config);
       });
-      gridApi.edit.on.beginCellEdit(scope, function(rowEntity, colDef, triggerEvent) {
+      gridApi.edit.on.beginCellEdit(scope, (rowEntity, colDef, triggerEvent) => {
         let textArea = triggerEvent.currentTarget.children[1].children[0].children[0];
         textArea.style.height = textArea.scrollHeight + 'px';
-        textArea.addEventListener('keydown', function() {
-          let elem = this;
-          setTimeout(function() {
-            elem.style.height = 'auto';
-            elem.style.height = elem.scrollHeight + 'px';
+        textArea.addEventListener('keydown', () => {
+          setTimeout(() => {
+            textArea.style.height = 'auto';
+            textArea.style.height = textArea.scrollHeight + 'px';
           });
         }, 0);
       });