Feat best error view

lib/static/new-ui/components/ErrorInfo/index.module.css

@@ -6,6 +6,36 @@
     overflow-x: scroll;
     overflow-y: hidden;
     background: #101827;
+}
+
+.break-lines {
+    white-space: break-spaces;
+    word-wrap: break-word;
+}
+
+.container {
+    position: relative;
+    background: #101827;
     border-radius: 10px;
     padding: 12px;
+
+    &:hover {
+        .buttons {
+            opacity: 1;
+        }
+    }
+}
+
+.buttons {
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    display: flex;
+    gap: 8px;
+}
+
+.button {
+    background: #fff;
 }

lib/static/new-ui/components/ErrorInfo/index.tsx

@@ -1,10 +1,12 @@
 import ansiHtml from 'ansi-html-community';
 import classNames from 'classnames';
 import escapeHtml from 'escape-html';
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useMemo, useState} from 'react';
+import {ClipboardButton, Button} from '@gravity-ui/uikit';
 
 import styles from './index.module.css';
 import stringify from 'json-stringify-safe';
+import WordWrapIcon from '@/static/icons/word-wrap-icon.svg';
 
 interface ErrorInfoProps {
     name: unknown;
@@ -14,6 +16,8 @@ interface ErrorInfoProps {
 }
 
 export function ErrorInfo(props: ErrorInfoProps): ReactNode {
+    const [breakLines, setBreakLines] = useState(false);
+
     ansiHtml.setColors({
         reset: ['eee', '00000000']
     });
@@ -27,6 +31,26 @@ export function ErrorInfo(props: ErrorInfoProps): ReactNode {
             errorName = String(errorName);
         }
     }
+    const errorText = useMemo(() => (
+        escapeHtml(errorName + '\n' + props.stack)
+    ), [errorName, props.stack]);
 
-    return <div className={classNames(styles.code, props.className)} style={props.style} dangerouslySetInnerHTML={{__html: ansiHtml(escapeHtml(errorName + '\n' + props.stack))}}></div>;
+    return (
+        <div className={classNames(styles.container, props.className)} style={props.style}>
+            <div className={styles.buttons}>
+                <ClipboardButton className={styles.button} text={errorText} hasTooltip={false} />
+                <Button
+                    className={styles.button}
+                    view="flat"
+                    size="m"
+                    onClick={(): void => setBreakLines(!breakLines)}
+                >
+                    <Button.Icon>
+                        <img src={WordWrapIcon} width={16} height={16} alt=""/>
+                    </Button.Icon>
+                </Button>
+            </div>
+            <div className={classNames(styles.code, {[styles.breakLines]: breakLines})} dangerouslySetInnerHTML={{__html: ansiHtml(errorText)}} />
+        </div>
+    );
 }