From de406a7e713a5c6ad304c041f7d9b9d5f458af8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?YONGJAE=20LEE=28=EC=9D=B4=EC=9A=A9=EC=9E=AC=29?=
 <dev.yongjaelee@gmail.com>
Date: Wed, 16 Oct 2024 13:04:43 +0900
Subject: [PATCH] [ZEPPELIN-6097] Suppress duplicated error popup and fix
 broken CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What is this PR for?

If I broke notebook's(*.zepl) JSON structure I can get error message like below.

![image-2024-09-22-16-53-49-273](https://github.com/user-attachments/assets/24386e66-84f6-4902-b9d2-101af656f3e3)

There are two kind of problems.

1. Same error message shows twice.
2. Word break CSS style is not applied yet so it looks quite weird.

So I fixed it correct way.

[How to solve]
1. Check [/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts](https://github.com/apache/zeppelin/blob/bdf5b067b6bdde2614b98a6a3f6a7b5d6637e57c/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts) file and found [L392](https://github.com/apache/zeppelin/blob/bdf5b067b6bdde2614b98a6a3f6a7b5d6637e57c/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts#L392), [L396](https://github.com/apache/zeppelin/blob/bdf5b067b6bdde2614b98a6a3f6a7b5d6637e57c/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.ts#L396) causing same error([ERROR_INFO](https://github.com/apache/zeppelin/blob/bdf5b067b6bdde2614b98a6a3f6a7b5d6637e57c/zeppelin-server/src/main/java/org/apache/zeppelin/socket/NotebookServer.java#L2294-L2310)) at the same time.
2. So I just handle it with [/zeppelin-web-angular/src/app/app-message.interceptor.ts](https://github.com/apache/zeppelin/blob/bdf5b067b6bdde2614b98a6a3f6a7b5d6637e57c/zeppelin-web-angular/src/app/app-message.interceptor.ts) this file to this https://github.com/apache/zeppelin/pull/4872/commits/67bec5c3415b9fa6d23f842a61d2ee0a5f139dac
3. I just added `word-wrap` and `word-break` options to `nzNotificationService.warning` function's third parameter for correct style issue https://github.com/apache/zeppelin/pull/4872/commits/d0e73057c9ee76a9af8b4caf53e68bb240d00328

### What type of PR is it?
Bug Fix

### Todos

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

### How should this be tested?

<img width="1624" alt="스크린샷 2024-10-14 오후 10 26 25" src="https://github.com/user-attachments/assets/56cf3ae1-9eb6-4720-b6cc-9ef6a5ec5840">
1. Broke .zepl extension file's JSON structure like above screenshot.

<img width="1378" alt="스크린샷 2024-10-14 오후 11 07 55" src="https://github.com/user-attachments/assets/05a15473-a9dc-426c-ae1e-a437ee3b4036">
2. Check it on webpage with browser console.

<img width="1624" alt="스크린샷 2024-10-14 오후 11 11 15" src="https://github.com/user-attachments/assets/b9ec4f52-5857-416b-91b1-8af48d38ef14">
3. If error message look so long you can change `nzNotificationService.warning` function's second parameter.

<img width="1277" alt="스크린샷 2024-10-14 오후 11 13 11" src="https://github.com/user-attachments/assets/6bdbdeca-aa14-4ac2-becb-b4fb11425b6c">
4. Check error message still appear twice.

### Screenshots (if appropriate)

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


Closes #4872 from dididy/master.

Signed-off-by: Cheng Pan <chengpan@apache.org>
---
 .../src/app/app-message.interceptor.ts          | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/zeppelin-web-angular/src/app/app-message.interceptor.ts b/zeppelin-web-angular/src/app/app-message.interceptor.ts
index 02fdf962c6c..d2be729277b 100644
--- a/zeppelin-web-angular/src/app/app-message.interceptor.ts
+++ b/zeppelin-web-angular/src/app/app-message.interceptor.ts
@@ -26,7 +26,8 @@ export class AppMessageInterceptor implements MessageInterceptor {
     private router: Router,
     private nzNotificationService: NzNotificationService,
     private ticketService: TicketService,
-    private nzModalService: NzModalService
+    private nzModalService: NzModalService,
+    private prevErrorInfo: string
   ) {}
 
   received<T extends keyof MessageReceiveDataTypeMap>(data: WebSocketMessage<T>): WebSocketMessage<T> {
@@ -60,8 +61,18 @@ export class AppMessageInterceptor implements MessageInterceptor {
     } else if (data.op === OP.ERROR_INFO) {
       // tslint:disable-next-line:no-any
       const rData = (data.data as any) as MessageReceiveDataTypeMap[OP.ERROR_INFO];
-      if (rData.info) {
-        this.nzNotificationService.warning('ERROR', rData.info);
+      const isDuplicateError = this.prevErrorInfo === rData.info;
+
+      if (!isDuplicateError && rData.info) {
+        this.nzNotificationService.warning('ERROR', rData.info, {
+          nzStyle: { wordWrap: 'break-word', wordBreak: 'break-all' }
+        });
+        this.prevErrorInfo = rData.info;
+      }
+      if (isDuplicateError) {
+        setTimeout(() => {
+          this.prevErrorInfo = null;
+        }, 500);
       }
     }
     return data;