add code highlighting, ANSI support, and improve E2E tests

Author: dididy

zeppelin-web-angular/e2e/models/published-paragraph-page.ts

@@ -15,14 +15,12 @@ import { navigateToNotebookWithFallback } from '../utils';
 import { BasePage } from './base-page';
 
 export class PublishedParagraphPage extends BasePage {
-  readonly paragraphResult: Locator;
-  readonly errorModalContent: Locator;
-  readonly errorModalOkButton: Locator;
+  private readonly errorModalContent: Locator;
+  private readonly errorModalOkButton: Locator;
   readonly confirmationModal: Locator;
 
   constructor(page: Page) {
     super(page);
-    this.paragraphResult = page.locator('zeppelin-notebook-paragraph-result');
     this.errorModalContent = this.page.locator('.ant-modal-body', { hasText: 'Paragraph Not Found' }).last();
     this.errorModalOkButton = page.getByRole('button', { name: 'OK' }).last();
     this.confirmationModal = page.locator('div.ant-modal-confirm').last();

zeppelin-web-angular/e2e/tests/notebook/published/published-paragraph.spec.ts

@@ -0,0 +1,2 @@
+dist
+node_modules

zeppelin-web-angular/projects/zeppelin-react/.gitignore

@@ -10,6 +10,7 @@
     "@ant-design/icons": "5.4.0",
     "@antv/g2plot": "2.4.35",
     "@zeppelin/sdk": "file:../zeppelin-sdk",
+    "ansi-to-react": "6.2.6",
     "antd": "5.21.0",
     "file-saver": "2.0.5",
     "react": "18.3.1",

zeppelin-web-angular/projects/zeppelin-react/package-lock.json

@@ -13,12 +13,5 @@
 import { Alert } from 'antd';
 
 export const Empty = () => {
-  return (
-    <Alert
-      message="No Data"
-      description="No paragraph data found"
-      type="warning"
-      showIcon
-    />
-  );
-};
+  return <Alert message="No Data" description="No paragraph data found" type="warning" showIcon />;
+};

zeppelin-web-angular/projects/zeppelin-react/package.json

@@ -21,4 +21,4 @@ export const Loading = () => {
       </Typography.Title>
     </div>
   );
-};
+};

zeppelin-web-angular/projects/zeppelin-react/src/components/common/Empty.tsx

@@ -11,7 +11,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-// Added styles for tables rendered as HTML from app/pages/workspace/share/result/result.component.ts
+import hljs from 'highlight.js';
 import './HTMLRenderer.css';
 
 interface HTMLRendererProps {
@@ -29,6 +29,12 @@ export const HTMLRenderer = ({ html }: HTMLRendererProps) => {
       // to the DOM to execute them.
       container.innerHTML = html;
 
+      // Highlight code blocks (matches Angular: result.component.ts renderHTML)
+      const codeEle = container.querySelector('pre code');
+      if (codeEle) {
+        hljs.highlightBlock(codeEle as HTMLElement);
+      }
+
       const scripts = Array.from(container.querySelectorAll('script'));
 
       scripts.forEach(script => {
@@ -51,4 +57,4 @@ export const HTMLRenderer = ({ html }: HTMLRendererProps) => {
   }, [html]);
 
   return <div ref={containerRef} className="inner-html" />;
-};
+};

zeppelin-web-angular/projects/zeppelin-react/src/components/common/Loading.tsx

@@ -20,4 +20,4 @@ export const ImageRenderer = ({ imageData }: ImageRendererProps) => {
   return (
     <img src={imgSrc} alt="Result" style={{ maxWidth: '100%', height: 'auto' }} />
   );
-};
+};

zeppelin-web-angular/projects/zeppelin-react/src/components/renderers/HTMLRenderer.tsx

@@ -10,16 +10,17 @@
  * limitations under the License.
  */
 
-import { Typography } from 'antd';
+import Ansi from 'ansi-to-react';
 
 export interface TextRendererProps {
   text: string;
 }
 
+// Matches Angular: result.component.ts renderText()
 export const TextRenderer = ({ text }: TextRendererProps) => {
   return (
-    <Typography.Text style={{ whiteSpace: 'pre-wrap' }}>
-      {text}
-    </Typography.Text>
+    <pre style={{ whiteSpace: 'pre-wrap', margin: 0 }}>
+      <Ansi>{text}</Ansi>
+    </pre>
   );
-};
+};