[miinhho]

What is this PR for?

Fix the unstyled “Output is truncated” alert and its non-functional close button in the new UI.

The alert HTML generated by the server relies on Bootstrap styles and dismissal behavior, which the new UI does not provide. This PR adds light/dark theme styling and close-button handling for both Angular and React.

What type of PR is it?

Bug Fix

What is the Jira issue?

• https://issues.apache.org/jira/browse/ZEPPELIN-6762

How should this be tested?

Automated tests

• Run the following commands from the repository root:

cd zeppelin-web-angular
npm run test:shell -- src/app/pages/workspace/share/result/result.component.spec.ts --maxWorkers=1
npm --prefix projects/zeppelin-react test -- src/components/renderers/HTMLRenderer.spec.tsx --maxWorkers=1

Manual verification

1. Create a notebook using the sh interpreter and run:

%sh
for i in $(seq 1 20000); do echo "line_$i"; done

2. Verify that the “Output is truncated” alert below the output has a background, border, and close button.
3. Click × and verify that only the alert disappears; the output text should remain.
4. Run the paragraph again. Verify that the alert reappears and can also be dismissed by focusing its close button and pressing Enter.
5. Repeat in both light and dark themes.
6. Open the same paragraph in the React Published view and repeat:

/#/notebook/<noteId>/paragraph/<paragraphId>?react=true

To verify the row-limit alert with a PostgreSQL JDBC interpreter, set zeppelin.jdbc.maxResult to 1000 and run:

%jdbc
SELECT generate_series(1, 2000);

Verify that the row-limit alert following the table is styled correctly and can be dismissed.

Screenshots (if appropriate)

Angular dark theme

Angular light theme

React dark theme

React light theme

Questions:

• Does the license files need to update? No.
• Is there breaking changes for older versions? No.
• Does this needs documentation? No.

[voidmatcha]

Merged into master (9799b26).