From 7b4cc29226e027064cdb4c5754db1a86511a9759 Mon Sep 17 00:00:00 2001
From: simbiozizv <simbioziz@gmail.com>
Date: Tue, 19 Mar 2024 11:44:10 +0300
Subject: [PATCH] feat(Query): new query error component [YTFRONT-4000]

---
 .../QueryResults/ErrorTree/ErrorTree.tsx      | 18 +++-
 .../QueryResults/ErrorTree/ErrorTreeNode.scss |  9 +-
 .../QueryResults/ErrorTree/ErrorTreeNode.tsx  | 86 ++++++++++++-------
 .../query-tracker/QueryResults/index.tsx      |  6 +-
 4 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx
index f3b07d72a..19c66a2b0 100644
--- a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx
+++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx
@@ -1,8 +1,10 @@
-import React, {FC, useCallback} from 'react';
+import React, {FC, useCallback, useMemo} from 'react';
 import {ErrorPosition, QueryError} from '../../module/api';
 import {ErrorTreeNode} from './ErrorTreeNode';
 import {useMonaco} from '../../hooks/useMonaco';
 import {Position} from 'monaco-editor';
+import ClipboardButton from '../../../../components/ClipboardButton/ClipboardButton';
+import {Text} from '@gravity-ui/uikit';
 
 type Props = {
     rootError?: QueryError;
@@ -21,7 +23,17 @@ export const ErrorTree: FC<Props> = ({rootError}) => {
         [getEditor],
     );
 
-    if (!rootError) return undefined;
+    const text = useMemo(() => {
+        return JSON.stringify(rootError, null, 4);
+    }, [rootError]);
 
-    return <ErrorTreeNode error={rootError} onErrorClick={handleErrorClick} expanded />;
+    if (!rootError) return null;
+
+    return (
+        <div>
+            <Text variant="subheader-3">Query error</Text>{' '}
+            <ClipboardButton title="Copy error" view="flat-secondary" text={text} size="l" />
+            <ErrorTreeNode error={rootError} onErrorClick={handleErrorClick} expanded />
+        </div>
+    );
 };
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss
index d7c411c53..d0ca8e112 100644
--- a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss
+++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss
@@ -4,14 +4,17 @@
     }
 
     &__errors {
-        padding-left: 24px;
+        padding-left: 28px;
+    }
+
+    &__error-body {
+        margin: 0 0 10px;
+        padding: 0 10px 0 0;
     }
 
     &__line {
         display: flex;
         align-items: flex-start;
-        margin: 0 0 10px;
-        padding: 0 10px 0 0;
     }
 
     &__place-text {
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx
index 74f1c79bd..85c8cd0ec 100644
--- a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx
+++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx
@@ -10,6 +10,10 @@ import {CollapsedString} from './CollapsedString';
 import errorIcon from '@gravity-ui/icons/svgs/triangle-exclamation-fill.svg';
 import './ErrorTreeNode.scss';
 import {ExpandButton} from '../../../../components/ExpandButton';
+import ChevronUpIcon from '@gravity-ui/icons/svgs/chevron-up.svg';
+import ChevronDownIcon from '@gravity-ui/icons/svgs/chevron-down.svg';
+import unipika from '../../../../common/thor/unipika';
+import Yson from '../../../../components/Yson/Yson';
 
 const block = cn('yt-error-tree-node');
 
@@ -32,7 +36,8 @@ export const ErrorTreeNode: FC<Props> = ({
     onErrorClick,
     onShowParent,
 }) => {
-    const [expandedIssue, toggleExpanded] = useToggle(expanded);
+    const [expandedError, toggleExpandedError] = useToggle(expanded);
+    const [expandedAttributes, toggleExpandedAttributes] = useToggle(false);
     const hasIssues = error.inner_errors && error.inner_errors.length > 0;
     const position = getIssuePosition(error);
 
@@ -44,43 +49,62 @@ export const ErrorTreeNode: FC<Props> = ({
 
     return (
         <div className={block({leaf: !hasIssues})}>
-            <div className={block('line')}>
-                {hasIssues && (
-                    <ExpandButton expanded={expandedIssue} toggleExpanded={toggleExpanded} />
-                )}
-                {fromCloud && (
-                    <Button view="flat-secondary" title="Show parent" onClick={onShowParent}>
-                        <Icon data={showParentIcon} size={16} />
-                    </Button>
-                )}
-                <span className={block('header')}>
-                    <Icon className={block('icon')} data={errorIcon} size={16} />
-                    <span className={block('title')}>Error</span>
-                </span>
-                {position ? (
-                    <Link view="primary" className={block('message')} onClick={handleIssueClick}>
-                        <span className={block('place-text')} title="Position">
-                            {position}
-                        </span>
-                        <div className={block('message-text')}>
-                            <CollapsedString value={error.message} />
-                        </div>
-                    </Link>
-                ) : (
-                    <span className={block('message')}>
-                        <div className={block('message-text')}>
-                            <CollapsedString value={error.message} />
-                        </div>
+            <div className={block('error-body')}>
+                <div className={block('line')}>
+                    {hasIssues && (
+                        <ExpandButton
+                            expanded={expandedError}
+                            toggleExpanded={toggleExpandedError}
+                        />
+                    )}
+                    {fromCloud && (
+                        <Button view="flat-secondary" title="Show parent" onClick={onShowParent}>
+                            <Icon data={showParentIcon} size={16} />
+                        </Button>
+                    )}
+                    <span className={block('header')}>
+                        <Icon className={block('icon')} data={errorIcon} size={16} />
+                        <span className={block('title')}>Error</span>
+                        <Button view="flat-secondary" onClick={toggleExpandedAttributes}>
+                            Attributes{' '}
+                            <Icon
+                                data={expandedAttributes ? ChevronUpIcon : ChevronDownIcon}
+                                size={16}
+                            />
+                        </Button>
                     </span>
+                    {position ? (
+                        <Link
+                            view="primary"
+                            className={block('message')}
+                            onClick={handleIssueClick}
+                        >
+                            <span className={block('place-text')} title="Position">
+                                {position}
+                            </span>
+                            <div className={block('message-text')}>
+                                <CollapsedString value={error.message} />
+                            </div>
+                        </Link>
+                    ) : (
+                        <span className={block('message')}>
+                            <div className={block('message-text')}>
+                                <CollapsedString value={error.message} />
+                            </div>
+                        </span>
+                    )}
+                    {error.code ? <span className={block('code')}>Code: {error.code}</span> : null}
+                </div>
+                {expandedAttributes && (
+                    <Yson value={error.attributes} settings={unipika.prepareSettings({})} />
                 )}
-                {error.code ? <span className={block('code')}>Code: {error.code}</span> : null}
             </div>
-            {hasIssues && expandedIssue && (
+            {hasIssues && expandedError && (
                 <div className={block('errors')}>
                     <ErrorList
                         errors={error.inner_errors!}
                         level={level + 1}
-                        expanded={expandedIssue}
+                        expanded={expandedError}
                         disableCloud={disableCloud}
                         onErrorClick={onErrorClick}
                     />
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx
index 018bf7e5f..f39918e6a 100644
--- a/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx
+++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx
@@ -49,8 +49,10 @@ export const QueryResults = React.memo(function QueryResults({
     minimized: boolean;
 }) {
     const [tabs, setTab, {activeTabId, category, activeResultParams}] = useQueryResultTabs(query);
+    if (!query) return null;
+
     const resultIndex = activeResultParams?.resultIndex;
-    return query ? (
+    return (
         <div className={b(null, className)}>
             <div className={b('meta')}>
                 <QueryMetaInfo className={b('meta-info')} query={query} />
@@ -100,7 +102,7 @@ export const QueryResults = React.memo(function QueryResults({
             </NotRenderUntilFirstVisible>
             <div></div>
         </div>
-    ) : null;
+    );
 });
 
 interface PlanContainerProps {